|0x00 摩尔定律带来新的机遇

说起“数据可视化”，很多人的第一反应便聚焦在“数据”两个字上，其实“可视化”三个字的意义要更重要一些。说起“可视化”，就需要提起一组数字：“人脑处理图片的速度是处理文字的60000倍，人在看报纸时，99%的文字信息会自动被过滤掉，脑子里只残留了可怜的1%，一篇6000字的文章需要10分钟看完，而压缩成一张图片则只需要10/6000分钟的时间。”

人脑处理文字信息是串行的，而处理图片信息则是并行的。

随着电脑在工作中的普及，尤其是互联网兴起之后，人类在“摩尔定律”的带领下，进入了一个新的时代：信息的处理速度越来越快，新思维的迭代越来越频繁。过去我们分析数据，通过Excel便能够完成工作；而如今的数据量动辄以TB起步，随着我们能够采集到的越来越多的数据，如何分析这些数据、展示这些数据，便成为了一个新的课题。

所以说，我们要展示的东西，还是过去沉淀的经验，但分析的信息和手段，则发生了天翻地覆的变化。摩尔定律带来的新机遇，是属于新时代里拥有新思维的人们。

|0x01 数据可视化在做什么

回归到正题，现阶段“数据可视化”所探索的内容，是如何将海量的数据转化成为交互的图像，以视觉可以感受的方式表达，增强人的认知能力，达到发现、解释、分析、探索、决策和学习的目的。数据可视化的目标，首先在于做数据的目的，数据的目的在于“准确”、“清晰”的展示清楚一件事情的原貌。但数字本身是枯燥的，传统意义上使用表格来展示数据，虽然能够清晰展示一件事情的全貌，但它是不直观的，需要花费使用者一定的时间与精力来解读。为了让数据看起来更加直观，让使用者能够第一时间读懂数据的目的，让数据本身更有说服力。

因此，数据可视化天然的带有三项目标：

• 准确：精确的展示数据的特征，既不能遗漏，也不能冗余；

• 清晰：理解清楚数据目的信息，时间越短越好；

• 优雅：通过美观而又协调的页面，让使用者的注意力尽可能多的留在页面上。

打个比方，在大多数的传统公司中，领导并不一定是最懂业务的那个，因此非常需要手下的得力干将来为自己清晰的汇报工作。领导需要了解到内容包括：“我这个月的销售量是多少”、“和竞争公司比怎么样”这一类的方向。如果是你来汇报工作，直接拿几十张表格给领导，恐怕被批评一番是在所难免的。这个时候你就需要一张图，这张图可以展现全年的销售情况，再做一些深入的挖掘，比如按照用户画像，即年龄、地域、性别加以区分，相对而言就会得到表扬。可视化对于不懂业务的人而言，就成为了获取信息的最有效方式。

|0x02 互联网时代的数据可视化有哪些新特征

互联网时代的数据可视化，有这么几个显著的特征：

• 可视化的表现形式和场景更丰富；

• 可视化展现方式更多样；

• 具备了动态的展示能力；

• 设计上更注重用户体验。

如果你看到如下这张图，脑袋一定非常头大，因为信息量过载了。

但如果看下面这张图：疫情人群流动情况，虽然信息量同样很大，但你却不会觉得枯燥，甚至会津津有味的多看一会。

数据可视化的细节，都是要经过细心构思，才能够获得不错的效果。如今随着Chrome等浏览器的普及，通过浏览器来渲染更加复杂、甚至动态的图形，已经不再是技术难题，甚至Echarts等组件，还把这种能力给普及了，真正做到了人人都是可视化高手。

所以，今天的数据可视化，已经不再局限于数据科学领域，而是延伸到了设计领域。

说了这么多，现在就谈一点干货：如何准备数据可视化的工作。

到了具体执行的层面，“数据”部分就变得更重要一些了。这里我们先简单罗列一下实现数据可视化的几个步骤：

• 明确数据可视化的目标；

• 产出需要使用的数据表（维度、事实等）；

首先，我们需要确定可视化的数据是围绕什么主题或者目的来组织的，简而言之，一个具体问题或某项业务、战略目标的提出，其实就可以对应一个数据可视化的主题。

其次，整理数据要有一个意识，即由于前端渲染能力的有限，我们不能展示过量的数据，所以需要在源头对数据进行清洗和加工。具体需要考虑的方面包括：

• 数据的结构是列表还是树形结构；

• 是否需要对数据进行聚合，还是需要支持下钻；

• 前端是否需要加工数据逻辑？

再次，在确定数据的基本情况后，我们就需要对数据表进行加工，由于通常在数据仓库层会选择Kimball维度模型进行建模，但这种模型往往无法很好的支持数据报表的展现，因此需要对数据表进行额外的加工，如行转列/列转行、连续性处理、周期指标计算等。

