从方法到工具，腾讯高手带你轻松搞定图表设计

一、数据可视化的作用

数据无处不在，帮助我们做出更好的决定。然而，数据不能独立存在。为了使数据有用，我们必须理解它。数据的质量在很大程度上取决于其表达方式。数据分析结果的可视化呈现可以帮助我们更好地理解和挖掘数据的价值。数据可视化的本质是视觉对话。数据可视化将数据分析与图形设计相结合。数据是可视化设计的基础，可视化为数据表达提供了灵活性。使用数据可视化可以更好、更有效地获取有价值的信息。

精心设计的视觉图表可以清楚地传达复杂的数据。图表为抽象数据提供上下文，使我们能够直观地掌握数据模式，识别数据趋势，比较和跟踪数据变化。

然而，在日常工作中，我们有时会发现设计师花了太多的精力让图表看起来“好看”，而忽略了哪些图表适合表达这些数据，导致他们没有达到预期的效果。我们结合日常工作中的经验和对图表设计的理解，写了这篇文章，希望对大家有所帮助。

更多与图表相关的干货:

一、图表设计方法

图表设计一般以目标为导向，根据要传达的信息目的明确目标，从而选择需要使用的图表类型。在制定设计方案之前，需要明确需要遵循的原则，以避免错误的图表设计造成信息传输扭曲。

1.  在开始设计之前，如何选择使用什么类型的图表？-图表的类型由数据目标决定

①理解数据

首先，你需要确定你的核心内容。图表可以提供视觉焦点。一个页面上有许多可视化的内容，但只有最重要的内容才应该制作图表。图表将吸引用户的注意力到您希望他们理解的信息。接下来，考虑你想要传达的数据之间的关系和维度？数据之间的关系包括比较、趋势、分布、组成、装配线等

②分析用户

用户需要什么样的体验，图表如何支持用户实现目标？首先，你可以关注谁是你的观众，他们更喜欢如何消费信息？不同的用户角色会关注不同的数据。通过分析用户的特征、使用场景和使用这组数据的目的，可以进一步帮助明确图表设计的目标。

例如，下表是一组简单的数据。从数据关系和数据维度来看，可以比较同年不同产品的销量，也可以比较同年不同产品的销量比例；你也可以看到近年来每个产品销售增长趋势的变化。对于老板来说，他们可能倾向于看到总体趋势的变化。对于产品经理来说，他们可能更关注自己产品和其他产品的销售比较和产品的销售变化。

③选择图表类型

在理解数据和分析用户后，进一步澄清图表需要显示什么信息，并选择能够清楚地显示对数据的看法的图表。使用错误的图表类型可能会扭曲数据，混淆甚至误导用户。一般来说，我们根据需要表达的数据关系来选择图表类型：

1）比较

比较图用于显示数据的差异和相似性，包括条形图、柱形图和折线图。

条形图和柱形图

条形图是比较分析的主力军。人类的视觉可以快速识别高度和长度的差异，因此它是呈现简单有序数据的好选择。

堆积条形图和柱形图

堆积条形图非常适合显示更复杂类别和子类别之间的组关系和价值差异，或者比较同一组数据中不同类别的比例。堆积柱形图也可用于显示有序数据子集中的组关系。一般来说，堆积条形图适用于较多的组，堆积柱形图适用于较少的组。

折线图

折线图用于显示连续数值（如时间）或有序数据分类的变化趋势，非常适合表示一个或多个值随时间变化，特别是趋势数据。绘制折叠图线图在 X 轴的投影面积可以更直观地显示值的大小。

2）分布

用于显示数据中值之间的关系和相关性，如散点图、气泡图、雷达图等。

散点图

散点图可以用来显示更复杂的数据关系，包括多个变量的相关性。点的颜色强度与点图一样，可以传达额外的信息。

气泡图

气泡图使用颜色密度和气泡大小来显示两个变量的浓度模式。

雷达图

雷达图是一种以同一点轴上三个或多个定量变量的二维图表的形式显示多变量数据的图形方法，专门用于多指标系统的分布和比较分析，可以将多维数据投影到平面上，实现多维数据的可视化。

