万字干货！写给设计师的数据可视化设计指南

设计师在工作中经常会遇到以下情况：

他们努力工作，加班加点，日夜制作的数据分析报告提交给他们 boss 在人们手中，结果无法理解，整个黑色问号脸的过程。原因是他们努力工作的数据分析结果是无用的，可以让别人一眼清楚地显示，努力是徒劳的。

因此，为了让每个人都不再对数据的可视化感到不知所措，我希望通过这篇文章与每个人交流和学习，解决一些共同的问题。

1. 定义数据可视化

随着数据科学的蓬勃发展，信息科学领域面临的一个巨大挑战是数据爆炸。然而，人类分析数据的能力远远落后于获取数据的能力。

数据量越来越大，越来越多样化。数据内容的噪音使人们在复杂的数据世界中感到无聊和乏味，理解成本也很高。因此，这一挑战不仅在于如何从大量数据中提取有用的知识，而且在于如何将数据转化为快速理解的知识。

如何从海量数据中提取知识是数据处理和数据挖掘的范畴。如何将数据转化为快速理解的知识需要数据可视化。

与简单的数字相比，图形形式更容易洞察数据的分布、趋势、关系和异常点，从而帮助决策者快速做出决策。数据可视化是将数据转换为易读、易懂、易操作的图表或表，以简单易懂的方式显示和呈现数据。

通过“可视化”的方式，庞杂的大数据可以通过图形化的方式为工作带来 3 大好处：

2. 数据可视化发展过程

可视化的发展历史可以追溯到 19 本世纪上半叶，这一时期可以说是数据绘图的黄金时期。统计图形和概念图迅速爆发。此时，人们已经掌握了一套完整的统计数据可视化工具，包括方形图、柱状图、蛋糕图、折线图、时间线、轮廓线等。

在此分享一个典型的数据可视化案例。1864 年一名 John Snow 医生用散点在地图上标记伦敦霍乱病例，从而判断 Broad Street 水井污染是疫情爆发的根源。

John Snow 开始调查病例发生地点与取水的关系，发现 73 一个病例离布拉德街井的距离比附近的任何其他井都要近。霍乱在拆除布拉德街井的摇柄后不久停止。

可视化真的被提到了应用理论的高度 1987 由布鲁斯·麦考梅克和马克沁·布朗撰写的美国国家科学基金会报告《Visualization in Scientific Computing》（科学计算中的可视化）旨在强调基于计算机的可视化技术方法的必要性。此时，这一概念与我们目前接触的工作中的数据可视化非常接近。

到了 90 20世纪初，人们发起了一个叫做“信息可视化”的研究领域，旨在为许多应用领域（科学、商业、行政、金融、数字媒体）的抽象异质性数据集分析提供支持，与上述“科学可视化”交叉形成熟悉的“数据可视化”，此时，这个词慢慢被更多的专业领域接受，并在互联网的持续发展中扩大了自己的分支。

过去 1 年，全球塑料瓶销量达到 4800 1亿，这个数字看起来很大，但有多大？这项工作是通过可视化呈现的。方法很简单——看看一小时、一天、一个月、一年、十年生产的塑料瓶能堆多高——效果非常震撼。看到世界上最高的建筑，我们可以意识到我们消耗的塑料瓶的巨大数量，而不是堆积成山的塑料瓶。

3. 为什么要做数据可视化？

据 IBM 我们的世界每天都要创造高达 2.5 万亿字节的数据。

安德鲁·迈克菲，麻省理工学院的研究科学家（Andrew McAfee）埃里克·布林约尔夫森，麻省理工学院（Erik Brynjolfsson）教授指出，“每秒通过互联网进行数据比较 20 几年前，整个互联网上存储了更多的数据。”

随着世界与越来越多的电子设备建立联系，数据量将继续呈指数增长。科学家们预测，到 2025 年将有 163 ZB（163 万亿 GB）的数据。

