视觉学习者(Visual learner)是那些用图像进行思考的人[1],这些人将脑中的画面转述成词语去与他人进行沟通。

世界上大约 60%[2] 的人是视觉学习者。(我也是其中之一,我猜既然你正在看这篇文章,那说明你也是其中之一。我们之中很多人都还不知道自己是视觉学习者,因为学校强迫我们大部分时间通过文字来学习。)

翻译自:How To Think Visually Using Visual Analogies
作者:Anna Vital , Adioma 创始人和信息设计师

那么,你如何通过图像而不是文字来和我们沟通?答案是使用无处不在的视觉符号(visual symbols)和类比(analogies)。下图这些图表和类比是按照复杂程度排列的。

如何做好视觉可视化设计?我总结了这72种图表类型

可视化沟通的关键是找到无处不在的视觉符号,这些符号不需要用词语解释。

大多数认知科学的研究在探索我们如何看待事物,但很少有人研究我们如何理解看到的东西。

理解是对你的可视化效果的最终检验。那么,你怎样才能让人们理解呢?展示一些熟悉的东西并进行类比。如果你对可视化一无所知,但是选择了正确的类比,你就成功了一大半了。这就是一个专业设计师的工作 —— 类比是无可替代的。

如何选择正确的类比?在上面这张大图中,我把类比从抽象到具体按序列组织起来。并且根据形状的相似性将它们分组。我的目的是让你能迅速看到可能性,并在你的信息上尝试使用它们。随着时间的推移,你将能够在你的头脑中完成所有这些步骤,但现在这是一条捷径。

让我们从简单和抽象开始。

趋势图、曲线图和示意图

让我们从圆形开始。(宇宙中大多数事物都是圆的!)

1. 饼图

如何做好视觉可视化设计?我总结了这72种图表类型

饼图是最受欢迎的,也是最受批评的。正如 Edward Thute 所说:“……唯一一个比饼图更糟糕的事情是有更多的饼图”。现代信息图形学之父 Otto Neurath 也拒绝使用饼图,而使用更具语义的图示法(semantic iconographics)。饼图最好只分成 2 个扇形使用:被切出来的和我剩下的。只有 2 个扇形你仍然可以轻松比较大小 —— 超过 2 个比较起来就得困难,因此遭致批评。一旦你有 3 个或更多的扇形。你就会产生比较问题 —— 我们的视力不擅长比较饼图内的扇形,我们也不擅长比较不同的饼图。这就使得饼图只能在少数情况下才有用。

示例:我在《70 亿人在做什么》和《创业公司资金如何运作》中使用了饼图。

如何做好视觉可视化设计?我总结了这72种图表类型

《70 亿人在做什么》

如何做好视觉可视化设计?我总结了这72种图表类型

《创业资金如何运作》

2. 维恩图

如何做好视觉可视化设计?我总结了这72种图表类型

维恩图是另外一个很流行但被滥用的类比。它有一个优点 —— 展示两三件事物的重叠部分,但它不能展示重叠的程度。如果你只需要显示重叠部分,而不需要其他数据,用这个图就很好。

示例:我用它将《决心的剖析》可视化为三种品质组成:意志力、纪律和野心。

如何做好视觉可视化设计?我总结了这72种图表类型

《决心的剖析》

3. 同心图

如何做好视觉可视化设计?我总结了这72种图表类型

同心图就像横向切开的洋葱。中间是最重要的东西,或者说某事的目的。每一层的重要性都在向外递减。

示例:我在《摆脱不成功》图表中使用了同心图。

如何做好视觉可视化设计?我总结了这72种图表类型

《摆脱不成功》

4. 圆形图

如何做好视觉可视化设计?我总结了这72种图表类型

圆形图的原理是比较某物的长度,其中整个圆是 100%。这意味着我们不能改变比例。这是显示时间表的好方法,例如比较生命周期的长度,完成一个项目所需要的时间等。这对显示长度相差悬殊的周期并不适合,会导致较小的周期变得不可见。

示例:《5W Infographic》里卡路里摄入量和消耗量的图表,《天才睡觉时》的信息图表。

如何做好视觉可视化设计?我总结了这72种图表类型

卡路里摄入量和消耗量

如何做好视觉可视化设计?我总结了这72种图表类型

《天才睡觉时》

5. 气泡图

如何做好视觉可视化设计?我总结了这72种图表类型

这种图表适合粗略地比较数量。同样,气泡本身也很难精确比较。但有时不精确反倒对我们有利。有些信息最好用粗略地比较中消化,特别是当每个气泡的数量级或大或小的适合。这对于比较差异巨大的预算、恒星和行星、国家的人口、食物的营养价值等很有效。

示例:我在《互联网在想什么》中用它来显示媒体文章的点赞数量。

如何做好视觉可视化设计?我总结了这72种图表类型

《互联网在想什么》

6. 气泡演变图

如何做好视觉可视化设计?我总结了这72种图表类型

我们在这种图表中气泡的位置赋予意义。越靠近顶部,说明某个国家的受教育程度越高;或者说某颗星星的温度越高。也就是仅使用了 Y 轴。如果同时利用两个轴:越靠近顶部和右边的气泡,人口受教育程度越高,寿命越长。

示例:Hans Rosling 用这个图表来显示世界人口的宏观趋势。

如何做好视觉可视化设计?我总结了这72种图表类型

