信息图(infographic)是怎么做出来的?是什么特定的软件么?

标签: 信息 infographic 软件 | 发表时间:2012-11-12 17:27 | 作者:Gromit
出处:http://www.zhihu.com/rss
题主配的这张图,虽然是网易新闻上的,制作方应该是EG365,这是一个专门从事数据可视化的公司。对这个公司不太了解,不能断定他们使用什么工具制作的。网易有很多原创的信息图,现在还有一个“数读”栏目,用信息图的形式解读新闻。我有一些朋友之前在网易工作,做过信息图、专题和年终策划。除了一小部分是手绘外,他们制作信息图一般是用Adobe Illustrator(下面简称AI)。

其实我关注信息可视化有两年的时间了,还专门建了一个轻博客来收集,很大多数人一样,我一直都很关心这个东西是怎么做出来的,也搜索过、问过很多次,但结果往往是得到一个抽象的描述。回答者会给你介绍一些方法和工具,但对于一个没自己动手做过信息图的人来说,聊胜于无罢了,以我们对数据可视化的理解之浅,根本轮不到EXCEL。体育界有一种说法叫窗户纸,也可以解释这个问题。当我自己做了一些粗陋的信息图之后,才知道之前看到的一切信息只不过是复杂化了信息图,过于专业的解读阻碍了很多人去尝试制作自己的第一张信息图。我想以亲历者的角度谈一下我眼中的信息图, 这些建议仅供没有任何制图经验也不打算从事专业信息图设计的朋友参考。

题主问到的“制作信息图有什么特定的软件么?”,我的回答是“有,但非必要。”。
我不会Photoshop(下面简称PS)的时候,曾经用firebug+QQ截图做过信息图,尽管简单不怎么美观,但无碍信息表达。我更担心的是推荐一些软件后,急于去学习那些软件,那样只会离你的第一张信息图原来越远,因为枯燥的软件学习过程会令人失去兴趣和耐心,而做一张业余的信息图需要用到技巧占整个软件功能的1%都不到。

补充一下制作信息图有什么特定的软件这个问题,有很多专业的软件能够生成漂亮的图表,比如其他答案中的举例,常见的如excel、keynote等等,一些网站现在也支持在线生成漂亮的图表,一些大型的公司如Google、IBM等还有非常专业的数据可视化软件,反正我是名字都没记住。但是所有这些软件都只是美化图表而已,这不能做出一张完整生动的信息图,信息图最主要的讲好一个故事,这是软件不能替代人类去设计的。以美国大选为例,也许专业软件可以帮助我们将美国各州的支持率以3D视图体现得清晰直观,但时间轴上整个过程无法呈现,很多信息图只有少量的数据,甚至没有数据。如题干中的图所示,在表现辩论这个事件节点上只需要红蓝两个小人就够了,可以用任何我们掌握的制图软件实现。

因此这些软件,只是辅助,而且并不唯一,可以根据自身的情况找到替代方案。所以“有,但非必要。”

下面以我个人角度,讲一讲一个业余信息图爱好者,没有PS、AI基础,如何做人生中第一张信息图。

首先,色彩搭配以及元素符号是最先考虑的一个问题,一个信息图往往是若干个小图构成一张大图,色彩和元素上要体现主题,我们常常看到国外那些关于社交网站数据的信息图,facebook、twitter等等都是以这些网站的色调为主,在结合上或者细节上填充品牌元素(如timeline、“LIKE”icon、小鸟logo等等)。

然后,处理信息和收集材料,对于业余信息图爱好者来说,可以从模仿开始,充分利用各种素材,根据自己的水平有舍取地选择信息呈现形式。比如说你要在画面中体现“城市”这个信息,你可以用google、bing的图片搜索搜索一下“building eps”、“building psd”,可以找到很多可以直接利用的矢量图资源。据我所知,即便是专业的设计师也经常是在zcool、视觉中国、昵图网等网站上找矢量图素材,而非自己画。现在Metro风格大行其道,我有时候也自己动手做一个简单的小icon,其实就是画各种形状、简单变形然后组合到一起。

这里举一个例子吧,上面说过有一些信息图是由如干个数据、若干个信息、若干个小图构成的。假如有一张信息图里,需要你体现这样一个信息和数据:“74%的知乎用户将内容分享到新浪微博,分享到腾讯微博的只有26%” (我瞎编的)。那么试着做成这样子:

(点击查看大图)


