维生素B6给你好肤况、好情绪妇女更年期妇产科
精彩推荐
台电:未来看到「电厂」长得像迪士尼,别太惊讶
新闻整理:陈冠颖联合报导,蔡英文总统27日参访林口火力发电厂,证明政府推动能源结构转型目标与决心。幕
台电:未规划重启核四 不会再花钱调查地质
(中央社 台电今天表示,核四目前是封存阶段,由于政府未规划重启核四,因此,台电未来不会再花钱调查,将
台电:核四重启困难多 燃料棒外运非关键
(中央社 台电今天表示,重启核四面临多重困难,燃料棒外运从来不是关键,且燃料棒已超过保固期,不论核四
台男双扬威 丹韩各夺2冠
西班牙羽球超级300赛,週日拉下帷幕,丹麦包揽男女单冠军,韩则赢走女双和混双桂冠,双双成为最大赢家。
台男花9万马币娶越南新娘,新婚夜痛哭大喊:不行不行我不娶了
很多国家的情况都是男人少,女人多,而中国正好恰恰相反,中国虽然讲究男女平等,但是中国老人还是比较喜欢
台盐「绿迷雅保湿活润超进化」重磅上市!征服法国美妆奥斯卡~超模林嘉绮化
绽放胶原魅力,台盐再创巅峰!「绿迷雅」热销17年之际,台盐公司邀请超模林嘉绮化身绿迷雅海洋女神,17
主页 > 玩家小米 >【海外学习笔记】资讯图表是如何炼成的(二):图标与线条 >

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

发布时间:2020-06-13 11:42 访问次数:660
【海外学习笔记】资讯图表是如何炼成的(二):图标与线条
前情提要

我目前就读于美国东北大学资讯设计与视觉化专业。留学前,我学了六年的经济学,作过经济研究助理、公关、记者,就是没学过设计,顶多报了一个 Simon 阿文的网路课程,还有大学的时候很爱做 PPT。这一系列的文章,我会用三篇文章记录自己的东北大学的三份作业的修改过程,从不同角度回答「要做好一个信息图,需要经历过哪些过程」的问题。文章最后,附有其他同学的优秀作品推荐。

前言

本文是第二篇,也是我的第一个作业:三次旅行。会放在第二篇才来介绍,是因为这个作业最让我头疼,可能是刚入学还有很多不适应的地方,所以写作业的过程不是很顺利,对最后成品也不是很满意,因此才放在第二篇。相较于上一篇,这篇文章底部的优秀同学作品比较多,对我而言,每一个都很值得仔细品析,都有很多值得学习的设计概念与技巧。

三次旅行

你是否想过,从你的住处到学校,会经过什幺店面?或者,如何让别人清楚了解从你现在的住处回到家乡,你会经历什幺事情?又或者,让你规划一趟旅行,你如何清楚简明的表达每一段路程?

这三趟旅行,构成了这个作业:我们需要清楚阐述 1 从住处到学校、2 从住处到家乡、3 从住处到自己想要去的一个景点,这些路程中我们会经历过什幺、会做什幺、会有什幺感受等等,一趟旅行至少需包含十个资讯。

如果是你,你会怎幺设计这三趟旅行?

第一周:画草图

起初,我分别用了三种不同的形式去设计这三趟旅行。

旅行一,我打算用比较有趣可爱的小人去诠释我在三个不同时间的上学状态:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

路程呈现的形式有两种,直线式与地图式。

旅行二,我使用地图的方式呈现:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

这边的设计概念是我想要列出两个不同的路程通往大峡谷,一个会经过很多大城市,另一个会是 Google 推荐的最短路程。

旅行三,我打算呈现图表式的信息图,即图中会包含许多图标与数据:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

在回我台湾的家之前,我打算去一趟北京找我在那边的朋友,也因此,我在草稿中想要呈现出美国与中国在一些经济数据的不同,例如生育率、空气品质、物价等等。

画完这三个草图,我当时深深被自己的创意给折服 just kidding~对这些呈现方式蛮满意,但殊不知我完全搞错老师的意思,导致之后花许多时间追老师规定的进度,还因此荒废其他课程,看了好几次日出才勉强追上其他同学的进度…下面将解释我到底搞错了什幺。

第二週:第一版初稿

这里我把上週的草稿图在 AI 中实现。

旅行一:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

这边简化了上週草图的设计,主要呈现了我在不同时间去学校的过程。

旅行二:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

这趟旅行我使用观光客数量、犯罪事件去呈现在其中一条路线。

旅行三:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

这边跟上週的草图比较下差异更是巨大,因为原本信息图表的概念太难执行,所以我就…放弃了。这里我使用飞机航班数据去呈现我回家一趟所搭乘的航班,在所有航班数据中是如何的渺小。因为当时还不会写代码,所以我使用 RAW 这个工具去帮我视觉化数据。

飞机航班数据: http://openflights.org/data.html#airport

RAW: http://raw.densitydesign.org/

从这三张图可以看出,我花了相当多时间在细部的设计上面,但直到我在这週给老师看过作业后我才知道我完全搞错老师的要求。老师要我们用一个设计方式去呈现三趟旅行。也就是说,我设计的这三种旅行,只能选一个。
在接受这个晴天霹雳的事实后,我赶紧没日没夜的去构思新的设计样式。

第三週:决定视觉化形式
【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

从草图可以看出,我打算使用原先第一趟旅行的设计方式,简化旅行的路线,着重在每一趟旅行中我会做什幺事情、会经历过什幺景点等等。

此外,我用了经济学中效用的概念,我想要视觉化我每一趟旅行的效用,让人可以清楚知道这些旅行带给我的满意程度。

下图是在当週赶出来的成果,并在上课前几天给老师看:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

图基本上由两种线条、三大区块组成。 两种线条 :直条与折线。直条的高度代表效用,即我做这件事情给我的满足程度。折线也代表效用,但折线可以方便不同事情之间效用的比较,不会像直条那样有事情名称来干扰直条效用彼此之间的比较。 三大区块 :由上而下分别是第一趟旅行、第二趟旅行、第三趟旅行,直条颜色不同代表不同路线或是交通工具。

没日没夜、荒废其他课程而赶製出来的成果老师大致上满意,除了一些细节需要调整:颜色、排版与时间条。

因为我这週在上课前几天先给老师看过作业,所以该週上课之前,我还有时间继续修改:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

除了按照老师提到的问题去修改,我还调整了一下细节,例如把时间条变成黑色、在效用这线条上标明起点与终点。

第四周:定稿
【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

这份作业在这周大致结束。这週调整的细节是在时间条上加上箭头,让时间的过程更为明显,可以让读者更清楚知道这三趟旅行是从左到右进行。

加上 mockup 后,让我这个作业的呈现形式更清楚,这份作业并不是要在手机上呈现,而是像海报那样可以印出来挂在墙上:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

在我们完成第一、二份作业后,老师要我们讲出我们学到了什幺,他把我们讲出来的字写在黑板上:

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

我自己很喜欢这种方式,大家把自己学到的东西讲出来,藉此回顾自己与其他同学到底学到了什幺、为什幺其他同学可以学到我没有发现的东西等等。

其他同学作品:

Liuhuaying Yang 杨柳桦樱

个人网站:spark.go4trees.com

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

树的作品是把三趟旅行用类似马力欧的方式呈现,相当有趣。老师很喜欢他用一个小人从水管中跳出的设计方式。我很喜欢这个作品的颜色选用,整体视觉呈现简洁明了。

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Divya Srinivasan

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

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Divya 的这个作品是我最喜欢的其中之一。我在想,可能 Divya 具有建筑的背景,所以他的作品会比较有结构。我很喜欢他用圆圈去表现这三趟旅行,这也启发了我第二个作业的设计概念。

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Maeve Donohue

个人/公司网站:

Founder, Tango RI: http://www.tangori.net/

Co-founder, Buttrfly: http://buttrfly.com/

President, Nami Studios: http://namistudios.com/

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Maeve 具有多年的设计经验,所以他的作品在视觉表现上相较其他同学会更为细緻与成熟。我个人很喜欢他这个作品上面的地图,用圆圈与颜色去呈现,效果很好。

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Navarjun Grewal

个人网站

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Navi 是班上的 Coding 大神,他具有程式语言的背景。但除此之外,他永远有取之不尽用之不竭的设计想法,他每一个作业都有好几个版本,他永远对他的作品不满意。这个作品还是我第一次看到,之前上课时他的作业还不是长这样。

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

Antonio Solano

个人网站

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条

这个作品得到了老师的高度评价,也是我个人很喜欢的一个。 Antonio 具有工业设计的背景。这个作业他呈现了他在不同旅行中他的不同感受、他做了不同的事情等等。我很喜欢他色彩的运用,还有用简化的地图去呈现他做不同事情时在旅途中的位置。

【海外学习笔记】资讯图表是如何炼成的(二):图标与线条
上一篇:
下一篇: