原则

数据可视化是一种用图形形式来描述密集和复杂信息的通讯方式。由此产生的视觉视觉效果使得数据比较和用数据讲来故事都变得更加容易——这两种方法都有助于用户做出决策。

数据可视化可以表示不同类型和大小的数据：从少量数据点到大型多元数据集都可以表示。

类型

数据可视化可以用不同的形式来传达。图表是一种常用的数据传达方法，因为它们不仅描述了不同的数据类型，还能进行数据比较。

图表类型的使用主要取决于两个方面：想要传达的数据，以及想要传达的数据有关的内容。以下指南提供并描述了各种不同类型的图表及其用例。

图表类型

随时间变化

随时间变化的图表显示一段时间内的数据，如多个类别的变化趋势及其对比。

使用情况包括：

1. 股票价格表现
2. 健康统计
3. 年度报表

随时间变化的图表包括

1. 折线图
2. 柱状图
3. 堆积柱状图
4. 烛台图
5. 面积图
6. 时间轴
7. 地平线图
8. 瀑布流图

类别比较

类别比较图比较多个不同类别之间的数据。

使用情况包括：

1. 不同国家间的收入对比
2. 热门场次对比
3. 团队分配

类别比较图包括：

1. 柱状图
2. 分组柱状图
3. 气泡图
4. 平行线图
5. 多条折线图
6. 子弹图

排序

排序图表示一个项目在有序列表中的位置。

使用情况包括：

1. 选举结果
2. 表现统计

排序图包括：

1. 排序条形图
2. 排序柱状图
3. 平行线图

部分-整体

部分-整体图表示部分元素是如何加总为整体的。

使用情况包括：

1. 产品类别综合收益
2. 预算

部分-整体图包括：

1. 堆积柱状图
2. 饼状图
3. 堆积面积图
4. 矩阵树图
5. 太阳辐射图

相关

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

使用情况包括：

1. 收入和预期寿命

相关图包括：

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

分布

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

使用情况有：

1. 人口分布
2. 收入分布

分布图包括：

1. 直方图
2. 线箱图
3. 小提琴图
4. 密度图

流

流图显示数据在多种状态之间的流动。

使用情况包括：

1. 资金转移
2. 投票统计和选举结果

流图包括：

1. 桑基图
2. 甘特图
3. 和弦图
4. 网状图

关系

关系图显示多个项目之间是如何彼此关联的。

使用情况有：

1. 社交网络
2. 文字图

关系图包括：

1. 网状图
2. 维恩图（或译Venn图、文氏图、韦恩图、范氏图）
3. 和弦图
4. 太阳辐射图

选择图表

许多类型的图表都可以用于描述数据。下面的指导方针提供了如何选择图表的见解。

显示随时间产生的变化

随时间产生的变化可以用时间序列图来表示，这是一种按照时间顺序来表示数据点的图表。

可以表示随时间变化的图表包括：折线图、条形图和面积图。

*基线值是指y轴上的起始值。

条形图和饼状图

条形图和饼状图都可以用于显示比例，表示部分值与整体值之间的比较。

1. 条形图使用一条共同的基线，通过条柱的长度表达数量
2. 饼状图使用圆内的圆弧或圆角表示整体的一部分

条形图、折线图和堆积面积图比饼状图更能够表达随时间产生的变化。因为这三种类型的图表中，可能的值共享同一条基线，所以比基于条柱长度的条形图更容易比较值之间的差异。

面积图

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

1. 堆积面积图表示（在同一时间段内）多个时间序列堆积在一起
2. 重叠面积图表示（在同一时间段内）多个时间序列重叠在一起

重叠面积图中不建议包含两个以上的时间序列，以免模糊数据。相反，可以使用堆积面积图在一个时间间隔内比较多个值（横轴表示时间）。

样式

数据可视化使用自定义的样式和形状，以适应用户需求和上下文的方式使得数据一目了然。

下列有益于图表自定义：

1. 图形元素
2. 排版
3. 图标
4. 轴和标签
5. 说明和注释

设置不同类型数据的样式

视觉编码是将数据转换成视觉形式的过程。独特的图形属性可以应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味和表达式）。