首先我手里掌握的素材资源,我能想到的是登陆的时候知乎那个手机图、新浪微博和腾讯微博的icon。那我就组合这三个素材用他们来做一个信息图,尽管AI表现数据更好,但这个两个数据可能会单薄,以我的设计能力可能做不好,然后我选择用PS简单处理一下。


我观察到,保存下来的这张手机图是一个透明的PNG,在页面中就像是插进口袋的一部iPhone,那么我可以用新浪微博和腾讯微博的iPhone客户端图标来体现用户的分享行为,将这三个都插进口袋,第一想法是新浪微博icon从口袋里冒出74%,腾讯微博从口袋里冒出26%,遇到的问题是腾讯图标露出太少,识别度低,整个画面不在一条水平线上,有点失衡(我不懂设计,就这么瞎说一下)。然后调整为同样的高度,从手机的左侧和右侧分别推出74%和26%,将分享推送这个动作形象化(我就是这么牵强附会一下而已)。


下面是我的操作步骤:
1、创建一个600x600的画布,颜色取知乎首页的蓝色。
2、置入知乎手机那张图。
3、置入新浪微博客户端icon和腾讯微博客户端icon,将这个两个图层拖到手机图层的下面,形成被手机遮挡的效果。
4、将两个icon放置一样高,一小截置于口袋水平线下方。
5、拷贝水平线下面一部分的icon,进行镜头模糊处理,调节不透明度为14%,然后把原来icon下面一截删掉,形成跟手机一样的在口袋里若隐若现的遮罩效果。
6、写上说明文字,画上辅助线。


例子举完了,一个简陋的小图就完成了,其中仅仅是用到了PS里非常常用的几个按钮,回到原文。

最后,把所有的小图做完之后,调整画面的布局,补充一些辅助的图形和文字建立不同模块的连接,如题干中的信息图,这个应该是先画了S形的框架,再依次做每个小格。

以我个人的感觉来看,如果只是你兴趣动手的话,完全不需要看教材全部学会AI、PS再来做信息图。很多软件我也只会用几个按钮而已,遇到实在搞不定的可以在网上搜一下。对于一个初学者,不必过于追求画面的效果,看过很多信息图之后,大家一定有这样的印象,很多信息图表现人数或者比例的时候,就是摆一堆小人,一部分涂成一种颜色,另一部分涂成其他的颜色。实际上你只要找个小人的素材,或者自己画一个小人,然后用颜色填充功能,填充成你想要的颜色即可。

现在有一种趋势,信息图设计成为了行活,很多数据呈现都可以用我们常用的手段去实现。

图1、画若干个同心圆,切割成数据需要的弧度,删掉多余部分,填充不同颜色。
图2、插入若干个图片,根据数据需要调整大小。
图3、找个美国地图,对不同的州填充颜色,中国地图同理。
图4、画矩形,画圆形,插入文字。


我举这些例子,可能存在一些很好的的软件去实现,这里提供的技术成本最低的一种方式,有人批评现在存在一种现象“为了做信息图而做信息图”。我没有批评的资格,我只是想告诉大家,对于一个新手不要“为了好看而做信息图”,渐变、阴影都是很简单的方式和手段,只要你自己鼓捣一阵子,肯定也能做出好看的信息图,但是关键的第一步是先照着做一张图出来。这就是一层窗户纸,在你没做信息图之前,那是一个世界,当你做了一个图之后你会重新认识这个世界,好看的图表只是数据可视化的一个子集,数据可视化只是信息可视化的一个子集。

信息图,从会画一个圆形开始。

最后再举个例子,来证明我上面那句话。这是我最近看到的一张非常优秀的信息图《Google's Assets》。 (点击查看大图)
图片来源: http://visual.ly/hitchhikers-guide-googles-assets?utm_source=Master+List&utm_campaign=9c5af5d284-Newsletter_10_10_2012_2&utm_medium=email

一个好的信息图,不是为了做一个好看的图表,而是讲好了一个故事。这个信息图,用红巨星来呈现摩托罗拉,很贴切,就像恒星步入老年期一样。比起一些没有重点的信息图,该图主题明确,通过色彩和形状大小的强烈对比给人极强的视觉冲击力。并且给人以代入感和参与感,我看到有几个人在新浪微博和ifanr上都看见有人问为什么没有sparrow,紧接着又有人去回复“有,在最下面”。

需要怎么做这个信息图呢?其实只要学会用Adobe Illustrator画圆和矩形就可以了。

