信息可以很美（下）

第二部分

信息可视化的分类

　　信息可视化本身有三个主要分类，这些都会在我们之后运用到。第一个是charts，图表，就是数据量化后的图形；第二个是diagram，我们叫它示意图，解释原理，说明现象；第三个是map，地图，从古至今一直都被使用的一种信息可视化方法。这三种类型经常会A＋B，B＋C或AC一起出现。

1

  地图  

　▲

　　我们来看一下地图，最有名最经典的地图应该就是伦敦地铁图的设计，早期的地铁图和真实地理相对应的，真实怎么弯，地图上就怎么画。直到有一天一个意大利设计公司说，其实人在地面下的时候根本不在乎真实地理是怎样，最关心的信息是起点和终点，在地铁上感受不到那些弯曲。基于这一点，他们对地铁图进行了重新设计，只保留这一张图中最有用的信息。因为看一张图最有效的信息是为了追踪，追踪这个线路怎么坐过去，这样追踪能力就提高了，所以它改成了这样的设计图。当然设计最大的问题就是我们不知道地面上是什么样的，比如今天有一些人第一次来北京，他在坐北京地铁的时候，比如从A站到B站，对我们来说北京最重要的地标是环线，但现在在北京地铁里面你是感受不到自己的位置在几环。伦敦地铁图的设计就考虑了很多，伦敦是分区的，1区2区3区，当下车的时候知道在哪个区的。虽然把多余的信息去掉了很多，但保留了地区的划分。

　　▲ 

　　其实很多女生看地图是有障碍的，很习惯用第一人称视角来看左手边是什么建筑，右手边是什么商店。设计师基于人本身很难判断自己的位置和方向这个需求点来做设计。人们习惯作对照，前边是什么左边是什么。这个图就结合了两个优点，当站在这儿的时候清楚的映射出，我看到的和现在所处位置是一致的，已经有一个很稳定的参照系了。其实没必要知道我是朝哪个方向的，对于鸟瞰图来说，它是要容纳尽可能多的信息，我描述的地方周围还有什么，要经过哪一个路线。那这样就结合了两个图，可以边走边浏览自己当时的所在的场景，同时也可以看看目的地是不是在视线范围内，通过这种方式解决了对照和追踪这两个最主要的问题。

2

  图表  

　　▲

　　 图表其实就是把一些数据量化后，用图形面积的量化和颜色的变化来表示。这本书里的这张图讲的是当海平面上升的时候哪些城市会最先被淹掉，纵轴代表的是海拔高度，另一边就是普通城市的剪影。《信息之美》这本书是我当时和几个同学一起翻译的，书的作者是一名记者，并不是设计出身，但他从小就有一个愿望，他从小学了很多别人不了解的知识，靠自己挖掘出来的信息，其中很多是无效信息或错误信息，他希望别人少走弯路，能很快获得自己小时候遇到那些问题的答案。我们这里的问题就是当海平面上升的时候，自己的城市会不会被淹掉。大家从小到大都遇到这样一些问题，他也一样，所以他长大之后找了一些人把可能遇到过的问题都列出来了。号召大家把知识做成容易理解的信息，于是就诞生了《信息之美》，里面有很多这样普适性的问题。大家可以看看这本书，这本书的表现手法很简单。大家以后做需要大众理解接受的信息时，可以参考一下。

　　▲

　　这张图是通过圆的面积大小来表达不同数据的多少，还保留了基础世界地图的分布位置。这里面用到的信息方法有颜色来区分不同的地区，圆圈大小来代表不同排放量的大小，同时还用线条勾勒区域映射真实地图。怕有些人看不懂这些和地图的关系，还在上面映射了真实地图，上面是真实的，中间是抽象的。因为他强调的是排放量而不是真实的地图，所以他把地图弱化了。

　　▲

这也是个很典型的图表，是一个面积的图表。面积大小代表能源的使用情况。随着时间推移，我们使用能源的结构发生了改变。未来代表太阳能这个黄色的区域会变大。在做地震消息时，图表这类型是最经常用到的。

3

  示意图  

　　▲ 

　　示意图用来解释原理、现象、对象等等。这张图大家可以看到没有任何量化数据后的东西，只是告诉你一个现象，结构，一个机关，以及里面细节的血液运动原理，呼吸原理等等。为了让人便于理解阐述的事情本身，所以用真实数据图解的方式。这个图来自大英百科全书，大英百科全书出过一系列电子版，在网上可以找到，可以用信息可视化的方法表达某个信息点。

　　▲ 