世界人口的宏观趋势

7. 折线图

如何做好视觉可视化设计?我总结了这72种图表类型

这种图表是一系列由直线连接的点 —— 线条看起来引人注目从而迅速显示出某些事物的变化。这种图表用途广泛,因为它很抽象。但是很少有令人难忘的地方。然而,当你想传达的见解只是某些东西的变化时,折线图还是有效的。这种图表是所有图表中信息量最小的,和饼图、条形图差不多。

示例:温度的变化、马拉松不同距离的心率、事故数量随着时间推移的变化等。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的图《道路事故数量随着时间推移的变化》

8. 面积图

如何做好视觉可视化设计?我总结了这72种图表类型

通过用颜色填充线条下面的空间来表示两个或多个折线图之间的差异。使用此图表进行趋势比较。

示例:这种图表可以在 Bereau Oberhaeuser 的 《Brockhaus 信息图表百科全书》中的时间轴上找到。

如何做好视觉可视化设计?我总结了这72种图表类型

《Brockhaus 百科全书信息图表》

9. 散点图

如何做好视觉可视化设计?我总结了这72种图表类型

这种图表很适合展示集群和孤立点。在这里,我们要准确展示数值的位置。读者不会分辨出集群内的点,但集群外的点和集群本身会吸引人们的注意力。

示例:《最佳表演,终极的狗数据》由 David McCandless 绘制,用狗的轮廓代替点。

如何做好视觉可视化设计?我总结了这72种图表类型

《最佳表演,终极的狗数据》

10. 旭日图

如何做好视觉可视化设计?我总结了这72种图表类型

也叫环形图(Ring Chart)或多级饼图(Multi-level pie),这是一个带有层次结构的饼图。例如,如果中心是时间开始,那么最接近的饼图就是开始以来的第一个时期。然后你可以依次展示这段时间内的各个周期。这种图表通常用于展示磁盘空间的使用情况,因为计算机中的文件夹和子文件夹之间存在层次关系。

示例:表示 Linux 文件系统中磁盘使用情况的图表。

如何做好视觉可视化设计?我总结了这72种图表类型

Linux 文件系统中磁盘使用情况的图表

11. 扇形图

如何做好视觉可视化设计?我总结了这72种图表类型

展示的事物在离中心越远的情况会翻倍,扇形图常用来展示族谱树和思想的演变。

示例:美国传统英语词典中的语言树信息。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:没找到原图,用欧洲语言树代替

12. 风玫瑰图

如何做好视觉可视化设计?我总结了这72种图表类型

展示有多少事物流向哪个方向。这种图表最初用来显示每个方向风的强度大小。

示例:《东部军队死亡原因》作者 Florence Nightingale。

如何做好视觉可视化设计?我总结了这72种图表类型

《东部军队死亡原因》

13. 柱状图

如何做好视觉可视化设计?我总结了这72种图表类型

通过柱子的高度展示数字。柱状图比气泡图展示数量较少的值时效果更好。我们的眼睛可以很容易的比较柱子的长度 —— 在需要显示准确数值时使用。但最好不要用柱状图来比较 —— 用磁带图来比较更好。

示例:我在《工程师的工资信息图表报告》和《创业公司资金如何运作》的信息图表中使用了柱状图,其中柱子被做成一系列建筑物的风格。

如何做好视觉可视化设计?我总结了这72种图表类型

《工程师的工资信息图表报告》

如何做好视觉可视化设计?我总结了这72种图表类型

《创业公司资金如何运作》

14. 磁带图

如何做好视觉可视化设计?我总结了这72种图表类型

展示比例 —— 一个数字与另外一个数字之间的关系。想象一下,你有一卷磁带用来测量任何东西。你的结果会是这样:这是 1 卷磁带长度,另外那个是 2 卷磁带的长度等。为了使图表更直观,可以用简单的图标代替磁带。

示例:我在《从贫穷到富有》的信息图表中使用了磁带图,还有我为谷歌设计的《女子足球信息图表》。磁带图和图标经常在国际图形字体教育体系(ISOTYPE)中一起使用。

如何做好视觉可视化设计?我总结了这72种图表类型

《从贫穷到富有》

如何做好视觉可视化设计?我总结了这72种图表类型

《女子足球信息图表》

15. 甘特图

如何做好视觉可视化设计?我总结了这72种图表类型

展示时间的延伸以及时间与其他事物之间的关系。这种图表最初用于项目的时间安排。用甘特图来展示未来的预测、法庭听证、火车时刻表等。

示例:在 Wait But Why 制作的《时间的透视》的甘特图中,每条新线都改变了时间的尺度,你可以看到人类经验中的时间间隔和那些超越我们理解的时间间隔之间的关系。

如何做好视觉可视化设计?我总结了这72种图表类型

《时间的透视》

16. 矩形树图

如何做好视觉可视化设计?我总结了这72种图表类型

使用嵌套的矩形来展示层次结构。这样你就可以把矩形分割成更小的矩形(只要确保最小矩形仍然可见)。通过这种方式,你可以将预算可视化,然后再在预算中进行更详细的预算。

示例:Thomas Porostocky 的《过早死亡的原因》信息图。

如何做好视觉可视化设计?我总结了这72种图表类型

《过早死亡的原因》

17. 网格图

如何做好视觉可视化设计?我总结了这72种图表类型