这些图形属性包括：

1. 形状
2. 颜色
3. 尺寸
4. 面积
5. 体积（容积/量）
6. 长度
7. 角度
8. 位置
9. 方向
10. 密度

表达不同属性

多种视觉处理方式可以应用于数据点的多个方面。例如，条柱的色彩可以表示一个类别，与此同时条柱的长度可以表示一个值（如人口大小）。

形状可以用来表示定性数据。在该图表中，每个类别由一种特定形状代替（圆形，方形和三角形），这使得比较特定范围内的数据或与其他类别数据进行比较都很容易。

形状

图表可以通过形状来以多种不同的方式表达数据。形状可以被设计为一条有趣的曲线，或一个精确的高保真图形，以及介于二者之间的其他方式。

形状的精确程度

图表可以以不同的精度来表示数据。用于深入研究的数据应该（根据触摸目标的尺寸和相关可视化要求）使用适合交互的形状来表示。而用于表达大致想法或趋势的数据可以使用细节较少的形状。

颜色

颜色有四种主要的区分数据的方式：

1. 区分不同的类别
2. 表示数量
3. 突出特定数据
4. 表达意义

颜色区分类别

在环形图中颜色被用于定义类别。

颜色表示数量

在地图中颜色被用于表示数据值。

颜色突出数据

在散点图中颜色被用于突出特殊数据。

焦点区域

当颜色被少量使用时，它可以突出焦点区域。不建议使用大量的高光颜色，因为它们会分散用户的注意力。

颜色表示意义

无障碍

为了适应无法区别色彩差异的用户，可以使用其他的方法来强调数据，例如高对比度着色、形状或纹理。

将文本标签应用于数据也有助于澄清其含义，同时消除了对说明的需要。

线条

图表中的线条可以传达数据的质量，例如层次结构、突出强调和对比。线条的样式可以采用不同方式，如使用虚线或不同的不透明度。

线条可以应用于特定的元素中，包括：

1. 注释
2. 预测元素
3. 比较工具
4. 置信区间
5. 异常

排版

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

1. 图表标题
2. 数据标签
3. 轴标签
4. 说明

层次结构中级别最高的文本通常是图表标题，最低的是轴标签和说明。

文本粗细

标题和不同的字体粗细在层次结构中可以传达哪些内容比另一些更重要（或更不重要）。然而这种处理方式应该有节制地使用，即采用数量有限的字体样式。

图标

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

图标可以被用于：

1. 分类数据，以区分组或类别
2. UI控件及操作，如筛选，缩放，保存和下载
3. 状态，例如错误状态，无数据状态，完成状态和危险状态

当在图表中使用图标时，建议使用普遍可识别的图标，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

在传达意义时图标补充了颜色的意义。

有标记的轴

有标记的轴或多个轴能够指示数据所展示的规模或范围。例如，折线图展示的是沿水平和竖直方向标记的轴的范围内的值。

条形图基线

条形图应该从基线（y轴上的起始值）上的0开始。从不为0的基线开始可能会导致数据被错误地感知。

轴标签

标签的使用应该反映图表中最重要的数据细节。轴的标签应该根据需要，并在用户界面中以一致的方式使用。它们的存在不应该妨碍图表的阅读。

文本方向

在图表中文本标签应该按水平方向放置，以保证其易于阅读。

文本标签不应该：

1. 被旋转
2. 垂直堆叠

说明和注释

说明和注释描述图表的信息。注释应该突出显示数据点、数据异常值和任何值得注意的内容。

1. 注释
2. 说明

在桌面设备上，建议在图表下方放置说明。而在移动设备中，建议将说明放置在图表上方，以便在交互过程中保持说明可见。

标签和说明

在简单的图表中，图表元素可以被直接标记。但是，密集的图表（或较大图表组中的部分）可以在说明中显示标签。

小型显示器

在可穿戴设备（或其他小型显示屏）上显示的图表应该是桌面端或移动端图表的简化版。

行为

图表为用户提供了可以控制所展示数据的交互模式。这些模式让用户关注图表中的特定值或特定范围。

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

