保姆级教程！4个章节帮你掌握数据可视化设计（上）

声明：本文基于前公司的项目和 Ant Design 以及相关文章研究的分析和总结，整理出来便于查阅，欢迎指正不足。

 

 

数据可视化主要从可视化原则、图表解构、可视化色板、可视化图表等 4 从各个方面进行阐述。

一、可视化原则

数据可视化是通过可视化手段表达数据内部信息和规律，促进数据信息的传播和应用。

Dreawer Design 该团队总结了以下四个可视化原则供设计师参考和使用：

1. 准确

数据图表必须准确、真实地反映数据信息的变化特征。

2. 清晰

让设计服务于数据内容，给用户最清晰、清晰、快速的数据显示。当用户看到可视化图表时，他们应该能够 5 在几秒钟内了解它的用途，而不是几分钟内无法理解每个数据的含义。

3. 简单

可视化的结果应该是一眼就能理解的，不需要思考和过度理解，所以在选择图表时要理性，避免为了视觉效果而选择一些对用户不友好的图形。

以下是图标类型与认知成本的比较：

4. 美观

优秀的数据可视化界面将有一个非常严格和一致的布局。布局、结构和内容都需要考虑到这里的一致性。

二、图表解构

1. 构成元素

从标题、坐标轴、图例、标签、提示信息、数据图形等方面 6 进一步拆解和阐述数据图表的元素。在设计过程中，应遵循可视化原则，简化数据图表，使用户能够快速获取图表中的关键信息并完成任务。

图表构成 6 大类，元素细分：

标题：图表标题；坐标轴：X/Y 轴、刻度线、网格线X/Y 轴标题、X/Y 轴标签；标签：数据点、导线、(文本)数据值；提示信息；图例；数据图形：线、矩形、扇形、环形等。

以下是数据图表的基本构成元素示例(为了便于观察，一些字母被大写处理)：

除上述常规元素外，饼图和环形图中常用的“导线”也有：

2. 标题

标题是总结图表主题的说明，一个清晰简洁的标题可以让读者快速理解图表要表达的内容。

① 位置

通常位于数据图表卡的左上角。

② 使用建议

标题要简洁，符合图表主题；尽量控制 20 尽量不要在字内超过卡片宽度。

③ 超长处理

当标题超过卡片宽度时，省略标题中间的文本，保持头尾，比如“我是...标题”。

3. 坐标轴

① 坐标系

坐标轴包含在坐标系的概念中，所以我们首先需要了解坐标系。坐标系是一个定位系统，可以使每个数组在维度空间中找到映射关系，更倾向于数学/物理概念。

在数据可视化中，最常用的二维坐标系有两种：

笛卡尔坐标系:即直角坐标系，由两个垂直轴组成。常用于柱状图、条形图、折线图、面积图等。极坐标系:由极点和极轴组成，坐标系中的任何点都可以使用极径 r 和夹角 θ(逆时针为正)表示。常用于饼图、圆环图、雷达图等。

补充说明：

定义域轴的坐标轴（X 轴)和值域轴（Y 轴)组成。在条形图中，域轴被定义为 Y 轴，值域轴为 X 轴。X 轴是水平方向的横轴，Y 轴是垂直方向的垂直轴。以下主要分析了笛卡尔坐标系的坐标轴组成：

② 坐标轴

定义：坐标轴是指二维空间统计图中的轴，是坐标系的组成部分，用于定义坐标系中数据在方向和值之间的映射关系。

构成元素细分：X/Y 轴、刻度线、网格线X/Y 轴标题、X/Y 轴标签。

③ 轴类型

根据相应的变量是连续数据还是离散数据，坐标轴可分为分类轴、时间轴和连续轴三类。

④ X/Y 轴线

颜色层级：X/Y 轴线比网格线高，颜色深，可以区分主次图表。

使用建议：当有网格线时，柱状图/折线图将被隐藏 Y 轴线，条形图是隐藏的 X 实现信息降噪、突出重点的目的。

⑤ 刻度线

轴刻度线是轴上的小线段， 用于指示坐标轴上数值标签的具体位置。轴刻度线 3 放置方式:放置、放置(即交叉)、置外。

位置建议：当刻度线放在中间/内部时，可能它将与网格线和数据图形重叠，因此建议将刻度线放置在数值坐标轴外，以显示最佳显示效果。

显示建议：

折线图：刻度线，X/Y 轴标签和数据点应保持在同一垂直线上；柱状图/条形图：由于单柱对应性强，此时可隐藏刻度线；

⑥ 网格线

定义：网格线用于辅助图表优化映射关系。为了提高数据的可读性，我们需要削弱网格线的视觉效果。

作用：1. 将数值刻度延伸到可视化对象，以观察数据值的大小；2. 增加可视化对象之间的对比观察。

使用建议 1：使用网格线时，应遵循主次原则，以轴线为主，以网格线为辅；实线或虚线可用于风格；避免颜色过多，使用纯黑/纯白。

使用建议 2：网格线一般单向显示值域轴的位置，柱状图、折线图等采用水平网格，条形图采用垂直网格。

⑦ X/Y 轴标题

