作者 | Destiny

来源 | 木东居士

0x00 前言

在之前的文章中，已经分享过如何根据数据可视化的目的、数据关系和特征，去选择合适的图表类型。当确定了要使用哪些图表进行数据可视化后，就开始进入可视化作品的设计阶段。从大的方向上来说，影响数据可视化最终效果的因素，分为两个层面：

• 一是非数据层面。
• 不受数据影响可视化效果的情况包括：
• 比如说整个页面的布局；
• 图表的辅助元素，如图表背景、网格线、外边框；
• 交互方式的设计等。
• →不受数据影响的情况，是我们在可视化设计阶段就可以把控的，比如说页面的整体布局、图表的设计（包含网格线、背景、颜色的选取等）、交互的设计等。
• 二是数据层面。
• 受数据影响可视化效果的情况一般包括：
• 数据分布不均匀，存在极端值；
• 某一维度下的属性值过多，信息繁杂不够聚焦；
• 不同层级的，数据量级差异较大；
• 数据条目较多等。
• →以上这些情况的存在，通过可视化映射之后，反映到图表上就体现为，比如说某个柱形条的长度过长，饼图扇区的个数过多等，从而使可视化的最终效果不如人意。

因此，今天这篇文章，主要从以上两个层面，来总结提升可视化效果的一些经验，从而使数据信息的传达更聚焦、有效，可视化作品的视觉呈现更加美观。

0x01 非数据层面

1.布局要强调最重要的数据信息，将用户注意力集中在可视化结果的最重要区域

在进行某一主题的可视化作品设计时，我们需要根据用户关注的重点数据，对可视化结果的重要性和优先级进行排序。通过对可视化空间的合理布局设计，将用户的注意力集中到可视化结果中最重要的一个或几个区域上。

通常情况下，用户的视觉中心，是位于整个页面的上方和中心区域。如果只有一个重点，放在最显眼的位置，如果有几个重点，尽量集中放置，吸引视觉焦点。除了通过重要信息的位置摆放来吸引用户视觉焦点，还可以通过突出的颜色编码来抓住用户的注意力。

下图为一个汽车经销商的客服监控大屏，对于他们而言，黄色框选的区域是他们关注的重点（1）呼叫量（含在线咨询和呼入咨询）。（2）不同客服沟通方式的满意率。（3）在线咨询和呼入咨询人群各自的地域分布。因此，把这三部分集中放在可视化空间的中心区域，可以让客服人员一眼就关注到重要的信息。

2.图表设计要隐藏不必要元素，弱化辅助元素

在我们进行图表绘制时，需要去掉无意义的背景色填充和颜色区分，弱化网格线，突出真正重要的数据信息。虽然，网格线或者颜色映射可以辅助我们理解可视化图表中的信息，但是如果过于凸显，视觉上会显得杂乱、没有主次，干扰到你真正想展示的信息。对于这类元素，应该尽量隐藏和弱化。

3.交互操作要具有直观性、易理解性

一方面，图表中柱形条或趋势点等都代表实际的数据，但是为了可视化作品的简洁和美观，通常情况下，这些数据标签都会被隐藏；另一方面，由于人们查看数据的习惯是，先看总体和趋势，再看局部和细节。这两个方面的原因，要求可视化产品，需要提供给用户一系列的交互手段，来让用户按照自己的意图和关注点去探索数据。

常见的交互方式有：

1）移动和缩放：当前空间只能显示有限的数据时，或者需要关注局部数据时，可以使用移动和缩放。

一般情况下，移动和缩放是同时使用的两个交互动作。对于移动而言，如果当前显示空间没有把数据展示全，需要把后一数据条露出一部分，指引用户可以进行移动操作；对于缩放而言，其目的一般是为了在更大的空间去查看局部的细节数据，一般也需要移动图表来配合。

2）悬停或点击

悬停的的目的，是为了查看某个对象的详细信息，通常会以弹窗或者「图例+数据」的形式展现。

点击的目的，通常是为了进行数据下钻，在这种情况下，需要通过设计传达给用户可以进行交互的信息，如鼠标悬停变手型、对象的颜色变化或者以文字指引等。

3）图表联动

多图表联动，是可视化中比较常见的一种交互方式，图表联动的前提条件是，多个图表的指标含有共同的维度属性，所以当聚焦于某个图表的某一维度下的属性值时，其他图表会联动变化。

其数据格式通常如下：按维度1中的属性值聚合，可以得到左侧的柱状图对应的数据；按维度2中的属性值聚合，可以得到右侧的饼图对应的数据。

0x02 数据层面

1.当数据项较多时，需要精简数据项，突出重点

• 比例型分类数据，分类项建议保持在5～7个
• 比例型分类数据的可视化方式有：饼图、圆环图、百分比堆叠柱状图、百分比堆叠面积图等，其目的是为了展示个体分类项和总体之间的比例关系。
• 当需要按照某一个维度进行分组时，若该维度的属性值数目较多，那么就需要对属性值进行重新的归类和分组，通常的做法是，保留占比或实际值TOP5的分类项，剩余分类归为【其他】。

• 柱状图数据条过多时，保留头部和尾部
• 当需要用柱状图来对数据进行排行时，若数据条目较多，此时建议保留头部和尾部，中间的可以以省略号带过或者折叠起来，放大时再展开。头部和尾部的具体数目，可以依据具体需要来定，比如前5名和后5名、前10名和后3名等。

2.对于趋势图，若趋势不明显时，坐标轴数值可以不从0开始

当数据差异较小，导致折线的波动范围比较小，走势起伏不明显，此时如果为了更清楚的看到数据的波动情况，坐标轴起始数值可以不从0开始，但是此时需要在页面提示用户，否则用户会误以为波动很大。

虽然，趋势图的主要目的，是查看数据的态势和波动规律，设置坐标轴不从0开始，可以更清晰的看到数据的起伏波动。但是，同时会给用户带来理解的成本，也有夸大差异的嫌疑，因此，不建议频繁使用。

注意：柱状图的坐标轴起点，必须从0开始，否则柱形条的高度就不能代表数据间的差异。

3.当排行数据的类别名称较长时，可以用条形图替换柱状图

当类别名称太长时，虽然斜放可以避免重叠，但歪着头查看内容，和用户阅读的视觉习惯不符，此时可以考虑把柱条横向放置，把类别的名称置于柱条空隙之间或者柱形条左侧。

4.坐标轴需要做对应的单位转化

图表坐标轴的数值，受数据的大小影响，当数据较大时，一方面将坐标轴数值单位转化为我们熟知的K、W、M、亿需要一定的反应时间，另一方面较大的数值也会占用有限的可视化空间。因此，建议，在一个数据可视化平台内部，需要建立一套公共的单位转化规则，保证图表坐标轴单位转化规则的一致性。具体做法如下：

注意：一个图表中，坐标轴的数值单位需保持一致，一般是以最大数值的单位作为整个坐标轴的统一单位。

0xFF 总结

回顾上文的内容，提升可视化效果的Tips总结如下：

• 非数据层面：
• 布局需要凸显和强调可视化中最重要的信息；
• 弱化或隐藏图表设计中的辅助元素；
• 通过交互来给予用户探索数据的权利；
• 数据层面：
• 精简数据项，突出重点；
• 趋势图坐标轴可以不从0开始，但是要慎用；
• 系列名称较长时，需用条形图，横向摆放系列名称；
• 确立统一规则，对图表坐标轴数值进行单位转化；

如若大家对提升数据可视化效果这方面，有一些自己的总结，欢迎评论区补充和交流～