【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

更新于2020-06-13 11:41:42
741
阅读
58
回复
【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

从左到右,需要哪些步骤?

我是谁?

目前就读于美国东北大学信息设计与可视化专业。留学前,我学了六年的经济学,搞过科研、当过公关、做过记者,就是没学过设计,顶多报了一个 Simon 阿文的网课,然后以前读大学的时候很喜欢做 PPT。半年前我的设计水準大概是这样:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

这是我为了申请学校而做的信息图,基本上运用到的技巧都还比较基础。

接下来,我会用三篇文章记录自己的东北大学的三次作业修改过程,从不同角度回答「要做好一个信息图,需要经历过哪些过程」的问题。文章最后,附有其他同学的优秀作品推荐。

信息设计与视觉化都教了什幺?

目前美国的 MFA中,东北大学是全美国第一个开设信息设计项目的学校。第一学期的课程有四个:历史课、排版课、编程课,以及这篇文章的课程:信息设计课。课程安排挺全面也很扎实。

信息设计课程,是讨论课,老师提前布置作业,学生每次上课带着自己的作业来让老师修改,然后不断重复这个修改的过程。我们在这们课中需要完成三个不同主题的作业:三次旅行、媒体使用情况、以及国家数据,这篇文章是关于媒体使用情况的可视化作业,其他两份作业会分别在另外两篇文章来介绍。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

一个学期大概是三个月,所以上述的作业平均需要一个月来完成,加上还有其他三门课的作业,整个项目的学习压力老实说挺大的。我跟我同学在这个学期中,几乎没有时间去玩耍,都在写作业;我偶尔有空閑时间也不会去玩,而是去参加校内、其他学校、或是民间举办的讲座,所以常常连煮饭的时间都没有,需要依靠外食来节省时间。

正文开始

「媒体使用情况」这个作业,老师要我们搜集个人一周媒体使用的时间。

第 0 周:数据搜集与处理

所以我在一周内搜集了个人的媒体使用时间,并将这些数据放入 Excel 内进行分类。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

题外话:搜集个人数据并将它可视化的人,就我所知 Nicholas Feltron 是最早的一位,他在 2004 年就开始视觉化展示自己每一年的个人数据使用情况,一直到 2014 年才结束记录。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
Feltron: 2014 Annual Report

之后,我用 Tableau 这个神器去简单视觉化我的数据,让我能简要了解我的数据情况,以方便之后的构图:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

Tableau 对学生免费哦!用学校的邮箱即可申请。若非学生,也可以使用 Tableau Public,这是免费版的。

继续题外话:关于个人数据的展示,近期比较有名的应该就是 Giorgia Lupi 跟 Stefanie Posavec,他们两位设计师将个人每周的数据使用情况画在明信片上,彼此用这种方式通信的时间达到了 52 周,这些明信片在今年集结成册,以「Dear Data」为名向市场贩售,这作品获得了 2015 年 Kantar IIB 的可视化大奖,更在今年被纽约现代美术馆永久收藏。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
第一周:画草图

或许是没有受过专业美术的训练,刚开始写作业的时候,我不是很习惯画草图。但画草图是一个非常重要的过程,透过画草图可以清楚知道自己要如何设计并呈现可视化。若没有事先画草图,而一股脑的在 AI 上作图,时常会发现修改的过程很耗时,也很没有效率。

每个作业中,老师会对草图先进行批改,以免我们花了一堆时间在美化图片最后却可能得重新换个新的形式。

第一版「媒体使用情况」的作业长这样:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

这个图中间的大圆,分成三个区块,分别是书本、电脑、手机,三个媒介使用情况,而大圆的圆环阶层,则是代表不同星期。颜色代表不同种类的媒体的使用时间。中间放射条则是代表不同星期的总媒体使用时间。

每次构思可视化的表现形式时,我会去参考很多别人的作品,找出优秀且值得借鑒的作品,大概会看上百个。有时候是买书,但更多时候是看网上的资源,信息图的制作时间越新通常会越厉害,所以若只看书反而会忽略了后起新秀的作品。

网上的资源大概有三个,这些也是很多设计师最常逛的网站:

  1. Behance
  2. Pinterest
  3. Drilbbble