最后，就是选择图表类型，并进行展示啦。

|0x04 如何选择图表类型

图表的类型非常多，刚上手的小伙伴们往往会看晕。

|0x05 如何选择可视化工具

“工欲善其事，必先利其器。”即便我们脑中有了清晰的表达方式，但如果没有合适的工具，还是无法完成数据可视化的宏图大业。一般来说，我们有四类工具，可以帮助我们来实现数据可视化。

第一类是专业的绘图软件，例如PS、AI等，设计师小伙伴们会很熟悉，我们可以把数据做成大概的样子，交给设计师帮忙进行美化，做成海报、新闻稿的样子，但这种方式非常的偏重具体结论，很难复用。

第二类是图表插件，像大名鼎鼎的Echarts，再例如Highcharts、AntV等，主要通过JS来控制插件的展示方式，在前端页面中非常常用。有能力的公司，也会开发一些特有的可视化控件，用于支持自身的业务。但这种方式开发过程比较繁琐，通过调整一个美观的样式需要非常长的时间。

第三类是一些图表工具，例如最简单的Excel、PPT，或者是Tableau、FineBI等自动化工具，这类工具倾向于个人使用，在汇报工作、整理思路的时候非常好用。

第四类就是一些编程语言了，例如Python和R都有自己的可视化包，只是实现起来比较的难，但数据挖掘的同学就相对常用一些了。

最近有一些趋势，就是Hadoop生态 + 自助BI工具的应用，开始变得普及。一方面是Cloudera / ODPS等Hadoop生态的越来越成熟，另一方面是Tableau / Quick BI等BI工具的越来越强大。其实搭建一个单纯的数据可视化产品，门槛已经降低了非常多。

|0x06 如何优化你的数据可视化报表

接下来的知识，就涉及到数据报表的一些优化工作了。我们经常看到一些报表，会显得非常没有感情，如下图所示：

为了解决图标冗余的问题，我们会通过格式塔原理来优化图表，减轻看图人的视觉负担。完整的原理一共有八项，但我们这里介绍最重要的几个原则：临近、相似和闭合。

临近原则：简单说，当你看到相互临近的两个元素时，你通常倾向于它们是一个整体，例如你看到下方左图时，你会很自然的将临近的三个格子看成是一组，再通过颜色区分，就可以很清楚的理解图表所表达的涵义。但如果看右边的图，柱子间距是等宽的，你就会产生非常多的困惑。事实上，我们很多的图标插件，都是默认等宽的，在显示数据的时候，你只要调整一点点，视觉上就会美观很多，它就是一个好的数据可视化图表。

相似原则：简单说，人在视觉上，通常是将颜色相近，或者是形象类似的元素，当成是一个整体。例如下面的图片中，你会很自然的将元素进行分组。

因此，我们在呈现折线图时，如果将曲线的颜色进行区分，配合高亮的文字说明，会让读者产生非常直观的印象。就像下图这样：

闭合原则：简单说，如果我们将一组元素圈起来，人们就倾向于这组元素是一个整体。像下图一样，不论是用线条勾勒出来，还是用色块衬托出来，你都会认为这是一个整体。

同样的，我们将刚才的图稍稍改造一下，加上色块的衬托，内容看起来就更丰富了，并且不会让人产生困惑。

其实对于数据同学来说，自行调整图表样式会走很多的弯路，而我们要做的，就是征求设计师的意见，将图表一些表达形态固定下来，避免自己乱造轮子。很多设计师同学会给出自己的建议，例如：

• 常规图表不要使用3D效果，体积严重影响人类感知的精确性；

• 长度是最好的表达柱状图方式，长度与感知是线性关联的，如下图，左边看起来要比右边舒服的多：

• 尽量不要过度使用圆角，这样会损耗数据的精确性。

|0xFF 学习数据可视化有什么用

那学习了这么多，用途在哪里呢？主要有如下几种：

• 报表产品：这一类的产品通常业务方非常多、开发时间短、需求不确定，因此如何在提升效率的同时，提升业务方的体验，就是一种很大的挑战。阿里云生态下的ODPS + Quick BI就是一种新的尝试。

• 移动端：现在移动端看数据的需求，比PC端重要的多，不论是对于领导随时看数据的需求，还是业务人员随时监控指标的变化，再或者是技术人员运维的需要，移动端都大有用武之地。而移动端最大的挑战不是在于数据，而是如何在有限的空间内，尽可能的将“可视化”的事情说清楚。

• 地理可视化：疫情期间的很多地理可视化应用，对于社会舆情而言，助力颇多。