3）构成

用于显示相对值，或表示一个值的相对组成，包括饼图、环形图和树形图。

饼图和环形图

饼图在数据集中映射相对值或值的相对组成，突出显示相对值(如数据的分类和比例)，而不是绝对值。更多的图表说明也可以用环在中间显示。

树状图

树形图采用嵌套矩形显示分层数据的组成，通过不同的矩形面积和布置，可以清晰地显示层的结构，显示层的内部比例关系

4）流转

流水线图显示了流程的各个阶段，以及这些阶段之间的流程。它们包括漏斗图、瀑布图、折纸图和桑基图。

漏斗图

漏斗图用于表示销售或营销过程中的每个阶段，每个阶段都有一个值。

瀑布图

瀑布图用于显示流程各个阶段的起始值、中间值和最终值。适用于反映数值的增减，如一年中月收入、用户数量等指标的变化。

折纸图

折纸图表使用单个测量和分组显示数据中的弹出值。您也可以使用它们来显示不按顺序下降的阶段的可变性。它们可以很好地突出与某一类别中的其他值相比表现良好的值。

桑基图

桑基图显示值如何在两组之间流动，并显示给定指标在从一组移动到另一组时是如何分布的。桑基图显示负数并计算其对总数的影响。

④其它：信息图形（Infographic）

除了传统的功能图外，还有一种性能数据可视化设计类型，即信息图形。

信息图形是一种艺术数据可视化设计，主要用于需要清晰解释或表达复杂信息的场景，如数据统计、新闻事件、人物关系、历史背景、原则科普或教程指南等。其目的是通过艺术和易于理解的表达形式传达复杂的信息或概念。信息图形通常是定制设计，要求设计师具备理解、细化和美化内容的能力，以及一定的设计专业技能。

2. 在图表设计过程中，设计师需要考虑一些常见的原则

①准确性

优先考虑数据的准确性、清晰度和完整性，以不扭曲信息的方式呈现信息。尽可能使用熟悉的表格来降低理解阈值（如柱状图和折线图）。

使用过多的颜色会破坏数字与颜色相关的目的。研究表明，大多数人的短期记忆最多可以保留一次 5 因此，建议颜色数量的最佳最大值为条信息 5 条。

②一致性

用统一的表达来描述图表，例如始终匹配颜色和数据属性。如果在图表中使用蓝色来表示销售利润率，则在所有其他图表中使用蓝色来表示值。

③有帮助的

使用上下文和简单的交互来帮助用户进行数据导航。例如，通过标题和完整的句子来解释数据。当使用用户不熟悉的新奇图表时，需要额外的解释来帮助理解（一般新奇图表作为应用程序的核心，而不是补充描述，突出显示新奇图表会激励用户探索和理解它；辅助描述的图表更适合用户熟悉的形式，他们的注意力低于新奇图表）。

④提高可扩展性

在预测用户对数据深度、复杂性和模式的需求的同时，对不同设备尺寸进行可视化调整。以下是 3 一种常见的提高扩展性的方法：

1）引入差异：图表之间的差异是某事变化的信号。当数据属性发生变化时，适合使用不同的颜色；当数据维度发生变化时，更适合更改图表类型。

2）整合宏观和微观：使用图表表达数据时，宏观描述整个数据集，如总值或平均值；微观描述关注最新、最大、最小等单个数据点。

3)使用从小图表到大图表的交互变化，逐渐呈现图表的层次：小图表通常是静态的，通常不是单独存在的，通常作为另一个视图中更大图表的预览，更大的图表具有更丰富的交互性。在同一图表的两个版本之间创建交互连接时，最好通过保留值、背景和颜色状态来保持连续性，图表在变化过程中保持形状。前一个视图中的任何明显元素在另一个视图中表示不同的内容都可能会让用户感到失望或困惑。

3. 图表设计

①基本构成图表

1)图表标题：

使图表易于理解和解释，使用描述或文本提供数据背景，如标题、副标题、图例、提示信息等。描述需要位于图表附近，可以通过总结图表的主要结论来更好地解释内容。

2）轴线：