第一版的作业给老师看过之后,他表示中间的放射条他不是很懂,建议修改。但我并没有理会他,想说下周用 AI 画好后再给他看看,殊不知⋯⋯

第二周:AI 画图

这是第一版用 AI 画图后的实体图:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

中间的大圆如同前述,下面的两个小圆,右边的小圆是代表不同媒体种类的使用时间,左边的小圆代表这一周内我的媒体使用时间分布。

老师给的评语是:修改掉中间的放射条!他认为这些线条会妨碍到后面圆形数据的解读。圆形数据与条状图并非是同一维度的数据,两者交叠在一起会让人困惑。这对我而言无非是晴天霹雳,因为我认为我这个图最主要的特点就是放射条在中间,感觉很酷 ✧ 但老师对这个概念很不以为然,无奈之下只能想别种可视化的方式。

其他需要修改的小细节:因为是圆形,所以有些字的安排需要转换角度,例如下图的 Books、星期需要旋转 180°,以便于阅读。我当初是想说可以用放射状的概念去呈现,所以图片上的所有文字都朝向圆心。但这样在给读者的阅读上会造成困扰。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
第三周:持续修改
【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

因为我很想试试看用圆形来呈现这次的作业,所以我没有放弃原本图片的表现形式,我把镭射条移到下面,上面的主要图则改变数据的呈现方式:从原本圆圈圈条改成向外放射的直线条。整体的颜色也改成蓝色。另外,我用渐变的方式去呈现上层的圆圈,每一层代表不同的媒体使用时间,从深到浅表示使用时间从少到多。最后,外面我又多加了一个圈,让线条向外延伸到线上,并加上媒体使用的种类名称。

这边的点与线都是用 AI 一个一个拉出来的,相当费时,但呈现出来的效果我挺满意。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

这是实体图,上面有一些老师修改的痕迹:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

这次的小问题是有些地方的字太小,需要加大。然后右下角的小圆圈虚线会让人不好理解,图上面大圈圈的字我忘记旋转,所以被画了一个骷髅头在上面

另外,关于图下面的圆圈,黄色区块因为媒体种类的使用比较密集,所以在呈现上比较密集,颜色也因为太过相近,导致阅读不好理解,老师要求我修改。

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

但最大的问题是中间圆圈的线比较复杂,除了背景的渐层、展示媒体使用时间的线条之外,我还用了直线去区隔星期,如上上图所示。但这种做法容易让人困惑,因为线条实在太多,而且有同学说他还以为是黄色线条是在区隔星期,而不是白色直线。

这个问题让我想了很久,也看了很多作品,但都找不到好的解决方式,直到我想到了再次使用「渐变」的方式去呈现⋯⋯

第四周:持续修改

这是最后一周,通常是需要把最后修改的版本给老师看。

这周的成果:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

我再次使用「渐变」的技巧去解决上周的最大问题:用线条去区隔星期容易导致线条过多而让人困惑:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

这个方式大概花了我一天的时间去想出来,试了好几个办法。用「渐变」的方式去呈现不同星期的媒体使用情况,大概是解决这问题的最好方式。

另外还有个小问题,是图底下黄色圆圈过度密集的问题,我用这种方式去解决:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

把黄色密集的区块延展出来,让彼此的空间变大,标示的字体就有了更多的空间,这样就解决了文字过密的问题。

若想要让作品看起来更专业,可以使用 mockup 的方式:

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

到了文章结尾,回顾这门课程,三个作业主题虽然都不相同,但让我最主要提升的部分是在信息设计的细节上。完善每一个细节,才能做出好的作品。但这个作业还有一些可以继续调整的地方,后续有时间我还会去修改,像是底下的三个圆圈,呈现方式还可以更加强、更直观一些。

其他同学的作品

Gabrielle LaMarr LeMee 个人网站

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
【海外学习笔记】信息图表是如何炼成的(一):圆形与线条

Jiang Muling 姜牧羚

【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
【海外学习笔记】信息图表是如何炼成的(一):圆形与线条
上一篇:
下一篇:

相关推荐

发现更多