学好了“数据可视化”，就是学会了“让数据说话”。

我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。

“得益于计算机技术和海量数据库的发展，个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣， 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响，就像四个世纪前人类发明的显微镜一样……而大数据，将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据，到海量数据，再到大数据，对人类的做事和思维方式都有很大的影响。在《大数据时代：生活、工作与思维的大变革》一书中，作者归纳了大数据的三个特点:

• 更多：不是随机样本，而是所有的数据;
• 更杂：不是精确性，而是混杂性;
• 更好：不是因果关系，而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解，通过图表将杂乱的数据进行科学有序的呈现，使用户找到数据的变化规律以及潜在价值，帮助用户作出决策。就数据可视化的应用来看，应用范围极其广泛，如政府应用、商业决策、公共服务等等。

顾名思义，数据可视化就是将数据转换成图或表等形式，以一种更直观的方式呈现数据。通过可视化的方式，我们可以将大量复杂的数据通过图形化的手段进行有效地表达，帮助用户发现规律和特征，发掘数据背后的价值。

1. 易于理解，有利于发现信息特征

使用可视化的方式来表达复杂的数据，可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式，我们可以以清晰和连贯的方式解释大量的数据，从而让我们理解数据，得出结论。

案例：流媒体平台节目数量的变化

以下图为例，当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时，以表格方式呈现效果如下图：

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图：

经可视化设计后的数据图

在这个案例中，我们可以看到，通过文字信息表达的方式，所有的数据在文字信息的表达中都只是零散的个体，我们很难在短时间内对列举数据有一个大致的了解，更不用说发现特征得到结论了；而在可视化表达中则不同，所有的元数据通过图表形成一个整体，数字信息被转化为视觉信息，通过可视化图表，通过观察点的位置和颜色即可感知到数据的差异，原本需要通过计算数字大小完成的对比，变成了肉眼可见的点的颜色与间距对比，我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现：人脑处理图片信息的速度显著快于处理文字信息，例如一篇 300 字的小故事，看一遍需要数十秒，而转化成图片后则只需要一眼即可记在脑海里。

这表明，在信息的类型中，人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事，帮助用户快速接收、处理信息，激发用户联想并产生情感共鸣。

案例一：新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延，如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

案例二：在叙利亚，谁和谁战斗？

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候，这些团体之间有的结盟，有的敌对，这让人难以理解。但是，Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩，将这些数据简化为一种简单的、易于理解和可互动的形式，让人们可以轻松了解这些团体之间的关系和故事

3. 帮助人们作出决策，加快决策过程

现实生活中大部分的人是视觉学习者，他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此，相比起阅读和理解文本，大部分人更容易通过图表或其他可视化形式来理解数据，合理的数据可视化设计可以提高他们作出决策的速度。

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通，确定他们的业务诉求，也可以理解为确定客户的初衷与目的，从企业客户对数据可视化的需求看来，通常会有两种类型：

• 侧重于汇报展示，主要用途是为了对外宣传、对内展示等，对于这类需求，设计时可强化视觉效果的呈现，对数据进行场景化设计，尝试让数据以一种新的载体，有趣的互动等形式结合展现。
• 侧重于数据分析和协助决策，对于这类需求，一定要清晰了解需求方的业务内容和重点指标，重点关注数据的维度、种类、数量等信息，视效设计上应该优先满足业务诉求。

明确客户诉求，通过设计手段帮助客户达成目标，这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要，我们才能快速推导产品结构、关键数据、视效风格等信息。

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下，一个指标在屏幕上独占一块区域，所以通过关键指标定义，我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢？我个人认为主要还是依据客户诉求，数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是，哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望，选择出一系列关键指标。

对于这些选取出来的关键指标，我们需要对其进行优先级的排列，一般来说，主要指标能够呈现业务的主要逻辑，一般放在显眼位置，用重点元素标识；次要指标围绕主要信息进一步阐述；辅助指标是对主要信息的补充，一般放在非核心区域，或者二级结构中。

通过合理优化关键指标并进行优先级排列，能够保证数据可视化的核心设计的重点，避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现，更进一步的讲，是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发，选择合适的可视化方式来呈现数据。

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的，为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置，横向布局最为常见（人眼的水平运动比垂直运动快，会先注意水平方向的事物），核心数据场景划分在中心位置，占较大面积；其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

在定义设计风格的阶段，从项目背景出发，综合行业类型、产品定位、品牌传播等因素，提取关键信息，构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主，是因为相比于浅色基调，深色背景设计能够有效缓解视觉疲劳，其次深色设计能够更好地营造对比差异以及数据层级，再者深色设计更容易呈现丰富的动态效果，营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性，例如党政机关类项目会慎重考虑用色，应当确保设计严肃，庄重。

