数据可视化设计指南

数据可视化设计指南

简介：数据可视化是以图形的形式呈现数据信息。

设计原则

数据可视化是一种将密集复杂数据信息以视觉图形的形式呈现。设计出来的视觉效果简化了数据，让用户分析研究比较数据变得容易以及可以更好地向领导或者团队讲述“故事”——可以帮助用户更好地做出决策。

数据可视化可以表达不同类型和大小的数据：从少量的数据到大数据呈现。

1. 准确 优先考虑数据的准确性，清晰度和完整性，以不失数据真实性的情况下呈现数据信息。
2. 有帮助 通过浏览简化了的数据可视化图表帮助用户更好地研究比较分析数据。
3. 可扩展 适应不同尺寸的设备，同时预测用户对数据深度、复杂性和形式的需求。

什么是图表

数据可视化可以以不同的形式展示。图表是表达数据的常用方法，因为它们描述了不同种类的数据并允许用户在图表上进行数据之间的对比分析。

您使用的图表类型主要取决于两件事:您想要呈现的数据，以及您想要用数据想向他人传达的内容是什么。以下指南提供了各种不同类型图表及其用例的描述。

图表类型

从时间维度分析数据趋势常用的图表

显示数据一段时间内变化趋势图表（图表X轴是时间段），例如多个类别的数据从时间维度进行比较分析。

常见的用例包括：

• 一段时间内的股价表现
• 每天的体重统计
• 企业季度、年度财报

时间变化图包括：

1.折线图 2.条形图 3.堆叠的条形图 4.K线图 5.面积图（折线图） 6.时间线 7.地平线图（折线图） 8.瀑布图

同类别分析

同类别分析是同一维度下的不同类别的数据之间比较分析。

用例包括：

• 不同国家的GDP分析
• 某产品的各个城市的用户分析
• 世界杯各国进球数分析

类别比较表包括：

1.条形图 2.分组的条形图 3.气泡图 4.多线形图 5.平行坐标图 6.项目符号图

排序

可以用排序图表呈现各个分析对象的名次。

用例包括：

• 选举结果排名
• 绩效统计排名

排序图表包括： 1.有序条形图 2.有序柱形图 3.平行坐标图

占比图表

部分与整体之间的比较，显示了同一纬度下的数据占比情况。

用例包括：

• 不同产品收入占比分析
• 企业部门预算分析

占比图表包括：

1.堆叠的条形图 2.饼图 3.甜甜圈图 4.堆积的面积图 5.矩形树图 6.旭日图

相关性图表

相关性图表显示两个或多个变量之间的相关性。

用例包括：

• 收入和预期寿命

相关图包括：

1.散点图 2.气泡图 3.柱形图和折线图 4.热力图

分布图表

分布图表显示每个值在数据集中出现的频率。

用例包括：

• 人口分布
• 收入分配

分布图包括：

1. 直方图
2. 盒须图
3. 小提琴图
4. 密度图

流

流图显示数据在多个状态之间的流动的关系。

用例包括：

• 资金转帐
• 投票数和选举结果

流程图包括：

1. 桑基图 2. Gantt图 3.和弦图 4.网络图

关系

关系图显示了多个项目如何相互关联。

用例包括

• 社交网络
• 数据字典

关系图包括：

1.网络图 2.维恩图 3.和弦图 4.旭日图

选择图表

同一数据可以使用多种类型的图表来描述。以下指南提供了有关如何选择一个图表的建议。

从时间维度分析数据趋势常用的图表

需要观察数据随时间的变化，可以用数据趋势图来表示，时间趋势图是按时间顺序表示数据变化情况的图表（X轴为时间日期）。表示随时间变化的图表包括：折线图、条形图和面积图。

*基线值是y轴上的数值起始值。一般情况下都是0

条形图和饼图

条形图和饼图均可用于显示各个数据之间的比例关系，该比例表示的是单个数据与数据集的占比情况。

• 条形图使用共同的Y轴表示条形长度代表的数量
• 饼图使用圆内的圆弧或角度表示数据的占比情况

如果数据需要显示时间维度，建议使用条形图，折线图和堆积面积图。由于这三个图表使用同一个Y轴，因此比较他们之间的数据差异更加容易。

允许。

