以往文章
【未经书面授权,严禁转载本站文章!】本站所有文章都严格执行版权政策,获得作者亲自授权,受法律保护,请大家珍惜我们的努力成果!请阅读我们的转载注意事项
信息图:概念拓展与设计策略(下) - 2007-11-29
作者 Venkatesh Rajamanickam
阅读本文英文原文 (翻译:Woodear 校对:赵璨)
编辑:赵璨
Infographic设计框架
在一个成功的infographic设计流程中,我们将面临三大挑战:
1. 准确地理解将待传播信息的类型:不论是空间类、时间类、定量类的或是更常见的——上述三类的组合;
2. 酝酿一个合理的形式来表现一个连贯的信息整体,而不仅仅是去堆砌一系列的图状、代数几何图形、地图、时间轴等要素;
3. 选择一个适当的办法来展现:静态的(基于纸面或是电脑屏幕)、动态的(动画或是视频)、或是交互式的(越来越多地被植入网页或其他电子设备,但也存在像孕期预测转盘那样简单的纸制形式)。
尽管拟定时会有难点,拥有一份设计框架将对理解整个infographic的设计流程起到积极作用。下表(表1)就描述了这样一个设计框架:

表1. Infographic设计框架
Infographic设计九大策略
在上一章节中,我们了解了在信息设计的整体流程中infographic的所处位置以及整合方法。在本节中,让我们通过分析一些成功的infographic案例来搜集具体的设计策略。
1. 组织: 组织可用的信息并给出一个呈现它们的提案是设计infographic的第一步,也很可能是最困难的一步。这张火车事故infographic(图18)图释了由一辆突然转向并冲出邻近高速公路的汽车导致的两列火车相撞。

图18. 事故剖析,《El Pais》
再现这类事件的关键在于确认事发当地地形所扮演的角色、起因、时间顺序以及有关涉及物的真实资料。用适量的细节和强调有效地组织诸如此类的信息,已确保读者感受到事件的整体真实度。
2. 明示: 这是一个infographic最基本的素质。Marshall岛上的渔民已经使用这种地图(图19)上百年了。这种用竹条将贝壳捆绑起来做成的地图,直观地表现了岛屿的间距,它们的相对位置,以及水流的方向。

图19. 马绍尔群岛的贝壳地图
3. 建立上下文语境: 让我们回到那个火车事故的例子,上下文语境的建立始于对事故现场地形信息的定位,这样读者就可以从中获知事故现场的地形环境。设计者选择使用顶视图,因为关键的要素是那条高速公路和其下的铁道。请注意,图中的视角由第一次碰撞发生时的相对较近被拉远为第二次碰撞时的相对宽阔。碰撞程度的不同因此也跃然纸上。读者就能够体会到这样一个事实:如此灭顶之灾竟然是由一部小车酿成。
4. 简化: 简单直接的表现更容易说明。我们很容易因为其他多余属性而分散注意力。纽约时报的SARS病毒传播图(图20)例示了这一简易原则——特别是在对地图的视觉处理和对色彩的运用这两个方面非常突出。该图描述了病毒的跨国界扩散,因此一个粗略的表述已经足够来传达这样的信息了。色彩被用于去区分不同级别的病源:主要的或是次要的,这是非常重要的信息。这样,在整张图片上你只会看到三种颜色。

图20. SARS是如何传播的,原载于《纽约时报》
5. 增加冗余: “冗余”其实是个源于信息交流理论的概念,代表着信息的对立面,即几乎不给其所在的讯息增加任何意义。但是我们日常生活中面对的很多信息就包含着大量的冗余。
拿英语来说吧,即使把一句话中的元音字母全部去掉,我们仍然可以理解大意,Cnsdr ths sntnc, fr xmpl。往一串信息上增加冗余的一个目的是为了使得消化过程更加容易。尽管缺失元音的句子仍然可以被理解,但却不那么容易(编者注:加入元音为Consider this sentence, for example)。在一个充满杂讯的传输通道里,冗余可以帮助读者纠正那些可能已经编入信息流的谬误。这里的“杂讯”指的是在交流过程中,任一会降低输出信息可预测性的因素。譬如交通信号灯一般通过颜色来传递信息,同时也使用灯的位置来强化信息。
在通过增加冗余来抵消杂讯干扰的同时,过多的冗余也会导致效率变低。如果一而再再而三的重述,我们只会图增读者的负担,或是令他们感到无趣。所以,在可预测性和不确定性之间维持一个理想的平衡,是保障成功交流的关键。
6. 展示因果关系: 当我们试图去领会某件事情的时候,其实是在寻找信息来理解其本质。推理其实就是细查因果关系。
前面我们举过一个例子来说明因果关系:在John Snow博士的医学推测工作中,他发现了伦敦霍乱疫情的原因。与之类似的这幅决策图(图21),通过引导读者过一遍决策制定流程来说明某个具体项目是否适合他们,清晰地展现了其中的因果关系。