轴为标记提供框架，并为值提供参考。水平轴表示时间，垂直轴表示上下限的选择。网格线提供估计值，调整密度，避免分散注意力。小图表不需要网格线，了解其模式；在大图表中添加网格线有助于更准确的分析。

3）图形：

表示数据项的可视化元素，如柱状图中的柱、折线图的直线和散点图的点。图形是图表视觉构建的基础，需要设计目标和数据，考虑真实数据和各种极限。

②图表颜色

配色对图表的美观也起着决定性的作用。适当的配色可以使整个图表的呈现更加清晰、整洁、准确。让我们来解释一下图表的颜色设计。

1)色相/饱和度/亮度:

色相本身没有明显的顺序，通常不用于表达图表数据的水平，通常用于区分数据的类别。例如，当使用柱状图显示相同维度的数据时，应尽量使用单色。当确实需要突出某个数据时，可以使用更明显的颜色来区分其他数据。

饱和度代表颜色的亮度。饱和度越高，颜色越鲜艳，容易给人年轻活泼的感觉；相反，饱和度越低，容易给人成熟稳重的感觉。

亮度代表颜色的亮度。不同的颜色有不同的亮度。例如，在相同的饱和度下，黄色比蓝色更亮。因此，在同样的情况下，亮色的亮度可以适当降低，以确保整体配色的和谐统一。

因此，在选择图表配色时，要注意饱和度明度适中，避免过高或过低，过高容易造成廉价感，过低会导致信息无法有效区分。

2)配色方法：

采用常见色环搭配原理，包括相邻色、对比色、互补色等。

相邻颜色：弱对比，选择相邻颜色搭配，能营造出一致连贯的效果。

互补色：强对比，选择对角线的颜色，搭配在一起，营造出强烈的视觉效果。

对比色：强对比，采用三种颜色搭配等边三角形，产生强烈的对比效果。

连续渐变：

用于表达同一分类中的数值大小和梯度变化，使用连续渐变可以强调数据的内在变化逻辑，使图表更有效地阅读。

从品牌 Logo 延展配色：

有时在某些品牌内容上使用图表，使用品牌配色有助于提高图表的美感、可读性和品牌认知度，保持企业形象的统一。

如果品牌暂时没有配色定义，那么我们可以从 Logo 开始延伸配色，可以借助一些在线工具轻松提取配色，比如 Muzli Colors、Coolors 等。

从素材图中发散配色：

有时，当你缺乏灵感或配色来源时，你也可以考虑从其他地方学习。你不妨从其他领域大胆学习，比如一些好看的材料图片或海报。

虽然图表配色方法相对简单易学，但关键在于设计师需要根据图表传达的信息、应用场景或品牌表达等因素，有策略地选择配色方案。此外，还应确保所选配色方案与图片中的其他元素和谐共存。因此，没有统一的配色标准，这在很大程度上考验了设计师的审美观和整体控制能力。

③数据墨水比（DataInkRatio）

数据墨水比爱德华·塔夫特（Edward Tufte）在其出版的《The Visual Display of Quantitative Data》一本书中提出的一个概念：描述数据的墨水量除以所有图形中使用的墨水量的比例。

可以简单地理解，在设计图表时，传达核心数据信息元素越多，数据墨水比越高，效果越好。低墨水比表明图表设计中除核心数据信息外的干扰元素太多，换句话说，图表信息传达的“信噪比”。

然而，在设计图表时追求数据墨水比越高，并不意味着过度简化信息。过度简化会导致信息缺失，但应在合理范围内达到平衡。这里有几个要点：

以数据显示和传输为核心，确保图表能够有效地传输关键信息，去除与传输关键信息无关的多余装饰元素，并在关键信息周围适当补充一些辅助信息

4. 常用的图表设计工具

最后，我想介绍一些易于使用的数据可视化工具，其中大部分可以在线使用，无需安装~

①Flourish

Flourish 它是一个适合各行各业的在线数据可视化平台。它可以帮助用户轻松地将数据转换为有趣和令人信服的图表，提高数据分析和沟通的效率和质量。例如，无需编程或安装任何软件，就可以快速创建各种类型的图表、地图、仪表板等。

