想把数据可视化做好？这 20 个超实用的经验总结一定要先看过！

在如今这个时代，越来越多的信息和内容呈现开始依赖数据驱动，也开始有更多的场合需要信息图来辅助呈现，对于可视化数据，从来没有像现在的要求这般高。但是另一方面，我们周围充斥着大量错误的图表呈现，希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图。

1、选择正确的图表类型

不同的图表类型所承担的功能是截然不同的，不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征，因此，在设计信息图之前，先理清需求，再来选择使用哪种图表能够更好地呈现。

2、根据数据的正负值选择正确的绘图方向

当使用数据在0的左右波动，产生正负差异的时候，请使用基线来正确反应正负关系，不要在同一侧来呈现数据，这样很容易带来误读。

3、始终从0处开始绘制条形图

和折线图不同，条形图如果从非 0 的位置开始，确实更容易反应趋势，但是给所体现的数据量级和特征是失真的。比如在下面的案例中，B看起来是D的3倍以上，但是实际的情况是，两者差异并不大。所以需要从座标 0 处开始呈现数据，这样会更准确。

4、折线图应该清晰呈现Y轴上的趋势变化

对于折线图，需要考虑一下 Y轴上的尺度，因为如果单位太大，那么折线图所呈现出来的波动幅度不够大，趋势的表达也不够清晰。这个时候，建议调整Y轴上的单位大小，确保折线的波动幅度大概占整个Y轴的 2/3 即可。

5、使用折线图的时候注意时间

折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式，它有助于说明随着时间推移，某些情况的变化，但是当间隔时间频率不对，参差，缺失，那么折线图的数据可能会无法对应，这个时候使用条形图其实是更容易呈现的。

6、不要使用平滑的折线图

平滑的「折线」在视觉上看起来是愉悦，但是它歪曲了背后的实际数据，也很难读到关键的转折点数据。

7、避免让双折线互相交叉

通常，为了为了节省可视化设计的空间，设计师会采用双折线来呈现数据，但是在数量级不对等的情况下，折线图会很难读，甚至容易会误导用户，这个时候，建议分开使用2个不同的座标系来呈现，更加易读，同样可以看的出趋势，也不会得出错误的结论。

8、限制饼图中的扇形的数量

饼图是最常用但是也是最容易误用的图表之一，在绝大多数的情况下，条形图是更好的选择。如果你决定使用饼图，那么这里有2个基本的建议：

不要超过7个不同的扇区，让饼图尽量简单

你可以将额外的片段分组到「其他」的扇区中

9、在饼状图中直接标注对应的数据

没有合适的文本标签说明的情况下，无论信息图设计得多好都没有意义，直接在图表上进行明确的标识，才会对观看者产生价值，需要观看者自己去关联的设计是失败的。

10、不要在扇面上做标注

不要将数值直接放置在饼状图的扇区上，在较小的扇区块上数据会非常难读，相反，使用引线来指引数据对应的区块会是更好的方法。

11、控制饼图中扇面的排序让其方便阅读

对于饼状图的切分方式，有2种常见的顺序：

将最大的一块置于12点钟方向，然后顺时针按照大小来排布所有的块

将最大的一块置于12点钟方向，然后在右边放次大的块，右边放置再次的块，基本上就是越大的扇区约靠上。

12、避免随机排列

同样的建议也适用于其他的图表，不要使用字母顺序来进行排列，不要使用笔画排序，而是按照数据大小来进行排列，水平条形图就将最大数据放在顶部，垂直排布则将最大数据的放在左侧，减少阅读的时候的信息分辨的障碍。

13、不要牺牲信息图的可读性

饼状图通常是最不容易读的图表，因为它很难对相似的数据进行对比，所以在将它设计成环状的时候，我们可以使用辅助的数据来呈现，但是一定不要牺牲彩色扇区的可读性，这样看起来高级但是并不具备基本的可读性。

14、视觉效果不要影响数据的呈现

不要让不必要的视觉效果来分散用户的注意力，这可能会导致用户对于数据产生误解，通常你应该避免使用：

3D元素和阴影

渐变和失真的色彩

斑马纹或者过多的网格线

装饰性过强的字体

15、选择和数据属性匹配的配色

配色是可视化设计当中绕不开的一个重要的部分，在设计的时候可以考虑以下三种不同的配色方案：

使用定性的配色方案，不同的色相对应不同的元素，确保在整体配色的可访问性

使用符合一定顺序（比如明暗）的近似色的配色，呈现出一种连续的色彩变化

横跨冷暖色调的配色方案，将中性色置于中间，用来呈现存在正负关系的数据变化

16、使用无障碍的配色

根据目前的统计数据，大概 12 人当中有一个人存在视觉障碍，有的是色盲，有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩

使用去色效果来校验你的配色的对比度

17、关注内容的易读性

在信息图的排版易读性上同样是有要求的，要避免分散用户的注意力，不会制造视觉障碍：

选择清晰的非衬线字体，避免使用衬线体和过度装饰的字体

避免使用斜体、粗体和全大写字体

确保和背景之间的信息对比度

不要旋转文本

18、使用水平条形图来优化倾斜标签

这是一个非常简单的技巧，能够确保用户在阅读的时候足够轻松，不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

19、事先选好你的图表库

如果你的设计项目是面向 Web 或者移动端的交互式图表，那么你需要考虑的第一个问题就是，要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同，你需要在一开始就基于你的需求和设计想法，做出选择。

20 、不只停留在在数据静态呈现上

信息图本质上是在对数据进行优化处理、呈现的基础上，帮助用户进行探索，最大化地从数据中获得信息洞察，让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

结语

对于所有想要在数据的可视化设计上有所建树的同学而言，强烈建议阅读一下 Dona M.Wong 所撰写的《华尔街日报信息图设计指南：呈现数据和事实的注意事项》 ，本文中很多内容都受到了这本书的启发。