仪表板修改优化实操案例

1 什么是 Resdesign

Redesign 并不是一个简单的美化过程，视觉只是 Redesign 的一部分而不是全部。如果你做产品重构只是为了视觉更美观，从各种网站获取灵感用样机包装，没有任何产品架构以及交互逻辑，那么你的改版必定不会很完美。

但同时也会有很多人陷入这种误区，产品中过时的设计规范会使你的用户会流失到设计体系更好的竞品那里。重构你的产品设计语言，让他看起来更美观，这当然很好，但是也不能盲目的跟随设计趋势，没有任何逻辑做改版，这样会导致交互逻辑的紊乱以及产品架构不清晰。

这篇文章就用我们投稿的仪表板来进行一个页面改版，一起来看一看吧！

2 产品逻辑分析

2.1 连锁饮品销售看板，页面包含月销售情况，各维度销量最高产品数据展示，销售销量及原料支出走势，订单量销售额排名，冷热饮品占比等信息内容。

2.2 产品视觉动线指意不明，一般人的阅读习惯从左向右，从上到下开展，当前页面布局不合理，缺乏层次，各部分所占比重需要重新估量。

2.3 业务逻辑没有很好的展现，各部分要展现的数据信息较紊乱。

3 需求业务重新布局

4 页面细节分析

4.1 根据颜色：颜色不宜太杂，主色辅助色需要有强弱的对比，页面才会有层次。

4.2 根据布局：不合适的布局会让人感觉别扭，并且对于页面整体效果有很大影响。

4.3 根据风格：奶茶饮品给人的感觉应该是的蓝色系风格干净活泼整洁，此页面展示分布较碎且杂乱。

4.4 根据设计原则：对比，亲密，对齐原则没有遵守，注意一些基本原则会给画面加分。

5 细节修改大纲

5.1 构思主题，围绕主题设计其他元素

对原来的主题进行产品功能重构，设计新的配色方案，画面内容布局，围绕主题进行设计元素的制作。

5.2 分析数据，合理选用不同样式图表

对各个数据进行分析，对内容进行编排，选择合适的图标去展示数据，合理的同时，又具有美感。

5.3 提取共性，结合需求做产品规划

提取各个模块的设计形式的共性，并结合产品需求进行合理的规划，重构页面。

5.4 加强技法，了解可视化设计规范

通过不同的设计技巧来表现画面的美感，制定属于产品的设计规范，并运用这些规范去规范页面布局以及设计，这是要在深度了解可视化设计的前提下。

6 细节优化

6.1 优化一

• 将原本的销售指标卡数据重新排版对齐，优化 icon，使之更加协调。

• 增加数值与标题文字的颜色粗细大小对比，突出数值，使数据表达更加清晰直观。

6.2 优化二

• 优化原本单调无亮点的最高销量区域，用鲜艳色大色块背景突出各类型的高销量，丰富了画面。

• 重新排版对齐，针对不同维度类型采用相对应的 icon 进行点缀。

6.3 优化三

• 提取共性，将原本三个视图进行整合，添加选项卡进行点击切换，页面读取更加清晰。

6.4 优化四

• 优化 Y 轴数量及颜色，使页面更加干净简洁。

• 原料支出趋势柱形图改为折线图，表意更加合理。

6.5 优化五

• 原柱状图改为明细表，丰富视图类型，数据展现更加直观。（此类型 X 轴非必需不要添加角度，影响数据读取）

6.6 优化六

• 原环形图圆角过大，与画面整体不协调，冷热的颜色对比刚好可以用冷暖色进行对比。

最终修改成品