信息图表是如何炼成的（三）：阶层结构与isometric

作者：余政彥  美国东北大学信息设计艺术硕士、中国人民大学经济硕士，可视分析爱好者

个人公众号：鱼政彦

前文推送：

信息图表是如何炼成的之一：媒体使用情况

信息图表是如何炼成的（二）：图标与线条

从左到右，需要哪些步骤？

（因这次的作业篇幅过长，封面这图只有截取一部分）

 

本文特别感谢蒜了吧（ID：suanleblabla）的大熊花、镝次元（ID：dyclub-org）的赵玮雯进行润饰。我绝对不会告诉你这两个人是同一个人(≖ᴗ≖)

 

前情提要

我目前就读于美国东北大学 (Northeastern University)信息设计与可视化(Information Design and Visualization) 专业。留学前，我学了六年的经济学，搞过科研、当过公关、做过记者，就是没学过设计，顶多报了一个Simon阿文的网课，还有本科的时候很爱做PPT。这一系列的文章，我会用三篇文章记录自己的东北大学的三份作业的修改过程，从不同角度回答“要做好一个信息图，需要经历过哪些过程”的问题。文章最后，附有其他同学的作品推荐。

 

本文是最后一篇，也是最困难的作业：国家数据，老师在刚开学时就指派每一个同学负责一个国家。这是前两份作业的集大成，同学都承认这是最困难的作业，因为要考量的因素太多太多，这份作业需要包含27种不同的数据，如下图：

 

因此，最棘手的部分除了要想出每一组数据的呈现方式，阶层结构（hierarchy）是最让人头痛的了。需要想好每组数据之间的位置配置、相对大小，需要凸显重点，也需要合理安排位置。

Isometric（中文实在不知道怎么翻译），是我这个信息图使用到的设计技巧。意指在二维平面上呈现三维的图像，在视觉上虽是三维但其实仍是二维。当时会想到这个技巧，倒是误打误撞，下面会进一步说明。

 

第0周&第1周：（乱）画草稿

当初其实很抗拒这份作业，看了许多信息图后，觉得我在这份作业无法做出新的东西，所以前两周画出来的草稿都是比较不负责任：

用AI画出来的图也长得一副很没有诚意的样子：

因为我负责的国家是希腊，所以我起初想要呈现几何、星座样式的视觉化图形（感觉会比较有希腊style哈哈哈），但发现实在太过困难，27组数据，我只有画出其中4组。这个初稿被批评最惨的部分是上图的方块，这个是呈现希腊跟孟加拉人口密度的对比。我用比较抽象的方式：用线条的密度。希腊还可以看得出来有线条，但孟加拉根本看不出来，因为上面有1237条密密麻麻的线。老师批评用线条去呈现人口密度太不直观。而这个小方块，我在上课前一晚花了好几个小时去完成…当下内心是崩溃的 (ꈨຶꎁꈨຶ)

第2周：（认真）画草稿

荒废了两周，终于在这周找到灵感，我决定使用isometric的方式。会使用isometric，还是基于想要用几何图形去呈现这次的作业，在AI上面不小心画了一个正六角形后，又不小心画了好几个，最后不小心整个背景都是正六角形：

这个背景正是画isometric很重要的基础，就这样被我误打误撞画出来了(˙-˙) 这时候我其实还不知道这个叫做isometric，所以除了立体图形外，我也做了其他几何图形的尝试。

 

最后决定使用立体图形去呈现后，上网找了许多范本，并问了同学，才知道这种技巧叫做isometric：

因为作业要求的数据组实在太多太多，在思考可以呈现的数据样式时，觉得脑袋快负荷不了都快烧起来了，花了好几天才画出这个草稿，如上图。

 

作业进度严重落后，我需要在下周上课前几天给老师先看过，才能提前修改，我继续在AI上赶工：

此时大概完成3/4的数据组呈现。提前给老师看过后，他大致满意（松了好大一口气…），但仍指出许多需要修改的部分。这些我放在下周一起比较。

 

第3周：细节修改

 原本我是用左边的设计方法去呈现，但整体看起来有点诡异，所以我就把希腊地图跟欧洲地图拆开，放到下面。

 

此外，我强调了整体的排版结结构，加了三个大标题（上图显示的“basic introduction”是其中一个），并修改了小标题的设计样式（从原本的蓝色方块修改成蓝色线条）。

这边调整了排版结构（我统称为hierarchy的调整），让整体的结构更为清楚。此外，两图中间国旗的部分，是最后我仍没有想好要如何修改的部分，左边三角形是我比较想要的呈现方式，因为三角形可以符合背景格点的设置，但老师建议改成方形，因为三角形在视觉上较难比较，方形则是容易一些。但我个人还是偏好三角形。此外，图最下方的小房子，我也修改了呈现方式，为什么我要怎么做？（问题留在这里我就不解释了）(ૢ˃ꌂ˂⁎)

 