人脑很难理解所有这些数据。事实上，如果没有某种类比或抽象，人脑就很难理解大于 5 数字。数据可视化设计师在创建这些抽象中起着至关重要的作用。

对于用户，特别是决策者用户，在实际工作场景中往往需要同时处理超过 5 组以上数据需要建立准确的分析模型，以便做出最准确的决策。因此，基于这一需求，数据可视化设计诞生了。

数据可视化可以通过视觉图表清晰有效地传达数据中的重要信息。许多企业管理者在实践中看到了数据可视化的价值。它可以使决策者解决难以快速阅读数据分析报告的问题，并以数据可视化的方式理解数据，从而为企业做出更好的决策。

4. 数据可视化有什么用？

传递速度快

人脑比书面信息块更处理视觉信息 10 倍。用图表总结复杂的数据可以确保比那些混乱的报告或电子表格更快地理解关系。

多维数据显示

在可视化分析下，数据对每个维度的值进行分类、排序、组合和显示，从而看到表示对象或事件的数据的多个属性或变量。

更直观地显示信息

数据可视化报告使我们能够用一些简短的图形反映复杂的信息，甚至是单个图形。决策者可以很容易地解释各种不同的数据源。丰富但有意义的图形有助于忙碌的主管和商业伙伴了解问题和未决的计划。

限制大脑记忆能力

事实上，当我们观察物体时，我们的大脑和电脑一样有长期的记忆。(memory 硬盘)和短期记忆(cache 内存)。只有我们要记下文字、诗歌、物体，短期记忆一遍又一遍地出现， 它们可以进入长期记忆。

许多研究表明，在进行理解和学习任务时，图文可以帮助读者更好地理解要学习的内容， 图像更容易理解，更有趣，更容易记住。

BBC 委托数据艺术家 Federica Fragapane 制作关于空间垃圾的数据可视化作品。数据集分为不同类别：与地球的距离、空间垃圾的类型、物体的大小和质量。作为一名意大利独立信息可视化艺术家 Federica Fragapane 作品在细节和色彩上尤为引人注目。

5. 数据可视化使用目标

数据可视化是一种以图形形式描述密集和复杂信息的信息交流形式。最终的视觉效果是简化数据，并使用数据来帮助用户做出决定。

准确性

数据可视化需要考虑数据的准确性、清晰度和完整性。以不失真的方式呈现信息，降低用户的思维成本。

实用性

数据需要强调实用性，降低成本和效率，降低学习和使用成本、数据分析成本和数据搜索成本，提高操作效率和决策效率。

适应性

它可以适应多设备和多场景。可视化可根据不同设备的大小进行调整，并预测用户对数据深度、复杂性和模式的需求。

6. 数据可视化应用场景

信息图表设计，B 端后台界面设计，可视化大屏幕界面设计

标准风格的图表基本上由标题、图例、切换选项、图形主体、坐标系、提示信息和值域组成。此外，还有一些特殊的图表（如3D） 由背景墙、侧墙、底座等图表元素组成)。

1. 标题

标题简短有力，以最少的字数传达观点、信息或故事。

信息标题：提供理解数据所需的所有信息并回答「何事」、「何地」、「何时」这三个问题

描述标题：突出图表中显示的主要数据模式或趋势，描述图表中要讲述的故事

2. 图例

图形主题的右侧或顶部通常用于区分不同类别所代表的数据含义。

3. 切换选项

可以是 tab 根据具体场景设计，类型切换也可以作为下拉选择，用于同类型图表的切换。

4. 坐标系

由 X 轴，Y 轴、标识线、轴标题组成。一般情况下，坐标轴是图表中必不可少的元素之一，AntV 官方给出的迷你图（Minichart）可以省略坐标轴，只保留图形的基本姿态。

5. 图形主体

由选定的图表类型决定，有时多个图表类型组合使用。

6. 提示信息

多为 hover 或者选择状态，详细显示所选位置数据。

7. 值域

当屏幕不足以容纳图形时，选择可视工具，当图表足够复杂时使用。