既是一种安排事物的系统,也是一种视觉类比。作为一种视觉类比,网格图让你立即知道没有层次结构 —— 每个单元都是平等。当然,网格是有秩序的。

示例:如果没有更好的类比,文章开头的长图就是一个网格图。我把我的日常想法和 Paul Graham 的文章当做网格图。

如何做好视觉可视化设计?我总结了这72种图表类型

我的日常想法和 Paul Graham 的文章

现在你可以很容易地在 Adioma(译者备注:该文章作者创建的可视化品牌) 的信息图表制作工具中构建图标网格图。

18. 元素周期表

如何做好视觉可视化设计?我总结了这72种图表类型

这是一种网格,其中一个单元格在某一列某一行的位置具有某种意义。例如,单元格越靠右的化学元素更有活性。其他例子还有:越靠右的饮料酒精含量越高,但是越靠下的饮料含糖量越高。

示例:《字体周期表》。

如何做好视觉可视化设计?我总结了这72种图表类型

《字体周期表》

19. 弧线图

如何做好视觉可视化设计?我总结了这72种图表类型

这种一维图展示任意两个节点之间的相互作用。这能很好的揭示模式。这里有一些灵感:任意两个国家之间的战争,小说之间人物的互动,音乐艺术家之间的合作等。

示例:由 David McCandless 制作的 Les Miserable 字符、代码库、数百万行代码之间的交互作用。

如何做好视觉可视化设计?我总结了这72种图表类型

Les Miserable 字符、代码库、数百万行代码之间的交互作用

20. 桑基图

如何做好视觉可视化设计?我总结了这72种图表类型

用线的粗细代表数字。把桑基图想象成一条从源头流出的河流。河流最开始,它只是一条粗实线,但它继续流下去,会分成更细的主河、小河、小溪和溪流。

示例:Lee Byron 制作的信息图表《关系会发生什么》

如何做好视觉可视化设计?我总结了这72种图表类型

《关系会发生什么》

21. 弦线图

如何做好视觉可视化设计?我总结了这72种图表类型

与弧线图类似,弦线图展示两个节点之间的相互作用。由此产生的线条粗细代表任何两个相互作用的强度。在这样的环形和弧线中,要确保所有变量都是同一类型(同质)。这种图表可以用来展示:以他们之间的电话数量来衡量不同总统之间的联系,对外伙伴关系,毒品的相互作用,美国主要城市之间的旅行等。

示例:由 Mike Bostock 绘制的《Uber 在旧金山社区之间打车情况》,还有他做的更容易看懂的《专利战争》

如何做好视觉可视化设计?我总结了这72种图表类型

《Uber 在旧金山社区之间打车情况》

如何做好视觉可视化设计?我总结了这72种图表类型

《专利战争》

22. 雷达图

如何做好视觉可视化设计?我总结了这72种图表类型

每个辐条的长度展示一个数字,类似于条形图。但在这种图表中,我们并不强调它们之间的差异,而是对粗略比较,以及辐条的数量更感兴趣。雷达图有助于分析我们通常认为是一个整体事物组成部分、特征和成分。

示例:在《成功的秘密》的信息图中,作者在雷达图的轴线上显示了成功的属性,覆盖了 3 种不同人群。

如何做好视觉可视化设计?我总结了这72种图表类型

《成功的秘密》

极坐标图

如何做好视觉可视化设计?我总结了这72种图表类型

这种图表显示的特点类似于雷达图,但在这里你可以添加更多的辐条,因为不受角度数量的限制。提示:你可以在 Adobe illustrator 中使用图表工具来制作极坐标图。

示例:这张图表显示了 86 种不同类型威士忌的风味特征,在网格布局中使用极坐标,便于比较口味的微妙之处。

如何做好视觉可视化设计?我总结了这72种图表类型

86 种不同类型威士忌的风味特征

螺旋图

如何做好视觉可视化设计?我总结了这72种图表类型

这是一个时间序列,从圆心开始,离圆心越远表示时间越接近现在。用这种图来显示对未来的预测、演变、时间的历史等。

示例:美国地质调查局制作的《地质时间螺旋 —— 通向过去路径》的信息图表。

如何做好视觉可视化设计?我总结了这72种图表类型

《地质时间螺旋 —— 通向过去路径》

时间轴

如何做好视觉可视化设计?我总结了这72种图表类型

也是一个时间序列,事件从左上角开始显示,以螺旋状移动。这种螺旋形状的方式引导我们的眼睛自然地跟随叙述,而不用我们像阅读文字时那样快速回到下一行开始的地方。使用时间轴来可视化传记、故事和程序。这是我在信息图表工具 Adioma 中构建的第一个模板。

示例:我用它来把名人和公司传记进行可视化。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:原文作者的案例《埃隆·马斯克的传记》

并列比较

如何做好视觉可视化设计?我总结了这72种图表类型

用两条平行线上的点,逐项说明两件事物的差异。

示例:Nigel Holmes 制作的《固定心态 vs 成长心态》,还有《100 年的变化》用插图做了一个情感上的比较,虽然有时过于夸张了。

如何做好视觉可视化设计?我总结了这72种图表类型

《固定心态 vs 成长心态》

如何做好视觉可视化设计?我总结了这72种图表类型

《100 年的变化》

抽象树

如何做好视觉可视化设计?我总结了这72种图表类型

用来展示层次和分组。任何具有子类型的东西都可以表示为树。

