數棧作為袋鼠雲打造的 ，從2016年釋出第⼀個版本開始，就始終堅持著以技術為核⼼、安全為底線、提效為⽬標、中臺為戰略的思想，堅定不移地⾛國產化信創路線，不斷推進產品功能迭代、技術創新、服務細化和效能升級。

伴隨業務的⻜速發展，數棧設計團隊也啟動了針對數棧產品的體驗升級計劃，從開始策劃到最後應⽤到各個⼦產品，共經歷了五個階段：策劃⽅案制定、設計⽅案落地、轉化設計語⾔、Theme&RC 升級、⼦產品實施。

本⽂將為大家詳細聊聊在 中，數棧設計團隊的設計思路。主要從產品升級策劃、確⽴設計⽬標和解決⽅向、數棧設計語⾔、設計提升點、情感化設計五個⽅⾯分享數棧 DTinsight UI 5.0 的全新設計升級內容。

產品升級策劃

在數棧過去的產品迭代過程中，積累了很多亟待解決的問題，隨著新的功能需求不斷增加，原先的部分⻚⾯結構以及互動設計需要進行最佳化。

設計團隊希望此次數棧 UI 5.0 的升級，透過對產品功能、⻚⾯樣式以及⽤戶體驗的最佳化，使 能夠更加靈活地適應未來產品功能迭代的需求。

挖掘問題

設計團隊梳理總結了數棧 UI 4.0 目前存在的互動問題，主要為下面四個⽅向：

競品調研

本次升級挑選了同類產品進⾏競品分析，透過互動差異對⽐，提煉策略和設計⽅案。

產品定調

從⾏業分析來看⾃身業務，打造 。透過將⽤戶需求體系、⾏業特性、產品定位等方面貫穿整個數棧 UI 5.0體驗升級體系，到落地到各個設計細節、互動鏈路，數棧設計團隊反覆強調 ，打造深刻記憶點。

確立設計目標和解決方向

結合以上策劃內容，確定設計⽬標：

並得出相對應的設計解決⽅向：

全新數棧設計語言：DT Design

擁有一個完善的設計系統是所有正在或即將要做設計系統和設計語言的設計師與開發者共同的目標。

數棧的各個子產品中存在很多類似的頁面以及元件，可以透過抽象得到一些穩定且高複用性的內容。在經過幾個大版本的迭代中，設計團隊沉澱出 ，包括它們的不同狀態，使用場景，以及應用的子產品。

在升級 UI 5.0 的過程中把 的特點貫穿到產品介面以及互動體驗上，根據上文的設計⽬標和⽅向，設計團隊提煉出設計關鍵詞，逐步輸出一套數棧獨有的全新設計語言——DT Design：「嚴謹理性」、「簡約克制」、「節奏韻律」、「數字化」。

設計提升點

根據前⾯定義的設計語⾔，設計團隊提取出 5 個設計改進的點：

導航

將原來的深⾊頂部導航改為淺⾊，引導⽤戶將視覺重⼼放在內容⻚⾯，同時淺⾊導航使整體⻛格清爽簡潔。

⾯包屑改為箭頭樣式，具有更加明確的指向性。

間距

常⽤間距從原來常⽤的6px、12px、20px，變為8px、16px、24px，以8的倍數為標準，強調視覺節奏感， 。

加⼤卡⽚、按鈕圓⻆直徑，讓視覺呈現更具親和⼒、年輕化。

減⼩表格預設⾼度，增加⼀屏可瀏覽的資料數量。

表單

表單標題加粗，增加與表單內容的聯絡；新增表單上下結構樣式，將預設表單樣式改為上下結構，在橫向空間不⾜的情況下，使⽤上下結構能有效提⾼填寫表單的效率。

色彩

更新升級了品牌⾊：代表專業、精湛的 屬性的 DTinsight Blue；代表 的 DTinsight Green；代表沉穩、可信賴的產品形象的 DTinsight Navy。

在⾊彩飽和度上較原版本有所提亮，增強⾊彩對⽐，提⾼品牌辨識度。基於品牌⾊，裂變出不同重量、層次更豐富的品牌輔助⾊。在實際應⽤中增加輔助⾊應⽤⽐例，解決藍⾊調帶來的冷靜、單調感，同時利⽤透明度、⽑玻璃等⽅式提⾼⾊彩清透感，使⾊彩系統既輕盈⼜態度鮮明。

icon

精緻化圖示設計，提⾼⻚⾯設計精細度；資料看板⻚⾯應⽤3D/⽑玻璃圖示，緊跟設計流⾏趨勢， 。

毛玻璃icon

資料類別icon

導航icon

3D icon

動效icon

情感化

結合 UI 5.0 的設計⻛格⽅向，進⾏情感化系統重塑，賦予更豐富的情感，更流暢的互動，更⽴體的⼈設。其中重點升級了 的插圖，最佳化 UI 4.0 的簡單且⾊調單⼀的形象。

情感化設計

在唐納德·諾曼的《設計⼼理學 3-情感化設計》⼀書中提出設計的三個層次：本能層次、⾏為層次、反思層次。解析了設計 ，這三個層⾯相互交織，為⽤戶帶來愉悅的產品體驗。

以下也從這三個層次和⼤家分享下此次情感化升級的⼼路歷程。

行為層

● 微互動

⽐如：在⼦產品切換浮窗上，hover到每個⼦產品區域，增加⼦產品圖示對應微動效，增加互動。

● 內容引導

包括新⼿引導、特定名詞的解釋，告知⽤戶該功能的運⾏機制/流程，以及 。

反思層

● 品牌基因結合

品牌感可以帶來 ，也能提⾼⽤戶對品牌的記憶度，在確省⻚⾯的插圖中適當增加產品logo，加強⽤戶的記憶點。

落地方案

首頁

● 提高展示效率

將置頂項⽬縱向顯示，提升展示置頂項⽬的數量；將快速⼊⻔內容收進 ，降低⾸⻚的螢幕佔⽐，將更多空間留給資料展示和流程圖展示。

血緣

● 增加預覽舒適度

輕量化⾎緣表⽤⾊，降低⻓時間瀏覽⼤量節點帶來的視覺疲勞感；適當留⽩，增加⻚⾯呼吸感；⾎緣關係⽹圓⻆調整，帶來點選感，同時可以 。

拓撲

● 體驗提升

視覺降噪，重新梳理了拓撲狀態對應的顏色來降低冗餘視覺影響，從原先狀態顏色大面積覆蓋每個拓撲節點，最佳化為每個節點只用顏色條示意；字色採用藍灰色階保證閱讀舒適體驗。

● 設計提效

拓撲結構重構，建⽴節點設計規範，不同狀態的節點僅需替換元件庫中對應預設好的狀態樣式，不需要像之前的節點要單獨修改邊框顏⾊， 。

看板

● 最佳化資料看板

區分主要資料和次要資料，根據層級關係最佳化資料展示，強化資料展示的主次，縮減⽤戶瀏覽資料時⻓，提⾼⽤戶獲取資訊的效率。

寫在最後

從前期調研和跟各位產品經理的共創，到設計⽬標確定，再到多維度的⽅案落地，設計師對互動體驗、視覺語⾔進⾏多維度推敲與打磨，最終使得 ⽅⾯有了可感知的進步。

同時設計團隊也沉澱了產品業務知識，為更好的最佳化產品體驗打下了基礎，在⼀定程度上也幫助業務解決了現存的問題。當然數棧設計團隊的設計語⾔、產品體驗還在不斷打磨、最佳化，今後也會持續將產品痛點和設計⽬標緊密結合，助⼒業務發展。