数栈作为袋鼠云打造的一站式数据开发与治理平台，从2016年发布第⼀个版本开始，就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化和性能升级。

伴随业务的⻜速发展，数栈设计团队也启动了针对数栈产品的体验升级计划，从开始策划到最后应⽤到各个⼦产品，共经历了五个阶段：策划⽅案制定、设计⽅案落地、转化设计语⾔、Theme&RC 升级、⼦产品实施。

本⽂将为大家详细聊聊在数栈 UI 5.0 体验升级中，数栈设计团队的设计思路。主要从产品升级策划、确⽴设计⽬标和解决⽅向、数栈设计语⾔、设计提升点、情感化设计五个⽅⾯分享数栈 DTinsight UI 5.0 的全新设计升级内容。

在数栈过去的产品迭代过程中，积累了很多亟待解决的问题，随着新的功能需求不断增加，原先的部分⻚⾯结构以及交互设计需要进行优化。

设计团队希望此次数栈 UI 5.0 的升级，通过对产品功能、⻚⾯样式以及⽤户体验的优化，使数栈UI 5.0 能够更加灵活地适应未来产品功能迭代的需求。

本次升级挑选了同类产品进⾏竞品分析，通过交互差异对⽐，提炼策略和设计⽅案。

拥有一个完善的设计系统是所有正在或即将要做设计系统和设计语言的设计师与开发者共同的目标。

数栈的各个子产品中存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。在经过几个大版本的迭代中，设计团队沉淀出不同种类的区块级别的组件，包括它们的不同状态，使用场景，以及应用的子产品。

在升级 UI 5.0 的过程中把数栈 DTinsight 的特点贯穿到产品界面以及交互体验上，根据上文的设计⽬标和⽅向，设计团队提炼出设计关键词，逐步输出一套数栈独有的全新设计语言——DT Design：「严谨理性」、「简约克制」、「节奏韵律」、「数字化」。

根据前⾯定义的设计语⾔，设计团队提取出 5 个设计改进的点：

⾯包屑改为箭头样式，具有更加明确的指向性。

更新升级了品牌⾊：代表专业、精湛的数字智能产品属性的 DTinsight Blue；代表安全可靠、全⾯兼容原则的 DTinsight Green；代表沉稳、可信赖的产品形象的 DTinsight Navy。

在⾊彩饱和度上较原版本有所提亮，增强⾊彩对⽐，提⾼品牌辨识度。基于品牌⾊，裂变出不同重量、层次更丰富的品牌辅助⾊。在实际应⽤中增加辅助⾊应⽤⽐例，解决蓝⾊调带来的冷静、单调感，同时利⽤透明度、⽑玻璃等⽅式提⾼⾊彩清透感，使⾊彩系统既轻盈⼜态度鲜明。

精致化图标设计，提⾼⻚⾯设计精细度；数据看板⻚⾯应⽤3D/⽑玻璃图标，紧跟设计流⾏趋势，增强品质感与界⾯差异化。

在唐纳德·诺曼的《设计⼼理学 3-情感化设计》⼀书中提出设计的三个层次：本能层次、⾏为层次、反思层次。解析了设计触达⽤户情感的⽅式，这三个层⾯相互交织，为⽤户带来愉悦的产品体验。

以下也从这三个层次和⼤家分享下此次情感化升级的⼼路历程。

客户数据洞察针对⾏级权限的提示引导

拓扑结构重构，建⽴节点设计规范，不同状态的节点仅需替换组件库中对应预设好的状态样式，不需要像之前的节点要单独修改边框颜⾊，设计提效 50%。

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

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