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

我會用三篇文章記錄自己的東北大學的三次作業修改過程,從不同角度回答「要做好一個信息圖,需要經歷過哪些過程」的問題。
評論
評論

本文 轉載自 Medium,INSIDE 獲授權刊登。作者余政彥,生於台灣屏東靠海的小農村,在台北與北京待過幾年後,他決定繼續前往波士頓探索人生。他在一些領域累積過數據處理的經驗,有著六年的經濟學背景,待過經濟研究、公關、記者等領域,目前專注於資料視覺化。

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

我是誰?

目前就讀於美國東北大學(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 的設計師)。

▲ Feltron: 2014 Annual Report

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

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

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

第一周:畫草圖

或許是沒有受過專業美術的訓練,剛開始寫作業的時候,我不是很習慣畫草圖。但畫草圖是一個非常重要的過程,透過畫草圖可以清楚知道自己要如何設計並呈現可視化。若沒有事先畫草圖,而一股腦的在 AI 上作圖,時常會發現修改的過程很耗時,也很沒有效率。

每個作業中,老師會對草圖先進行批改,以免我們花了一堆時間在美化圖片最後卻可能得重新換個新的形式。

第一版「媒體使用情況」的作業長這樣:

這個圖中間的大圓,分成三個區塊,分別是書本、電腦、手機,三個媒介使用情況,而大圓的圓環階層,則是代表不同星期。顏色代表不同種類的媒體(例如:社交 Facebook,學習 Lynda,社交 LinkedIn 等等)的使用時間。中間放射條則是代表不同星期的總媒體使用時間(最長的那條是星期三,代表在星期三我花最多時間在使用媒體)。

每次構思可視化的表現形式時,我會去參考很多別人的作品,找出優秀且值得借鑒的作品,大概會看上百個。有時候是買書,但更多時候是看網上的資源,信息圖的制作時間越新通常會越厲害,所以若只看書反而會忽略了後起新秀的作品。

網上的資源大概有三個,這些也是很多設計師最常逛的網站:

  1. Behance
  2. Pinterest
  3. Drilbbble

第一版的作業給老師看過之後,他表示中間的放射條他不是很懂,建議修改。但我並沒有理會他,想說下周用 AI 畫好後再給他看看,殊不知⋯⋯

第二周:AI 畫圖

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

中間的大圓如同前述,下面的兩個小圓,右邊的小圓是代表不同媒體種類的使用時間(藍色為學習、黃色為社交,淺藍為新聞,紅色為軟件),左邊的小圓代表這一周內我的媒體使用時間分布。

老師給的評語是:修改掉中間的放射條!他認為這些線條會妨礙到後面圓形數據的解讀。圓形數據與條狀圖並非是同一維度的數據,兩者交疊在一起會讓人困惑。這對我而言無非是晴天霹靂,因為我認為我這個圖最主要的特點就是放射條在中間,感覺很酷 (•ؔʶ̷ ˡ̲̮ ؔʶ̷)✧ 但老師對這個概念很不以為然(或者說這個形式在這裡並不適合),無奈之下只能想別種可視化的方式。

其他需要修改的小細節:因為是圓形,所以有些字的安排需要轉換角度,例如下圖的 Books、星期(Mon, Tue…)需要旋轉 180°,以便於閱讀。我當初是想說可以用放射狀的概念去呈現,所以圖片上的所有文字都朝向圓心。但這樣在給讀者的閱讀上會造成困擾。

第三周:持續修改

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

這邊的點與線都是用 AI 一個一個拉出來的,相當費時,但呈現出來的效果我挺滿意。

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

這次的小問題是有些地方的字太小,需要加大。然後右下角的小圓圈虛線會讓人不好理解,圖上面大圈圈的字我忘記旋轉(老師上次有說我忘記改),所以被畫了一個骷髏頭在上面(눈‸눈)

另外,關於圖下面的圓圈,黃色區塊因為媒體種類的使用比較密集,所以在呈現上比較密集,顏色也因為太過相近,導致閱讀不好理解,老師要求我修改。

但最大的問題是中間圓圈的線比較復雜,除了背景的漸層、展示媒體使用時間的線條之外,我還用了直線去區隔星期,如上上圖所示。但這種做法容易讓人困惑,因為線條實在太多,而且有同學說他還以為是黃色線條是在區隔星期,而不是白色直線(因為黃色太過顯眼)。

