中国数据新闻工作坊培训手册第七章 – 可视化原则和基础

分享给朋友:

不是每个数据报道都需要可视化,但可视化的确很受人们欢迎,是传达信息的一个好方法!在本章中,我们将试图提供一些创作好的可视化的基本原则。

设计一个可视化时你必须重点考虑三个方面:数据呈现、平面设计、以及互动。科学家们通常只考虑对数据的呈现,即如何在屏幕上显示数据。但是,我们也必须关心呈现的外观,即其是否引人、明晰和有趣。再者,因为因特网是一个互动性的媒介,我们可以创作互动性的可视化。

数据呈现

数据呈现指的是数据如何在屏幕上显示。数据通常是数字信息,而数据可视化的核心是将这些数字转化为图像。从可视化必须有可能回到原来的数字,否则我们就没有真正显示了这些数据。也就是说,数据和其可视化具有同等信息。但这点并不能解释我们为什么更喜欢可视化。可视化之所以有用,是因为我们的眼睛和大脑都具备非常出色的视觉分析能力。

请大家看一下这个图像:

可视化原则和基础1

红色那条线马上就很显眼。你不用做任何思考就能注意到。现在再看这个图像:

可视化原则和基础2

你肯定很快就能看到横向的那条线,但你的头脑需要稍微做一点思考。现在看这个:

可视化原则和基础3

要找到那个不同的线条,这次你可能需要花更多时间。你也许得好好看才能找到。这些图像表明,某些类型的视觉信息,我们的眼睛和大脑能够立即接受,不必思考,也不必花时间去专门看,而其它类型的就不行。这种现象叫做“前意识处理”。这些图像显示了“冒出”这样一种特定类型的前意识处理。“冒出”使得我们不用思考就能找到一个不同于其它的物体。

所有的可视化都依赖我们不必思考就能看见的能力。我们的大脑除了通过“冒出”找到物体外,还能做很多别的事情。比如,我们能够比较物体。我们不必思考就知道那条线更长,或者那个圈更大。这就是可视化的力量, 即瞬间传达。

可视化原则和基础4

但这也意味着如果我们违背了可视化设计的原则,读者会一瞬间就得到不准确的图像。比如,下图中最后的一个条形与第一个条形相比,大多少?

可视化原则和基础5

只粗看一下图的话,最后一个条形也许比第一个高出两三倍。但请看一下数字,两者之间真正的比例为88 比83,所以其实两者之间只是10%的差别,但看上去却很大。有多少读者会花时间去检查此图的标度,注意到两者之间的区别其实并不大?这正是数字标度通常都应该从0开始的原因。这样,视觉上长度的变化才能和数据的变化相一致。

基础图表类型其实只有有限的几种,都利用视觉比较的原则。因为这些类型众所周知,除非在特殊情况下,你才有必要设计自己独特类型的图表。你的新设计也许美观,但也许意义很难让人理解。

可视化原则和基础6

可视化原则和基础7

柱形图通过长度比较传达信息,而折线图通过角度比较传达信息。通过用线条来连接各点,我们激活了大脑中对角度敏感的那个部分。另外,线条暗示了一种顺序,所以折线图不应当用于没有固定前后顺序的数据值。比如要表达一个国家里各省或者一个公司里不同部门的名字,应当使用柱状图。

有关什么时候使用什么类型的图表,有很多基本原则。事实上,有些书籍整本内容都是可视化的例子和新闻数据可视化的原则,比如华尔街日报信息图表指南。有的时候这些原则不过是个人喜好,但观察其他设计师的做法一向很有帮助。

直方图是另外一种基础图表形式。它不像一个正常柱形图一样明显,因为它不直接显示数据值。相反,它的横轴代表有多少数据是在某一特点数字区间内。形象点说,就是把数据分放到“篮子”里,然后计数每个篮子里有多少数字。直方图是了解数据值总体分布情况的一个好办法。

可视化原则和基础8

上述所有图表类型都是针对一维数据的。你可以把柱形图和折线图都看作是绘制单个数字列中的数值,随着你沿着此列往下走,你也在绘完此图。直方图也是显示单个列里的数据值。要比较两列数据中的值,你可以使用散点图。

