信息圖表是如何煉成的(一):圓形與線條 | 海外學習筆記

Zheng-yan Yu
Dec 21, 2016 · 10 min read

從左到右,需要哪些步驟?

本文轉載自微信公眾號“鏑次元數據傳媒實驗室”(ID:dyclub-org) 原文出自微信公眾號“魚政彥”(ID:fishzhengyan) (感謝鏑次元原創內容負責人趙瑋雯對本文標題及內容進行潤飾)

我是誰?

目前就讀於美國東北大學 (Northeastern University)信息設計與可視化 (Information Design and Visualization) 專業。留學前,我學了六年的經濟學,搞過科研、當過公關、做過記者,就是沒學過設計,頂多報了一個Simon阿文的網課,然後以前讀大學的時候很喜歡做PPT。半年前我的設計水準大概是這樣:

這是我為了申請學校而做的信息圖,基本上運用到的技巧都還比較基礎。 接下來,我會用三篇文章記錄自己的東北大學的三次作業修改過程,從不同角度回答“要做好一個信息圖,需要經歷過哪些過程”的問題。文章最後,附有其他同學的優秀作品推薦。

信息設計與視覺化都教了什麼?

目前美國的MFA (Master of Fine Arts, 藝術碩士) 中,東北大學是全美國第一個開設信息設計項目的學校。第一學期的課程有四個:歷史課 (History of Information Design and Visualization)、排版課 (Visual Communication for Information Design)、編程課 (Information Technology),以及這篇文章的課程:信息設計課 (Information Design Studio)。課程安排挺全面也很扎實。

信息設計課程,是討論課,老師提前布置作業,學生每次上課帶著自己的作業來讓老師修改,然後不斷重復這個修改的過程。我們在這們課中需要完成三個不同主題的作業:三次旅行 (Three trips)、媒體使用情況 (Media Usage)、以及國家數據 (Country Data),這篇文章是關於媒體使用情況的可視化作業,其他兩份作業會分別在另外兩篇文章來介紹。

一個學期大概是三個月,所以上述的作業平均需要一個月來完成,加上還有其他三門課的作業,整個項目的學習壓力老實說挺大的。我跟我同學在這個學期中,幾乎沒有時間去玩耍,都在寫作業;我偶爾有空閑時間也不會去玩,而是去參加校內、其他學校、或是民間舉辦的講座,所以常常連煮飯的時間都沒有,需要依靠外食來節省時間(一頓大概12刀,讓人笑而不語的價格^_^)。

正文開始

“媒體使用情況”這個作業,老師要我們搜集個人一周媒體使用的時間(手機、電腦、書籍、微信、臉書、Instagram、電視、收音機等等比較廣泛的媒體)。

第0周:數據搜集與處理

所以我在一周內搜集了個人的媒體使用時間(有興趣的人可以試試看,非常具有挑戰性…),並將這些數據放入Excel內進行分類。

題外話:搜集個人數據並將它可視化的人,就我所知Nicholas Feltron是最早的一位,他在2004年就開始視覺化展示自己每一年的個人數據使用情況,一直到2014年才結束記錄(另外Feltron也是Facebook Timeline的設計師)。

之後,我用Tableau這個神器去簡單視覺化我的數據,讓我能簡要了解我的數據情況,以方便之後的構圖:

Tableau對學生免費哦!用學校的郵箱即可申請。若非學生,也可以使用Tableau Public,這是免費版的。

繼續題外話:關於個人數據的展示,近期比較有名的應該就是Giorgia Lupi 跟 Stefanie Posavec,他們兩位設計師將個人每周的數據使用情況畫在明信片上,彼此用這種方式通信的時間達到了52周,這些明信片在今年集結成冊,以“Dear Data”為名向市場販售(這本書我有買,又貴又巨大),這作品獲得了2015年Kantar IIB的可視化大獎,更在今年被紐約現代美術館 (MoMA) 永久收藏。

第一周:畫草圖 或許是沒有受過專業美術的訓練,剛開始寫作業的時候,我不是很習慣畫草圖。但畫草圖是一個非常重要的過程,透過畫草圖可以清楚知道自己要如何設計並呈現可視化。若沒有事先畫草圖,而一股腦的在AI上作圖,時常會發現修改的過程很耗時,也很沒有效率。 每個作業中,老師會對草圖先進行批改,以免我們花了一堆時間在美化圖片最後卻可能得重新換個新的形式。 第一版“媒體使用情況”的作業長這樣:

這個圖中間的大圓,分成三個區塊,分別是書本、電腦、手機,三個媒介使用情況,而大圓的圓環階層,則是代表不同星期。顏色代表不同種類的媒體(例如:社交Facebook,學習Lynda,社交LinkedIn等等)的使用時間。中間放射條則是代表不同星期的總媒體使用時間(最長的那條是星期三,代表在星期三我花最多時間在使用媒體)。 每次構思可視化的表現形式時,我會去參考很多別人的作品,找出優秀且值得借鑒的作品,大概會看上百個。有時候是買書,但更多時候是看網上的資源,信息圖的制作時間越新通常會越厲害,所以若只看書反而會忽略了後起新秀的作品。 網上的資源大概有三個,這些也是很多設計師最常逛的網站: 1. Behance: behance.net 2. Pinterest: pinterest.com 3. Drilbbble: dribbble.com 第一版的作業給老師看過之後,他表示中間的放射條他不是很懂,建議修改。但我並沒有理會他,想說下周用AI畫好後再給他看看,殊不知…

第二周:AI畫圖 這是第一版用AI畫圖後的實體圖:

中間的大圓如同前述,下面的兩個小圓,右邊的小圓是代表不同媒體種類的使用時間(藍色為學習、黃色為社交,淺藍為新聞,紅色為軟件),左邊的小圓代表這一周內我的媒體使用時間分布。 老師給的評語是:修改掉中間的放射條!他認為這些線條會妨礙到後面圓形數據的解讀。圓形數據與條狀圖並非是同一維度的數據,兩者交疊在一起會讓人困惑。這對我而言無非是晴天霹靂,因為我認為我這個圖最主要的特點就是放射條在中間,感覺很酷 (•ؔʶ̷ ˡ̲̮ ؔʶ̷)✧ 但老師對這個概念很不以為然(或者說這個形式在這裡並不適合),無奈之下只能想別種可視化的方式。 其他需要修改的小細節:因為是圓形,所以有些字的安排需要轉換角度,例如下圖的Books、星期 (Mon, Tue…) 需要旋轉180°,以便於閱讀。我當初是想說可以用放射狀的概念去呈現,所以圖片上的所有文字都朝向圓心。但這樣在給讀者的閱讀上會造成困擾。

第三周:持續修改

因為我很想試試看用圓形來呈現這次的作業,所以我沒有放棄原本圖片的表現形式,我把鐳射條移到下面,上面的主要圖則改變數據的呈現方式:從原本圓圈圈條改成向外放射的直線條。整體的顏色也改成藍色。另外,我用漸變的方式去呈現上層的圓圈,每一層代表不同的媒體使用時間,從深到淺表示使用時間從少到多。最後,外面我又多加了一個圈,讓線條向外延伸到線上,並加上媒體使用的種類名稱。 這邊的點與線都是用AI一個一個拉出來的,相當費時,但呈現出來的效果我挺滿意。

這是實體圖,上面有一些老師修改的痕跡:

這次的小問題是有些地方的字太小,需要加大。然後右下角的小圓圈虛線會讓人不好理解,圖上面大圈圈的字我忘記旋轉(老師上次有說我忘記改),所以被畫了一個骷髏頭在上面 (눈‸눈) 另外,關於圖下面的圓圈,黃色區塊因為媒體種類的使用比較密集,所以在呈現上比較密集,顏色也因為太過相近,導致閱讀不好理解,老師要求我修改。

但最大的問題是中間圓圈的線比較復雜,除了背景的漸層、展示媒體使用時間的線條之外,我還用了直線去區隔星期,如上上圖所示。但這種做法容易讓人困惑,因為線條實在太多,而且有同學說他還以為是黃色線條是在區隔星期,而不是白色直線(因為黃色太過顯眼)。 這個問題讓我想了很久,也看了很多作品,但都找不到好的解決方式,直到我想到了再次使用“漸變”的方式去呈現… 第四周:持續修改

這是最後一周,通常是需要把最後修改的版本給老師看。 這周的成果:

我再次使用“漸變”的技巧去解決上周的最大問題:用線條去區隔星期容易導致線條過多而讓人困惑:

這個方式大概花了我一天的時間去想出來,試了好幾個辦法。用“漸變”的方式去呈現不同星期的媒體使用情況,大概是解決這問題的最好方式(至少是我可以想到的)。 另外還有個小問題,是圖底下黃色圓圈過度密集的問題,我用這種方式去解決:

把黃色密集的區塊延展出來,讓彼此的空間變大,標示的字體就有了更多的空間,這樣就解決了文字過密的問題。 若想要讓作品看起來更專業,可以使用mockup的方式:

到了文章結尾,回顧這門課程,三個作業主題雖然都不相同,但讓我最主要提升的部分是在信息設計的細節上。完善每一個細節,才能做出好的作品。但這個作業還有一些可以繼續調整的地方,後續有時間我還會去修改,像是底下的三個圓圈,呈現方式還可以更加強、更直觀一些。 其他同學的作品

Gabrielle LaMarr LeMee 個人網站: http://gabriellelamarrlemee.com/

Jiang Muling 姜牧羚

Zheng-yan Yu

Written by

@NU_CAMD alumni. Data visualization designer @Deloitte. Formerly @philipslight. My portfolio 👉🏼https://noelfish6.github.io 台北、北京、波士頓,走走停停