B 端图表如何设计？

图表简介

1. 图表与表格的区别

表格

在数据可视化中，表格是最常见的一种，可以查看和处理大量的数据。不同类别的标签可以传达特定的信息内容，显示准确而具体的数据，并有助于发现个体数据的价值。

图表

图表可以呈现数据的整体形态(如形态、趋势、对比等)，更加直观明了，同时也不会分散人的注意力，有利于快速展示大量的数据关系。

2. 图表设计流程

正如上图所示，图表是展现数据的一种重要展现形式，可以将数据以及数据关系直观的展示出来，能帮助我们更加快速、直观的传达数据信息。

那如何挑选合适的图表呢？在我看来大致分为三步：

1. 数据分析：对需要可视化的数据进行分析，明确需要传达的核心信息；
2. 数据编码：将抽象的数据转化适用图表类型（如形态，趋势，对比等）；
3. 用户理解：将可视化完成图表呈现给用户传达数据信息；

在数据编码阶段设计师需要通过设计 (比如突出重点、减少视觉干扰等）来助力数据的表现，提升用户对图表理解的效率和准确性。

接下来我将从图表主要构成元素的角度来分析如何在数据编码阶段通过设计提高用户对信息的理解与传达。

图表元素详解

1. 图表的构成

先简单地介绍一下图表构成，图表是由：标题、坐标轴、图形、图例、信息标签组成。

1. 标题：描述图表的展示内容主题，包括主标题和副标题；
2. 信息标签：对当前数据的内容提示信息，常见交互形式：鼠标在悬停时出现、固定在图形上；
3. 图例：当图表多内容与数据时，对内容与数据的说明；
4. 坐标轴：数据关系映射在坐标系的视觉展示，包括轴线和标尺。
5. 图形：数据在视觉展示中映射出来的图形，可以反映数据差异与关系，例如常见的折线图、柱状图；

每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。

2. 标题

一个好的标题是从过稿开始。

简洁明了、表达准确的标题可以迅速让读者理解图表的主题，而且当图表的结论是单一且唯一时，可以将其作为展示数据的元素，用于呈现数据的结论或总量，让用户在初次浏览图表就能通晓图表在说什么。如下图所示在标题中直接显示图表的数据结果。

3. 图表的选择

一个合理正确图表可以呈现数据的整体形态(如形态、趋势、对比等)，让数据更加直观、突出重点。

了解图表的分类和概念是进行设计和根据数据展示来选择图表的依据。那如何选择合适的图表？

安德鲁·阿伯拉（Andrew Abela）制作的一份图表类型选择指南（This Guide），将图表展示关系可大致分为 4 类：比较、分布、构成、联系四种类型（见下图）。

但考虑到日常使用的数据分析以及常用图表组件库，上图中存在有些图表使用频率低。所以我参考了上图的部分内容，再结合个人工作经验重新对其总结，重新整合成三个维度（见下图）。

补充：在给大家整理分享素材的时候才发现，阿里的 Antv 制作了更详细的图表分类目录，包含比较、趋势、组成、占比、分布、排名、关系、空间等 8 个大类。（这样显得我很呆，建议大家收藏一下网站！）

访问链接： https://antv.vision/zh

比较

图表在表达比较关系最常用就是柱状图（条形图）和折线图。在展示相同类别之间比较关系常用柱状图（多个类别时则常用条形图），在展示关于时间变化关系是常用折线图。

折线图

折线图通过各个数据节点相互连接而成线条，通过线条的波动来显示数据随有序元素变化的图表。常用于反映数据随着有序元素变化（常用于时间）推移而产生的变化趋势。比如：

1. 近 10 年全球温度的变化情况；
2. 本学期，某某某学生语文成绩变化情况；
3. 事故数量随着时间推移的变化情况：

折线图注意

（1）为了图表展示的可读性，折线图中线条的数量建议应当控制 3 条内，至多不用超过 7 条。

（2）为了图表视觉效果的易读性，线条应当使用实线，来突出视觉重点。

（3）当图表展示不需要精确呈现时，而且重视整体变化的趋势，可以使用曲线，反之折线。

柱状图

柱状图是通过矩形高度的差异展示的数据比较关系的图标。主要作用是将多个数据在同一条件下，进行数据值的比较以此来判断多个数据值哪些数据值相对比较大或相对比较小。比如：

• 各专业方向 2020 年工程师的工资信息图表报告；
• 2021 年全球各国世界人口的增长：

补充：在需要显示准确数值时使用，最好不要用柱状图来比较。