　　这张图指的是太空垃圾，一些碎片会散落到近地轨道上。这张图是想找出制造太空垃圾的罪魁祸首。这里面有映射出一个国家的发达程度。比如说这个是美国，这个是俄罗斯，里面白点代表的是正在运行的卫星数量，边上黑点是报废的卫星数量。对比关系非常强烈。这个白色特别少，废掉的特别多，造成的垃圾也特别多。这张图其实已经很接近图表，如果把这些变成色块，那他就不是一个简单的示意图了。现在描绘真实的场景，还是一个示意图。所以图形之间转换的边界很模糊。但这样才更具有纪实感，真实感，这张图让我们感到更严谨，获得信息的强度更浓烈。这是我们很熟悉的设计方法。通过这种方式表达技术以及原理。这种图表呢，通常都出现在杂志上比较多，用来解释一个原理。

第三部分

信息可视化的要求

　　做好信息可视化很难。大家通常只看到一个结果，在这个结果之前有很多事情要做。前期准备工作的量，远远大于你做一张图的工作量。像我们做信息图，一般都是能拿到现成的数据，但是有时数据你不一定有，得自己去搜索。

　　信息搜集工作是展开工作的第一步，第二步是信息整理。信息整理不仅指搜集信息装在文件夹里，重要的是甄别真信息和假信息。当你把一个东西做成信息可视化的时候，意味着你要做一个原子弹，原本它可能只是一个导弹，但是当你做成一个图表的时候，信息都放大了，所以你要甄别好信息，确保信息的真实性。还有就是说要保证信息的完整性，不能东西做了一半你才发现信息不全。

　　接下来是信息的逻辑分析，必须要知道，在做信息可视化的时候首先需要传达什么信息。这个信息在设计里要被放大或是被强调。次要的是需要给信息重要性排列出一个逻辑。所以刚才看到的图都很简单，要把信息逐级划分，合理安排它们之间的位置。有了这些之后，就可以用草图或是ppt的方式简单勾勒一下。

　　信息可视化的作品有一些基本要求

　　信息要真实和全面。

　　逻辑要清晰。

　　层级要合理。要给出符合预期的逻辑和信息，不能给不需要的信息。

　　情感，我们希望做出来的东西能打动人。

　　但是信息可视化本身是一个很客观的事情，要打动人其实很难。这就意味着必须抓到对的点。刚才我们看的这些例子，地铁可能打动不了你，跳桥那个可能能打动你一些。国旗那个应该很打动你。它们能一步步满足用户不同需求。能让你满足情感上需求的作品才应该是最好的。

　　▲ 

　　大家来看下这张图，这张图可能和地震的性质有一些接近。它指的是伊拉克战争里面的伤亡人数。左边这张图是第一版设计，这是第二版设计。大家可以很容易对比出两版设计之间的差异。第一个差异是颜色的使用。第一版当时他们希望突出的主题是和死亡相关的所以用了黑色，哀悼的时候大家最常见的是黑白色。但是发现，用了黑白色之后差异性变得非常弱。没办法让用户一眼就抓到原来伤亡人数里面大部分是平民。在另一个图里面，所有红色，橙色，偏暖色的都是平民。绿色和蓝色表达的是伊拉克士兵，有的是联合国维和部队的士兵。所以看第一版没有用颜色，这个信息完全没法传达到。第二版的设计加入了颜色。同样它保留了震撼的结果，原来死了这么多人，并没有因为加上了颜色而减少了关于死亡的沉痛感。第二个信息是地图被弱化了。第一版里面的地图为每一个伤亡的人都做了连线，表达人们都在哪发生了事件，结果发现没有人会去关心这个人死在哪里。重要的是哪个地方死得多，哪个地方死得少。所以在第二版通过颜色深浅的差异表达不同地区伤亡人数的严重程度，而且把连线去掉了。还有个很明显的差别是信息的构造，大家不要觉得柱状图是一个很简单的图，体现不出水平。很多时候柱状图往往是最容易，最直接的。我记得几年前有一次中央发布年度预算，当时有一个新闻社的稿子，说今年财政预算政府报告第一次引入了图形化的表达方式。当时我就想这件事很厉害，国家开始搞图形化，然后我就翻会议材料结果发现只有饼状图和柱状图，我开始有些失望，直到我看了一些评论，说今年的财政预算报告和决算报告我能看懂了，以前都是Excel表，现在一目了然的看出哪些预算做了调整、大政方针有哪些侧重，其实很多受众只希望你前进一点点，帮他改善一点点。而且如果处理做得过多、用力过猛反而很多信息捕捉不到。永远记住我们做信息可视化的第一目标是传递信息，并不是让他变得更好看或者更绚丽，这是次要的。大家可以看到做了这些改变之后信息还是这些信息，但效果更好了，而且会很美很丰富，有细节有整体。因此，不用做那些炫目的阴影效果、发光效果，信息如果合理的表述出来且能被人读懂就是最美的。做设计师必须有责任感，你有义务把好的东西带给所有人。我认为好的东西就是谨慎的使用颜色、谨慎的使用设计手段、让所有的设计手段都是有目的、有意义的，就是为了传递信息。

