如何快速做好数据可视化！设计经验分享

为什么要进行数据可视化

简单来说就是借助图形化的手段、清晰有效地向用户传达与沟通信息，便于用户更好理解数据、便于企业更加直观掌握数据、为企业的决策提供依据。

快速展开数据可视化设计

在做设计之前，我们需要与前端开发沟通好，是选择组件进行修改，还是自己开发。现在为了工作效率与方便，前端在开发时，会直接从一些开源网站下载图表进行设计。所以我们在做数据可视化时，要知道一些图形的开源网站，既可以方便自己的工作，也可以加快团队的开发进度。在这里就向大家推荐两个网站，antv：https://antv.alipay.com/zh-cn/index.html、echarts：http://echarts.baidu.com。

                                                                          

了解需求，整合数据

做数据可视化时，首先需要明白这些数据是为了给谁设计的。因为同一组数据，可能会因为不同的角色，而设计成不同的图形，呈现出不同的效果。

当我们拿到需求时，首先要确认需求、梳理业务流程、明白那些是核心指标、那些是次要指标。选择合适的图表，既要保证图表本身数据清晰准确、直观易懂，又要在用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。当对数据不理解时，需要及时与产品经理或客户沟通，这样可以避免自己后期重复的更改。小编曾经有一次遇到一些没理解透需求，嫌麻烦就没有及时和客户沟通，而是按照的理解去设计，造成的结果就是修改的多次。

 

在这里我就向大家展示当时进行需求调研时，一线运维人员的一个需求。“能看到全网的性能趋势，同时也需要知道在这个时间有多少用户在使用，以便于得出最优时间段与用户数。”从这里我们可以到知道3个指标，同时也需要进行比较。于是就得出了以下的图形。

 

 

设计尺寸

分辨率主要为 1920、1440 和 1366。所以如果没有硬性的要求，为了适配方便，我们以1440为设计尺寸。

 

配色

 

数据可视化大屏设计的风格，背景色一般用深色调，深色调紧张感强，让视觉更好的聚焦，大屏暗色调看上去更柔和舒服不刺眼，也会较省电。也方便做一些炫酷的效果。

但在web的数据可视化设计就需要根据具体需求进行配色了，下面是小编为一个项目做的色彩搭配。

图形选择

数据可视化的第一步就是选择合适的图表类型。那么如何选择呢？需要我们要考虑：“我有什么数据，用户想要得到什么样的结果，需要用什么的图形去表示、达到什么样的目的？”，而不是 “单单只考虑视觉效果”。

折线图

常用于反映数据随着时间变化而变化的趋势，有单指标折线图和多指标折线图

柱状图

通常用于值与值之间的对比和相似之处

 

饼状图

通常用于在同一维度的占比关系

条形图

通常用于分类之间的比较，但常用于条目数量较多时。

环形图

通常用于在同一维度的占比关系

今天就带大家了解这几种图形的选择，另外大家可以欣赏这些数据可视化组件antv：https://antv.alipay.com/zh-cn/index.html、echarts：http://echarts.baidu.com。

总结

在实际的工作还会遇到各式各样的问题比如字体、动效等，有时也会沟通不及时而导致重新设计。所以在做设计时一定要和产品与开发保持充足的沟通。