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

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

 

 

 

 

 

 
。

看板

优化数据看板

区分主要数据和次要数据




















，根据层级关系优化数据展示              ，强化数据展示的主次
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，缩减⽤户浏览数据时

⻓













，提⾼⽤户获取信息的效率              。

后记

从前期调研和跟各位产品经理的共创  
  
  
  
  
  
  
，到设计⽬标确定 
  
  
  
  
  
  
 ，再到多维度的⽅案落地


 


 


 


 


 


 


 ，设计师对交互体

验 
   
   
   
   
   
   
  、视觉语⾔进⾏多维度推敲与打磨 
 
 
 
 
 
 
，最终使得视觉和体验⽅⾯有了可感知的进步
 

 
 

 
 

 
 

 
 

 
 

 
 

 。

同时设计团队也沉淀了产品业务知识  
   
   
   
   
   
   
 ，为更好的优化产品体验打下了基础

 

 

 

 

 

 

 ，在⼀定程度上也帮助业务

解决了现存的问题













。当然我们的设计语⾔
 

 

 

 

 

 

 
、产品体验还在不断打磨
 

 

 

 

 

 

 
、优化
 

 

 

 

 

 

 
，持续将产品痛点和设计⽬标紧

密结合              ，助⼒业务发展                     。