Flourish 的特点有：

它提供了各种常见的数据可视化形式，如折线图、柱状图、蛋糕图、散点图、树木图、桑基图、地图、时间轴等。支持各种数据源，用户可以直接上传 Excel、CSV 等格式文件，或通过 Google Sheets、SQL 您还可以手动输入或编辑数据。它具有强大的自定义功能。用户可以通过简单的拖动和点击操作调整图表的样式、颜色、字体、动画等细节，也可以添加标题、注释、图例等元素，使图表更加完美美观。它支持多种共享和导出方式。用户可以通过链接或嵌入代码将图表共享到网站、社交媒体和其他平台，也可以导出图片、视频或 PDF 等格式，便于保存和传播。

②Echart

Echart 它是一种开源数据可视化工具，可以帮助用户创建折线图、柱状图、蛋糕图、地图等各种类型的图表，以显示数据的分布、趋势和关系。

Echart 的优点有：

提供丰富的配置项目，如颜色、字体、动画、交互等，使用户能够定制图表的样式和功能。与各种浏览器和设备兼容，如 Chrome、Firefox、Safari、IE8+等，以及移动终端和 PC 保证图表的显示效果和性能。基于 HTML5 Canvas 绘制，支持高清屏幕和大数据渲染，提高图表的清晰度和流畅性。遵循 Apache 2.0 允许用户免费使用和修改源代码，促进开源社区的发展。

③Tableau Public

Tableau Public 它是一种免费的数据可视化工具，可以帮助用户创建和分享交互式数据图表、仪表板和故事。用户可以通过拖动、柱状图、折线图、地图等不同类型的图表来选择数据字段，并调整颜色、大小、标签等视觉元素，从而产生各种数据可视化效果。Tableau Public 它还支持用户在网页上发布和嵌入他们的作品，使其他人能够在线查看和交互。

④Informationisbeautiful

Informationisbeautiful 它是一个在线平台，可以创建精致、有趣和有洞察力的图表和图形。它可以使用各种模板和选项来定制可视化。通过选择不同的颜色、字体、图例、标签等，使图表更具吸引力和易于理解。您还可以添加注释、链接、参考等，以提高图表的可信度和参考价值。它还可以在网站、社交媒体、报告或演示中分享和导出作品。支持不同的格式，如 PNG、SVG、PDF 等待，适应不同的场合和需要。

⑤D3js

D3js 它是一种基于数据的图形，用于创建动态、交互式和图形 JavaScript 库。它可以让开发者使用 HTML、SVG 和 CSS 制作折线图、柱状图、饼状图、地图、树状图等各种类型的数据可视化。D3js 其优点是，它提供了一种强大的数据绑定机制，可以建立数据和图形元素之间的映射关系，从而实现数据驱动的视觉效果。D3js 还支持多种数据格式，如 JSON、CSV、XML 等等，以及各种交互方式，如收缩、拖动、过滤等。D3js 它是一个开源项目，拥有庞大的社区和丰富的资源，可以帮助开发者快速学习和使用这个工具。

⑥配色参考工具

Muzli Colors：在线快速生成多种配色，支持预览和下载自定义 UI 工具包。Brand Colors：最大的知名官方品牌配色板集合。Coolors：支持图片上传和吸收颜色的免费配色板生成器。Flat UI Colors：推荐多款精心挑选的设计师配色板。

结语

数据可视化设计是一门结合艺术和科学的学科，可以帮助我们更好地理解和传达数据的含义和价值。本文介绍了图表设计的基本原则和设计方法，以及一些常见的图表类型和工具。希望通过本文，能够激发读者对数据可视化设计的兴趣和热情，在自己的工作和生活中运用数据可视化设计，创造出更具吸引力和影响力的数据展示。

参考：

https://carbondesignsystem.com/datavisualization/charttypes/https://m2.material.io/design/communication/datavisualization.html#principleshttps://www.lightningdesignsystem.com/guidelines/charts/https://developer.apple.com/videos/playwdc2022/110340https://developer.apple.com/videos/playwdc202/11034

欢迎关注作者微信微信官方账号:「腾讯设计族」