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


640?wx_fmt=gif

作者简介:

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

个人公众号:鱼政彦



640?wx_fmt=jpeg
从左边到右边,需要哪些步骤?


写作缘由

这篇文章,主要是我在美国东北大学 (Northeastern University) 就读信息设计与可视化 (Information Design and Visualization) 专业的心得记录,从我自己的每一个作业的修改过程中,去记录“要做好一个信息图,需要经历过哪些过程”,因此,这些心得不见得对其他人在制作信息图上会有具体的帮助,毕竟这些都是我个人的作品,不一定适用其他人。在文章最后,我还会分享我们这个项目其他同学的优秀作品(优秀与否是我自己个人主观判断)。


基本介绍

目前美国的MFA (Master of Fine Arts, 艺术硕士) 中,东北大学是全美国第一个开设信息设计项目的学校,第一学期的课程有四个:历史课 (History of Information Design and Visualization),排版课 (Visual Communication for Information Design),编程课 (Information Technology),以及这篇文章的课程:信息设计课 (Information Design Studio)。课程安排挺全面也很扎实。


信息设计课,是Studio的课程,主要上课流程是老师规定需要缴交的作业后,学生每次上课带着自己的作业来让老师修改,然后不断重复这个修改的过程。我们在这们课中需要完成三个作业:三个旅行 (Three trips),媒体使用 (Media Usage),以及国家数据 (Country Data),这篇文章是关于媒体使用,其他两份作业会分别再另外两篇文章来介绍。


一般上课的情形

640?wx_fmt=jpeg

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


个人背景介绍

学了六年的经济学,搞过科研、当过公关、做过记者,就是没学过设计,顶多报了一个Simon阿文的网课,然后以前读本科的时候很喜欢做PPT。半年前我的设计水平大概是这样:

640?wx_fmt=jpeg

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


正文开始

“媒体使用情况”这个作业,老师要我们搜集个人一周媒体使用的时间(手机、电脑、书籍、微信、脸书、Instagram,电视、收音机等等比较广泛的媒体)。


插个题外话,搜集个人数据并将它可视化的人,就我所知是Nicholas Feltron,他在2004年就开始视觉化展示自己每一年的个人数据使用情况,一直到2014年(另外Feltron也是Facebook Timeline的设计师)。


Feltron: 2014 Annual Report

640?wx_fmt=jpeg


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


640?wx_fmt=jpeg


第0周:数据搜集与处理

回到正题,所以我在一周内搜集了个人的媒体使用时间(有兴趣的人可以试试看,非常具有挑战性...),并将这些数据放入Excel内进行分类。


640?wx_fmt=jpeg


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


640?wx_fmt=jpeg

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


第一周:画草图

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


会取名为第0周是因为我们还有另外一个作业在修改,而老师要我们先给草图,这样他可以先批改,以免我们花了一堆时间在美化图片最后却可能得重新换个新的形式。


第一版“媒体使用情况”的作业就长这样:

640?wx_fmt=jpeg


这个图中间的大圆,分成三个区块,分别是书本、电脑、手机的媒介使用情况,而大圆的圆环阶层,则是代表不同星期。颜色代表不同种类的媒体(例如:社交Facebook,学习Lynda,社交LinkedIn等等)的使用时间。中间放射条则是代表不同星期的总媒体使用时间(最长的那条是星期三,代表在星期三我花最多时间在使用媒体)。


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


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

1. Behance: behance.net

2. Pinterest: pinterest.com

3. Drilbbble: dribbble.com


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


第二周:AI画图

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

640?wx_fmt=jpeg


中间的大圆如同前述,下面的两个小圆,右边的小圆是代表不同媒体种类的使用时间(蓝色为学习、黄色为社交,浅蓝为新闻,红色为软件),左边的小圆代表这一周内我的媒体使用时间分布。


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


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


640?wx_fmt=jpeg


第三周:持续修改

640?wx_fmt=jpeg

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


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


640?wx_fmt=jpeg


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

640?wx_fmt=jpeg


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


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


640?wx_fmt=jpeg

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


这个问题让我想了很久,也看了很多作品,但都找不到好的解决方式,知道我想到了再此使用“渐变”的方式去呈现...


第四周:持续修改

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


这周的成果:

640?wx_fmt=jpeg

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


640?wx_fmt=jpeg

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


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


640?wx_fmt=jpeg

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


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

640?wx_fmt=jpeg


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


其他同学的作品

Jiang Muling 姜牧羚

640?wx_fmt=jpeg
640?wx_fmt=jpeg


还有一些其他同学的作品没有放在这里,是因为他们还没有给我,给我后我会补上。


关于这篇介绍信息图的制作过程,若有任何建议欢迎直接留言给这个微信号~希望对于其他人也会有帮助,后续“可能”还会有另外两个作业的介绍,端看空闲时间的多寡而定 (ૢ˃ꌂ˂⁎)


 大家都在看 

2017年R语言发展报告(国内)

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

640?wx_fmt=jpeg

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值