7个关于数据可视化设计的思考

蛇、贝壳、山脉——这些图形是设计师可能会去绘制的东西，而不是用这些图形来直接显示数据。

不过现在试想一下：在健身应用或视频游戏中，当界面运用需要使用图表来表达数据时，这些形状就是一个不错的表达选择了。

但如果你的目的是为决策提供信息，那么一些花里胡哨的图形就起不到这个作用了。 今天我们就思考下与业务需求不符合的数据可视化的方法，并找到一些有用的替代方法。

一、像“蛇”一样的曲线图

你一定见过以彩色的2D或3D曲线绘制的CRM或ERP仪表盘的设计，你看就像“蛇”一样。

虽然这样的可视化看起来很有视觉吸引力，但这种视觉没有很好的展现真实的数据信息，更重要的是，它们很难被读取和理解。

几乎所有的视觉都是上面图表上的装饰，而真实的数据只由10个数据点组成。在这样一个大的组件上，你完全可以直接显示所有的数字，不需要操作去查看数据。

可以看到组件还有足够的空间来多显示20-30个甚至更多的数据点，而不是只有10个。上图的曲线图可能表明，需要展示的数据很少，所以设计师试图用一些赏心悦目的东西来填补空白区域。

这样是不是就更直观、更全貌的查看数据了？

现在想象一下，当需要展示数据更多的趋势变化时，曲线图会是什么样子的？

可以看到，多条曲线相互交叉重叠，看着很混乱，不易识别。

1. 曲线图问题

1. 很难在一个表格里展示多个数据，并且让数据容易识别；
2. 曲线的粗细会影响获取相对准确的数据信息，可以使用“斑马条纹”一样的间隔色柱状图来替代；
3. 现实中的真实数据很难让曲线过渡自然，而不会显得生硬。生硬的过渡影响视觉；
4. 两个数据之间的线会误导用户，影响数据获取。

2. 思考

• 如果数据少，可以使用柱状图展示；
• 如果数据多且具有连续性时，曲线线条要尽可能的细点，像股票趋势一样。

二、像甜甜圈一样的环形设计

和像“蛇”的曲线图一样，像”甜甜圈”的圆环，尤其是嵌套的圆环，也会影响数据的准确性，让数据对比变成困难。另外，这两种方法都存在不合理利用空间的问题。

用户或多或少都能处理均匀的百分比：满圆=100%，半圆=50%，四分之一=25%，三分之二=75%，但如果一个圆的终点在 “一半 “和 “三分之二 “之间的某个地方–就像图上绿色的那个圆一样，怎么办？

用户不会去计算50+25÷2，并假设它应该是62.5%左右，这样太麻烦而且数据也不准确。

如果只有一个圆环，则可以在中间放置一个百分比数字，用来展示准确的数据。但是如果像上图一样同时包含三个圆圈要怎么办？

圆角的样式可能会让图表看起来更活泼，但是却降低了数据的读取准确性，这样的圆角在视觉上会在真实值的基础上增加2%-3%的读数。

现在，来简化一下圆环的视觉。

可以清晰看到，用户看到的数据比实际数值要多一点，用图表的方式再来展现下：

三个条形图可以传达相同的信息，占据更少的空间，并且无需工具提示即可显示数字，这对于数据驱动的界面来说至关重要。

通过简单的条形图，可以不用添加演示讲解的图，也使组件更加紧凑。而且因为条形图旁边加了标签说明，所以就算是单色也不会影响视觉的表达。

1. 圆环设计问题

1. 环形的设计不容易读取数据。用户可以很好地识别25%、50%、75%或100%这样的百分比，但通常无法准确识别中间的值；
2. 嵌套的圆形需要一个图例或工具提示，因为标签通常不能合适地放在在相应的圆环上；
3. 数据之间不能进行比较。就算是末端在一起的两个圆环，由于内外圈的问题，所表示的读数都是不一样的。

2. 思考

• 使用条形图来准确表达百分比；
• 环形图时，尽量避免嵌套圆环或使用圆角。

三、玫瑰饼图

著名统计学家、数据可视化基础书籍的作者爱德华-图夫特多次警告说，视觉上吸引人的图表可能会说谎。像”贝壳 “的玫瑰饼图是图表的一种时髦变化，彩色的截面宽度不一，相互重叠。

简单地说，数据可视化的本质就是通过颜色、面积、长度等手段，将数字直观地表现出来。

比如：数字越大，条形图越长；百分比越低，面积越小。但是，当我们分析玫瑰饼图时，它是如何展示数据的呢？当百分比越高，获得的圆圈的片段越大，而且片段越粗。

这样可以清晰看到片段之间很多重叠部分，而重叠和超标背后的设计逻辑是什么？如何解读这些 “数据”？是否意味着图中显示超过100%，超过360度？

这些信息可以在饼状图上进行可视化，不过数据点的数量应该保持有限，否则，图表会变得拥挤，不易阅读。

除此之外，你还可以将这样的图表类型作为矩形树图，相应区域的矩形代表百分比。虽然人们通常最擅长比较长度–平均线柱状图，不过区域也能很好地用眼睛进行比较。

1. 玫瑰饼图问题

1. 和经典的饼状图相比，玫瑰饼图不能清晰的表达数据信息。数据是用面积、曲线粗细还是扇形角来表示呢？
2. 重叠的图形不能清晰表达数据信息，会让用户无法识别；
3. 视觉太过花哨，无法完整展示真实数据。

2. 思考

• 如果数据不多，可以采用饼状图展示；
• 可以尝试使用矩形树图展示数据。

四、像“山”一样的面积图

像“山”一样的面积图在可视化中也是常见的数据展示形式：

在上面曲线图一章中，已经介绍过这个缺点–数据被修饰的厉害，现在还是来详细谈谈这个问题。上面精心设计的可视化归结为20个绿色和橙色的点。

所有的连接曲线都与数据无关，它们是人为添加的。也许是为了一个好的缘故–把不同的点统一成一个明确的趋势，也许是为了填补 “空白”，让它看起来更 “漂亮”。

来看看这个例子，很好反映了曲线图与面积图的问题：

两个相邻的点–12:00时为50公斤/平方米，13:00时为60公斤/平方米。

两个点用一条自然的平滑曲线连接起来。结果，用户看到12:30时，压力约为55公斤/平方米，但这是错误的引导，因为没有人测量12:30的数据。

这是一种替代方式——双色柱状图。不过，双色柱状图并不是唯一的选择。在实际数据对比度足够大、视觉效果有益的条件下，也可以选择图形，甚至用线条连接点的折线图。

1. 面积图问题

1. 面积图同曲线图一样，给人一种数据连续性的印象，但真实的情况是一组有限的数据点；
2. 曲线无法真实反映出真实数据的走向，有时数据变化是突然的、渐进的或波动的；
3. 数据点之间必须有一定间隔，才能让曲线过渡自然，这样浪费了太多的空间。

2. 思考

• 设计时确保数据点与视觉效果之间有明显的区分，不能让视觉干扰识别；
• 如果有重叠的图形时，不要使用颜色填充的方式来形成对比。

五、3D样式的柱状图

来看看这张图有什么问题？为什么不建议使用比呆板的矩形更有吸引力和原创性的东西呢？

这样的可视化有不少问题，但关键的问题是两个颜色柱状之间的空白，像”香肠 “一样的3D柱状图在有真实数据的地方显示了空位。

平心而论，3D柱状图的好处是保持高对比度，让你能看到绿色和橙色之间的边缘，但这种对比度的代价太高了。

计算一下，如果上图中整个柱子是100%的话，彩条之间的每一个微小的空隙大约等于3%。

乍一看，不多吧？但有三个不同颜色的部分，需要两个空隙，所以–每列6%！这就是数据被 “偷窃比例”。而如果从环形图中计算出被盗的比例，就会达到7%左右，大约每个空隙3.5%。

把缺失的柱状部分放到下面的样式中，并把图例作为一个单独的项目去掉。此外，以前没有标题的圆环部分也赋予新的格式和名字（第四季度的平均值）。

是不是易读且清晰多了？

1. 3D柱状图问题

1. “香肠”式的柱状态略去了很多真实数据，无法为用户提供准确的数据进行分析和决策；
2. 环形增加了占用面积，让组件不够紧凑，使得界面看上去相对杂乱一点。

2. 思考

• 不要用间距区分同一柱状上的数据，确保单体柱状总和要为100%；
• 各数据段不要使用圆角，圆角处理的线段无法得到准确的数据。

六、3D柱状图

B端可视化的数据展示应该尽量不要使用像“摩天大楼”样的3D柱状图。

3D图表缺乏准确性，当用户快速扫描界面发现很多数据无法准确、轻松的辨认，对用户造成错误的引导。

再来看看下面这张处理了的图：

当你一眼扫过去时，能快速识别出标了相同颜色的彩色点的柱状图是否一样高吗？相信就算仔细对比，也不会得到很肯定的答案。

用绿色方块标记的是相等的，用红色圆圈标记的区块，第一个区块要高出3%——这就是3D视觉会使数据精度不够的问题。

然而，准确性不是唯一的问题，还有一个猜到了吗？3D柱状图占用过多空间了，也无法准确的反映数据自然、微妙的波动情况。

如图所示，要更好的区分各柱状的细微变化，就需要让组件更加的简化。

而且，当数据柱状展示达到了一定的精度和亮度时，这种样式用在暗黑模式也是便于让用户识别的。还可以看出，采用这种形式，比3D节约了一半的空间。

1. 3D柱状图问题

1. 3D柱状图样式太占空间了；
2. 无法展示细微的数据波动；
3. 顶部特别亮时，会让用户难以辨别顶点在哪里，影响数据读取。

2. 思考

• 尽量不要使用3D柱状图的样式；
• 确保设计的时候，以及展示的数据与真实数据保持一致。

七、大集合

很多设计师通过绚丽的可视化来吸引用户眼球，但真正用起来就会发现很难使用。

图中可以看到很多绚丽的视觉表现：阴影、透明度、体积、发光、圆角、等距形状等。但是，所有的组件填充了屏幕空间，提供的帮助却是零——这是上面六点的大集合。

1. 大集合问题

1. 在视觉上，大集合的仪表盘设计绝对是吸引眼球的。但是数据却失去了精确性，界面也失去了实用性；
2. 真实数据被展示出来时或多或少都会有一点误差，但是圆润的形状、阴影、渐变填充和3D效果会加大这种误差。

2. 思考

• 事先进行用户和业务调研，根据调研结果进行仪表盘设计；
• 避免针对业务需求进行过于简单的仪表盘设计；
• 在没有提示的情况下，让用户找到相应的数据，能够好的改进和完善可视化界面。

通过这篇译文，了解到了一些设计数据可视化时需要注意的点。在这方面，数据的准确性以及实用性是远远大于视觉方面的，希望给看文章的你也有所帮助。

注：已获得原文作者授权翻译。

原文作者：Slava Shestopalov

原文地址：https://medium.muz.li/dataviz-sins-976f3a08948c

译者：punchline

本文作者 @punchline 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！