译者小虫叨叨序：

信息图示的设计是一个灰常复杂的过程，这篇文章展示的只是整个过程的冰山一角，准确的说，是所有工作都完成得差不多了之后的收尾部分。看完了你只会有更多的困惑，诸如“这图怎么来的？”、“怎么想到这样安排的？”但至少这篇文章清晰地展示了信息图示设计需要注意的一个核心原则和三个关键要素：

核心准则：一切都是为了让读者与内容更好地沟通。三个关键要素：布局、色彩、文字设计。在中文的设计语境里，布局和文字设计经常被统称为“排版”，不甚科学，明白大意即可……

欢迎勘误！

———————————-废话与翻译的分界线————————————–

[设计信息图示——“计算机编程世界” ]

原文：http://www.smashingmagazine.com/2010/06/06/designing-the-world-of-programming-infographic/

信息图示能够以比普通文本牛B得多的方式呈现信息。长久以来，信息图示都充斥着媒体、印刷品、路标和说明手册等媒介。近期，各种信息图示开始在互联网上潮水般涌现，主题从科学、科技到社会和文化，不一而足。在这篇文章里，我会展现设计一幅关于计算机编程的信息图示的过程。

信息图示表现了什么（What the Infographic Shows）

这幅信息图示展示了计算机编程领域的先锋，内容基于对各种编程语言的历史和现状所进行的分析。其中还包括了一些随机的事件和图表，目的是为了使信息图示更加直观和具有视觉上的吸引力。（大图请点击原文）

几句话（Fewness Of Words）

图示上所有先驱者都对编程有巨大影响力。但这份名单仍不全面。如今的程序世界是由像C、C＋＋和Java这样的程序语言塑造的，其创造者自然是必不可少的。在开源软件领域做出巨大贡献的Ken Thompson, Richard Stallman and Linus Torvalds也一样。

你也许还会注意到，一些重要的算法——诸如dynamic programming、brute force 和 hash tables——没有出现在图示中，是因为在单独一幅信息图示里解释这些算法实在是太困难了。因此，我以类似insertion sort 和 merge sort等比较容易解释的东东来代替。而 Eight Queens 和 N-puzzle 由于经常被用来解释各种编程技术问题，也放进了图示之内。

设计信息图示（Designing The Infographic）

信息图示是信息、数据和知识的视觉化呈现，因此，布局、用色和文字设计对于读者的理解来说都至关重要。让我们一个个来看～～

布局（Layout）

根据现有资料，我决定将图示分为三个主要部分：

1. 在计算机编程历史中最重要的人
2. 一个编程历史的大事时间表
3. 程序语言的统计信息

设计目标是让信息图示简洁又美观。我想到了以下几种表现方式：

红色方块表示插画，箭头表示时间线，蓝色矩形表示统计信息。在第三个布局版式里，绿色圆圈表示表示随机的事件和算法图表。

↑ 第一个布局很简洁，但是缺少作为一幅好的信息图示应该具有的吸引力。所以我决定放弃它。

↑ 第二个布局中，插图摆放成圆圈形状，但是要把每幅插图的相关信息（即图说）也摆放成圆圈会非常困难。所以我也放弃了。

↑ 我决定使用一个结合了sine wave 和 golden rectangles（类似黄金分割线这样很牛B但不能证明的设计定理）的版面布局，这两个玩意我在此前的文章讨论过（你们就自己去看吧，看明白了告诉我）。我把随机事实和图表放在黄金矩形的剩余空间里以使得图示更具吸引力。

我用Pixus创建了一个由黄金矩阵组成的网格，如果你要创建多重黄金矩阵，这个小工具很方便。

色彩（Color）

色彩随着周边环境的变化而不断变化。— Josef Albers

选择正确的色彩是平面设计中最重要的事情之一。色彩会影响视觉的层次感和文字的易读性，所以，请认真选择正确的色彩，而不是随便猜一个。在一幅信息图示中，背景必须和插图完美配合。在这个例子里，插图在白色背景上看去来呆滞，而在黑色背景上又会看起来很丑。

我选了浅金色（#f9ebb3）作为背景。再在背景上应用了51%的颗粒纹理并降低透明度至52%。现在插图在背景上比较好看了。

我选择“学院”色系作为字体颜色，因为它与背景色彩和插图融合得很好，我们都知道，对比为王，所以我在插图部分主要使用原色，因为原色在文字块里提供很好的对比效果。

↓ 如果你在颜色选择上遇到麻烦，总是可以在Adobe Kuler里得到帮助。

文字设计（Typography）

文字设计工作最重要的任务之一就是解读文本并与之沟通：它的音韵、节奏、逻辑结构、物理尺寸——都决定了它排版的可能性。文字设计师之于文本，就如戏剧导演之于台词、音乐家之于乐谱。— Robert Bringhurst

在一幅设计中，只能使用两种或至多三种字体。我选择了Colaboarte细体作为程序员的名字，Calibri斜体作为描述，两者都是无衬线体。

使用单一系列的字体，但不同的粗细、字宽与样式，可以大大拓展设计的韵律，并进而影响其与读者的交流。于是我在Calibri斜体上使用15号字大小，在程序员名字上使用21号字大小，双齐末行齐左（应该是这个吧）。插图说明也使用Calibri字体，但使用不同颜色以跟程序员描述区分开来。插图上的数字，则使用ChunkFive。

表现统计信息（Displaying Stats）

要将信息呈现出斑斓灿烂的视觉效果，就要对图片、文字、数据和艺术做交叉处理。所使用的工具包括文字、排版，大型数据的统计分析和管理，线条、布局和色彩等等。— Edward Tufte, Envisioning Information

多年来，我们一直使用柱状图和饼状图来表示信息。Edward Tufte 使用“垃圾图表”来指代那些在定量显示中无用的、没有信息量的、或模糊的元素。但“垃圾图表”的滥用趋势却随着信息图示的崛起而愈演愈烈。

在这里，我选择了三种不同的方法来表现程序语言的统计结果。Project Euler 的统计结果以不同直径的圆圈来表现。这个项目是关于数学问题的，因此以几何图形表现比较贴切。StackOverflow 的统计结果以不同大小和颜色的文本编辑器表现，而Tiobe Index的统计信息则以不同大小和颜色的“终端”（命令行编辑器）来表现。

最终幻想

信息图示设计关注如何以创造性的方式呈现信息，比起单独设计一个网站，设计一则信息图示的过程能够帮助我们更好的理解和执行特定的平面设计原则。这一切是关于如何应用设计基本原则的，如果我们能很好的贯彻，我们得到的成果会好很多……

参考链接：

• Anatomy of an Infographic
• Data Visualization and Infographic Resources
• 50 Most Stunning Examples of Data Visualization and Infographics

相关书籍：

• Visual Display of Quantitative Information
• Envisioning Information