使用条形图表示随时间变化的趋势或各个类别之间的差异（这个图X轴为数据数值，Y轴为日期）。

禁止。

不要使用多个饼图来显示数据趋势的变化。上图使用了两个饼图表示上个季度与本季度的数据，很难比较每个扇形的大小差异。

面积图

面积图有几种类型，包括堆叠面积图和重叠面积图：

• 堆叠面积图显示了多个数据类别（在同一时间段内）彼此堆叠
• 重叠面积图显示了多个数据类别（在同一时间段内）彼此重叠

这两个图的区别在于堆叠面积图是各个类别数据叠加显示，而重叠面积图是互相重叠的

不建议将重叠的面积图用于显示两个以上的数据类别，因为这样做会使数据模糊。取而代之的是，使用堆叠面积图来比较一个时间维度内的多个数据类别（水平轴表示时间）。

允许。

使用堆叠面积图表示多个数据，能够保持良好的可读性。3个类别的数据堆叠显示

禁止。

不要使用重叠的面积图，因为它们会互相遮挡数据并降低可读性。3个类别相互重叠导致数据不可见降低可读性

样式

数据可视化使用自定义样式和形状，使数据一目了然，易于理解，适合用户的需求和内容。

自定义以下内容可以使图表更好的呈现：

• 图形元素
• 版式
• ICON
• 轴和标签
• 图例和注释

视觉图形能够很好地呈现定量及定性数据

将数据转换为视觉图形的过程称为视觉编码。因图形具有丰富且独特的属性，所以可以应用于呈现复杂的定量数据（例如温度，价格或速度）和定性数据（例如类别，风味）。

这些属性包括：

• 形状
• 颜色
• 尺寸大小
• 区域
• 体积
• 长度
• 角度
• 位置
• 方向
• 密度

同一视觉属性可以表达多种数据类型

多种视觉属性可以应用于数据的多个方面。例如，条形颜色可以表示不同类别，而条形的长度可以表示值（数据大小）。

形状可以用来表示不同数据。在上图表中，每个类别均由特定的形状（圆形，正方形和三角形）表示，这使得可以轻松比较分析特定范围内不同类别的数据。

形状

图表可以使用多种形状以表示不同数据。可以将形状设置为曲线，精确的折现等。

形状细节

图表可以表示不同精度级别的数据。打算进行深入研究分析的数据应以适合交互的形状表示（(就交互目标大小和相关的可视性而言)）。然而，用于表达一般概览或趋势的数据可以使用较少的细节。

允许。

此图表中的条形图具有微妙的圆角，以确保条形图的顶部能够精确地表明其长度。

禁止。

不要使用难以读取图表的形状，例如顶部边缘不精确的条形图。

颜色

颜色在图表上的应用有四种主要应用方式：

• 区分类别
• 代表数量
• 突出显示特定数据
• 表达意义

颜色区分不同类别

颜色用于定义甜甜圈图中的不同类别。

颜色代表数量

颜色用于表示地图中的数据值大小。

颜色突出显示某些关键数据

颜色用于突出显示散点图中的特定数据。

聚焦关键数据

如果很少使用颜色，则可以突出显示重点区域。不建议使用大量的颜色突出显示，因为它们会分散注意力并阻碍用户的注意力。

允许。

结合使用颜色突出显示和中性颜色以提供对比度和强调感。

警告。

单个图表中的许多颜色可能会妨碍焦点。

颜色表示含义

允许。

通过其他视觉提示（例如图标）增强图表颜色的含义。

禁止。

不要单独使用颜色来表示内容的含义。

关注图表可读性

为了考虑到色盲用户，您可以使用其他方法来强调数据，例如高对比度的阴影，形状或 纹理。

将文本标签应用于数据还有助于阐明其含义，同时消除了对图例的需求。

折线图

折线图可以表示不同类别的数据，例如不同类别层次结构和占比。折线图的样式可以采用不同的样式，例如使用虚线或不透明度。

折线图可以应用于特定元素，包括：

• 数据预警
• 不同类别占比
• 置信区间
• 异常波动

允许。

改变线的纹理以表示不同的数据类别。

禁止。

请勿使用不同的颜色来显示同一数据不同类别的数据。

文本排版

文本可用于标记不同的图表元素，包括：

• 图表标题
• 数据标签
• X、Y轴标签
• 图例

