我們是袋鼠云數堆疊 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%，
看板
優化資料看板
區分主要資料和次要資料，根據層級關系優化資料展示，強化資料展示的主次，縮減?戶瀏覽資料時
?，提??戶獲取資訊的效率，
后記
從前期調研和跟各位產品經理的共創，到設計?標確定，再到多維度的?案落地，設計師對互動體
驗、視覺語?進?多維度推敲與打磨，最終使得視覺和體驗??有了可感知的進步，
同時設計團隊也沉淀了產品業務知識，為更好的優化產品體驗打下了基礎，在?定程度上也幫助業務
解決了現存的問題，當然我們的設計語?、產品體驗還在不斷打磨、優化，持續將產品痛點和設計?標緊
密結合，助?業務發展，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545349.html
標籤：Html/Css