最后说下我在哪看信息图,收集infographic的网站很多,iphone里就有一个应用就叫infographic,只是更新有点慢。我的RSS订阅里曾经静静地躺着三十多个数据可视化的订阅,但是浏览体验不是太好。国内有一些收集信息图的网站,但良莠不齐,专业类的网站我推荐: http://visual.ly
工具类的是使用 http://pinterest.com 订阅各种收集infographic的Board,真的很好用,量大,可以看整个缩略图,快速判断设计水平,有选择性地展开,提高效率。 而介绍视觉可视化趋势、理念的中文媒体我推荐:视物 | 致知  http://www.vizinsight.com/ 他们给我很多启发。

-- 完 --

下载知乎 iPhone 客户端: http://zhi.hu/ios

相关 [信息 infographic 软件] 推荐:

信息图(infographic)是怎么做出来的?是什么特定的软件么?

- - 知乎每日精选
并且,作为用视觉方法来展现数据的信息图表,Excel是 最自然也是 最精确的工具. 请看这里(都是用Excel做出来的):. (最后一张是交互式信息图表~). 以上图表均来自于这个博客: http://www.excelhero.com/blog/. 最后我想问,你还敢说你会用Excel吗. 下载知乎 iPhone 客户端: http://zhi.hu/ios.

Javascript框架和jQuery应用情况的信息图表(Infographic)

- Will - ITeye资讯频道
我们总是想知道时下最流行的一些JavaScript框架和由于这些框架所开发的Web应用程序的比较情况. 下面就是一张体现这些比较数据的信息图表. 它包括了jQuery、Mootools、Prototype、YUI、Dojo、Extjs等这些框架的被使用情况. 从信息图表中你可以看出,比较有意思的一点就是1.3.2版本的jQuery是目前最流行的版本.

infographic: 航天飞机三十年

- khsing - YesKafei Daily
美国国家公共广播(NPR)发布这张信息量超大的infographic,航天飞机三十年的历史在这一张信息图中就可以了解. 航天飞机最后一次与国际空间站分离. 从太空中观看航天飞机最后的着陆. 三国历史上最牛的十大预言 (@17weiguan). 第三方Android ROM的市场空间前景 (@yixieshi).

Infographic: 2013内容营销现状

- - DamnDigital
内容营销正迅速的成为一个常用的营销工具,在消费者如何看待一家企业,如何与这家企业沟通中起到了不可替代的作用,要知道有68%的消费者会花时间浏览他们感兴趣的品牌发布的内容. 本周的信息图收集了2013年企业使用内容营销的数据情况,正如 Entrepreneur杂志的专栏作家 Mikal E. Belicove写道的那样:不管你是进行B2B营销还是面向大众营销,内容营销只会变得越来越重要.

Infographic: 中国智能手机用户的行为调研报告

- - 互联网的那点事
2013年12月26日,北京——群邑中国旗下移动营销代理公司邑智今日公布了一项关于中国智能手机用户的行为调研报告. 报告显示,66.7%的18-55岁中国城市受访者使用智能手机,其中33%的智能手机用户同时拥有平板电脑,他们的平均月收入为6798元,比单一智能手机用户4205元的人均月收入高62%.

开源软件发展史【信息图】

- bingo - 36氪
互联网倡导开放、平等、协作和分享的精神. 开源软件(英语:Open source software,英文缩写:OSS)是一种源代码可以任意获取的计算机软件,这种软件的版权持有人在软件协议的规定之下保留一部分权利并允许用户学习、修改、增进提高这款软件的质量. 开放源代码的定义由Bruce Perens(Debian的创始人之一)于1997年提出.

Hardware Freak – 便携系统信息软件 | 小众软件 > 系统工具

- Choope - 小众软件
Hardware Freak 是系统信息(尤其硬件信息)速查软件,可以查看电脑内的各类硬件信息以及CPU、显卡、硬盘温度等等. 特点是单文件绿色便携免费,美中不足,需要 .NET 4.0 以上. 下载: 官网 | 下载 | 来自小众软件. ©2011 Thruth for 小众软件 | 原文链接 | 0 留言 | 加入我们 | 投稿 | 订阅指南.

MenuMeters – 菜单栏实时系统信息[Mac] | 小众软件 > Mac

- Chinaxingwei - 小众软件
如果你不想花太多心力监视系统信息,MenuMeters 是不错的选择. 它利用系统公开和未公开的 API,将 CPU/内存/磁盘/网络信息实时图形化显示在菜单栏,胜在简单可定制;缺点是表现空间太小,效果有限,不适合视觉系用户. 下载(0.9MB): 官网 | 下载 | 来自小众软件. ©2011 Thruth for 小众软件 | 原文链接 | 5 留言 | 加入我们 | 投稿 | 订阅指南.