优先级最高的文本通常是图表标题，X、Y轴标号和图例优先级最低。

1. 图表标题

RobotoRegular18pt图表副标题RobotoRegular14pt

1. 数据释义标签

RobotoRegular22pt子标签RobotoRegular14pt

1. X、Y轴数值标签

RobotoRegular12pt

1. 图例标签

RobotoRegular12pt

文字粗细

标题和不同的字体权重可以传达哪些内容重要（或不重要）。但是，应谨慎使用这些处理方式，并使用少量的印刷样式。

允许。

粗体仅用于一个或两个关键元素，就可以实现设计平衡。

禁止。

在太多元素上使用粗体会使得识别重要元素变得更加困难。

ICON

ICON可以表示图表中不同类型的数据，并可以提高图表的整体可读性。

ICON可以用于：

• 分类数据以区分不同组或类别
• UI控件和操作，例如筛选，缩放，保存和下载
• 状态，例如错误，无数据，完成状态和系统警告

在图表中放置ICON时，建议使用通用的ICON，尤其是在表示动作或状态时，例如：保存，下载，完成，错误和警告。

允许。

使用文字标签和CION可以清楚地表示关键信息。

禁止。

避免单一使用ICON来表示重要信息。

ICON同时补充了色彩的含义。

X、Y轴数值标签

带数值标签的轴的作用是清晰地显示相应图示数据的范围和比例。例如，折线图X轴和Y轴显示一系列数值标签。

条形图Y轴基准线起始值应始终从零开始。

考虑完全删除X、Y轴将视觉焦点集中在数据上。可以将数据直接放在其对应的图表元素上。

条形图Y轴基准线的起始值

条形图基准线起始值应从（y轴的起始值）为零开始。基准数值不从零开始可能会导致错误地读取数据。

允许。

从零开始的条形图

禁止。

该基线起始于20％，容易引起误解。

X、Y轴上的数值文本

Y轴上的数值文本的使用应有助于在图表中反映最重要的数据洞察。X、Y轴上的数据文本格式应于界面中的一致，不应妨碍阅读图表。

允许。

通过使用省略显示数值文本来提高可读性。

禁止。

不要在图表X轴上添加过多的数值文本。

文字方向

文本标签应水平放置在图表上，以便于阅读。

文字标签不应：

• 旋转文字角度
• 垂直堆叠文字

允许。

将文本水平放置在柱状图上，如果需要，可以旋转柱状图以腾出空间。

警告。

不要旋转条形标签角度，因为这会使它们难以阅读。

图例和注释

图例和注释是用来描述图表的详细数据信息。注释应突出显示数据详细内容，数据异常值和所有值得注意的内容。

1. 数据注释
2. 图例

在PC端上，建议将图例放在图表下方。在移动设备上，将图例放在图表上方，以使其在交互期间可见。

文本标签和图例

简单图表中可以直接在图表元素上显示文本标签，但是，密集的数据图表最好使用图例。

使用文本标签的折线图

使用图例的折线图

小显示器

可穿戴设备（或其他小屏幕）上显示的图表应为移动端或PC端图表的简化版本。

允许。

数据图形上的在关键点显示注释以描述关键数据。在此示例中，显示波峰、波谷的数值。

警告。

不要将关键（波峰、波谷）数据放在屏幕外，因为它要求用户滚动才能看到它们。

均值或标准值为用户提供了当前数据的参考对比。

行为

图表详图表提供了交互模式，使用户可以控制显示的数据。这些模式使用户可以专注于图表的关键数据或特定的数据范围。

以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：

• 鼠标悬浮显示数据是逐步的提供数据细节，可按需查看。
• 直接操纵允许用户直接对UI元素进行操作，最小化界面上所需的操作数量，包括:缩放和平移、分页和数据控件。
• 切换不同数据图表是一种能够满足不同用户对数据需求、类型的设计，例如数据图表切换和动效。

鼠标悬浮至图表上

鼠标悬浮至图表上逐步显示图表详细信息，这允许用户根据需要查看特定的数据点。

显示数据注释（PC端）

在PC端上，悬停状态可以显示更多详细数据。

显示数据注释（移动端）

在移动设备上，触摸长按的手势会在图表上方显示工具提示。

缩放和平移

