数据可视化以图形形式描述信息。
原则
数据可视化是一种通信形式，它以图形形式描绘密集和复杂的信息。最终的视觉效果旨在简化数据比较并用于讲述故事–两者都可以帮助用户做出决策。
数据可视化可以表示不同类型和大小的数据：从几个数据点到大型多元数据集。
准确
优先考虑数据的准确性，清晰度和完整性，以不失真的方式呈现信息。
有帮助
帮助用户使用强调探索和比较的上下文和能力来浏览数据。
可扩展
使可视化适应不同的设备尺寸，同时预期用户对数据深度，复杂性和模态的需求。
类型
数据可视化可以以不同的形式表示。图表是表达数据的常用方法，因为它们描述了不同的数据种类并允许进行数据比较。
您使用的图表类型主要取决于两件事：要传达的数据以及要传达的数据。这些准则提供了各种不同类型的图表及其用例的描述。
图表类型
时间变化图表显示一段时间内的数据，例如多个类别的趋势或比较。常见的用例包括：类别比较...
阅读更多
随着时间的推移而变化
时间变化图表显示一段时间内的数据，例如多个类别的趋势或比较。
常见的用例包括：
- 股价表现
- 健康统计
- 年表
时间变化图包括：
1.折线图
2.条形图
3.堆叠的条形图
4.烛台图
5.面积图
6.时间线
7.地平线图
8.瀑布图
类别比较
类别比较图比较多个不同类别之间的数据。
用例包括：
- 不同国家的收入
- 热门场地时间
- 团队分配
类别比较表包括：
1.条形图
2.分组的条形图
3.气泡图
4.多线形图
5.平行坐标图
6.项目符号图
排行
排名图显示项目在有序列表中的位置。
用例包括：
- 选举结果
- 绩效统计
排名图包括：
1.有序条形图
2.有序柱形图
3.平行坐标图
部分到整体
零件到整体图显示了零件元素如何累加起来。
用例包括：
- 产品类别合并收入
- 预算
零件到整体图表包括：
1.堆积的条形图
2.饼形图
3.甜甜圈图
4.堆积的面积图
5.树形图
6.森伯斯特图
关联
相关图显示两个或多个变量之间的相关性。
用例包括：
- 收入和预期寿命
相关图包括：
1.散点图
2.气泡图
3.柱形图和折线图
4.热图图
分配
分布图显示每个值在数据集中出现的频率。
用例包括：
- 人口分布
- 收入分配
分布图包括：
1.直方图
2.箱形图
3.小提琴图
4.密度图
流
流程图显示数据在多个状态之间的移动。
用例包括：
- 资金转帐
- 投票数和选举结果
流程图包括：
1. Sankey图
2. Gantt图
3.和弦图
4.网络图
关系
关系图显示了多个项目如何相互关联。
用例包括
- 社交网络
- 字表
关系图包括：
1.网络图
2.维恩图
3.和弦图
4.森伯斯特图
选择图表
多种类型的图表可能适合于描述数据。以下指南提供了有关如何选择一个图表而不是另一个图表的见解。
显示随着时间的变化
可以使用时间序列图来表示随时间的变化，时间序列图是按时间顺序表示数据点的图表。表示...的图表
阅读更多
可以使用时序图来表示随时间的变化，时序图是按时间顺序表示数据点的图表。表示随时间变化的图表包括：折线图，条形图和面积图。
| 图表类型 | 用法 | 基准值* | 时间序列数量 | 数据类型 |
| 折线图 | 表达少量数据差异 | 任何值 | 任何时间序列（适用于8个或更多时间序列的图表） | 连续 |
| 条形图 | 为了表达更大的数据变化，各个数据点如何与整体，比较和排名相关联 | 零 | 4以下 | 离散或绝对 |
| 面积图 | 总结数据集之间的关系，各个数据点如何与整体相关 | 零（当一个以上的序列时） | 8以下 | 连续 |
*基线值是y轴上的起始值。
条形图和饼图
条形图和饼形图均可用于显示比例，该比例表示的是与总值相比的部分值。条形图，...
阅读更多
条形图和饼形图均可用于显示比例，该比例表示的是与总值相比的部分值。
- 条形图使用共同的基线表示条形长度内的数量
- 饼图使用圆内的圆弧或角度表示整体的一部分
条形图，折线图和堆积面积图在显示随时间变化方面比饼图更有效。由于所有这三个图表共享相同的可能值基线，因此比较基于条形长度的值差异更加容易。
使用条形图显示随时间变化或类别之间的差异。
不要使用多个饼图来显示随着时间的变化。很难比较每个切片的大小差异。
面积图
面积图有多种类型，包括堆积面积图和重叠面积图：不建议重叠面积图使用两次以上...
阅读更多
面积图有几种类型，包括堆积面积图和重叠面积图：
- 堆叠的面积图显示了多个时间序列（在同一时间段内）彼此堆叠
- 重叠的面积图显示了多个时间序列（在同一时间段内）彼此重叠
不建议将重叠的面积图与两个以上的时间序列一起使用，因为这样做会掩盖数据。取而代之的是，使用堆积面积图来比较一个时间间隔内的多个值（水平轴表示时间）。
使用堆叠的面积图表示多个时间序列，并保持良好的可读性。
不要使用重叠的面积图，因为它会掩盖数据值并降低可读性。
样式
数据可视化使用自定义样式和形状，使数据一目了然，易于理解，适合用户的需求和上下文。
图表可以从以下内容中受益：
- 图形元素
- 活版印刷
- 影像学
- 轴和标签
- 图例和注释
设置不同类型的数据的样式
视觉编码是将数据转换为视觉形式的过程。独特的图形属性可以应用于定量数据（例如温度，价格，...
阅读更多
视觉编码是将数据转换为视觉形式的过程。唯一的图形属性可以应用于定量数据（例如温度，价格或速度）和定性数据（例如类别，风味或表达方式）。
这些属性包括：
- 形状
- 颜色
- 尺寸
- 区域
- 体积
- 长度
- 角度
- 位置
- 方向
- 密度
表达多种属性
可以将多种视觉处理应用于数据点的多个方面。例如，条形颜色可以表示类别，而条形的长度可以表示值（例如总体大小）。
形状可以用来表示定性数据。在此图表中，每个类别均由特定的形状（圆形，正方形和三角形）表示，这使得可以轻松比较特定范围内或与其他类别的数据。
形状
图表可以使用形状以多种方式显示数据。形状可以设置为俏皮曲线，精确，高保真，...
阅读更多
图表可以使用形状以多种方式显示数据。可以将形状设置为俏皮曲线，精确和高逼真度，以及介于两者之间的其他样式。
形状细节水平
图表可以表示精度不同的数据。打算进行深入探索的数据应以适合交互的形状表示（根据触摸目标的大小和相关的承受能力）。旨在表达总体思路或趋势的数据可以使用细节较少的形状。
此图表中的条形图具有微妙的圆角，以确保条形图的顶部精确地测量其长度。
不要使用难以读取图表的形状，例如顶部边缘不精确的条形图。
颜色
颜色可以通过四种主要方式用于区分图表数据：少量使用时，颜色可以突出显示焦点区域。它的...
阅读更多
颜色可用于通过四种主要方式区分图表数据：
- 区分类别
- 代表数量
- 突出显示特定数据
- 表达意义
颜色区分类别
颜色用于定义甜甜圈图中的类别。
颜色代表数量
颜色用于表示地图中的数据值。
颜色突出显示数据
颜色用于突出显示散点图中的特定数据。
重点领域
如果很少使用颜色，则可以突出显示焦点区域。不建议使用大量的颜色突出显示，因为它们会分散注意力并阻碍用户的注意力。
结合使用颜色突出显示和中性颜色以提供对比度和强调感。
单个图表中的许多颜色可能会妨碍焦点。
颜色表示含义
通过其他视觉提示（例如图标）增强图表颜色的含义。
不要单独使用颜色来表示含义。
无障碍
为了容纳看不到色差的用户，您可以使用其他方法来强调数据，例如高对比度的阴影，形状或纹理。
将文本标签应用于数据还有助于阐明其含义，同时消除了对图例的需求。看到更多的色彩对比。
线
图表线可以表达有关数据的质量，例如层次结构，突出显示和比较。线型可以用不同的方式设置样式，例如使用破折号...
阅读更多
图表线可以表达有关数据的质量，例如层次结构，突出显示和比较。可以使用不同的方式来设置线型，例如使用破折号或各种不透明度。
可以将行应用于特定元素，包括：
- 注释
- 预测要素
- 比较工具
- 置信区间
- 异常
改变线的纹理以表示不同的数据类型。
请勿使用不同的颜色来显示同一数据类别的周期性变化。
文本
文本可用于标记不同的图表元素，包括：具有最高层次结构的文本通常是带有轴的图表标题。
阅读更多
文本可用于标记不同的图表元素，包括：
- 图表标题
- 数据标签
- 轴标签
- 传说
具有最高层次结构的文本通常是图表标题，其中轴标签和图例具有最低层次结构。
| 规模类别 | 字体 | 字形 | 尺寸 |
| 的Roboto | 定期 | 18pt |
| 图表字幕 | 的Roboto | 定期 | 14pt |
| 的Roboto | 定期 | 22pt |
| 子标签 | 的Roboto | 定期 | 14pt |
| 的Roboto | 定期 | 12磅 |
| 的Roboto | 定期 | 12磅 |
文字粗细
标题和不同的字体权重可以传达哪些内容比层次结构中的其他内容重要（或不重要）。但是，应谨慎使用这些处理方式，并使用少量的印刷样式。
粗体仅用于一个或两个关键元素，就可以实现平衡的设计。
在太多元素上使用粗体会使得识别重要元素变得更加困难。
影像学
图像可以表示图表中不同类型的数据，并可以提高图表的整体可用性。图像可以用于：将图标放置在...中时
阅读更多
图像可以表示图表中不同类型的数据，并可以提高图表的整体可用性。
影像学可以用于：
- 分类数据以区分组或类别
- UI控件和操作，例如过滤，缩放，保存和下载
- 状态，例如错误，无数据，完成状态和危险
在图表中放置图标时，建议使用通用的符号，尤其是在表示动作或状态时，例如：保存，下载，完成，错误和危险。
使用标签和图标可以清楚地表示关键信息。
避免仅使用图标和符号来表示重要信息。
图标补充了色彩，传达了含义。
标记轴
带标签的轴（或多个轴）指示显示的数据的比例和范围。例如，折线图沿着...显示一系列值。
阅读更多
带标签的轴（或多个轴）指示显示的数据的比例和范围。例如，折线图沿水平和垂直标记的轴显示一系列值。
条形图应始终从x轴基线值零开始。
考虑完全删除轴以将数据作为焦点。您可以将值直接放在其对应的图表元素上。
条形图基线
条形图应从基线（y轴的起始值）为零开始。从不为零的基准开始可能会导致错误地感知数据。
从零基线开始的条形图
不要将基线从零开始。该基线起始于20％，这使得分界线差异看起来更加明显。
轴标签
标签的使用应在图表中反映最重要的数据见解。轴标签应根据需要在UI中以一致的方式使用。他们的存在不应妨碍阅读图表。
通过使用平衡数量的轴标签来提高可读性。
不要在图表上添加过多的轴标签。
文字方向
文本标签应水平放置在图表上，以便于阅读。
文字标签不应：
- 旋转
- 垂直堆叠
在条形图上水平放置文本，如有必要，旋转条形以腾出空间。
不要旋转条形标签，因为这会使它们难以阅读。
图例和注释
图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和所有值得注意的内容。在台式机上，建议放置一个...
阅读更多
图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和所有值得注意的内容。
- 注解
- 传说
在桌面上，建议将图例放在图表下方。在移动设备上，将图例放在图表上方，以使其在交互期间可见。
标签和图例
图表元素可以直接在简单图表中标记。但是，密集的图表（或较大图表组的一部分）可以在图例中显示标签。
使用直接标签的折线图
使用图例的折线图
小显示器
可穿戴设备（或其他小屏幕）上显示的图表应为移动或桌面图表的简化版本。
阅读更多
可穿戴设备（或其他小屏幕）上显示的图表应为移动或桌面图表的简化版本。
注释图形上的关键点以描述数据。在此示例中，显示最高和最低数据值。
不要将关键数据点放在屏幕外，因为它要求用户滚动才能看到它们。
阈值行为用户提供了有关所显示数据的上下文。
行为
图表提供了交互模式，使用户可以控制显示的数据。这些模式使用户可以专注于图表的特定值或范围。
以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：
- 渐进式披露提供了公开细节的清晰途径，可按需访问。
- 直接操纵使用户可以直接对UI元素进行操作，从而最大程度地减少了屏幕上所需的操作，包括：缩放和平移，分页和数据控件。
- 改变视角使一种设计能够适用于不同的用户和数据类型，例如数据控件和运动。
逐步披露
使用渐进公开显示图表详细信息，这使用户可以根据需要查看特定的数据点。
阅读更多
使用渐进公开显示图表详细信息，这使用户可以根据需要查看特定的数据点。
显示细节（桌面）
在桌面上，悬停状态可以显示更多详细数据。
显示详细信息（移动设备）
在移动设备上，触摸并按住手势会在图表上方显示工具提示。
缩放和平移
缩放和平移是流行的图表交互，它们影响用户可以研究数据和浏览图表UI的紧密程度。缩放会改变UI是否...
阅读更多
缩放和平移是流行的图表交互，它们影响用户可以研究数据和浏览图表UI的紧密程度。
缩放
缩放会更改是从近处显示还是从远处显示UI。设备类型确定如何执行缩放。
- 在桌面上，通过单击和拖动或滚动来进行缩放
- 在移动设备上，使用捏缩放进行缩放
如果缩放不是主要操作，则可以通过单击和拖动（在桌面上）或双击（在移动设备上）来实现。
摇摄
平移允许用户浏览扩展到屏幕之外的UI。应该以对显示的数据有意义的方式进行约束。例如，如果图表的一个维度比另一个维度更重要，则可以将平移方向限制为仅该方向。
平移动作通常与缩放配对。
在移动设备上，平移通常是通过手势（例如单指滑动）来实现的。
在桌面上缩放
在桌面上平移
分页
在移动设备上，分页是一种常见的模式，允许用户通过向右或向左滑动来查看上一个或下一个图表。
阅读更多
在移动设备上，分页是一种常见的模式，允许用户通过向右或向左滑动来查看上一个或下一个图表。
在移动设备上，用户可以向右滑动以查看前一天。
数据控制
可以使用切换控件，选项卡和下拉列表来过滤或更改数据。当用户调整控件时，这些控件还可以显示指标。
阅读更多
可以使用切换控件，选项卡和下拉列表来过滤或更改数据。
当用户调整控件时，这些控件还可以显示指标。
切换控件，选项卡和下拉菜单可以更改或过滤数据。
运动
运动可以增强和加强数据之间以及用户与数据交互方式之间的关系。应该有目的地使用运动（而不是装饰性的），以表达连接...
阅读更多
运动可以增强和加强数据之间以及用户与数据交互方式之间的关系。应该有目的地使用运动（而不是装饰性的），以表达不同状态和空间之间的联系。
动作应具有逻辑性，流畅性和响应性，而不会阻碍用户的旅程。
在此示例中，数据在按天显示然后按周显示之间进行动画处理。过渡期间不会显示所选日期范围之外的数据，从而降低了复杂性。
动画显示了两个不同的图之间的关系。
空状态
空的图形和图表可以显示提示数据可用的内容。在适当情况下，可以显示角色动画来提供...
阅读更多
空的图形和图表可以显示提示数据可用的内容。
在适当的地方，可以显示角色动画来提供愉悦和鼓励。
独特的动画增强了原本为空的图形。
仪表板
可以在称为仪表板的 UI中跨一系列多个图表显示数据可视化。有时，多个单独的图表可以更好地传达一个故事，而不是一个复杂的图表。
仪表板设计
仪表板的用途应反映在其布局，样式和交互模式中。它的设计应该适合它的使用方式，无论它是...
阅读更多
仪表板的用途应反映在其布局，样式和交互模式中。无论是用作演示文稿还是深入探索数据的工具，其设计都应适合其使用方式。
仪表板应：
- 优先处理最重要的信息（使用布局）
- 显示一个焦点，该焦点根据层次结构（使用颜色，位置，大小和视觉权重）对信息进行优先级排序
应根据对数据提出的问题对信息进行优先排序。在此示例操作仪表板中，考虑了以下用户问题：
1.需要注意的问题
2.问题发生的时间
3. 问题发生的位置
4.受问题影响的其他变量
分析仪表盘
分析仪表盘使用户能够浏览多组数据并发现趋势。通常，这些仪表板包含复杂的图表，可用于发现数据...
阅读更多
分析仪表盘使用户能够浏览多组数据并发现趋势。通常，这些仪表板包括复杂的图表，可用于发现数据见解。
用例包括：
- 突出随时间变化的趋势
- 回答“为什么”和“假设”问题
- 预测
- 创建深入的报告
Analytics（分析）信息中心示例：
- 跟踪广告活动的效果
- 在产品的整个生命周期中跟踪产品产生的销售和收入
- 显示一段时间内的城市人口趋势
- 随着时间的推移跟踪气候数据
分析仪表板显示气候数据
操作仪表板
操作仪表板旨在回答一组预定义的问题。它们通常用于完成与监视有关的任务。在大多数情况下，这些类型的...
阅读更多
操作仪表板旨在回答一组预定义的问题。它们通常用于完成与监视有关的任务。
在大多数情况下，这些类型的仪表板以当前信息为特征，这些信息被安排为一组简单的图表。
用例包括：
- 根据目标跟踪当前进度
- 实时跟踪系统性能
操作仪表板示例：
- 跟踪呼叫中心活动，例如呼叫量，等待时间，呼叫时长或呼叫类型
- 监控在Cloud上运行的应用的运行状况。
- 显示股市表现
- 监视赛车上的遥测数据
操作仪表板显示设备存储指标
演示仪表板
演示仪表板提供有关主题的精选快照。这些仪表板通常包括一些小图表或记分卡，并带有动态标题...
阅读更多
演示仪表板提供有关主题的精选快照。
这些仪表板通常包括一些小图表或记分卡，其动态标题说明了每个支持图表中提供的趋势和见解。
用例包括：
- 提供关键绩效指标的概述
- 创建高级执行摘要
演示仪表板示例：
- 提供投资账户业绩概览
- 提供产品销售和市场份额数据的摘要
Analytics（分析）信息中心显示网站使用情况数据
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