需要注意的是，除了上述传统元素外，数据可视化图表还有一个非常重要的概念——时间范围。由于数据统计必须有时间范围，否则数据图表毫无意义，因此在设计图表时必须反映“时间范围”。它不能出现在特定的图表中，但应以标题或其他方式显示。

2017 年，荷兰有 1917 人们以自杀的方式结束了生命。来自 Studio Terp 的 Sonja Kuijpers 在收集相关数据、制作相应图表的基础上，从自己与自杀倾向抗争的经历中获得灵感，以“景观”为基础（landscape）荷兰的形式 2017 2000年的自杀是可视化的。这种“景观”的左右两侧被用来区分自杀者的性别。树木、云朵、波浪等元素表示不同的自杀方式，不同的颜色、形状和大小描述相同的元素 8 不同的年龄组。在充满自然形象的可视化手段下，原本冰冷而绝望的自杀景观变得平静而温暖，作者唤醒了自杀倾向者对生活的依恋

标准化的过程是良好结果的保证。按照设计流程，循序渐进，可以避免许多不必要的返工，保证设计质量和工程进度。

1. 根据业务需要确立关键指标

可视化设计应避免为显示、排版布局、图表选择等服务于业务，因此可视化设计是在充分了解业务需求的基础上进行的。那么什么是业务需求呢？业务需求是要解决的问题或目标。数据可视化的价值在于设计师通过设计手段帮助相关人员实现这一目标。

关键指标是一些一般性词，是一组或一系列数据的总称。确定关键指标后，根据业务需要制定各指标显示的优先级等级(主、次、辅)。

2. 建立指标分析维度

当我们制作可视化图表时，我们应该首先从业务开始，优先考虑合理且符合惯例的图表。特别是如果您的用户级别多样，我们应该考虑不同年龄或认知能力的用户的需求；其次，根据数据的各种属性和统计图表的特点进行选择。例如，许多小型合作伙伴在完成可视化设计后发现，可视化图形没有准确表达他们的意图，也没有向用户传达应有的信息。可视化图形令人困惑或无法理解。这种情况很大程度上是由于分析维度不准确或定义混乱。

比较：数据之间的差异和差异主要体现在哪些方面？

分布:指标中的数据主要集中在什么范围，表现出什么样的规律？

联系：数据之间的相关性

构成:指标中的数据由哪些部分组成，每个部分的比例如何？

3. 选择可视化图表类型

通过以上分析，我们可以根据我们想要显示的数据类型和制作图表的目的选择合适的图表。然而，在日常工作中，我们经常不使用这么多的图表类型，这种筛选维度更适合我们作为学习图表概念的工具。我们最常用的是六件套 — 柱状图、条形图、折线图、饼图、散点图、地图。

柱状图

柱状图用于描述分类数据之间的比较。它是一种以矩形长度为变量的统计图表，只有一个变量。一个轴表示需要比较的分类维度，另一个轴表示相应的值 。

下图显示了中国对象牙年需求下降的趋势图。象牙雕刻在中国已有数千年的历史，但当局被迫采取行动，鼓励非法贸易和非洲狩猎危机。2011 中国禁止拍卖所有濒危物种产品。

条形图

条形图比较柱形图，虽然看起来只是 X 轴与 Y 轴交换，数据类型相似，但不同的是，条形可以承载的项目数量比柱状图多，因为它优异的纵向延展性通常用于手机，例如，当条目大于时 12 条形图适合条形图，从上到下的阅读方法符合人眼的阅读习惯，因此也常用于排名设计。

下图是老虎数量逐年增加的对比图。从 2010 从历史最低点开始，数字正在增加。

折线图

折线图用于反映事物随时间或有序类别变化的趋势。绘制折线图，首先在笛卡尔座标上设置数据点，然后用直线连接。通常 Y 轴用于定量值，而且 X 轴是分类或顺序刻度。负值可以显示在 X 轴下方。使用建议:Y 轴刻度值的选择应合理，当前显示的数据波动应最大化；显示数据应尽可能大于 3 条，否则不能清楚地反映数据随时间变化的趋势。