示例:Mashable 制作的《Apple 产品树》。如果读者更多是在移动设备或电脑上阅读这种图的话,那么从上往下倒着排列会更好。对于印刷品来说,从下往上就可以了。

如何做好视觉可视化设计?我总结了这72种图表类型

《Apple 产品树》

思维导图

如何做好视觉可视化设计?我总结了这72种图表类型

用思维导图任何东西之间都可联系起来。就像在人的头脑中一样,似乎无论多么遥远或不相关,任何数量的东西都可以连接起来。用思维导图可以进行头脑风暴,展示错误的逻辑等。

示例:我在《如何提高生产力》中使用了思维导图。

如何做好视觉可视化设计?我总结了这72种图表类型

《如何提高生产力》

决策树

如何做好视觉可视化设计?我总结了这72种图表类型

显示决策如何相互流动,节点的形状显示这是一个什么样的决策。

示例:洛杉矶信息设计师 Becca Clason 设计的《我应该给他发短信吗?》展示出在不影响信息可读性的情况下,人们可以将多少浓缩在决策树中。

如何做好视觉可视化设计?我总结了这72种图表类型

《我应该给他发短信吗?》

方框图

如何做好视觉可视化设计?我总结了这72种图表类型

方框图也叫流程图,展示解决方案或算法。圆角矩形代表开始或结束,菱形是决策,平行四边形是输入或输出,而矩形是一个过程。可将此图用于决策、战略的可视化、法庭裁决、辩论等。

示例:任何算法都能用方框图来表示。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例

抽象类比

这些都是类比,因为它们能让人联想到真实的事物,但它们更简单而抽象。

1. 金字塔

如何做好视觉可视化设计?我总结了这72种图表类型

展示层次结构,上层逐步小于下层。社会中权利和金钱的分配方式也是这样,社会阶层和种姓亦是如此。更加抽象的概念也可以用 —— 马斯洛需求模型、礼貌程度、营养价值等。

示例:《健康饮食金字塔》是一个与插图相结合的金字塔,显示我们现代对营养的理解。虽然你不应该把形状的大小理解为推荐的分量,但它确实显示了相对大小和重要性。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例《健康饮食金字塔》

2. 漏斗

如何做好视觉可视化设计?我总结了这72种图表类型

和金字塔方向刚好相反。可以用来:在所有的潜在候选人中寻找配偶(因为他们经历了不同的挑选阶段)、客户转化等。

示例:转化漏斗、销售漏斗。《但丁的地狱圈》是一个显示详细层次的漏斗 —— 该漏斗暗示绝大多数人不会下地狱。

如何做好视觉可视化设计?我总结了这72种图表类型

《但丁的地狱圈》

3. 辐轮

如何做好视觉可视化设计?我总结了这72种图表类型

所有的辐条均匀支撑中心,但它们的顺序并不重要。这适用于展示任何平等的成员或部分:一个组织的捐赠者们、知识类型、理论、概率等。

示例:Mark Vital 用辐轮展示《9 种智力类型》。另外还有 《16 世纪的尿轮》—— 根据病人尿液的颜色、气味和味道来诊断病人。

如何做好视觉可视化设计?我总结了这72种图表类型

《9 种智力类型》

如何做好视觉可视化设计?我总结了这72种图表类型

《16 世纪的尿轮》

4. 循环轮

如何做好视觉可视化设计?我总结了这72种图表类型

这种类型的重点是永无止境的循环。当我们想要表明我们不确定是什么导致了什么 —— 鸡生蛋或者蛋生鸡的时候,这种图表特别有用。

示例:投资者的情绪是循环的,正如《投资者情绪轮》所描述的那样,投资者的思维也是循环的。

如何做好视觉可视化设计?我总结了这72种图表类型

《投资者情绪轮》

5. 楼梯

如何做好视觉可视化设计?我总结了这72种图表类型

比喻强调实现某种目标所需要的步骤数量。我们还可以比较不同的楼梯 —— 一个有很多小台阶的楼梯和一个台阶少但大的楼梯,两者可以达到同样的高度,这很有见地。人们对楼梯的熟悉程度足以让他们知道,根据楼梯的挑战性,上楼的难度有多大。因此,你可以通过使楼梯更陡峭、台阶更密集或其他方式来改变楼梯的难度。

示例:《你今天到达了哪个台阶》显示人一步步采取行动的态度的进展。另外,在 Everett Henry 的《共济会的结构》用来比较两种不同仪式的名称。

如何做好视觉可视化设计?我总结了这72种图表类型

《你今天到达了哪个台阶》

如何做好视觉可视化设计?我总结了这72种图表类型

《共济会的结构》

6. 国际图形字体教育体系(ISOTYPE)

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:ISOTYPE(International System of Typographic Picture Education),即国际图形字体教育体系,是一套由奥地利经济学家奥托·纽拉特(Otto Neurath)主导创建的视觉语言系统。由一套标准化和抽象的图形符号来表示社会科学数据。

用图标的数量来显示事物的数量,而不是像柱状图那样通过放大物体的大小来显示数量。ISOTYPE 是奥托·纽拉特(Otto Neurath)发明的视觉语言系统。

示例:《纽约时报》用 ISOTYPE 来显示伊拉克的死亡人数。

如何做好视觉可视化设计?我总结了这72种图表类型

伊拉克的死亡人数

