我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 前言 數棧作為雲原⽣⼀站式⼤數據開發平臺，從2016年發佈第⼀個版本開始，數棧就始終堅持著以技術為 核⼼、安全為底線、提效為⽬標、中台為戰略的思想，堅定不移地⾛國產化信 ...
我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。
前言
數棧作為雲原⽣⼀站式⼤數據開發平臺，從2016年發佈第⼀個版本開始，數棧就始終堅持著以技術為
核⼼、安全為底線、提效為⽬標、中台為戰略的思想，堅定不移地⾛國產化信創路線，不斷推進產品功能
迭代、技術創新、服務細化、性能升級。
伴隨業務的⻜速發展，我們也啟動了針對數棧產品的體驗升級計劃，從策划到最後應⽤到各個⼦產
品，共經歷了五個階段：策劃⽅案制定、設計⽅案落地、轉化設計語⾔、Theme&RC 升級、⼦產品實施。
本⽂主要闡述了在數棧 UI 5.0 體驗升級中，數棧設計團隊的設計思路，主要從產品升級策劃、確⽴設
計⽬標和解決⽅向、數棧設計語⾔、設計提升點、情感化設計⼏個⽅⾯分享數棧 DTinsight UI 5.0 全新設
計升級內容。
產品升級策劃
過去產品迭代過程中，積累很多亟待解決的問題，隨著新的功能需求不斷增加，原先的有些⻚⾯結構
以及交互設計需要優化。數棧 UI 5.0 的升級，通過對產品功能、⻚⾯樣式以及⽤戶體驗的優化，使數棧
UI 5.0 能夠更加靈活地適應未來產品功能迭代需求。
挖掘問題
我們梳理總結了數棧 UI 4.0 存在的交互問題，重點為四個⽅向：
競品調研
本次升級挑選了同類產品進⾏競品分析，通過交互差異對⽐，提煉策略和設計⽅案。
產品定調
從⾏業分析來看⾃身業務，打造數棧產品體驗閉環。從⽤戶需求體系、⾏業特性、產品定位等貫穿整
個體驗升級體系。落地到各個設計細節、交互鏈路等，全鏈路反覆強調產品感受，打造深刻記憶點。
確⽴設計⽬標和解決⽅向
結合以上策劃內容，確定設計⽬標，相對應得出設計解決⽅向
轉化數棧設計語⾔——DT Design
根據設計⽬標和⽅向，提煉出設計關鍵詞，也就是我們數棧全新的設計語⾔ DT Design：「嚴謹理
性」、「簡約剋制」、「節奏韻律」、「數字化」。
設計提升點
根據前⾯定義的設計語⾔，我們提取出 5 個設計改進的點：
導航
將原來的深⾊頂部導航改為淺⾊，引導⽤戶將視覺重⼼放在內容⻚⾯，同時淺⾊導航使整體⻛格清爽簡潔
⾯包屑改為箭頭樣式，具有更加明確的指向性
間距
常⽤間距從原來常⽤的6px、12px、20px，變為8px、16px、24px，以8的倍數為標準，強調視覺節奏
感，提⾼瀏覽舒適性
加⼤卡⽚、按鈕圓⻆直徑，讓視覺呈現更具親和⼒、年輕化。
減⼩表格預設⾼度，增加⼀屏可瀏覽的數據數量
表單
表單標題加粗，增加與表單內容的聯繫；新增表單上下結構樣式，將預設表單樣式改為上下結構，在橫向
空間不⾜的情況下使⽤上下結構能有效提⾼填寫表單的效率。
⾊彩
更新升級了品牌⾊-代表專業、精湛的數字智能產品屬性的 DTinsight Blue；代表安全可靠、全⾯兼
容的原則的 DTinsight Green；代表沉穩、可信賴的產品形象的 DTinsight Navy。在⾊彩飽和度上較原版
本有所提亮，增強⾊彩對⽐，提⾼品牌辨識度。基於品牌⾊，裂變出不同重量、層次更豐富的品牌輔助
⾊。在實際應⽤中增加輔助⾊應⽤⽐例，解決藍⾊調帶來的冷靜、單調感，同時利⽤透明度、⽑玻璃等⽅
式提⾼⾊彩清透感，使⾊彩系統既輕盈⼜態度鮮明。
icon
精緻化圖標設計，提⾼⻚⾯設計精細度；數據看板⻚⾯應⽤3D/⽑玻璃圖標，緊跟設計流⾏趨勢，增
強品質感與界⾯差異化。
情感化
結合 UI 5.0 的設計⻛格⽅向，進⾏情感化系統重塑，賦予更豐富的情感，更流暢的交互，更⽴體的⼈
設。其中重點升級了數據確省⻚⾯的插圖，更新 UI 4.0 的簡單且⾊調單⼀的形象。
情感化設計
在唐納德·諾曼的《設計⼼理學 3-情感化設計》⼀書中提出設計的三個層次：本能層次、⾏為層次、
反思層次，解析了設計觸達⽤戶情感的⽅式，這三個層⾯相互交織，為⽤戶帶來愉悅的產品體驗。以下也
從這三個層次和⼤家分享下此次情感化升級的⼼路歷程。
⾏為層
微交互
⽐如：在⼦產品切換浮窗上，hover到每個⼦產品區域，增加⼦產品圖標對應微動效，增加互動。
內容引導
包括新⼿引導、特定名詞的解釋，告知⽤戶該功能的運⾏機制/流程，以及提示⽤戶如何去使⽤和操作
反思層
品牌基因結合
品牌感可以帶來差異化的設計表達，也能提⾼⽤戶對品牌的記憶度。在確省⻚⾯的插圖中適當增加產
品logo，加強⽤戶的記憶點
落地⽅案
⾸⻚
提⾼展示效率
將置頂項⽬縱向顯示，提升展示置頂項⽬的數量；快速⼊⻔內容收進幫助⽂檔，降低⾸⻚的屏幕占
⽐，將更多空間留給數據展示和流程圖展示
⾎緣
增加預覽舒適度
輕量化⾎緣表⽤⾊，降低⻓時間瀏覽⼤量節點帶來的視覺疲勞感；適當留⽩，增加⻚⾯呼吸感；⾎緣
關係⽹圓⻆調整，帶來點擊感，同時可以降低⽤戶焦慮感
拓撲
體驗提升
輕量化⾎緣表⽤⾊，降低⻓時間瀏覽⼤量節點帶來的視覺疲勞感；適當留⽩，增加⻚⾯呼吸感；⾎緣
關係⽹圓⻆調整，帶來點擊感，同時可以降低⽤戶焦慮感
設計提效
拓撲結構重構，建⽴節點設計規範，不同狀態的節點僅需替換組件庫中對應預設好的狀態樣式，不需
要像之前的節點要單獨修改邊框顏⾊，設計提效 50%。
看板
優化數據看板
區分主要數據和次要數據，根據層級關係優化數據展示，強化數據展示的主次，縮減⽤戶瀏覽數據時
⻓，提⾼⽤戶獲取信息的效率。
後記
從前期調研和跟各位產品經理的共創，到設計⽬標確定，再到多維度的⽅案落地，設計師對交互體
驗、視覺語⾔進⾏多維度推敲與打磨，最終使得視覺和體驗⽅⾯有了可感知的進步。
同時設計團隊也沉澱了產品業務知識，為更好的優化產品體驗打下了基礎，在⼀定程度上也幫助業務
解決了現存的問題。當然我們的設計語⾔、產品體驗還在不斷打磨、優化，持續將產品痛點和設計⽬標緊
密結合，助⼒業務發展。
