袋鼠云出品！数栈UI 5.0全新体验升级，设计背后的故事

Posted 2023-02-28 袋鼠云数栈前端

我们是袋鼠云数栈 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%。

看板

优化数据看板

区分主要数据和次要数据，根据层级关系优化数据展示，强化数据展示的主次，缩减⽤户浏览数据时
⻓，提⾼⽤户获取信息的效率。

后记

从前期调研和跟各位产品经理的共创，到设计⽬标确定，再到多维度的⽅案落地，设计师对交互体
验、视觉语⾔进⾏多维度推敲与打磨，最终使得视觉和体验⽅⾯有了可感知的进步。

同时设计团队也沉淀了产品业务知识，为更好的优化产品体验打下了基础，在⼀定程度上也帮助业务
解决了现存的问题。当然我们的设计语⾔、产品体验还在不断打磨、优化，持续将产品痛点和设计⽬标紧
密结合，助⼒业务发展。