7. 地铁路线图

如何做好视觉可视化设计?我总结了这72种图表类型

展示有多个站点的路线如何相交。例如:你大脑中的思维是如何影响的,不同的研究目标是如何相互关联,理论是如何互相联系(或者没有联系),身体如何运输血液,恒星在星系中的位置以及它们如何相对运动。

示例:我在《企业家的思维方式》中使用了这种图表。这里有个更为直接的类比运用《把美国洲际公路系统类比为地铁》

如何做好视觉可视化设计?我总结了这72种图表类型

《企业家的思维方式》

如何做好视觉可视化设计?我总结了这72种图表类型

《把美国洲际公路系统类比为地铁》

8. 速度仪表

如何做好视觉可视化设计?我总结了这72种图表类型

展示增加价值的东西如何从安全到危险、从慢到快等。

示例:为了比较火车速度,意大利设计师 Francesco Franchi 把它们全部放入一个虚构的速度计中,按照速度和国家排列。

如何做好视觉可视化设计?我总结了这72种图表类型

比较火车速度

9. 齿轮

如何做好视觉可视化设计?我总结了这72种图表类型

转动一个齿轮会使得其他齿轮也被带动起来,这意味着即使转动一个很小的齿轮也能使更大的齿轮转动起来。这种类比就像是杠杆作用:帮某个人一个小忙可能会带来更大的回报,一个有利于弱势社区的小项目可能会在长期内节省大量的联邦资金。建造无家可归者的庇护所可能会导致犯罪的减少等。

示例:我不得不举一个反面教材:《语言的速度》背后有精彩的研究和信息,但齿轮没有用来显示其中的联系。

如何做好视觉可视化设计?我总结了这72种图表类型

《语言的速度》

10. 拼图

如何做好视觉可视化设计?我总结了这72种图表类型

展示了不规则的碎片是如何组合在一起的,尽管看起来好像是错位的,

示例:这张《匿名互联网用户》将气泡塑造成拼图,强调匿名互联网是努力合作才得以使用。

如何做好视觉可视化设计?我总结了这72种图表类型

《匿名互联网用户》

11. 杠杆

如何做好视觉可视化设计?我总结了这72种图表类型

表明一件小事物是如何平衡甚至超过一个大事物。这个类比可以用来展示谈判策略、增长潜力、有利于失败者的趋势。

示例:弱者和强者之间的平衡,弱者有一些优势。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例

12. 天平

如何做好视觉可视化设计?我总结了这72种图表类型

展示比较,特别是需要在作出决定的时候。用天平来显示利与弊、正与负、聪明和愚蠢的解决方案等。

示例:公平、会计平衡、权利平衡等。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例

13. 切尔诺夫脸谱图

如何做好视觉可视化设计?我总结了这72种图表类型

人脸很容易被识别,因为我们每天都在看人脸,以了解人们的动机、感受和熟悉程度。脸部的每一个元素 —— 眼睛、鼻子、嘴巴都可以通过改变来传达信息。脸部不只是传达情绪,任何可以被编码为人类情感的指标都适用。

示例:Steve Wang 为《纽约时报》制作的信息图中用切尔诺夫脸谱图来表达棒球教练的个性。

如何做好视觉可视化设计?我总结了这72种图表类型

棒球教练的个性

14. 头部轮廓

如何做好视觉可视化设计?我总结了这72种图表类型

显示头部内部的隔间 —— 不同的思想所处的地方以及它们是如何连接起来的。

示例:《互联网在想什么》—— 我根据读者分享的最受欢迎的媒体文章创建的互联网集体头部的轮廓。

如何做好视觉可视化设计?我总结了这72种图表类型

《互联网在想什么》

15. 系谱树

如何做好视觉可视化设计?我总结了这72种图表类型

这是一种帮助追踪线索的抽象树的变体。

示例:产品、人员、思想等的继承。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例

16. 组成结构

如何做好视觉可视化设计?我总结了这72种图表类型

指出一个物体或人的各个组成部分,描述每个部分的作用。使用的例子包括剖析企业家、剖析说唱歌手、计算机结构等。

示例:《如何拥有简单生活》—— 我的个人计划,以自己为基础简化生活。

如何做好视觉可视化设计?我总结了这72种图表类型

《如何拥有简单生活》

17. 迷宫

如何做好视觉可视化设计?我总结了这72种图表类型

这种类比强调通往解决方案的道路是多么的复杂,可能有不止一条出路,以及那些结果是什么。用这个类比来比较战略、政策等。

示例:思想、政策、政治等的纠缠。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例《错综复杂的教材市场给学生带来了困惑》

18. 地图

如何做好视觉可视化设计?我总结了这72种图表类型

除了绘制陆地和海洋地图之外,地图还可以用来展示互联网世界。例如,把陆地比做最受欢迎的网站,海洋比做深层网络。关键是要让类比做得简洁易懂(最好在旁边做一个图例)。由于地图可能会有过多的细节,所以对它的每一个小部分都进行类比是很重要的。

示例:Martin Vargic 绘制的《互联网地图》,其中谷歌、苹果和色情作品遍布各大洲。另一个例子是 Patrice Barnabe 的地图,它是一副充满情感和高度个人化的自画像。

如何做好视觉可视化设计?我总结了这72种图表类型

《互联网地图》

如何做好视觉可视化设计?我总结了这72种图表类型