数据可视化的设计除了对数据进行合理设计，还需要注重场景感的塑造，例如，我们通过场景化设计可以让某大数据平台成为大型“图书馆”，查看数据的过程就跟图书馆看书一致，场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据，当然合理的构建动态数据效果能够让数据具备“生命力”。

除了尺寸和位置，我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计，容易产生强烈的视觉冲击力。

利用明度的对比，我们可以用深色烘托鲜明的色彩，或者用鲜明的色彩衬托某一块暗沉的色彩，亮色靠附近的暗色衬托显得更加鲜明，其色彩特征表现得更加充分；

正确的对数据进行配色，让数据传递出的信息更清楚、更明白，例如国内 A 股，红色代表涨，绿色代表跌（美股绿涨红跌）如果给国内的股票、金融等相关客户做数据可视化设计时，需要避免不同地区文化所产生的差异。

随着数字孪生概念的火热，越来越多的企业热衷于打造自己的 3D 数据可视化产品，那么 3D 可视化就一定比 2D 强吗？

数据可视化设计本身就是为了高效传达数据信息而服务的，相比平面呈现，3D 最大的优势在于多了空间维度，适合那些需要跟空间结合的数据呈现，例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗，显然不是绝对的；需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化，就是把大量复杂抽象的数据信息，通过 3D 模型以视觉方式呈现出来，帮助人们理解和分析数据。相比于数据 2d 可视化，数据 3d 可视化具有以下的优势：

• 展示空间相关的数据，因为空间数据具有三个维度，如果想要将其以视觉方式直观呈现出来，就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况，此时只有 3D 数据可视化能够帮助我们达到目标；
• 视觉冲击力更强，相比于 3D 可视化从视觉上表现力更强；
• 场景/对象仿真，在一些需要高度仿真的项目，例如与军事、地理勘测相关的项目中，数据 3D 可视化就不可或缺了，无论宏观态势还是细微结构的精密运行，数据 3d 可视化都可以将相关信息清晰呈现给使用者，将真实的环境、对象搬到屏幕上，降低使用者的认知成本。

在一个实际的数据可视化产品项目中，有必要应用 3D 数据可视化的情形；

• 需要通过对场景/对象进行仿真，减少使用者的认知成本和学习成本
• 需要依靠 3D 效果来提升视觉冲击力

相比 2D，3D 的设计与开发成本相对较高；其次 3D 场景会容易产生视角遮挡以及操作成本等问题，那么从实际项目出发合理选择才是最重要的。

设计稿完成了并不代表设计师在这个项目中的工作就结束了，在后续的开发工作中，设计师还要与开发人员合作，减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易，尤其是 3D 可视化设计，我们会使用相关 3D 工具制作设计效果，但 3D 设计工具与最终开发引擎存在着色、渲染等差异；在这个时候我们需要灵活运用开发引擎特性，提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识，帮助设计效果实现同时也提升对接效率。

测试客户终端上线是否正常，有无适配所造成的兼容性问题；排查有无视效及体验问题，同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿，加载缓慢等问题，在保证视效基础上尽可能压缩相关美术资源，减少不必要的效果计算和内存占用量，根据实时效果需要不断优化性能提升产品体验度。

趋势一：数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大，通过人脑分析复杂数据变得越来越困难，我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据，为企业节省了宝贵的时间和资源，目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

IBM 数据可视化专家 Mauro Martino 创建的仪表板，允许用户可视化新闻中出现的主题

趋势二：数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知，从而帮助人们更好地使用数据。通过结合 VR、AR 技术，用户能够更好，更快地理解、分析数据。最近进行的许多研究表明，VR 和 AR 具有较强的感官体验，可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析，并更快速地找到解决方案。

趋势三：数据可视化 ╳ 实时数据

在数字时代，事物变化很快，企业需要对数据告诉他们的信息做出快速反应——正因为如此，实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间，企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式，如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

趋势四：数据可视化 ╳ 全面体验设计

以用户体验为核心的数据可视化设计是一种重要趋势，将用户放在第一位，然后是数据。无论处在哪个行业，设计师都应该遵循类似的思考过程，从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题，以及他们面临哪些可能的困难？他们需要什么信息和功能来解决这些问题？我们如何以最佳方式为他们打造数据可视化？

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并，帮助用户进一步钻研数据并发现模式、趋势和相关性。

数据可视化是一门同时结合了科学和艺术的复杂学科，其核心意义在于清晰的叙述和艺术化的呈现，这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ，只有最终达到帮助用户理解数据和做出决策的目标，才能发挥它巨大的价值和无限的潜力。