01. 嘉為鯨眼全棧可觀測(cè)中心

嘉為鯨眼可觀測(cè)產(chǎn)品是?款面向企業(yè)IT研發(fā)、運(yùn)維、業(yè)務(wù)提供的?款領(lǐng)先的端到端體系化全鏈條可觀測(cè)產(chǎn)品。覆蓋用戶(hù)側(cè)真實(shí)體驗(yàn)分析、后端應(yīng)用性能分析、明細(xì)日志檢索、海量事件告警的全棧觀測(cè)場(chǎng)景，解決用戶(hù)體驗(yàn)度量、業(yè)務(wù)故障感知、清晰故障定位、精準(zhǔn)故障告警、高效數(shù)據(jù)檢索等核心問(wèn)題，全方位滿(mǎn)足客戶(hù)及時(shí)性、準(zhǔn)確性、輔助故障處置決策的可觀測(cè)需求。

02. 聚焦痛點(diǎn)：以用戶(hù)為中心，視覺(jué)&體驗(yàn)雙提升

1）設(shè)計(jì)目標(biāo)：從使用者角度出發(fā)，聚焦用戶(hù)體驗(yàn)

隨著數(shù)字化轉(zhuǎn)型進(jìn)程的加快，企業(yè)不僅要保障核心業(yè)務(wù)的穩(wěn)定運(yùn)行，也對(duì)團(tuán)隊(duì)和組織協(xié)作效率提出了新的要求，B端產(chǎn)品的設(shè)計(jì)不僅僅需要滿(mǎn)足用戶(hù)的功能層面需求，同時(shí)需要提供良好視覺(jué)感知和用戶(hù)體驗(yàn)，以確保用戶(hù)團(tuán)隊(duì)能夠高效協(xié)作的同時(shí)，擁有較好的視覺(jué)和使用體驗(yàn)，提高工作效率和積極性，從而為業(yè)務(wù)持續(xù)賦能。

根據(jù)調(diào)研結(jié)果，在經(jīng)過(guò)大量方案斟酌后，我們以用戶(hù)為中心，對(duì)嘉為鯨眼全棧可觀測(cè)中心進(jìn)行了視覺(jué)設(shè)計(jì)與用戶(hù)體驗(yàn)的全面升級(jí)。

2）設(shè)計(jì)策略：雙管齊下，全面升級(jí)

以用戶(hù)體驗(yàn)為中心，構(gòu)建標(biāo)準(zhǔn)化、一體化、智能化、開(kāi)放融合的可觀測(cè)中心，將告警、監(jiān)控、日志，以及全新產(chǎn)品：RUM (真實(shí)用戶(hù)監(jiān)測(cè))、APM (產(chǎn)品性能監(jiān)測(cè))，五大產(chǎn)品進(jìn)行融合，同時(shí)從視覺(jué)設(shè)計(jì)上進(jìn)行全面升級(jí)，保證產(chǎn)品一致性、高效性、易用性、可擴(kuò)展性，提升用戶(hù)體驗(yàn)。

在升級(jí)策略上，本次將圍繞視覺(jué)觸達(dá)和體驗(yàn)升維兩個(gè)方面來(lái)著手，對(duì)產(chǎn)品整體視覺(jué)進(jìn)行統(tǒng)一規(guī)范，并對(duì)交互設(shè)計(jì)作出優(yōu)化升級(jí)，在提升產(chǎn)品質(zhì)感的同時(shí)提高產(chǎn)品易用性，降低使用門(mén)檻，最終達(dá)到打造高質(zhì)量產(chǎn)品，提升用戶(hù)體驗(yàn)，提高用戶(hù)工作效率及滿(mǎn)意度的目標(biāo)。

03. 敦本務(wù)實(shí)：讓設(shè)計(jì)真正服務(wù)于用戶(hù)

基于「自然高效」、「統(tǒng)一有序」、「嚴(yán)謹(jǐn)沉穩(wěn)」、「簡(jiǎn)潔易用」的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)，真正從用戶(hù)角度出發(fā)，務(wù)實(shí)提升用戶(hù)體驗(yàn)。

04. 雙管齊下：視覺(jué)觸達(dá)與體驗(yàn)升維

1）視覺(jué)觸達(dá)

