数据图表的使用技巧

 数据可视化其真正的价值是设计出可以被读者轻松理解的数据展示，因此在设计过程中，每一个选择，最终都应落脚于读者的体验，而非图表制作者个人。

      近两年一直从事可视化方向的视觉设计工作，这里给大家总结了数据可视化中图表使用的规范技巧，通过列举一些工作中的经验和踩的坑，一起提升和巩固大家的可视化图表制作水平，欢迎一起交流。

1、选择可以讲故事的图表

     你首先需要思考清楚你想达到什么目的、传达什么信息、以及你的用户是谁？要显示不同时间的值，还是不同项目或者不同组的值？每个变量要显示几个数据点？在一个图表中，要显示几个变量？等等。

     如下图，四张表的展现形式单一，并且用户很难找到对应的街镇信息，操作起来很费力。

2、保持页面视觉交互的统一性

      比如：卡片的使用，卡片是一种非常简单好用的排版方式。卡片最大的优势在于可以无限地修改、操作和扩展。对于响应式设计，卡片是不错的选择，因为卡片是一种易于扩展或缩小的内容容器。

     卡片的一个重要特点是所有卡片的控件和数据的排版统一。将名称放在左上角，将视图控件或操作放到卡片右上角，剩下的就是内容。当所有卡片结构统一时，用户就更容易使用界面，轻松找到想要的内容。

3、删减与故事无关的元素

     这并不意味着要减半数据量，或许第四季度的销售额增长了30%，但还有更令人兴奋的！对比展示第一季度的数据，销售额就有了100%的增长。

     而是要多留意图表垃圾、多余的信息、不必要的说明、阴影、装饰等。可视化的绝妙之处在于它可以四两拨千斤般强化并传达你想表达的故事。

4、合理使用零点基准线

     如果图表需要重点突出对比数据的话，线性图表的坐标下限不一定必须从零点开始。一般来讲，我们应该把我们的坐标下限设置为0。

     有人会问，这样的话我们的数据就会变得没有那么起伏变化了。那可能是因为你的数据本身就没有那么长势喜人。

     但同样，其实很多事情可以反过来思考，之所以有人愿意不把坐标轴设定为0为起点，其实就是为了在视觉上让人形成对比强烈的感觉，从而突出业绩，这种方法的使用因人而异。

     比如在小米的发布会中，为了对比，小米把数据的下限起点设置为了10000，从而使小米的跑分数据看似跑赢了竞争对手一倍还多，但其实小米的数据增长，只比竞争对手高出了25%。

5、选择最高效的可视化图形

     保持视觉的一致性，让读者可以一眼辨别出，这意味着你可能要使用堆叠型柱状图、分组条形图或者折线图了。但无论选择哪种图形，不要让读者费力去对比太多东西。

图中使用的于珏图展示福州区域的中学得分率，然而并不直观，用户获取信息的效率极低。

6、不要过度解释

     如果上下文已经提到了某件事，副标题、标注、标题中不必重申一遍。

7、让图表标题简单扼要

     没必要用俏皮、啰嗦或双关的语句。图表上方的描述性标题应简明扼要，并与下方图表直接相关。记住：关注那些让人快速理解的方式。

8、注意积极和消极数据的表达

     不要用红色表示积极数据或用绿色表达消极数据。这些颜色关联历来很强，它们早已在用户心中打上了标签。

9、确保颜色间有足够的对比

如果颜色过于相似（例如浅灰与更浅的灰），人们难以发现两者间的区别。相反，也要避免强烈的对比色，例如红配绿或蓝配黄。

10、将图表颜色控制在六种以内

11、确保图例可见

     所有图例应清晰可见，并且对应的数据点都可以轻松识别。

12、不要使用非水平和竖直的文字标注，也不要使用转行

     不要用过于复杂的设计形式，数据可视化的第一要义是简单易懂，所以在遇到标签文字过长时，可以采用以下方法进行解决。

13、排序连贯/排序均匀

     图例的排序应和图表中的顺序保持一致。

14、在轴上使用自然增量（0,5,10,15,20），而非不均匀的增量（0,3,5,16,50）。

15、刻意的序列

     在发布会中我们常常见到，为了突出自己产品的强悍，往往要与竞品的数据做对比，在这种情况下，我们的数据也不是随机排布的，我给这种数据排布方法起了个名字，叫“刻意的序列”。

     在魅族16th的发布会中，这张旗舰机重量对比的图表很有讲究，可以发现，除了索尼（最重的手机）以及魅族 16th（最轻的手机）外，其余所有的手机都是按照降序排列。不看颜色对比，把236g的索尼和152g的魅族放置在一起进行讲解，以更加突出魅族的轻薄。

16、对数值的处理

     通常来说，不需要太严谨的图表，我们会对数据值进行一定程度的处理。

     (1)有小数的值四舍五入(234.19 ―― 234)。

     (2)在数据的量级非常大时，将一定位数数字取整（52,133 ―― 52,000)。

     (3)当所有数据的量级都非常大时，将一定位数的数字缩进单位中（521,000,000 元 ―― 5.21 亿元）。

     (4)Y轴刻度值尽量转化为千位分隔符，如K，M，B。

     (5)Y轴最大值取值要恰当，保证图表占据2/3以上。

17、控制好字体层级

     图表中的字体数量以及字体大小的种类加起来不要超过3种（标题和副标题除外）。

     通常来说，我们在制作时会把图例注释和坐标轴标签设置为两种字体样式。

18、尽量不要使用3D图表

     虽然3D图表看起来很酷，但是3D图表和过度设计的图表可读性很差，扭曲感知从而扭曲数据，分散了人们对数据的注意力，并且很难开发，所以没必要进行太“花哨”的设计。

Powered by Froala Editor