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

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

伴随业务的飞速发展，我们也启动了针对数栈产品的体验升级计划，从策划到最后应用到各个子产品，共经历了五个阶段：策划方案制定、设计方案落地、转化设计语言、Theme&RC 升级、子产品实施。

本文主要阐述了在数栈 UI 5.0 体验升级中，数栈设计团队的设计思路，主要从产品升级策划、确立设计目标和解决方向、数栈设计语言、设计提升点、情感化设计几个方面分享数栈 DTinsight UI 5.0 全新设计升级内容。

过去产品迭代过程中，积累很多亟待解决的问题，随着新的功能需求不断增加，原先的有些页面结构以及交互设计需要优化。数栈 UI 5.0 的升级，通过对产品功能、页面样式以及用户体验的优化，使数栈 UI 5.0 能够更加灵活地适应未来产品功能迭代需求。

我们梳理总结了数栈 UI 4.0 存在的交互问题，重点为四个方向：

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

从行业分析来看自身业务，打造数栈产品体验闭环。从用户需求体系、行业特性、产品定位等贯穿整个体验升级体系。落地到各个设计细节、交互链路等，全链路反复强调产品感受，打造深刻记忆点。

结合以上策划内容，确定设计目标，相对应得出设计解决方向：

根据设计目标和方向，提炼出设计关键词，也就是我们数栈全新的设计语言 DT Design：「严谨理性」、「简约克制」、「节奏韵律」、「数字化」。

根据前面定义的设计语言，我们提取出 5 个设计改进的点：

将原来的深色顶部导航改为浅色，引导用户将视觉重心放在内容页面，同时浅色导航使整体风格清爽简洁

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

常用间距从原来常用的6px、12px、20px，变为8px、16px、24px，以8的倍数为标准，强调视觉节奏感，提高浏览舒适性

加大卡片、按钮圆角直径，让视觉呈现更具亲和力、年轻化。

减小表格默认高度，增加一屏可浏览的数据数量

表单标题加粗，增加与表单内容的联系；新增表单上下结构样式，将默认表单样式改为上下结构，在横向空间不足的情况下使用上下结构能有效提高填写表单的效率。

更新升级了品牌色-代表专业、精湛的数字智能产品属性的 DTinsight Blue；代表安全可靠、全面兼容的原则的 DTinsight Green；代表沉稳、可信赖的产品形象的 DTinsight Navy。在色彩饱和度上较原版本有所提亮，增强色彩对比，提高品牌辨识度。基于品牌色，裂变出不同重量、层次更丰富的品牌辅助色。在实际应用中增加辅助色应用比例，解决蓝色调带来的冷静、单调感，同时利用透明度、毛玻璃等方式提高色彩清透感，使色彩系统既轻盈又态度鲜明。

精致化图标设计，提高页面设计精细度；数据看板页面应用3D/毛玻璃图标，紧跟设计流行趋势，增强品质感与界面差异化。

结合 UI 5.0 的设计风格方向，进行情感化系统重塑，赋予更丰富的情感，更流畅的交互，更立体的人设。其中重点升级了数据确省页面的插图，更新 UI 4.0 的简单且色调单一的形象。

在唐纳德·诺曼的《设计心理学 3-情感化设计》一书中提出设计的三个层次：本能层次、行为层次、反思层次，解析了设计触达用户情感的方式，这三个层面相互交织，为用户带来愉悦的产品体验。以下也从这三个层次和大家分享下此次情感化升级的心路历程。

比如：在子产品切换浮窗上，hover到每个子产品区域，增加子产品图标对应微动效，增加互动。

包括新手引导、特定名词的解释，告知用户该功能的运行机制/流程，以及提示用户如何去使用和操作

品牌感可以带来差异化的设计表达，也能提高用户对品牌的记忆度。在确省页面的插图中适当增加产品logo，加强用户的记忆点

将置顶项目纵向显示，提升展示置顶项目的数量；快速入门内容收进帮助文档，降低首页的屏幕占比，将更多空间留给数据展示和流程图展示

轻量化血缘表用色，降低长时间浏览大量节点带来的视觉疲劳感；适当留白，增加页面呼吸感；血缘关系网圆角调整，带来点击感，同时可以降低用户焦虑感

视觉降噪，重新梳理了拓扑状态对应的颜色来降低冗余视觉影响，从原先状态颜色大面积覆盖每个拓扑节点，优化为每个节点只用颜色条示意；字色采用蓝灰色阶保证阅读舒适体验。

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

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

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

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