内容以博客形式展现  谭唯：网易“数读”的信息图表运

新闻中国采编网 中国新闻采编网 谋定研究中国智库网  国研智库 国情研究  商协社团 谋定论道 经信研究 哲商对话 万赢信采编：网易“数读” 是近几年新开辟的栏目，内容以博客形式（datablog）展现，说明文字与信息图表（静态图表与交互式信息图表都有出现，比例大约是 20：1）结合，色彩轻松活泼，板块清晰大方，可以说很恰当地实现了创作者的栏目设计主旨：用数据说话，提供轻量化的阅读体验。本文将以“数读”为例，从理念出发就怎样设计优秀信息图表谈些看法

一、大脑如何阅读

我在 Connie Malamed所著的《Design For The Human Mind》一书中读到些很有趣的科学论证，她提到当阅读行为发生时，大脑会进行一个较复杂的处理过程。所以在探讨设计之前，让我们先来看看阅读信息图表时，大脑怎样运作。

1.找标题：读者在阅读信息图表时通常会先找标题。以上图为例，标题并不像以往呈现在最上面，而是在下方。根据图表的设计形式，数读的标题会出现在图形中的任意位置，为了突出，标题旁边一般会配有网易新闻数读版块的小Logo，标题以字号大小及颜色来区分，字体基本没有变化。

2.粗略扫描：读者也许会先花时间扫描全图，了解信息图表的整体结构，数据分类以及复杂性。

3.搜索信息：为了找到数据，读者会顺着图示图形以及色彩直到发现有用的信息，当用户对信息图表的结构熟悉，或者上下文的图示图形色彩相同的时候，视觉搜索会更迅速的完成。

4.提取信息：找到目标数据后，读者就从表中提取出一条基本信息。

5.理解：读者倾向用他们已有的知识去理解已从信息图表中获取的信息。

6.比较：读者将会比较数据，并发现规律。

7.推断：为了更深层次的理解数据变化，读者往往会推断一些结论。

8.分析：读者将会对图表下方的文字进行分析，并结合自身知识库中提取的信息，来解释数据的意义。

9.回忆：读者会想要记住其中一些信息，以便在将来使用。

二、设计指南与受众需求

1.提供新的表达方式

传统的柱形图、饼图有可能会带来审美疲劳，可以尝试从图形的视觉样式上进行一些创新，常用的方法就是将图形与指标的含义关联起来，并进行信息组织，有效信息图表的一个主要方面是由视觉结构体现出组织性。当信息被梳理后分块成段，对视觉信息的加工就变得容易了。所以在“数读”中图表往往会以异形的方式出现，例如和飞机有关的会有飞机的剪影，和足球有关的会有足球与绿茵场的抽象化形态组合。

如下图：石油支撑起来的委内瑞拉经济。视觉上以油桶作为图表的主题元素，一目了然，GDP总额用橙色表示，石油出口额用黑色圆点表示，黑点被橙点包裹，在大小变化上指明两者之间的关系。

2.移除无用元素

在信息设计中，遇到最棘手的问题就是信息量太多而显得设计结果不尽人意，那么在砍不掉需求的前提下，如何解决这类问题呢？

网易“数读”为了保证快速浏览，集中展现最重要的数据，往往避免在图表周边堆砌各种不相干元素。如果想让图表中的数据自己说话，就不要让它被周边的装饰所淹没。在操作上可以采取一些简单有效的原则，如：扁平化设计，你可以通俗理解为使用简单特效，或者无特效来创建的设计方案，它不包含三维属性。诸如投影、斜面、浮雕等特效都不宜在设计中使用；避免使用背景照片和图画。几乎所有“数读”的信息图表都在遵循这一原则。

如下图：中国对世界经济的影响。这张图表只用了蓝色系由浅入深的渐变，就可以体现影响小（浅蓝色）到影响大（深蓝色）的区别。内容上只标明了国家与百分比，再简洁不过。读者可以通过外圈之间大小的对比、内外圈大小对比以及圆圈颜色的深浅了解到很多信息。

3.创造视觉层级

可以使用格式排版来标注重点并引导读者注意力，例如标题可以放大或者加粗，高亮可以引起注意。视觉记号可以使表格变得易读，使读者知道哪些内容更重要。