從品牌標(biāo)識(shí)、視覺(jué)提升、強(qiáng)化視覺(jué)焦點(diǎn)、動(dòng)態(tài)響應(yīng)四個(gè)方面，以全新的設(shè)計(jì)風(fēng)格提升產(chǎn)品在用戶(hù)層面的視覺(jué)觸達(dá)體驗(yàn)！

2）品牌標(biāo)識(shí)

嘉為鯨眼品牌標(biāo)識(shí)logo全新設(shè)計(jì)，提升品牌質(zhì)感。

3）視覺(jué)提升：

良好的視覺(jué)體驗(yàn)建立在一致的規(guī)范之上，同時(shí)在合適地方細(xì)化質(zhì)感與表現(xiàn)

① 建立統(tǒng)一視覺(jué)規(guī)范，新增組件風(fēng)格樣式

② 提升界面元素視覺(jué)質(zhì)感，豐富細(xì)膩度

強(qiáng)化元素質(zhì)感，提高界面視覺(jué)豐富度，在枯燥的工作中增添一分輕松愉悅，優(yōu)化用戶(hù)使用感受。

③ 數(shù)據(jù)可視化表現(xiàn)，增強(qiáng)數(shù)據(jù)可讀性

4）強(qiáng)化視覺(jué)焦點(diǎn)：

突出重點(diǎn)，弱化干擾，提高頁(yè)面閱讀效率

① 表格中突出用戶(hù)重點(diǎn)關(guān)注的數(shù)據(jù)信息

在數(shù)據(jù)表格中通常存在很多字段信息，用戶(hù)第一時(shí)間無(wú)法聚焦重點(diǎn)內(nèi)容，通過(guò)對(duì)字段的重要程度，利用標(biāo)簽化、顏色加重、添加標(biāo)識(shí)等方式增強(qiáng)視覺(jué)焦點(diǎn)，提高用戶(hù)查看效率。

② 選用合適的組件，強(qiáng)化主要操作，弱化干擾

合理劃分信息區(qū)域，縮小圖片展示面積，降低圖片大小不一對(duì)布局的干擾，選用開(kāi)關(guān)組件，符合用戶(hù)心智，且加強(qiáng)與次要操作的對(duì)比。

5）動(dòng)態(tài)響應(yīng)：

優(yōu)化界面響應(yīng)適配能力，滿(mǎn)足不同分辨率視覺(jué)顯示效果

① 表格遵循適配原則

自動(dòng)根據(jù)表格字段內(nèi)容適配屏幕，同時(shí)配合寬度自定義調(diào)整功能，即可達(dá)到在不同分辨率下能顯示更多用戶(hù)關(guān)心的長(zhǎng)數(shù)據(jù)字段內(nèi)容，更符合用戶(hù)查看習(xí)慣，提升用戶(hù)體驗(yàn)。

② 卡片列表響應(yīng)式方案

利用網(wǎng)格布局方式，在不影響卡片內(nèi)容顯示的情況下，盡可能顯示更多列數(shù)。既節(jié)省設(shè)計(jì)師考慮不同分辨率下的顯示的時(shí)間人力成本，提高屏效，同時(shí)也降低了開(kāi)發(fā)和調(diào)整成本。

6）體驗(yàn)升維

在用戶(hù)體驗(yàn)方面，切實(shí)從用戶(hù)角度出發(fā)，分別在認(rèn)知減負(fù)、防錯(cuò)容錯(cuò)、簡(jiǎn)化流程、清晰指引四個(gè)方面對(duì)用戶(hù)整體體驗(yàn)進(jìn)行優(yōu)化，提升用戶(hù)工作效率及滿(mǎn)意度！

① 認(rèn)知減負(fù)：

減少認(rèn)知成本，提升產(chǎn)品易用度

1. 優(yōu)化信息架構(gòu)，歸納內(nèi)容主次關(guān)系

篩選區(qū)：將實(shí)例信息結(jié)構(gòu)由表格形式轉(zhuǎn)換優(yōu)化成卡片，更加節(jié)省空間，突出重點(diǎn)信息，同時(shí)卡片作為選項(xiàng)切換更符合用戶(hù)心智 。

展示區(qū)：將原屬于基本信息的實(shí)例名，調(diào)整層級(jí)作為展示區(qū)主標(biāo)題，既明確數(shù)據(jù)與其的所屬關(guān)系，也明確和篩選區(qū)的關(guān)聯(lián)性。

2. 優(yōu)化功能分類(lèi)，布局劃分清晰