下图是世界 85%的核弹头退役对比图。图中，两个核大国签署了多项条约。随着时间的推移，冷战期间积累的大量核武器库存已基本拆除。

饼图

饼图以扇区的形式显示每个值相对于总值的大小。不同类别的比例通过不同的扇面大小表示，即一个数据组中不同数据项的数据大小占所有数据和的比例；扇面和数据项通过彩色图例逐一对应。因此，当我们想要一组数据中每种数据类型的比例时，我们可以优先考虑饼图。饼图可分为基本饼图、环图和扇图。

下图显示，海上风力发电可以满足美国、欧盟、中国、日本和印度的电力需求。这种可再生能源具有惊人的潜力，随着技术的不断改进，成本继续下降。最终，它可能会超过当前的全球电力需求 18 双功率。预计到 2040 2008年，这项业务将达到万亿美元，使世界进入全面脱碳轨道。

散点图

散点图通常用于显示数据的分布。变量之间的相互关系通过数据之间的位置分布来观察。数据之间的相互关系主要分为正相关性（两个变量值同时增加）、负相关(一个变量呈增长分布，另一个变量呈下降分布)、不相关、线性相关、指数相关等。远离集群点的数据点称为异常点。散点图通常与回归线（即贯穿所有点的最准确的线）结合使用，对现有数据进行总结和分析，以进行预测和分析。

下图反映了数百万儿童的生命得到了挽救，因为他们得到了更好的医疗保健、教育和社会条件。人类进步的直接影响之一是延长寿命。100 几年前，世界上近一半的孩子都在这里 5 岁前死亡。今天，这个数字还不到 4%。这意味着数百万人有机会生活。这就是进步。

地图

地图通常用于显示地理区域中的数据。以地图为背景，数据的地理位置通常通过图形的位置来显示，数据在不同地理区域的分布通常是显示的。

根据哥伦比亚大学的研究人员，下图反映了美国每个州的枪支数量 Bindu Kalesan、Marcos Villarreal 和 Katherine Keyes 波士顿大学 Sandro Galea 最近在《伤害预防》杂志上发表的一项研究中，几乎每三个美国人中就有一个拥有枪支 。

4. 视觉设计

定义设计风格

大多数设计都应该有 APP 或者 Web 定义风格的经验。我们正在定义一个 APP 或者 Web 页面设计风格中常用的方法是什么？情绪板！精美的图片与主题关键词相匹配，可以准确地向需求方和产品侧表达页面的设计方向和风格。

虽然视觉设计很酷，但风格定义方法也可以用情绪板来完成。这种方法也是目前更科学、更高效的风格定义方法：

规划页面布局

在设计初步规划阶段，首先考虑如何表达计划，然后选择相应的构图方法。以大数据屏幕为例，我们注重总分的主次关系，所以构图仍然遵循这一规则，先具体，然后抽象。

布局一：

布局二：

布局三：

配色的重要性

当我们打开一个页面时，我们看到的第一件事通常不是板布局，也不是详细的内容，而是页面的颜色。颜色引导我们的视觉运动，强烈的影响很容易给用户留下深刻的印象，设计师使用和搭配颜色，将决定视觉显示效果。

颜色可以在不使用文字的情况下传达大量信息。但是，在使用颜色时应注意以下几点：

一般来说，我们在使用颜色时可以遵循以下配色一致性原则：

数值指标的一致性

根据某一指标的数值大小进行颜色映射时，建议使用生长色系的渐变颜色。

例如，如上图所示，新型冠状肺炎病例各区域的现有病例数量被统计出来。左边的图片颜色没有颜色系统和生长规律，用户很难理解具体指标值的意义。此时，如果使用右侧生长颜色系统的表达，它将传达给用户一种颜色可测量的感觉。

然后，用户可以很容易地理解每个区域的现有病例分布，根据这种渐变生长色系。