這個問題讓我想了很久,也看了很多作品,但都找不到好的解決方式,直到我想到了再次使用「漸變」的方式去呈現⋯⋯

第四周:持續修改

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

這周的成果:

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

這個方式大概花了我一天的時間去想出來,試了好幾個辦法。用「漸變」的方式去呈現不同星期的媒體使用情況,大概是解決這問題的最好方式(至少是我可以想到的)。

另外還有個小問題,是圖底下黃色圓圈過度密集的問題,我用這種方式去解決:

把黃色密集的區塊延展出來,讓彼此的空間變大,標示的字體就有了更多的空間,這樣就解決了文字過密的問題。

若想要讓作品看起來更專業,可以使用 mockup 的方式:

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

其他同學的作品

Gabrielle LaMarr LeMee 個人網站

Jiang Muling 姜牧羚


飛宏科技推出業界最高功率密度電競筆電電源-280W GaN 充電器

飛宏科技新推出專為電競筆電設計的 280W GaN 高功率電源充電器,結合電路設計與製造工藝之最,帶給終端使用者前所未有小型化、輕量化、與頂規化的使用體驗。
評論
Photo Credit:飛宏科技
評論

飛宏科技在 2021 年底推出全新 280W GaN(氮化鎵)高功率電競筆電電源,超緊湊尺寸 160*69*25mm(276cc)與 700g 輕量化設計,使其功率密度突破業界多年來設計極限,達到眾所期盼的 16W/in3(1W/CC) ,因而相較一般市面販售相同輸出功率產品,體積縮小約 50%,重量減輕約 30%,大小重量相當於一般 180W 電源。

飛宏科技這款電競電源的設計研發—電路上結合了高效率拓樸結構、零電壓零電流軟切換技術、新型 GaN 半導體元件、與自主開發數位控制機制等技術;工藝上則採用了 3D 零件配置與佈線技巧、功率模組設計、及獨特 GaN 生產製程管控,最終成就了品牌客戶與終端使用者所冀求真正輕、薄、窄、小的高功率充電器,為電源業界與電競市場帶來突破性的研發創新亮點。

Photo Credit:飛宏科技

安全可靠 280W GaN 頂級規格充電器

飛宏科技表示,目前市面上所謂的 GaN 電源都著重強調在所謂的小型化,但往往都忽略電源設計更應重視安全性、可靠度、及滿足終端使用者真實的使用情境。飛宏科技此款新小型化電源已取得各項國際安規認證包括 IEC/EN/UL 60950-1 & 62368-1、CCC(5000m)及電磁相容(EMC) 認證包括 EN55032 Class B EMI & EN55024 EMS 等規範。

此款電源更是針對高階電競筆電應用需求如:支援高階處理器及顯示器的瞬間峰值功率拉載、玩家日以繼夜的重度使用、酷炫輕薄的外型、與輕巧好收納及攜帶方便等,同步提供以下的頂級規格及功能:

● > 95% 滿載轉換效率與 < 0.2W 空載待機損耗

● 560W(200% 額定功率)瞬間峰值功率輸出

● 3 年/26,280 小時,滿載高溫下長壽命保證

● 五種數位化安全保護機制

● 2 公尺輸出線上不需加任何 EMI 磁芯輔助即能通過 EMI 認證

● < 150uA 低漏電電流

電競筆電首選  極緻設計之展現

近年來電競筆電產業蓬勃發展,品牌廠商無不卯足全力導入最新軟硬體技術與材料來提升性能,使產品設計上能不斷推陳出新,以滿足電競玩家挑剔與追求極緻體驗的渴望,唯在配角「電源充電器」上無太多創新,而導致玩家也只能默默接受彩盒中所附帶大而笨重的電源。

飛宏科技新推出這款專為電競筆電設計的 280W GaN 高功率電源充電器,結合電路設計與製造工藝之最,突破過往的設計瓶頸與極限,可充分帶給終端使用者前所未有小型化、輕量化、與頂規化的使用體驗。

本文章內容由「飛宏科技」提供,經關鍵評論網媒體集團廣編企劃編審。