數堆疊作為袋鼠云打造的一站式資料開發與治理平臺，從2016年發布第?個版本開始，就始終堅持著以技術為核?、安全為底線、提效為?標、中臺為戰略的思想，堅定不移地?國產化信創路線，不斷推進產品功能迭代、技術創新、服務細化和性能升級，
伴隨業務的?速發展，數堆疊設計團隊也啟動了針對數堆疊產品的體驗升級計劃，從開始策劃到最后應?到各個?產品，共經歷了五個階段：策劃?案制定、設計?案落地、轉化設計語?、Theme&RC 升級、?產品實施，
本?將為大家詳細聊聊在數堆疊 UI 5.0 體驗升級中，數堆疊設計團隊的設計思路，主要從產品升級策劃、確?設計?標和解決?向、數堆疊設計語?、設計提升點、情感化設計五個??分享數堆疊 DTinsight UI 5.0 的全新設計升級內容，
產品升級策劃
在數堆疊過去的產品迭代程序中，積累了很多亟待解決的問題，隨著新的功能需求不斷增加，原先的部分??結構以及互動設計需要進行優化，
設計團隊希望此次數堆疊 UI 5.0 的升級，通過對產品功能、??樣式以及?戶體驗的優化，使數堆疊UI 5.0 能夠更加靈活地適應未來產品功能迭代的需求，
挖掘問題
設計團隊梳理總結了數堆疊 UI 4.0 目前存在的互動問題，主要為下面四個?向：
競品調研
本次升級挑選了同類產品進?競品分析，通過互動差異對?，提煉策略和設計?案，
產品定調
從?業分析來看?身業務，打造數堆疊產品體驗倍訓，通過將?戶需求體系、?業特性、產品定位等方面貫穿整個數堆疊 UI 5.0體驗升級體系，到落地到各個設計細節、互動鏈路，數堆疊設計團隊反復強調全鏈路產品感受，打造深刻記憶點，
確立設計目標和解決方向
結合以上策劃內容，確定設計?標：
并得出相對應的設計解決?向：
全新數堆疊設計語言：DT Design
擁有一個完善的設計系統是所有正在或即將要做設計系統和設計語言的設計師與開發者共同的目標，
數堆疊的各個子產品中存在很多類似的頁面以及組件，可以通過抽象得到一些穩定且高復用性的內容，在經過幾個大版本的迭代中，設計團隊沉淀出不同種類的區塊級別的組件，包括它們的不同狀態，使用場景，以及應用的子產品，
在升級 UI 5.0 的程序中把數堆疊 DTinsight 的特點貫穿到產品界面以及互動體驗上，根據上文的設計?標和?向，設計團隊提煉出設計關鍵詞，逐步輸出一套數堆疊獨有的全新設計語言——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，加強?戶的記憶點，
落地方案
首頁
● 提高展示效率
將置頂項?縱向顯示，提升展示置頂項?的數量；將快速??內容收進幫助?檔，降低??的螢屏占?，將更多空間留給資料展示和流程圖展示，
血緣
● 增加預覽舒適度
輕量化?緣表??，降低?時間瀏覽?量節點帶來的視覺疲勞感；適當留?，增加??呼吸感；?緣關系?圓?調整，帶來點擊感，同時可以降低?戶焦慮感，
拓撲
● 體驗提升
視覺降噪，重新梳理了拓撲狀態對應的顏色來降低冗余視覺影響，從原先狀態顏色大面積覆寫每個拓撲節點，優化為每個節點只用顏色條示意；字色采用藍灰色階保證閱讀舒適體驗，
● 設計提效
拓撲結構重構，建?節點設計規范，不同狀態的節點僅需替換組件庫中對應預設好的狀態樣式，不需要像之前的節點要單獨修改邊框顏?，設計提效 50%，
看板
● 優化資料看板
區分主要資料和次要資料，根據層級關系優化資料展示，強化資料展示的主次，縮減?戶瀏覽資料時?，提??戶獲取資訊的效率，
寫在最后
從前期調研和跟各位產品經理的共創，到設計?標確定，再到多維度的?案落地，設計師對互動體驗、視覺語?進?多維度推敲與打磨，最終使得數堆疊的視覺和體驗??有了可感知的進步，
同時設計團隊也沉淀了產品業務知識，為更好的優化產品體驗打下了基礎，在?定程度上也幫助業務解決了現存的問題，當然數堆疊設計團隊的設計語?、產品體驗還在不斷打磨、優化，今后也會持續將產品痛點和設計?標緊密結合，助?業務發展，
想了解或咨詢更多有關袋鼠云大資料產品、行業解決方案、客戶案例的朋友，瀏覽袋鼠云官網：https://www.dtstack.com/?src=https://www.cnblogs.com/DTinsight/archive/2023/02/08/szbky
同時，歡迎對大資料開源專案有興趣的同學加入「袋鼠云開源框架釘釘技術qun」，交流最新開源技術資訊，qun號碼：30537511，專案地址：https://github.com/DTStack
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/543349.html
標籤：其他