语义颜色的一致性

符合语义的颜色可以帮助人们更快地处理信息，并尝试根据指标的含义选择最直观的颜色。

例如，在分析股市时，我们可以使用统一的红绿配色，分别代表股票的涨跌。

指标颜色的一致性

在同一仪表板中，尽量使用相同指标的相同颜色系统的颜色方案，以避免过度使用颜色干扰用户。

例如，当我们进行营业额利润分析时，通常分析指标会有成本、利润和利润率。即使我们对同一指标进行不同维度的数据可视化分析，建议使用相同的颜色系统来匹配相同的指标，如下：

在遵循这一指标颜色一致性配色原则后，用户可以根据颜色差异快速理解当前数据可视化图表的指标含义。

颜色的一致性

假如我们是自定义配色，就需要避免一些对比。

例如，黄色+白色、蓝色+黑色、红色+蓝色、黄色+紫色等颜色系统的搭配，不仅在感官上不美观，而且容易刺激用户的眼睛。

设计中需要遵循的原则

图表的设计价值在于准确、高效、简单地传输数据信息。最好让读者一目了然。即使他们不能一目了然，他们也应该有自我解释的能力。因此，有必要在设计中加强和突出数据元素，减少和削弱非数据元素。应注意以下原则：

删除

除非考虑到特殊情况，否则应尽可能删除与数据无关的元素：

背景色渐变色网格线3D 影响阴影效果(具体操作需要强调的除外，如鼠标 Hover 查看具体信息)

弱化

即使有必要保留非数据元素，也要弱化或隐藏它们，尽量使用浅色元素

坐标轴网格辅助线表格线

组织、强调

合理组织和分类相关数据，只在图表中放置关键和重要的数据。并考虑数据显示的优先级，明确哪些数据需要突出的关键识别，以便用户能够快速 get 重要信息。

5. 沟通确认飞机稿

最初的设计草案不需要非常精致。我们可以把它理解为一个“低保真”的原型，然后通过不断的沟通和修改，逐步提高它的精致度，即小步快跑，以避免突然到达终点线，然后进行大修和改变的情况。

根据页面布局、图表类型和页面风格的特点，我们需要使用尽可能简单的方法 ，在页面上快速反映前几步的结果，然后敲定五个方面：

6. 页面交付开发

页面交付开发完成后，我们还需要检查关键视觉元素、字体大小、页面动态效果、图形图表是否按预期显示、变形、错位等。

总结

让我们回顾一下，这篇文章主要讲三个部分：

第一部分主要解释什么是数据可视化。数据可视化是指将数据转换为易读、易懂、易操作的图表或表，以简单易懂的方式显示和呈现数据。以及数据可视化的发展过程、功能、使用目标和应用场景；

第二部分主要解释了图表的组成元素是什么？标准风格的图表基本上由标题、图例、切换选项、图形主体、坐标系、提示信息和值域组成；

第三部分主要介绍了数据可视化设计过程和一些常见的图表类型。标准化过程是良好结果的保证。根据设计过程，可以避免许多不必要的返工，以确保设计质量和项目进度。

最后，除了学习上述可视化相关的基础知识外，还需要在日常工作和学习中培养习惯，培养数据可视化的思维方式。

试着用可视化工具创建图表，锻炼分析整理能力，密切关注自己产品线的用户行为数据，解读各种数据指标，培养分析习惯，关注前沿技术和可视化新形式，保持开放包容的心态

以上就是本文的全部内容，希望能给大家带来帮助。

参考：

CSDN 前端修罗场《大屏幕数据可视化设计指南》 B 端产品设计 美芳老师 《数据可视化设计视觉篇》 rules for better dashboard design》Taras BakusevychAntV： https://antv-2018.alipay.com/zh-cn/index.htmlEcharts： https://echarts.apache.org/zh/index.htmlCSDN 马世权《乐见数据：商业数据可视化思维》captain811《数据可视化重点》