《互联网地图》局部

如何做好视觉可视化设计?我总结了这72种图表类型

Patrice Barnabe 的地图

模拟类比

这些是真正的模拟 —— 它们看起来像你所熟悉的实物。

1. 冰山

如何做好视觉可视化设计?我总结了这72种图表类型

表明事物的可见部分比水下部分小得多。这是描述努力、成功和抽象过程的标准类比。

示例:《SEO 策略》,虽然不是特别直观,但仍然成功使得 SEO 从抽象变得具体。

如何做好视觉可视化设计?我总结了这72种图表类型

《SEO 策略》

2. 高山

如何做好视觉可视化设计?我总结了这72种图表类型

表现了挑战,胜利意味着攀登顶峰。这座山的准确地形是你进行类比的机会 —— 山顶是否遥不可及,一路的山坡是否陡峭,还是爬得越高越容易?

示例:我在《如何永不放弃》中使用了这种类比。

如何做好视觉可视化设计?我总结了这72种图表类型

《如何永不放弃》

3. 岛屿

如何做好视觉可视化设计?我总结了这72种图表类型

表明一个孤立的过程,其中界限是明确的,但活动是复杂的,一个岛屿可以作为一个类比。

示例:亚文化、城市、公司的生命周期等。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的案例《丹麦岛屿如何实现 100% 的能源自给》

译者备注:从其他网站找到的案例《丹麦岛屿如何实现 100% 的能源自给》

4. 三明治

如何做好视觉可视化设计?我总结了这72种图表类型

多层的事物,层层散开,悬浮在空气中,显示他们的内部结构。建筑物、车辆、当然还有三明治或任何其他菜肴都可以表示,但人或者其他生物不行。

示例:商业内幕出版的《环游世界:今日地图集》展示了白宫内部的情况。

如何做好视觉可视化设计?我总结了这72种图表类型

白宫内部的情况

5. 宇宙

如何做好视觉可视化设计?我总结了这72种图表类型

这种类比描述的是一些围绕着更大物体旋转的事物,但没有可见的力量拉扯它们 —— 你看不到重力,但你知道它存在 —— 你能感觉到它。例如:这个类比很适合与人们是如何被一个想法吸引的,或者创业公司吸引了什么样的投资者,你可以用这些太阳系建造一个星系来进行比较。

示例:Accurat 的《创业宇宙》将初始估值比做行星,并暗示引力的同心度来显示连续的融资回合。

如何做好视觉可视化设计?我总结了这72种图表类型

《创业宇宙》

6. 钟面

如何做好视觉可视化设计?我总结了这72种图表类型

这绝对是所有人都熟悉的物体,时钟使人敏锐观察到:时间可以被分为不连续的部分。使用不同密度的颜色,我们可以赋予这些部分新的含义 —— 在某些时间内建筑物会变得繁忙等。

示例:我见过对钟面绝佳案例是根本没有钟,但因为人们对钟很熟悉,所以很容易知道现在是什么时间 —— 就是这张来自 Brain Pickings 《著名作家的作息时间》。

如何做好视觉可视化设计?我总结了这72种图表类型

《著名作家的作息时间》

7. 层次

如何做好视觉可视化设计?我总结了这72种图表类型

表明某物的不同层次,可以被剥开到达核心。这样你才能得到真相,或者秘密。例如,调查预算花在什么地方,人们使用什么借口等。

示例:《水资源预算的组成部分》描述了影响水成本和水质的层次。

如何做好视觉可视化设计?我总结了这72种图表类型

《水资源预算的组成部分》

8. 过山车

如何做好视觉可视化设计?我总结了这72种图表类型

强调事情在一秒钟内由好变坏,反复发生的时候。这让人联想到经营企业、从事创造性的工作、谈恋爱、养育子女、以及普遍的情绪变化。

示例:David Hauser 绘制的《企业家的过山车》

如何做好视觉可视化设计?我总结了这72种图表类型

《企业家的过山车》

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找到的例子《企业家每天的日常生活》

9. 书架

如何做好视觉可视化设计?我总结了这72种图表类型

书籍的大小显示不同了的信息量。书在书架上的顺序也传达了信息。

示例:Jared Fanning 绘制的《世界上阅读量最多的 10 本书》。

如何做好视觉可视化设计?我总结了这72种图表类型

《世界上阅读量最多的 10 本书》

10. 根源

如何做好视觉可视化设计?我总结了这72种图表类型

表明事物是如何生根发芽的。例如:思想、移民、体内病毒、媒体名人等。

示例:《问题的根源》展示了二氧化碳的增加的问题根源是什么。

如何做好视觉可视化设计?我总结了这72种图表类型

《问题的根源》

11. 树

如何做好视觉可视化设计?我总结了这72种图表类型

显示树枝分裂成更小的树枝。这个类比描述了知识、思想的传播、物种的进化等。

示例:《知识困惑之树》介绍了不同类型的知识谬误以及它们之间的关系。

如何做好视觉可视化设计?我总结了这72种图表类型

《知识困惑之树》

12. 循环系统

如何做好视觉可视化设计?我总结了这72种图表类型

这表明从心脏向任何器官的外部运动。使用的例子有交通系统 —— 城市的心脏与郊区是如何连接的。这个类比的另外一个特点是:显示两种不同的事物在运动,取决于方向 —— 好的血液来自心脏,坏的血液流向心脏。