很重要的一点是，一个信息图表至少适用于两个层次。最初的一瞥，给读者以大的图形轮廓，例如下图，最重要的趋势、最密集的家庭数所处板块或是一个快速的比较。这能够使受众了解到：这张图表是关于哪方面的、主题是什么。之后读者才能对下一个层次进行分析，这又涉及对细节 的审视与互动。

4.比例精确

在许多图表、略图和分析地图上，各类要素代表了数量，因此准确的尺度和比例很重要。如果一根柱状图形比另一根长一倍，读者会假定其数量上也多一倍。当统计图中一个圆的面积是另一个圆的一半时，我们会解读为小圆所代表的数量是大圆的一半，如下图所示。尽管这是个简单的概念，但做到精确却并不容易，这一点在使用面状符号表示数量的时候尤为明显。这时候你需要依靠数学公式，而不是构思时用的眼睛。

5.定义调色板

颜色可以用来区分信息图形上的数据类别和维度，是数据可视化中最常用的视觉变量之一，也是情绪表达方式或者说是性格特征的体现，每种颜色都有着属于自己的声音。作为一种视觉元素，色彩是很难被衡量，也很难用理性的角度去分析和阐述它。所以当你选择颜色时要慎重，不能漫无目的。你所选择的颜色要适合你的目标受众、能表达客户希望你传达的信息，能符合读者在信息图形上获得的整体感受的期望。

在“数读”中多数图形使用的是相近色、浅色或者对比色，但使用颜色的总类基本会少于三个，背景以白色为主，与其扁平化设计理念相辅相成。

6.文字的韵律

任何字体都有其独特的风格，在设计时，通常为表达某种情感而选择字体。对字体情感的产生是因为对某种字体的内在韵律，而产生的视觉反应。使用基本的字体和字号，在不进行其他特意变化的情况下，根据文字 本身的特点进行调整，使文字排版在横向上和纵向上都产生客观自然的韵律变化，使字体排版的律动更加连贯顺畅，赋予设计师所想体现的情感。

“数读”里，设计师基本只使用一种字体，用颜色与大小来区分主次层级关系。在信息图表中寻找信息时，读者希望前后采用同样风格。为了保持风格一致，设计师则可在此基础上保证对同类元素使用同样的字体，对同类数据使用同种表现形式。

7.交互式设计

通过对界面和行为进行交互设计，从而可以让使用者使用人造物（即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构）来完成目标，这就是交互设计的目的。从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术。它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点。同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充，并且涉及到多个学科，以及和多领域多背景人员的沟通。

交互设计工作核心在于信息架构和交互细节设计。信息架构包括信息分类以及信息展示逻辑设计；交互细节则多表现为控件的选择，交互效果的定义等。

“数读”中的交互设计类型图表占的比重并不多，多数表现形式以下图为主。上方有年度跨度的滑块可以拖动，鼠标点击地图上面的圆形色块，地图放大，相应数据（此图为具体国家及数据）就会显示在色块旁。

三、信息图表的未来趋势

信息图表也在另一个领域稳健成长。它运用可视化实时数据来描述某些实时事件。而 iPad和 iPhone的流行激起了在这些设备上开发可视化交互式图表的渴望。开发者们运用 HTML和 HTML5在 IOS平台上来创造丰富的交互式可视化界面。比如说一些互动设计允许用户在观看时调整一些变量元素，但是信息图表本身仍然是线性的，这使得每个人看到的图表都一样，又都不一样；或者用户能以类似会话的方式直接参与改变信息图表的顺序甚至结果；再或者用户自行摸索可交互的点和交互方式等等。我们也许可以说，交互式设计在未来的信息图表发展之路中会占主流地位，渐渐取代之前的静态信息图表。

总的来说，读图时代，设计理念及头脑是重要的，技术是次要的。当你掌握了设计原理及规律后会发现万变不离其宗，这其中有对美好事物的追求，也有让读者感到舒适的用户体验。正如大卫·马梅在《导演功课》一书里所说：“艺术家的任务是把最简单的技术学得完美，而不是去学太多的技术。如此才可以使困难的事变得容易，容易的事变成习惯，习惯的事因此可以变得更加美妙！”（作者系南方日报美编）

内容以博客形式展现 谭唯：网易“数读”的信息图表运用