將拓?fù)渚庉嬈鞯墓δ苤匦路诸?lèi)，避免功能堆砌，將高頻操作層級(jí)提高（如：節(jié)點(diǎn)類(lèi)型選擇），符合用戶(hù)使用習(xí)慣，減少學(xué)習(xí)成本；

節(jié)點(diǎn)連線時(shí)，提供錨點(diǎn)各種反饋狀態(tài)及鼠標(biāo)樣式的變化，提升用戶(hù)的感知，輕松連接節(jié)點(diǎn)。

② 防錯(cuò)容錯(cuò)：

減少用戶(hù)犯錯(cuò)，提升系統(tǒng)友好度

1. 增加二次確認(rèn)操作，減少用戶(hù)犯錯(cuò)幾率

2. 建立容錯(cuò)機(jī)制，出現(xiàn)錯(cuò)誤時(shí)及時(shí)提醒用戶(hù)，告知風(fēng)險(xiǎn)

3. 劃分操作場(chǎng)景，通過(guò)場(chǎng)景重要等級(jí)區(qū)分反饋程度

根據(jù)用戶(hù)刪除的不同場(chǎng)景情況進(jìn)行提示區(qū)分，提前告知用戶(hù)操作結(jié)果，減少甚至避免對(duì)重要數(shù)據(jù)的誤操作，讓用戶(hù)對(duì)當(dāng)前的操作效果更加清晰明確。

③ 簡(jiǎn)化流程：

優(yōu)化交互步長(zhǎng)，提高操作效率

1. 提供快捷操作，減少用戶(hù)跳轉(zhuǎn)操作

在具體服務(wù)詳情頁(yè)面直接變更日志主題操作，無(wú)需重新跳轉(zhuǎn)至觀測(cè)配置頁(yè)面進(jìn)行變更行為，縮短用戶(hù)的操作路徑，一步到位。

2. 提供布局刷新，減少操作中斷感

提供快捷入口，在新頁(yè)面進(jìn)行編輯、新增等操作，避免用戶(hù)當(dāng)前操作任務(wù)被中斷；

提供局部刷新功能，不會(huì)導(dǎo)致已填寫(xiě)信息被刷掉，降低頁(yè)面性能壓力的同時(shí)提升用戶(hù)的任務(wù)完成效率。

④ 清晰指引：

提供就近指引，降低用戶(hù)迷失感

1. 當(dāng)數(shù)據(jù)為空時(shí)進(jìn)行指引操作，減少用戶(hù)迷失感

當(dāng)數(shù)據(jù)為空時(shí)告知用戶(hù)當(dāng)前暫無(wú)數(shù)據(jù)的具體原因，避免用戶(hù)遇到后出現(xiàn)迷失感，并提供給用戶(hù)能解決的相關(guān)措施，讓用戶(hù)能夠更有目標(biāo)性的完成操作。

2. 前置操作指引內(nèi)容，減少錯(cuò)誤發(fā)生率

當(dāng)功能本身要求限制較多時(shí)，用戶(hù)操作時(shí)非常容易出現(xiàn)操作無(wú)效、報(bào)錯(cuò)的情況，將用戶(hù)操作需知內(nèi)容前置，可以減少用戶(hù)發(fā)生錯(cuò)誤幾率，提高用戶(hù)的操作效率。

05. 創(chuàng)新無(wú)限：助力企業(yè)研運(yùn)至簡(jiǎn)

嘉為鯨眼產(chǎn)品全新升級(jí)，五大產(chǎn)品融合，是嘉為設(shè)計(jì)團(tuán)隊(duì)歷時(shí)9個(gè)月（含驗(yàn)收）的設(shè)計(jì)成果，在產(chǎn)品視覺(jué)和體驗(yàn)都做了整體性?xún)?yōu)化，同時(shí)后續(xù)設(shè)計(jì)團(tuán)隊(duì)將會(huì)不斷深入業(yè)務(wù)，完善產(chǎn)品使用體驗(yàn)，進(jìn)行更多深入的產(chǎn)品及用戶(hù)調(diào)研，找到更多的設(shè)計(jì)優(yōu)化點(diǎn)。致力于讓設(shè)計(jì)轉(zhuǎn)化為產(chǎn)品價(jià)值，提高產(chǎn)品整體質(zhì)量，提升用戶(hù)體驗(yàn)滿(mǎn)意度，不斷探索創(chuàng)新，助力提升企業(yè)研運(yùn)效能。