示例:供应链、交通枢纽 —— 任何具有形象的心脏和流向心脏的血液系统。

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找的案例

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从其他网站找的案例

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从《人体运转的秘密 一场不可思议的人体内部旅行》找到的案例:氧气供应链

寓言

这些都是故事,或者一系列的类比。关键在于这些故事足够熟悉,以至于我们不需要复述它们,但是我们应该将它们的每一部分都进行类比。

1. 建筑物中的活动

如何做好视觉可视化设计?我总结了这72种图表类型

建筑物中不同房间的生活活动,展示同一个人或事物如何根据他们在建筑物中的位置而采取完全不同的行动。

示例:我在为 TheResumator 制作的信息图表《如何招聘》,解释公司如何招聘人才,其中每一层都是流程中的一个步骤。《九龙城寨》是 Adolfo Arranz 的另一副永恒的作品,他用这种类比是我见过用得最好的。

如何做好视觉可视化设计?我总结了这72种图表类型

《如何招聘》

如何做好视觉可视化设计?我总结了这72种图表类型

《九龙城寨》

2. 城市生活

如何做好视觉可视化设计?我总结了这72种图表类型

城市因将其居民生活结构化为公寓、街道和社区的网格而引人注目,同时又允许居民在人行道上随意运动。这种类比很好地展示了结构过程是如何运作的,结合了可预测性和随机性。

示例:我在《初创企业的资金如何运作》中使用这种类比来展示当一个公司成长时,它是如何占据更大的建筑物的。另一个例子是我制作的另一个信息图表,以帮助我解释 lotera 公司的革命性技术如何改变城市中人与事物之间的沟通。

如何做好视觉可视化设计?我总结了这72种图表类型

lotera 公司的革命性技术如何改变城市中人与事物之间的沟通

3. 马拉松

如何做好视觉可视化设计?我总结了这72种图表类型

马拉松是一种时间轴。这里强调的是随着比赛的进行中事物的状态,尤其是最后阶段。这种类比很适用于开始简单而完成困难的事情,比如:创建一家公司、写一本小说。

示例:我在《创业马拉松》中使用了这种类比。

如何做好视觉可视化设计?我总结了这72种图表类型

《创业马拉松》

4. 进化

如何做好视觉可视化设计?我总结了这72种图表类型

这也是一种时间轴,只不过在这里我们看到的是某种事物的逐渐变化。进化的结果与一开始截然不同。比如计算机的版本随着时间推移,对科学的理解等。

示例:《手机尺寸的演变》

如何做好视觉可视化设计?我总结了这72种图表类型

译者备注:从第三方网站找的《手机的演变》

5. 食物链

如何做好视觉可视化设计?我总结了这72种图表类型

在生活中许多领域都有大鱼吃小鱼。这种类比适用于公司收购、只有一个赢家的战争、预算重新分配等。

示意:《初创企业的生态系统:食肉动物 vs 猎物》

如何做好视觉可视化设计?我总结了这72种图表类型

《初创企业的生态系统:食肉动物 vs 猎物》

6. 聚集

如何做好视觉可视化设计?我总结了这72种图表类型

当我们想比较从未同时发生的事物时,故意将它们集中子一个地方进行比较时很有效的办法。通过这种方式,我们可以比较相距半个地球的标志性建筑,被时间和距离隔开的名人,不是邻居的国家。给它们之间一点重叠使得这种效果更加直观。

示例:世界上最高的建筑如果集中在一个虚构的城市中,看起来就像是未来都市。要看世界上最高的建筑物在过去的 100 年里发生了怎样的变化,可以看看 George F. Cram 在 19 世纪 80 年代所作的《1890 年世界主要高层建筑图》

如何做好视觉可视化设计?我总结了这72种图表类型

《1890 年世界主要高层建筑图》

7. 实验

如何做好视觉可视化设计?我总结了这72种图表类型

表明事物以不同寻常的方式联系在一起,特别是它们被结合在一起,然后分开,再结合在一起。不过,实验是人工合成的,不像其他自然类比那样亲切。但是,实验仍然适用于展示抽象的研究方法 —— 液体的混合和它们在管道中运动。

示例:我为世界银行制作的《企业家精神可以学习吗?》我在第二页用实验类比的方式展示创业的要素。另一个示例是《创业公司如何估值》把估值想像成一个科学实验。

如何做好视觉可视化设计?我总结了这72种图表类型

《企业家精神可以学习吗?》

如何做好视觉可视化设计?我总结了这72种图表类型

《创业公司如何估值》

8. 工厂

如何做好视觉可视化设计?我总结了这72种图表类型

工厂是一个人造的环境,只有在所有自然环境都不适合的情况下才采用这个类比。不是每个人都去过工厂。尤其是那些采用大量机器人的工厂,对大多数人来说似乎都很陌生,这会成为类比中再类比 —— 这就没意义了。但大多数人都会认识工厂内的机械流程 —— 传送带、小部件、装配线。

示例:总部设在伦敦的设计师 Jing Zhang 是一位将日常物品“仿真化”的大师,帮助人们理解无形的东西是如何工作的。这是她想象中的茶工厂,茶壶里的制茶过程。

如何做好视觉可视化设计?我总结了这72种图表类型

想象中的茶工厂,茶壶里的制茶过程

9. 成套工具

如何做好视觉可视化设计?我总结了这72种图表类型