缩放和平移是常见的图表交互，它们影响用户研究数据和浏览图表时UI的紧密程度。

缩放

缩放会更改是从放大显示还是缩小显示UI。根据设备类型确定如何执行缩放的交互。

• 在PC端上，通过单击和拖动或滚动来进行缩放
• 在移动设备上，使用捏缩放进行缩放

如果缩放不是主要操作，则可以通过单击和拖动（在PC端）或双击（在移动设备上）来实现。

平移

平移允许用户浏览到屏幕之外的UI。应该以对显示的数据有意义的方式进行约束。例如，如果图表的一个维度比另一个维度更重要，则可以将平移方向限制为仅该方向。

平移动作通常与缩放配对。

在移动设备上，平移通常是通过手势（例如单指滑动）来实现的。

在PC端上缩放

在PC上平移

分页

在移动设备上，分页是一种常见的模式，允许用户通过向右或向左滑动来查看上一个或下一个图表。

在移动设备上，用户可以向右滑动以查看前一天。

数据控制

可以使用切换控件，选项卡和下拉列表来过滤或更改不同类型的数据。

当用户调整控件时，这些控件可以显示相应指标。

切换控件，选项卡和下拉菜单可以更改或过滤数据。

动效

动效可以加强数据之间以及用户与数据交互方式之间的关系。应该有目的地使用动效（而不是装饰性的），以表达不同状态和空间之间的联系。

动作应具有逻辑性，流畅性和响应性，而不会打断用户的操作流程。

在此示例中，数据在按天显示然后按周显示之间进行动画处理。过渡期间不会重置所选日期范围之外的数据，从而降低了复杂性。

动效显示了两个不同的图之间的关系。

空状态

图形和图表的空状态可以显示有数据时将会是怎么样的，这样可以让用户提前预知有数据的情况是如何的。

在适当的地方，可以显示角色动画来提供愉悦和鼓励。

独特的动画增强了原本为空的图形。

报告板

可以在报告板的界面中显示一系列多个不同的数据可视化图表显示。有时，多个简单数据图表可以更好地传达一个故事，而不是只使用一个复杂的图表。

报告板的设计

报告板的用途应反映在其布局，样式和交互模式中。无论是用作演示文稿还是深入分析研究数据的工具，其设计都应适合其使用方式。

报告板应：

• 优先处理最重要的信息（使用布局）
• 显示一个焦点，该焦点根据层次结构（使用颜色，位置，大小和视觉权重）对信息进行优先级排序

应根据对数据提出的问题对信息进行优先排序。在此示例操作仪表板中，考虑了以下用户问题：

1.需要注意的问题 2.问题发生的时间 3. 问题发生的位置 4.受问题影响的其他变量

分析报告板

分析报告板使用户能够浏览多组数据并发现趋势。通常，这些报告板包括复杂的图表，可用于分析研究数据并发现见解。

用例包括：

• 突出随时间变化的趋势
• 回答“为什么”和“假设”问题
• 预测
• 创建深入的报告

Analytics（分析）信息中心示例：

• 跟踪广告活动的效果
• 在产品的整个生命周期中跟踪产品产生的销售和收入
• 显示一段时间内的城市人口趋势
• 随着时间的推移跟踪气候数据

报告板显示气候数据

监测报告板

操作报告板旨在回答一组预定义的问题。它们通常用于完成与监视有关的任务。

在大多数情况下，这些类型的报告板以当前信息为特征，这些信息被安排为一组简单的图表。

用例包括：

• 根据目标跟踪当前完成进度
• 实时跟踪系统性能

操作报告板示例：

• 跟踪呼叫中心活动，例如呼叫量，等待时间，呼叫时长或呼叫类型
• 监视在Cloud上运行的应用的运行状况。
• 显示股市表现
• 监视赛车上的遥测数据

操作报告板显示设备存储指标

演示报告板

演示报告板提供有关主题的精选图表。

这些报告板通常包括一些小图表或记分卡，其标题说明了每个图表中提供的趋势和分析。

用例包括：

• 提供关键绩效指标的概述
• 创建高级执行摘要

演示仪表板示例：

• 提供投资账户业绩概览
• 提供产品销售和市场份额数据的摘要

Analytics（分析）信息中心显示网站使用情况数据