设计目标
为了提升产品美感，提高用户体验，数据平台前端团队与数据平台设计团队针对旗下的产品进行了一轮视觉升级，接下来把原则与成果与大家分享下，希望能有所启发。
我们大方向上的原则是：
让B端产品优雅且好看，开箱好看，上手流畅目标是改变用户对于B端产品“瑕不掩瑜”，即好用不好看的刻板印象，做到“美玉无瑕”，兼顾功能与视觉。让用户第一时间打开我们产品的时候，就感受到优雅的气质。
设计原则 在分享现在的设计原则之前，我们先看下之前的设计原则。
之前的设计原则围绕功能进行的阐述，提出了任务提效、为真实的世界设计、化繁为简、以人为本四个方向。
任务提效，目标是通过合适的引导与反馈，帮助用户达成核心任务。
为真实的世界设计，要求产品还原现实生活，遵从用户以往操作习惯。
化繁为简原则会把用户需要关注的核心行为路径进行强调突出，减少无用的干扰。
以人为本，会要求使用适量的用户引导来生动有趣地帮助用户理解和上手操作。
可以看到之前的设计原则是围绕降低用户理解成本，帮助用户使用功能的大前提，以“好用”为目标，但在体验上充其量只能达到及格分。
而现在，要求在“好用”的基础上做到“优雅”，进一步提高用户美的感受，核心原则是极致的精致与不喧宾夺主。
极致的精致要求前端动效遵从真实世界的物理细腻质感，给用户精致与共鸣感。因为对于使用我们数据产品的用户来说，往往都需要完成一些比较高门槛的数据分析任务，我们希望在降低认知成本的同时，给予一种精致的美感，从而提高用户对于我们产品的信任感。
不喧宾夺主要求在做设计的时候要“克制”，克制的做加法，而不是为了好看而好看，好看并不是B端用户的终极目标，我们的好看是要在功能完备的基础上做一种恰到好处的加法，而非抢夺视觉焦点，影响用户路径。
向行业优秀案例学习 在进一步细化设计语言之前，让我们一起看看行业上最优秀的B端美学语言是怎么做的。
【视觉升级 - 让B端产品优雅且好看】
细化设计语言 通过结合各家所长与实际情况，我们把设计语言做了进一步的细化
具体到各个具体的方向，我们的成果如下：
这里在材质上简单展开讲讲。我们可以遵从物理环境与光影层次，营造海拔效果还让用户第一时间区分各个控件的层级，提高用户对主要路径的聚焦感受。
同时我们把海拔的规范沉淀到组件资产中，使各业务线的美感可以保持统一
实际例子 接下来以表单为例看一下视觉升级效果
这些是之前产品中的表单，可以看到界面元素辨析度不高，导致第一眼抓不到重点，难以聚焦重要信息。所有表单平铺展示提高了用户理解成本，同时也没有必要的用户引导会增加用户产生挫败感的概率。
UI升级后的表单如上所示，体现了每一项设计语言。
提高了界面元素辨析度，放大了标题字号，把表单标签换成了灰色，引入了栅栏布局，这些都能使结构更清晰。
复杂元素组织有效，把复杂表单进行分页，降低用户理解成本
重要信息更加聚焦，无用的表单项与界面元素进行了去除和精简。
主次有序，减少枯燥单调，通过适当的用户引导来帮助用户完成任务，降低乏味感。
这些设计语言的灵活运用能够提高产品中表单的品质感，保证其优雅且好看
总结 我们的目标是通过极致精致与克制加法来帮助数据产品做到“优雅且好看”。
The End
文章图片