轴标题主要用于解释坐标轴数据组的含义，也可理解为“轴单元”。当可视化图表标题、图例、轴标签等能够充分表达数据意义时，可以隐藏轴标题。

这种处理反映了奥卡姆剃刀定律：如果没有必要，不要增加实体。

⑧ X/Y 轴标签

轴标签是为了提高数据的可读性，标记了当前一组数据的内容。

以下从 X 轴标签、Y 分析轴标签的两个方面：

a. X 轴标签

X 轴标签的设计侧重于显示规则。当卡片宽度过窄、标签过多、名称过长时，X 轴标签会出现显示问题(如重叠标签等)。).

为了解决显示问题，我们从连续/时间轴标签(数值类)开始、分析分类轴标签(文本类):

连续/时间轴标签

显示规则：建议等分抽样显示和旋转；不要省略尾部。建议等分抽样：连续/时间轴通常由一组等差列组成，这是有规律的。缺失的数据用户将自动在脑海中完成。因此，建议使用等分抽样，以避免标签的重叠。

注：等分抽样应尽可能保留首尾数据标签；随机抽样不规则，会影响用户的判断和识别，不建议随机抽样显示。

连续/时间轴标签是由“关键值”组成的标签点，一般清晰简洁，尾部省略会影响用户对关键值的识别。

为了保证标签的识别，我们可以旋转标签 45°、90° 。极端情况下(图表宽度极窄)可同时旋转+抽样。

分类轴标签

显示规则：推荐旋转显示；不推荐抽样显示。

分类轴由几个离散数据标签组成，独立存在于标签之间，没有紧密的逻辑关系，用户无法自动完成缺失的信息。因此，所有标签的所有文本都应尽可能地显示，而不是抽样显示。

如果标签的横向显示空间不够（文本重叠），我们可以旋转标签 45°、90° 为了达到预期的显示效果。如果旋转不能满足要求，可以使用条形图将分类轴放在分类轴上 Y 轴。

旋转方向描述：通常，用户的阅读视线是从左到右，从上到下。因此，标签顺时针旋转 45° 更符合用户的浏览习惯。

b. Y 轴标签

Y 轴标签的设计侧重于标签数量、值范围和数据格式。标签显示区域通常根据最长标签宽度进行自适应缩放。

轴标签的数量

使用建议:根据米勒定律(7)±2 法则），Y 轴标数应控制在 5-9 在个别范围内；Web 页面中，Y 常用的轴标签数为：6 或 7（含标签 0）。

轴标签越多，横向网格线就越多。过多的轴标签和网格线会导致元素冗余，违反清晰准确的可视化原则，不利于图表信息的表达和阅读。

对齐：右对齐

轴标的取值范围

基准线：Y 轴标签取值应从 0 为了反映数据的真实性，基线开始了。如果显示被切断 Y 轴数据会导致用户做出错误的判断。

数据格式的轴标签

使用建议 1： 保持标签保留的小数位数统一。

4. 数据标签

数据标签是对数据点对应值的标记，用于直接观察每个数据点的具体值。

如果图表主要用于查看趋势变化、比例等，则无需显示数据标签。如果您想准确地了解每组数据的具体值，则可以显示数据标签。

① 位置

数据标签位于数据点上方。

② 显示规则

在不同类型的图表中，数据标签有不同的显示规则。为了提高图表的准确性，我们可以根据数据图形和数据值的特点选择合适的显示方法。

a. 柱状图

基础柱状图：数据标签可以显示在数据图形的内部和外部。

图形中数据标签的显示规则：正常情况下，水平显示；当数据标签超长时，旋转 90°；图形高度 < 当数据标签高度时，不显示数据标签。

分组柱状图：数据标签可以显示在数据图形的内部和外部。当内部数据标签显示宽度不够时，解决方案相同。

堆叠柱状图：数据标签显示在数据图形中。

图形中数据标签的显示规则：正常情况下，水平显示；当数据标签超长时，旋转 90°；图形高度 < 当数据标签高度时，不显示数据标签。

b. 条形图

图形中数据标签的显示规则：正常情况下，横向显示；图形宽度 < 当数据标签高度时，不会显示数据标签；条形图的高度要求 >= 数据标签高度。

图形外部还可以显示基础和分组条形图的数据标签：

c. 折线图

数据标签显示在数据点上方。

当图表宽度太窄，数据点太多和密集时，相邻的数据标签会重叠。此时，我们将使用抽样来显示数据标签。鼠标悬挂数据点，显示隐藏的数据标签。

d. 饼图，环形图

图形内外均可显示数据标签。

由于扇形具有角度，且形状相对不规则，因此对数据标签的文本长度的容忍度较低，尤其是环形。因此，当扇形/环形分割过多且面积较小时，建议在图形外显示数据标签。

当然，我们也可以内外结合使用：

e. 数据标签颜色

当数据标签显示在图形内部时，图形为背景，数据标签为前景。此时，数据图形作为背景颜色，会影响数据标签的颜色显示和可读性。

为了保证良好的可读性，我们通过对图形颜色进行调整 HS 判断值决定文本的颜色。这样，对比度就在可控范围内，不会出现可读性低的问题。

由于篇幅问题，剩余内容将在下一篇文章中显示。