　　▲ 

　　后面这张图就是我们去年和中国地震局、台网中心合作时做的一个范例，下面我们会用饼状图、柱状图的方式来表达细节。我先讲一下里面的一些图和一些概念，第一张图是烈度图，它是一个复合型的图表，里面既有地图也有柱状图，它是两种图形的结合，表达目的是让大家知道地震发生在哪里、震级是多少、周围有哪些城市、这些城市的受灾程度是什么，这两张图的受众不一定是老百姓，更多的是去执行救灾工作的人员或者对现状有足够概念的人员，所以可以把图做的相对复杂一些。但对公众的复杂程度就应该相应降低一点，不要在一张图里表述所有的东西，可以分多张图依次去表达，下面用饼状图和柱状图表达信息。当然我们也会辅助一些照片，因为照片可以更为直观地表述灾后现状，如果这时候去画矢量图就没必要了，怎么传递表达信息最有效的我们就选择什么方式。我们在这次比赛中的短板就是我们并不懂地震信息，不知道哪些信息需要表达、该以什么方式进行表达，也不知道受众愿意看什么样的信息，所以你们很难抓住很好的点。我可以给你们传授一些经验，作为学生、作为参加竞赛可以不用考虑实用性，因为参赛作品不可能真正拿去用，我们只是想看到大家一些闪光的创意，所以你们只用考虑怎么把那些打动你、吸引你的地方用独特的角度表现出来、分享出去就可以了，不要有地震信息必须严肃认真这种心理负担，比赛不要束手束脚，要放飞想象力。这两张图就比较严谨认真了，我希望你们可以更天马行空一些，把你们关心的点或者对地震的理解加入进来。

　　看过火星救援的朋友们可能会注意到美国NASA发射中心的操作界面，当然这是一个虚拟界面。这种大屏在国内也有很多应用的场景，比如每年天猫双十一都会有大屏实时监控每天卖了多少亿，哪些商品得了第一名。几年前没有哪些地方需要信息可视化设计的，可现在信息可视化被应用的特别多，包括杂志、互联网、媒体，连地震局这样相对保守的单位都会有这些需求，可见现在大家的需求有多强烈了，而且现在的设计也变的越来越实用了。大家可以对比下中国发射的界面，感受一下差异在哪里。不是说我们一定不好、国外一定很好，只是想让大家了解一下怎么让一张图变得好看，其实原理和让UI设计、网页设计变得好看差不多，设计都是相通的，你们能把之前的设计好、地震局这些信息肯定也能做好。中美的这两组图都是很基本的设计概念，第一个是对比关系，大家可以在图里看见一些大块的小块的信息，一个图形要想看的舒服一定要有对比关系，这个对比关系就比较合适，有大、中、小之分，我们再看中国的，中间的屏特别大，周围的信息特别小，它的对比关系缺少中间过渡的元素，所以应该安排几种层次不同体量的内容。第二个是颜色的使用，美国NASA的发射中心界面大部分使用的是蓝色很统一，用不同层次的蓝来刻画强弱关系，也能看见一些简单的红色暖色线条刻画重点信息和警告信息，而中国的发射界面在很多没有必要的地方使用了红色，因此使用颜色一定要谨慎，要想清楚它在你的色彩体系里发挥的作用是什么，如果没有必要不要轻易加入任何一个颜色。还有就是用户在阅读信息的时候总是以区域来划分的，尤其是这种大格局的图，区域划分应该非常明显，但另一张图很难感受到区域划分的界限，所以要合理的安排位置。看每一个作品的时候我们都应去思考有哪些值得学习的地方，信息可视化、UI、APP的设计都是一样的。此外就是整体传达的感觉，他用蓝色来提高科技感和未来感，表现出精确可靠的感觉，作品一定要营造某种气氛，如果我说这张图是天猫双十一的设计你肯定就不相信了，一点激动人心的热闹劲都没有，另一张我感受到的就是紧张，营造气氛的调子应该是在你设计之初就定好了、你的设计想表达哪种气氛、想输出哪种感情的，之后所有的设计元素都要奔着这个方向去，为最终目标而努力，这就是气氛的营造，要用你的作品输出某种潜在的情感。

　　今天我要跟大家分享的经验就是这些，谢谢大家！