这部分算是被打脸大最大力的地方，当初设计完左边的样式后，觉得蛮满意，因为我没有完全按照一般的isometric去设计。但老师认为，线条交错会造成视觉上无法辨识（实际上也是如此），我就改成右边的样式，顺便造了一艘船。

 

碍于篇幅，就不继续说其他修改的部分了，这份作业太过庞大，三言两语无法道尽其中的汗与泪 (ಥ_ಥ)

 

第4周：定稿

印出来有这么长：

这绝对是我这辈子印过最长的文件。

 

完成作业后的感想

或许是因为个性叛逆，对于任何陈规教条都是保持着怀疑的心态。让我坚持使用isometric的方式完成这份作业就是这心态使然。随着数据可视化、信息图、数据新闻概念的流行，有些走在比较前面的人难免会想要给走在后面的人一些心得，大部分都很好、都很值得借鉴，但有两点我挺不以为然：不要用圆饼图、不要用3D方式去呈现数据。个人认为，不管是数据可视化或是信息图，本质上设计占了很大一块，既然是设计，就没有所谓的至高法则（golden rule）。或许圆饼图跟3D有存在自身的缺点，但这并不表示他们就没有任何优点，我最后一份作业，就是固执的想要证明这一点，至于成果好或不好，任人判定了。

 

这门课我拿了A，所以分享这三份作业的心得应该还不至于太过误人。有任何想法或是批评，都欢迎后续讨论。(๑˃̵ᴗ˂̵)و

 

为什么要写这三篇文章？

最主要是想要让自己寒假有点事情做（但做了才发现占用了自己太多时间(ఠൠఠ)），顺便梳理自己在这门课的所学。另外，把自己的作品让更多人看到，才能知道自己的不足与局限。除了自己的作品，我也想要把同学做的好作品让更多人看到，让更多人知道我们读的这个项目，学习数据可视化不一定只能去学数据新闻或是学计算机，也有这种跨领域的好项目，兼顾编程与设计。

在这学期的最后一天，拍了这张照片。来到又冷又湿的波士顿学代码跟设计，我想，是我30岁以前最重要的决定了。

优秀同学作品

NavarjunGrewal

个人网站：http://navarjun.com/

设计简明，我觉得是这个作业成败的关键。Navi的作品颜色、图形配置让我很喜欢，颜色的选用看起来清爽，作品整体配置恰当，不会太过拥挤也不会太过松散。这是一个让我很想好好学习的作品。

 

DivyaSrinivasan

个人网站：dvs736.wixsite.com/divyasrinivasan

我很喜欢Divya这个作品的黄色对话框，这些对话框让数据不再是死板硬邦邦，对话框让作品看起来活泼有趣，并更有故事性。

 

AntonioSolano

个人网站：www.antonio-solano.com

 Antonio一直是我学习的对象，他在设计上很有自己的风格，这个作品也不例外。若把他的这个作品放大看，可以看到许多他在设计上的巧思。我个人认为，呈现的感觉简洁明瞭但具有相当的个人风格。

Gabrielle LaMarrLeMee

个人网站: http://gabriellelamarrlemee.com/

 Gabi具有的美术背景在这份作品一展无遗。不论是在颜色的选取、版面配置、设计技巧的使用，都展现的非常棒，是我个人很喜欢的一个作品。我特别喜欢这个作品右手边的“Timeline”，“Timeline”是我们都需要包含在自己的作业中，但Gabi呈现出来的风格就是不一样，相当具有巧思。

Maeve Donohue
个人/公司网站：
Founder, Tango RI: http://www.tangori.net/
Co-founder, Buttrfly: http://buttrfly.com/
President, Nami Studios: http://namistudios.com/

Maeve跟Gabi一样具有美术背景，这份作业在视觉呈现上相当成熟与专业。作品的细节处理的很好，不多说了，说多了会暴露我的无知哈哈哈，这个作品真的很厉害。

　大家都在看　

2017年R语言发展报告（国内）

精心整理 | R语言中文社区历史文章合集（作者篇）

公众号后台回复关键字即可学习

回复 爬虫            爬虫三大案例实战  
回复 Python       1小时破冰入门

回复 数据挖掘     R语言入门及数据挖掘
回复 人工智能     三个月入门人工智能
回复 数据分析师  数据分析师成长之路 
回复 机器学习      机器学习的商业应用
回复 数据科学      数据科学实战
回复 常用算法      常用数据挖掘算法