这是一个自然喷泉,名字叫“老忠实”,因为它喷发很有规律。多年以前,有些人开始探讨这样一个问题,就是该喷泉喷发时间的规律:每隔多长时间喷发一次?每次喷发多长时间?两者之间关系如何?要是你等下一次喷发等了很长时间,它会不会喷发时间更长?

可视化原则和基础9

你可以记录每次喷发的时长,以及两次喷发之间的间隔时长。这就像一个有两列数字的电子表格一样。我们可以使用一个散点图来比较这两个变量。

可视化原则和基础10

散点图显示了两簇散点。它表明老忠实有的时候两次喷发之间间隔55分钟,每次喷发持续约2分钟;其它时候两次喷发之间间隔约为80分钟,而且在这种情况下,喷发时间长些,约为4分钟。这种规律如果我们每次只就一个变量绘图是看不出来的。

我们可以通过使用颜色、大小或形状来同时考察三个变量。把数据转变为视觉表达的方法多种多样,其中有的更容易被人眼接受,有的更有道理。比如,蓝色是否比黄色表示更高或更低的值?这个问题没有标准答案,所以颜色不能很好的表达量化值。相反,大小或者方位常常更有效。但颜色却能更好地表达范畴性数据。形状也能很好地反映范畴性数据,但不适于连续性数据。

面设计

参见丁辰 “视觉传达设计基础”

焦点明晰

一个复杂的可视化应该逐步来显示自己。可视化必须能够让人一目了然。所有最佳的可视化,事实上所有最佳的艺术作品,都具有这一特点,让你一眼就能看到激动人心的东西,使你想就其了解更多内容。如果可视化给人的第一印象很乏味或者太复杂,用户就会点击别的内容,根本不愿再去继续看你的作品。但是,这并不意味着可视化不能用来表现很复杂的一个故事。事实上,可视化很擅长于表达复杂的信息。但这些信息必须逐步出现。

可视化原则和基础11

在这个可视化里,你看到的第一个东西是一个大图表。但是,如果你想就棒球的全垒打做更多了解,此可视化中有巨量信息。比如,你可以进一步去看,从而了解史上著名球员情况或者球员如何变老等等。即便你忽略了这些信息,你仍然可以了解到该可视化所要传达的基本点,那就是,该球员按全垒打的历史记录来说,处于一般水平。将此可视化与以下设计进行比较:

可视化原则和基础12

你无法一眼就从中了解到什么东西,因为此设计没有一个明晰的焦点。用户需要花太长时间了解其传达的内容,而且其中诸多元素的排列缺乏一个清晰的等级关系,用户无法知道应当按什么顺序看这些元素。

但可视化最重要的原则是:保持简洁。在你对设计进行试验时,你很容易被诱惑来作出很复杂的东西。但是请记着,读者不是数据可视化专家,你的报道或者你的所有投入,对他们来说都无所谓。

近景和远景

数据可视化中还有一个非常有用的大原则,那就是近景和远景的概念。远景一下子显示所有数据,来表达整体。

可视化原则和基础13

而近景显示与每个特定读者相关的信息。比如,我所居住的城市的所有污染指数。

可视化原则和基础14

当然,给人们看具体针对他们的信息,只是在网上媒体成为现实后才有可能。所以这一设计的各种可能性仍在被大家探索。

互动设计

数字媒体是互动性的,也就是说,用户可以动手,而不只是坐在那儿被动的看。但用户如何知道自己可以做什么呢?你必须告诉他们。

让用户知道自己可以做什么的唯一办法,就是你使之很明显 - 非常明显。大多数设计新手意识不到自己的设计必须要多么简单和清晰。下面这个例子很清楚地告诉用户做什么:

可视化原则和基础15

移动设计

移动端是很流行的获得新闻的方式。但移动端屏幕很小,从而改变了我们设计可视化的方式。为移动端设计可视化基本上有两种方式。第一种是响应式设计,就是对你的网页编程时,使得它能够根据屏幕大小自动调节页面;第二种是直接为移动端做设计。这叫移动端第一或移动端本身设计。

这是来自美联社的一个可视化。同一个页面适用于各种大小的屏幕。请注意看,当屏幕变窄时,文字和图表如何重新排列。