描述一个人的行为方式可以归结为他们的视角 —— 当他们行动或遵循某个过程时看到什么。

示例:这张关于《正式餐饮环境》的信息图特别关注所有“工具”在桌面上的位置。

如何做好视觉可视化设计?我总结了这72种图表类型

《正式餐饮环境》

10. 传送带

如何做好视觉可视化设计?我总结了这72种图表类型

这是一种自动增加或减少一系列相同的对象的事物。学校或一般的教育(在更愤世嫉俗的观点中),像小说写作这样的创作过程,法律的通过,质量控制 —— 所有这些都可以类比为传送带。对于我们大多数人认为应该个性化的事情,比如教育和医疗保险,这个类比可能有贬义。

示例:《我的创业会成功吗?》

如何做好视觉可视化设计?我总结了这72种图表类型

《我的创业会成功吗?》

11. 道路

任何人都曾走过道路。任何可以分解成步骤的事物都可以被形象化为一条道路。一个烘培食谱,一个在网站上注册的流程,做手术,成为宇航员,收拾行李的方法等。任何时间轴都是一条道路。但是一条道路比一条时间轴显得更富有情感 —— 所以首先要问你的信息是否应该有情感。

示例:《创业马拉松》

如何做好视觉可视化设计?我总结了这72种图表类型

《创业马拉松》

12. 机器

如何做好视觉可视化设计?我总结了这72种图表类型

同样是人造的物品。任何装置,甚至是想象中的,只要它的部件是熟悉的,就能运转。这种类比给了你很大的自由 —— 你可以建造任何机器 —— 但同时存在用类比再创造类比的风险。如果你要创造一台机器,同样的用户界面原则适用于仿佛是一台真实的机器 —— 应该清楚哪些按钮做什么,过程在哪里开始和结束。

示例:这张经典的信息图解释了人体内部的运作。

如何做好视觉可视化设计?我总结了这72种图表类型

人体内部的运作

可视化的关键是将读者以前看到的信息与新的信息联系起来。对象越熟悉越好。记住,大多数人不会在他们周围的事物中寻找细节。不要指望大多数读者会记住机械臂的样子,然后再对其形成类比。一般来说,我们对大自然比对人造物体更熟悉。与我们的身体大小相当的东西比非常小或非常大的东西更为人所熟悉。

如何找到最好的视觉类比?

遵循以下 5 个原则:

  1. 对大多数人来说,它看起来很熟悉。
  2. 它有一个结构。
  3. 它符合你的叙述结构。
  4. 它是可见的(可以看到的东西)。
  5. 它是可视的(容易看到的东西)。

因此,一个好的视觉类比是一个非常熟悉的实物的图像,它在结构上与你的信息非常匹配。

什么样的物体是人们所熟悉的? 在自然界和人造物体之间,自然界获胜(至少目前是这样)。

细节较少的物体更令人熟悉 —— 因为大多数人不会去寻找细节。这意味着您应该为读者提供一种方式,让他们看到您的信息设计中包含或不包含细节。在鸟瞰的情况下,以及近距离的情况下。

如果我们把事物的所有细节都去掉,我们就只剩下抽象的东西 —— 趋势图和曲线图。它们没有感情,也不值得记住。但这只是一个起点。也是快速实现信息可视化的实用方法。

因此,把所有的视觉信息看作是一个连续体,从详细和熟悉的(树木、星星、城市等)到抽象和简化的(趋势图和曲线图)是有意义的。我们可以从相反的角度来看待这个连续体,因为创建一个抽象的可视化图表需要的工作量更少。但是值得记住的是,对于你的读者来说,情况恰恰相反:他们在情感上依恋细节; 他们在熟悉的事物中找到意义; 他们更喜欢故事是可见的。大多数人都是这样。但是大多数人是你的读者吗?

这就引出了一个百万美元的问题:你们究竟是谁的读者?在这里,我假设今天的全球互联网社区,也就是 30 亿人,都是你们的读者。如果你创建了一个可视化图表,难道你不希望它被大多数可能看到它的人理解吗?大多数人不是统计学家,也不是艺术家 —— 他们像普通人类一样看待这个世界,可能就像你一样。

最后,我们知道我们正在将信息可视化。但是是什么样的信息呢?这里有一个成熟的数据可视化领域—— 但是数据比信息少一些。有一个信息设计的领域 —— 我们就属于这里。由于我努力向读者展示信息之间的联系,以及信息本身,不管是否为数字,我将这种方式称为知识可视化。知识是你设法连接到你生活经验的信息。一旦信息被获得、理解、使用、消化或以其他方式体验,就成为知识。

最终,最重要的是与心智画面(mental image)的强烈联系。这种联系解释了你正在可视化的信息,而不需要你告诉它 —— 你在可视化中没有空间去这样做。

备注

  1. 美国国家生物技术中心《视觉思维在自闭症患者的头脑中国是如何运作的?个人的叙述》
  2. 《距离百科全书》作者:Michel Marie Deza,Elena Deza

视觉思维对我们许多人来说很直观,但视觉设计需要一些技巧。这就是为什么我和我的联合创始人用我们的信息图表工具 Adioma 进行自动化设计。


欢迎关注作者的微信公众号:「龙爪槐守望者」

如何做好视觉可视化设计?我总结了这72种图表类型

点赞 56
收藏 346

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。