1. 逐级展开 提供了一种清晰的途径来揭示细节，可按需展示。
2. 直接操作允许用户直接对UI元素进行操作，以减少屏幕上所需的操作步数，直接操作包括：缩放和平移，分页，数据控件。
3. 改变透视图可以使一项设计服务于不同的用户和数据类型，例如数据控件和移动。

逐级展开

使用逐级展开的方式显示图表细节，能够允许用户根据需要查看特定的数据点。

缩放和平移

缩放和平移是图表中流行的交互方式，它们影响用户研究数据和探索图表UI的密切程度。

缩放

缩放改变了UI显示的距离。而设备类型则决定缩放的执行方式。

1. 在桌面端，通过点击并拖动或滚动的方式实现缩放
2. 在移动端，使用双指捏放的手势来实现缩放

当缩放不是主要操作时，（在桌面端）可以通过单击并拖动或（在移动端）通过双击来实现相同效果。

平移

平移能够让用户探索超出屏幕之外的UI。应该以对显示数据有意义的方式对其进行约束。例如，如果一张图表的一个维度比另一个维度更重要，那么平移的方向可以仅限于更重要的维度方向上。

平移操作通常与缩放配合使用。

在移动端，通常通过手势进行平移，例如单指滑动。

分页

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

在移动端，用户可以向右滑动查看前一天的内容。

数据控件

可以使用切换控件、选项卡和下拉列表筛选或更改数据。

当用户调整控件时，这些控件也可以显示度量。

切换控件、选项卡和下拉列表意味着可以筛选或更改数据。

动效

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

动效应该合乎逻辑，平稳且能够快速响应，不妨碍用户的体验旅程。

在这一案例中，数据的动效设置在切换按天显示和按周显示的时候。在切换的过程中不显示所选日期范围之外的数据，从而降低了图表复杂性。

此处的动效显示了两张不同图表之间的联系。

空状态

空白的图片和表格可以显示一些表明在数据可用时期望发生的内容。

在适用的情况下，角色动画能够带来愉悦感和激励。

角色动画丰富了空白图片。

仪表盘

数据可视化可以在一系列的多个图表中展现，这在UI中被称为仪表盘。多个单独的图表有时比一个复杂的图表能够更好地传达一个故事。

仪表盘设计

仪表盘的目的应反映在其布局、样式和交互模式中。仪表盘的设计应该适应它的使用方式，无论它是一个演示工具还是一个深入研究数据的工具。

一个仪表盘应该：

1. （通过布局）优先考虑最重要的信息
2. 显示根据层次结构（使用颜色、位置、大小和视觉权重）排序的信息焦点

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

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

分析型仪表盘

分析型仪表盘能够让用户探索多个数据集并发现趋势。通常这些仪表盘包括复杂的图表，这些图表能够发现数据细节。

使用情况包括：

1. 强调随时间变化的趋势
2. 回答“为什么”和“如果……怎样”的问题
3. 预测
4. 创建深入的报告

分析型仪表盘的案例有：

1. 跟踪随时间变化的广告活动表现
2. 跟踪产品在整个生命周期中的销售和收益
3. 显示城市人口随时间改变的趋势
4. 跟踪随时间变化的气候数据

操作型仪表盘

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

在大多数情况下，这种类型的仪表盘会把当前信息安排在一组简单的图表中。

使用情况包括：

1. 根据目标跟踪当前进度
2. 实时跟踪系统表现

操作型仪表盘的案例有：

1. 跟踪呼叫中心活动，如呼叫量、等待时间、呼叫长度或呼叫类型
2. 监视云端应用程序的运行情况
3. 显示股票市场表现
4. 监视赛车的遥测数据

演示型仪表盘

演示型仪表板提供了关于感兴趣主题的详细快照。

这些仪表板通常包括一些小图表或记分卡，通过动态标题来解释每个支持图表中提供的趋势和见解。

使用情况包括：

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

展示型仪表盘的案例有：

1. 提供投资帐户表现的概述
2. 提供产品销售和市场份额数据摘要

原文地址：Material Design

译者：杜雅黎

 转载请注明：学UI网》Material Design Data Visualization 数据可视化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司