我们是袋鼠云数据栈UED团队，致力于打造优秀的一站式数据中心产品。我们始终保持工匠精神，探索前端道路，为社区积累和传播经验价值。前言作为云原生一站式大数据开发平台，DataStack自2017年发布第一个版本以来，始终坚持以技术为核心、以安全为底线、以效率提升为目标、以中台为核心。2016.战略思考，坚定不移走鑫创本土化路线，不断推进产品功能迭代、技术创新、服务精细化、性能升级。随着业务的快速发展，我们也推出了数字栈产品的体验升级计划。从策划到最终应用到每个子产品，我们经历了五个阶段：策划方案制定、设计方案实施、改造设计语言、Theme&RC升级、子产品实施。本文主要阐述数据栈设计团队在数据栈UI5.0体验升级中的设计思路，主要从产品升级规划、设计目标和解决方案方向的确立、数据栈设计语言、设计改进点、情感设计几个方面来分享DTinsightUI5.0的全新设计和升级内容。产品升级规划在过去的产品迭代过程中，积累了很多需要解决的问题。随着新功能需求的增加，一些原有的页面结构和交互设计需要优化。DataStackUI5.0的升级，通过对产品功能、页面样式和用户体验的优化，使DataStackUI5.0更灵活地适应未来产品功能迭代的需求。问题挖掘我们梳理总结了DatastackUI4.0存在的交互问题，重点关注四个方向：竞品研究本次升级选取同类产品进行竞品分析，通过交互对比提炼策略和设计方案。产品设定从行业分析看自身业务，打造数字栈产品体验闭环。从用户需求体系、行业特点、产品定位等贯穿整个体验升级体系。落地到各种设计细节、交互环节等，整个环节反复强调产品体验，打造深度记忆点。确定设计目标和解决方向结合以上规划内容，确定设计目标，相应得到设计解决方向，对数字栈设计语言进行改造——DTDesign根据设计目标和方向提取设计关键词，就是我们的全新设计语言DTDesign：“严谨理性”、“简约内敛”、“节奏感”、“数字化”。设计改进点根据上面定义的设计语言，我们提炼出五个设计改进点：导航将原来的深色顶部导航改为浅色，引导用户关注内容页面，同时浅色导航使整体风格清爽简洁，面包屑改为箭头样式，方向间距更明确。标准，强调视觉韵律，提高浏览舒适度，加大卡片和按钮圈的直径，使视觉呈现更加亲切年轻。降低表格的默认高度，增加一屏浏览的数据量。表格标题加粗，增加与表格内容的联系；增加表单的上下结构样式，将默认的表单样式改为上下结构。在横向空间不足的情况下，在某些情况下，使用上下结构可以有效提高填表效率。颜色更新升级了品牌色——DTinsightBlue，代表专业精致的数码智能产品属性；DTinsightGreen，代表着安全可靠、全面兼容的原则；DTinsightNavy，代表沉稳可靠的产品形象。与原版相比，色彩饱和度更亮，色彩对比度增强，品牌辨识度提升。以品牌色为基础，拆分出不同权重、层次更丰富的品牌辅色。在实际应用中增加辅助色的应用比例，解决蓝色调带来的沉稳单调感，同时利用透明、玻璃等提高色彩清晰度，使色系既轻盈又简洁明朗的态度.图标精致的图标设计，提高了页面设计的精细度；数据看板页面采用3D/砖块玻璃图标，紧跟设计潮流，提升品质感和界面差异化。情感化结合UI5.0的设计风格方向重塑情感系统，赋予更丰富的情感、更流畅的交互、更立体的人性化设计。其中，升级了省流量页面的插画，更新了UI4.0简洁单调的形象。在DonaldNorman的《设计?理学 3-情感化设计》一书中，情感设计提出了三个层次的设计：本能层次、行为层次和反思层次。交织在一起，为用户带来愉悦的产品体验。下面也是从这三个层面来和大家分享这次情感升级的心路历程。行为级微交互如：在子产品切换悬浮窗上，悬停到各个子产品区域，添加子产品图标对应的微动效果，增加交互。内容引导包括新手引导、特定术语的解释、告知用户该功能的运行机制/流程、提示用户如何使用和操作反射层。品牌基因结合品牌感可以带来差异化的设计表达，也可以提高用户对品牌的记忆。在确认页面的插图中适当增加产品标识，以加强用户记忆。实施方案提高了首页的展示效率。垂直显示置顶项目，增加显示置顶项目的数量；快捷入口内容包含帮助文档，降低首页屏占比，为数据展示和流程图展示留出更多空间很久;适当留白，增加页面的呼吸感；调整关系网的圈子带来点击感，同时减少用户的焦虑感。适当的留白可以增加页面的呼吸感；关系网圈的调整可以带来点击感，同时减少用户焦虑，设计改进拓扑结构重构，建立节点设计规范。不同状态的节点只需要替换组件库中对应的预设状态样式，不需要像之前的节点一样单独修改边框颜色，设计效率提升50%。看板优化数据看板区分主要数据和次要数据，根据层级关系优化数据展示，加强主次数据展示，减少用户浏览数据的时间，提高用户获取信息的效率。后记从与产品经理的前期调研与共创，到设计目标的确定，再到多维度方案的落地，设计师多维度推敲打磨交互体验和视觉语言，最终做出视觉和体验方面取得了可察觉的进步。同时，设计团队也积累了产品业务知识，为更好的产品体验优化打下基础，一定程度上帮助业务解决存在的问题。当然，我们的设计语言和产品体验还在不断打磨和优化，我们继续将产品痛点和设计目标紧密结合起来，助力业务发展。
