|
数据可视化主要就是把数据用图形的方式表现出来，让人们看着更舒服，更快，更便捷，不再需要花费大量的时间去慢慢的琢磨数据之间的关系和起伏，这些东西我们全部都用图形来表现出来，让人一目了然。 今天文章当中主要内容就是数据可视化的表现，告诉你如何正确的表现，什么情况下用那种表现方式，哪一种表现方式是最好的，等等。里面也穿插了一些数据可视化设计的呈现效果。 好了，抓紧时间看一看吧。 原则 数据可视化是一种以图形形式描绘密集和复杂信息的通信形式。由此产生的视觉效果旨在使比较数据并使用它来讲述故事变得容易——这两者都可以帮助用户做出决策。 数据可视化可以表达不同类型和大小的数据：从几个数据点到大型多元数据集。 准确的优先考虑数据的准确性、清晰度和完整性，以不扭曲信息的方式呈现信息。 有帮助帮助用户通过强调探索和比较的上下文和可供性来导航数据。 可扩展针对不同的设备尺寸调整可视化，同时预测用户对数据深度、复杂性和模态的需求。 类型 数据可视化可以用不同的形式表达。图表是表达数据的常用方式，因为它们描绘了不同的数据种类并允许进行数据比较。 你使用的图表类型主要取决于两件事：你想要传达的数据，以及你想要传达的关于该数据的内容。这些指南提供了对各种不同类型的图表及其用例的描述。 图表类型 随着时间的推移而变化随时间变化图表显示一段时间内的数据，例如跨多个类别的趋势或比较。 常见用例包括：
随时间变化的图表包括： 2. 条形图 3. 堆积条形图 4. 烛台图 5. 面积图 6. 时间线 7. 地平线图 8. 瀑布图 品类比较类别比较图表比较多个不同类别之间的数据。 用例包括：
类别比较图包括： 2. 分组条形图 3. 气泡图 4. 多线图 5. 平行坐标图 6. 子弹图 排行排名图表显示项目在有序列表中的位置。 用例包括：
2. 有序柱状图 3. 平行坐标图 部分到整体部分到整体图表显示部分元素如何加总。 用例包括：
部分到整体图表包括： 2. 饼图 3. 圆环图 4. 堆积面积图 5. 树状图 6. 旭日图 相关性相关图显示两个或多个变量之间的相关性。 用例包括：
相关图包括： 2. 气泡图 3. 柱状图和折线图 4. 热图图 分配分布图显示每个值在数据集中出现的频率。 用例包括：
2. 箱线图 3. 小提琴图 4. 密度图 流动流程图显示数据在多个状态之间的移动。 用例包括：
流程图包括： 2.甘特图 3.弦图 4.网络图 关系关系图显示多个项目如何相互关联。 用例包括
关系图包括： 1. 网络图 选择图表 多种类型的图表适用于描述数据。下面的指南提供了有关如何选择一个图表而不是另一个图表的见解。 显示随时间的变化可以使用时间序列图表来表示随时间的变化，该图表是按时间顺序表示数据点的图表。表达时间变化的图标包括：折线图、条形图和面积图。
* 基线值是 y 轴上的起始值。 条形图和饼图 条形图和饼图均可用于显示比例，它表示与总值相比的部分值。
条形图、折线图和堆积面积图比饼图更能有效地显示随时间的变化。由于所有这三个图表共享可能值的相同基线，因此更容易根据条形长度比较值差异。 按照下面的方式去做 使用条形图显示随时间的变化或类别之间的差异。
这个时候下面的方式就不可取了 不要使用多个饼图来显示随时间的变化。很难比较每块馅饼的大小差异。
面积图面积图有多种类型，包括堆积面积图和重叠面积图：
不建议使用超过两个时间序列的重叠面积图，因为这样做会掩盖数据。相反，使用堆积面积图来比较一个时间间隔内的多个值（时间在水平轴上表示）。 重叠堆积一定要按照下图的方式去做 使用堆积面积图来表示多个时间序列并保持良好的易读性。
下面的方式不可用 不要使用重叠面积图，因为它会掩盖数据值并降低可读性。
风格 数据可视化使用自定义样式和形状，以适合用户需求和上下文的方式使数据更易于一目了然地理解。 图表可以从自定义以下内容中受益：
设计不同类型的数据视觉编码是将数据转换为视觉形式的过程。独特的图形属性可以应用于定量数据（例如温度、价格或速度）和定性数据（例如类别、风味或表达式）。 这些属性包括：
表达多个属性 多个视觉处理可以应用于数据点的多个方面。例如，条形颜色可以表示一个类别，而条形的长度可以表示一个值（如人口规模）。
形状可用于表示定性数据。在此图表中，每个类别都由特定形状（圆形、正方形和三角形）表示，这样可以轻松比较特定范围内的数据或与其他类别的数据。 形状 图表可以使用形状以多种方式显示数据。形状可以设计为俏皮和曲线，或精确和高保真，以及介于两者之间的其他方式。
形状细节级别图表可以表示不同精度级别的数据。用于近距离探索的数据应由适合交互的形状表示（在触摸目标大小和相关可供性方面）。而旨在表达总体想法或趋势的数据可以使用细节较少的形状。 柱状图按照下面的方式去做 此图表中的条形具有微妙的圆角，确保条形顶部精确测量条形的长度。
不要把定不做成圆角，如下图 不要使用难以阅读图表的形状，例如顶部边缘不精确的条形。
颜色颜色可用于通过四种主要方式区分图表数据：
颜色区分类别
颜色代表数量
颜色高亮数据
重点领域颜色可以突出一个焦点区域，当它被谨慎使用时。不建议使用大量的颜色高光，因为它们会分散和阻碍用户的注意力。 按照下图的方式去做 使用高光和中性色的组合来提供对比和强调。
不要做成下图这样 单个图表中的许多颜色可能会阻碍焦点。
颜色表示含义提示是用符号强化 使用其他视觉提示（如图标）强化图表颜色的含义。
如果只用数字不是很明显 不要单独使用颜色来表示含义。
无障碍为了适应看不到颜色差异的用户，你可以使用其他方法来强调数据，例如高对比度阴影、形状或纹理。 将文本标签应用于数据还有助于阐明其含义，同时消除对图例的需求。关于配色的文章全部都在下面已经给你准备好了 线 图表线条可以表达有关数据的质量，例如层次结构、突出显示和比较。可以通过不同方式设置线条样式，例如使用破折号或不同的不透明度。 线条可以应用于特定元素，包括：
按照下图方式去做 改变线条的纹理以表示不同的数据类型。
不要这样做，如下图 不要使用不同的颜色来显示同一数据类别的周期性变化。
排版文本可用于标记不同的图表元素，包括：
具有最高层次结构的文本通常是图表标题，轴标签和图例具有最低层次结构。
文字粗细标题和不同的字体粗细可以传达哪些内容比层次结构中的其他内容更重要（或更不重要）。但是，应谨慎使用这些处理方法，并使用数量有限的排版样式。 按照下图方式做 仅用于一两个关键元素的粗体营造出平衡的设计。
不要做成这样如下图 在太多元素上使用粗体会使识别重要元素变得更加困难。
图像学 图标可以表示图表中不同类型的数据，并提高图表的整体可用性。 图像学可用于：
在图表中放置图标时，建议使用普遍可识别的符号，尤其是在表示操作或状态时，例如：保存、下载、完成、错误和危险。 按照下图方式去做 使用标签和图标来清楚地表示关键信息。
不要这样做如下图 避免仅使用图标和符号来表示重要信息。
图标在传达意义时补充颜色。
标记轴带标签的轴或多个轴表示所显示数据的比例和范围。例如，折线图显示沿水平和垂直标记轴的一系列值。 条形图应始终从 x 轴基线值为零开始。
考虑完全删除轴以将数据作为焦点。你可以将值直接放置在其相应的图表元素上。
条形图基线条形图应从零基线（y 轴上的起始值）开始。从不为零的基线开始可能会导致数据被错误地感知。 按照下图方式去做 从零基线开始的条形图
不要做成这样，如下图 不要从零以外的值开始基线。此基线从 20% 开始，使条形差异看起来更加引人注目。
轴标签标签使用应反映图表中最重要的数据洞察。应根据需要使用轴标签，并在整个 UI 中以一致的方式使用。他们的存在不应妨碍阅读图表。 按照下图方式去做 通过使用平衡数量的轴标签来支持易读性。
不要这样做，如下图 不要用大量轴标签使图表过载。
文字方向文本标签应水平放置在图表上，以便于阅读。 文本标签不应：
按照下图方式去做 在条形图上水平定位文本，如果需要，旋转条形以腾出空间。
尽量不要做成这样，如下图 不要旋转条形标签，因为这会使它们难以阅读。
图例和注释图例和注释描述图表的信息。注释应突出显示数据点、数据异常值和任何值得注意的内容。
2. 图例 在桌面上，建议在图表下方放置图例。在移动设备上，将图例放置在图表上方以使其在交互过程中可见。 标签和图例图表元素可以在简单的图表中直接标注。但是，密集的图表（或较大图表组的一部分）可以在图例中显示标签。 使用直接标记的折线图
使用图例的折线图
小显示器 可穿戴设备（或其他小屏幕）上显示的图表应该是移动或桌面图表的简化版本。 按照下图方式去做 在图表上标注关键点以描述数据。在此示例中，显示了最高和最低数据值。
尽量不要做成这样，如下图 不要将关键数据点放在屏幕外，因为它需要用户滚动才能看到它们。
阈值线为用户提供有关所显示数据的上下文。
行为 图表提供了交互模式，让用户可以控制显示的数据。这些模式让用户可以专注于图表的特定值或范围。 以下推荐的交互模式、样式和效果（如触觉反馈）可以提高用户对图表数据的理解：
渐进式披露使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。 显示详细信息（桌面） 在桌面上，悬停状态可以显示更详细的数据。
显示详细信息（移动设备） 在移动设备上，触摸并按住手势会显示位于图表上方的工具提示。
缩放和平移 缩放和平移是流行的图表交互，会影响用户研究数据和探索图表 UI 的密切程度。 缩放 缩放会改变 UI 是从近处还是从远处显示。设备类型决定了缩放的执行方式。
当缩放不是主要操作时，可以通过单击和拖动（在桌面上）或双击（在移动设备上）来实现。 平移平移允许用户探索扩展到屏幕之外的 UI。它应该以对显示的数据有意义的方式进行约束。例如，如果图表的一个维度比另一个维度更重要，则平移方向可以仅限于该方向。 平移的行为通常与缩放配对。 在移动设备上，平移通常通过手势实现，例如单指滑动。 在桌面上缩放
在桌面上平移
分页在移动设备上，分页是一种常见模式，允许用户通过向右或向左滑动来查看上一个或下一个图表。 在移动设备上，用户可以向右滑动查看前一天。 数据控制 可以使用切换控件、选项卡和下拉菜单过滤或更改数据。这些控件还可以显示指标，而用户可以调整控件。 切换控件、选项卡和下拉菜单可以更改或过滤数据。 运动 可以增强和加强数据之间的关系以及用户如何与之交互。运动应该有目的地使用（而不是装饰性的），表达不同状态和空间之间的联系。 动作应该感觉合乎逻辑、流畅且反应灵敏，不会妨碍用户的旅程。 在此示例中，数据在按天显示和按周显示之间进行动画处理。转换期间不会显示所选日期范围之外的数据，从而降低了复杂性。 动画显示了两个不同的图表是如何相关的。 空状态 空的图形和图表可以显示建议数据可用时的预期内容的内容。 在适用的情况下，可以显示角色动画以提供愉悦和鼓励。 特色动画增强了原本空白的图形。 仪表盘 数据可视化可以跨一系列多个图表显示在称为仪表板的UI 中。多个单独的图表有时可以更好地传达一个故事，而不是一个复杂的图表。 仪表盘设计 仪表板的用途应该反映在其布局、样式和交互模式中。它的设计应该适合它的使用方式，无论它是用于进行演示还是深入探索数据的工具。 仪表板应该：
应根据数据提出的问题对信息进行优先排序和安排。在此示例操作仪表板中，考虑了以下用户问题： 1. 需要注意的问题 分析仪表板 分析仪表板使用户能够探索多组数据并发现趋势。通常这些仪表板包括复杂的图表，可以发现数据洞察力。 用例包括：
分析仪表板示例：
显示气候数据的分析仪表板 操作仪表板 操作仪表板旨在回答一组预定义的问题。它们通常用于完成与监控相关的任务。 在大多数情况下，这些类型的仪表板将当前信息排列在一组简单的图表中。 用例包括：
操作仪表板示例：
操作仪表板显示设备存储指标 演示仪表板演示仪表板提供有关感兴趣主题的精选快照。 这些仪表板通常包括一些小图表或记分卡，带有动态标题，解释每个支持图表中提供的趋势和见解。 用例包括：
演示仪表板示例：
显示网站使用数据的分析仪表板 下面还有一些表现得形式
今天就分享到这里了。 各位，加油哦！
|
|
|