图21. 决策图:你该接受积分卡吗?
7. 比较和对照: 在考虑什么是因,什么是果的同时,第三个需要回答的重要问题是,相较于什么而言?
在纽约时报的SARS传播图中,用不同颜色将主要和次要的病源区分开来就是比较,而点阵则用来表示感染人群的数量。这样我们就能很快地在视觉上对不同国家感染者数量作出比较。
8. 建立多重维度: 在我们先前看过由Minard所作的那张图上,作者成功地描绘了六个维度:军队规模、纬度、经度、行军方向、气温和日期。在仅用一张纸和无文字详述的情况下,他栩栩如生地再现了拿破仑征俄失败的各个细节。
纽约时报的SARS传播图也是多维度的。图片传述了有关地域(东南亚的地图)、数量(感染者数量)、还有感染者的动向(指示传播方向的箭头)的各项信息。
9. 整合: 讲述一个连贯的故事非常重要。这意味着要尽量避免为数字或者图例做引注,因为这些注释是要和原文分开的(图22)。比照信息也应该并排布置,即就在眼皮之下,而不是堆砌在后续页面上。

图22. Gray所作的解剖图,一个文字图像充分整合的范例。
本文也试图遵照这一原则,为陈述一个连贯的故事把插图和参考资料都放置在视幅之内,而不是像附录一样放在最后。
参考书目与推荐阅读
Harmon, Katherine (2003). You Are Here. Princeton Architectural Press.
Harris, Robert L. (2000). Information Graphics: A Comprehensive Illustrated Reference. Oxford University Press.
Helfand, Jessica (2002). Reinventing the Wheel. Princeton Architectural Press.
Holmes, Nigel (1991). Designer’s Guide to Creating Charts and Diagrams. Watson-Guptill.
Holmes, Nigel (2005). Wordless Diagrams. Bloomsbury.
Institute for Information Design Japan (2005). Information Design Source Book. Graphics-Sha.
Jacobson, Robert (2000). Information Design. The MIT Press.
Malofeij Awards – Yearly Books.
McCloud, Scott (1994). Understanding Comics. Harper.
Mijksenaar, Paul and Westendorp, Piet. Open Here: The Art of Instructional Design.
Mijksenaar, Paul (1997). Visual Function: An Introduction to Information Design. Princeton Architectural Press.
Myer, Eric. K. (1997). Designing Infographics. Hayden Books.
Tufte, Edward (1990). Envisioning Information. Graphics Press.
Tufte, Edward (1997). Visual Explanations: Images and Quantities, Evidence and Narrative. Graphics Press.
Tufte, Edward (2001). The Visual Display of Quantitative Information. Graphics Press.
参考与推荐站点
Alberto Cairo – A lot of useful resources from one of the leading practitioners
Design of Signage – Theory, Application and Resources
Gallery of Data Visualization – Examples of good and bad infographics
InfoDesign – A well maintained collections of annotated links related to infographics
Interactive Narratives – A database of links to interactive narratives from the web
John Grimwade – Online portfolio of one of the leading infographic designers
Nixlog – An exhaustive collection of infographics available online
New York Times – Arguably the best online interactive features in the business
Society of News Designers – News design resources and awards gallery
Xplane – The visual thinking weblog
6 更多交互式类型的详情请参阅《Interactive Visual Explainers – A Simple Classification》
关于作者
Venkatesh Rajamanickam现为新加坡理工学院设计学院的主任讲师。本文原稿为2005年他在印度国立设计学院视觉通信系和印度理工学院(孟买)工业设计系所作研讨会的课件。
“这里的图片可能太小了,但相信细心的读者能够从上面的参考资料中找到更好的。某些段落可能显得太过简短或者有点唐突事因为我并没有把研讨会上所有的例子和讨论放进来,我想抓住其中出现的一些精彩枝节问题、讨论和练习。当然,我希望您告诉我本文还可以再增加些什么,或者还可以改进些什么。可以把反馈告诉我:venkatra@gmail.com。”
【未经书面授权,严禁转载本站文章!】本站所有文章都严格执行版权政策,获得作者亲自授权,受法律保护,请大家珍惜我们的努力成果!请阅读我们的转载注意事项
已发表的评论
您也许对以下的文章也感兴趣:





ww
好喜欢呀http://www.zjdfdr.com/main.asp
兔子
图果然有点小,不知道有没有这方面的书籍可以推荐一下.