可视化原则和基础16

可视化原则和基础17

美联社的设计师们在制作此可视化时,不断地调试在不同大小的屏幕上它如何显示。但实际上,我们无法保证同样的可视化会在一个小很多的屏幕上正常显示,因为用户体验会很不同,甚至连你按摁钮的方式都不同:在移动端上,你用手指而不是鼠标。

下面是《纽约时报》选举结果图示在电脑屏幕上的样子:

可视化原则和基础18

下面是它在手机上的样子。设计完全不同,只显示那些结果难卜的州,因为那些州会投哪个党的票很难预测。

可视化原则和基础19

所以当你为移动端设计时,你必须作出这样一个选择:你会使桌面版在窄屏幕上也能显示出来,还是真的需要一个完全不同的设计?上例中,他们决定地图在屏幕小时不好显示,所以没有必要。

用户检测

你已经花了巨大力气,已经精心选择了一个数据呈现方式,你已经制作了一个美观的平面设计,还对用户在和你的报道互动时会选择什么路径都做了充分思考。你的作品效果如何?

回答这个问题有两种方式。我们可以考察效果指标,比如有多少人看了和转发了此可视化。但还有另外一种很重要的方式,即用户测试。这种方式很简单: 你把你的可视化作品给从未见过它的人看,然后观察他们做什么。这就好像用崭新的一双眼睛来看你的报道。

使用效果指标在实践中可以变得很复杂。比如,你不光可以衡量一个互动作品被看过多少次,你还可以测量其中每个功能的使用频率。下面是一个有关奥斯卡电影奖的互动作品。制作者测量了每个功能被使用的频率。你可以以礼服颜色、式样、制作年度或很多其它标准对照片进行分类。

可视化原则和基础20

在这里,红色意味着无人使用此功能,黄色意味着很多用户使用了它。观察这些测量结果,你可以做出结论说,制作此互动作品的大多数努力都白费了。用户们只把这些照片逐个点击了一遍,就像看幻灯片一样。这说明或者这个用户界面不好,用户们不知道它们可以按礼服式样和颜色分类,或者他们知道可以分类,但没人想这样做。作为设计者,你或者给用户更多他们想要的东西,或者你可以修改这些无人使用的功能,使用户用起来能有满足感。

效果指标能够告诉你设计是否有问题,但却没法告诉你为什么。没有什么可以替代观察用户和你作品之间的互动。这里牵涉到的基本技巧就是“大声想”。在发表你的作品之前,先给从未见过该作品的人(比如你的新闻编辑室的人)看 ,请他们把看作品时想什么和做什么都大声说出来。与此同时,你观察他们做什么。只要倾听用户评论,观察用户动作,我保证,第一次做这样的尝试时,你会就你的作品了解到大量东西。要成长为一个好的设计师,一部分就在于养成用户对自己作品反应的直觉。但是,如果你从来都没有过看别人反应的经历,你是无法开始培养这种直觉的。

设计草稿

好的数据可视化设计是一个不断修改的过程: 你要先做草稿,然后对草稿进行多次修改,直到找到有效的表现形式。下面是显示美国两次总统大选结果的一个可视化 (原件是动态的,所以值得花点时间去看)。

可视化原则和基础21

这是一个很美的可视化,让用户很容易对两次大选做比较。它对很多设计元素,包括颜色、动态、互动等的使用都是经过深思熟虑的。但该可视化不是一个下午就创作出来的,而是经过了整个一个设计过程。这是设计过程中的一些草图(来自chartsnthings blog):

可视化原则和基础22

大多数可视化都经过很多版本或草稿。有的时候这些草稿不过是画在白板上的,或者是一个数据可视化报道中的测试部分,或者是前期网页。就像一篇出色的报道一样,你不可能通过一个草稿就产生一个很棒的可视化。


点击进入下一章节:视觉传达设计基础
想回到目录请点击这里

作者简介

数据新闻工作坊

数据新闻网以引介全球范围内最顶尖的数据新闻实践为初衷,以推动数据开放及媒体革新为宗旨,面向中国的新闻从业者、媒体管理者、新传教育者以及对传媒感兴趣的设计师、程序员,提供线上信息平台与线下交流机会。