01. 嘉為鯨眼全棧可觀測中心

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

02. 聚焦痛點：以用戶為中心，視覺&體驗雙提升

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

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

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

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

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

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

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

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

04. 雙管齊下：視覺觸達與體驗升維

1）視覺觸達

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

2）品牌標(biāo)識

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

3）視覺提升：

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

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

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

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

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

4）強化視覺焦點：

突出重點，弱化干擾，提高頁面閱讀效率

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

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

② 選用合適的組件，強化主要操作，弱化干擾

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

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

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

① 表格遵循適配原則

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

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

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

6）體驗升維

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

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

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

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

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

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

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

將拓?fù)渚庉嬈鞯墓δ苤匦路诸悾苊夤δ芏哑觯瑢⒏哳l操作層級提高（如：節(jié)點類型選擇），符合用戶使用習(xí)慣，減少學(xué)習(xí)成本；

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

② 防錯容錯：

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

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

2. 建立容錯機制，出現(xiàn)錯誤時及時提醒用戶，告知風(fēng)險

3. 劃分操作場景，通過場景重要等級區(qū)分反饋程度

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

③ 簡化流程：

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

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

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

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

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

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

④ 清晰指引：

提供就近指引，降低用戶迷失感

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

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

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

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

05. 創(chuàng)新無限：助力企業(yè)研運至簡

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