信息图表是如何炼成的（三）：阶层结构与isometric蒜香鱼学习笔记

isometric?听起来好厉害！这篇信息图养成文来自蒜了吧的好朋友小鱼同学。...

这篇文章来自蒜了吧的好基友余政彦同学，他从美国东北大学带来了第一手的信息图表炼成技能，后台回复“蒜香鱼3”可以收获文中涉及到的小余同学作品高清大图哦。

学习笔记第一期：信息图表是如何炼成的（一）：圆形与线条|蒜香鱼学习笔记

学习笔记第二期：信息图表是如何炼成的（二）：图标与线条|蒜香鱼学习笔记蒜了吧欢迎对可视化感兴趣的各位与我们分享你的数据新闻作品或技能，后台投稿邮箱suanleblabla@gmail.com我目前就读于美国东北大学 (Northeastern University)信息设计与可视化(Information Design and Visualization) 专业。留学前，我学了六年的经济学，搞过科研、当过公关、做过记者，就是没学过设计，顶多报了一个Simon阿文的网课，还有本科的时候很爱做PPT。这一系列的文章，我会用三篇文章记录自己的东北大学的三份作业的修改过程，从不同角度回答“要做好一个信息图，需要经历过哪些过程”的问题。文章最后，附有其他同学的优秀作品推荐。

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



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

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

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



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



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



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

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



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

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







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

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

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



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



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

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





印出来有这么长：



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

这门课我拿了A，所以分享这三份作业的心得应该还不至于太过误人。有任何想法或是批评，都欢迎后续讨论。(๑˃̵ᴗ˂̵)و最主要是想要让自己寒假有点事情做（但做了才发现占用了自己太多时间(ఠൠఠ)），顺便梳理自己在这门课的所学。另外，把自己的作品让更多人看到，才能知道自己的不足与局限。除了自己的作品，我也想要把同学做的好作品让更多人看到，让更多人知道我们读的这个项目，学习数据可视化不一定只能去学数据新闻或是学计算机，也有这种跨领域的好项目，兼顾编程与设计。



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

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



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



Divya Srinivasan

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



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



Antonio Solano

个人网站：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一样具有美术背景，这份作业在视觉呈现上相当成熟与专业。作品的细节处理的很好，不多说了，说多了会暴露我的无知哈哈哈，这个作品真的很厉害。



关于这篇介绍信息图的制作过程，若有任何建议欢迎关注并留言给作者的微信号【魚政彥】微信号Fishzhengyan

作者 | 余政彦

微信ID | Fishzhengyan

三只暂时离开数据新闻行业却不愿放弃数据新闻理想的idealists，希望用这个公众号来安放一些对这个世界的好奇心和关不上的脑洞，这里的世界观你可能看不惯或者觉得莫名其妙，anyway，这里只是一个通往不一样世界的数据路径。

    关注 蒜了吧