從理解需求開始:視覺化資訊圖表的設計流程

筆者從開始接觸資訊視覺化設計至今,大約四年時間,對資訊圖表(infographics)的多樣性一直情有獨鍾。從一般的統計資料,至雲端上的巨量資料;變動速度由小至大、幅度由低到高,載體涵蓋海報、簡報、螢幕介面等,兼具理性與感性的表達形式,成功的激起人們探索資料的慾望,達到資訊傳達的目的。

筆者目前正在努力鑽研中,就讓我們一起來試試吧!

資訊圖表製作流程

製作圖表時,應避免直接切入表面視覺效果;為了清楚傳達資訊,需先了解圖表背後的故事及目標觀眾,掌握透過圖表欲達到的預期效果,時時回頭檢視設計方向是否與最初的目的一致。以下是筆者的圖表製作流程:

理解需求

與客戶溝通、理解客戶欲達到的最終目的,訂出主題;接著以心智圖勾勒主題延伸出來的各種議題,思考哪些議題能凸顯主題的重要性,去除相關性低的雜質資訊;最後留下3到5個重點議題來串接故事。

蒐集/篩選資料

根據議題蒐集相關的量化或質性資料,資料可從各單位提供的公開資料、問卷調查、或透過訪談、文本等量化/質性方法取得;記得每筆蒐集到的外界資料都要註明參考來源;除了增添資料公信力外,對資料提供者也是一種尊重。

製作圖表應先理解需求,找到合適的表達方式,而非直接開始繪製外觀。

另一個重點是篩選資料。要是所有資料全都不經篩選呈現出來,會讓圖表無法聚焦;畫起來辛苦之外,你更會看到觀眾面對花花綠綠的圖表,然後問你:「所以你想表達的是什麼?」

版面規劃

經過重重的整理和規劃,總算走到視覺設計的部分了。此時要釐清資料間的因果關係、串接各類資訊交集的部分、重要程度比重、呈現順序,視覺元件的形狀、位置、尺寸、呈現模式。筆者習慣用手繪的方式先簡單繪製,方便與團隊討論並且即時修正,順便簡單測試可讀性;因為一旦進了電腦,就是一連串的大工程了。

繪製精稿

製作工具沒有一定,可以是Illustrator/Photoshop/Keynote/PowerPoint;如果您對視覺設計不熟悉也沒關係,目前網路上有許多套版或圖表製作工具,都能協助您快速產出。筆者習慣用Illustrator。向量圖最大的優點,就是沒有失真的問題;編輯各元素也超方便。

這個階段需要規劃的包含版面主色調,可採用同色系、對比色系、補色系或單色系;只要配色能帶出主題精神、文化、情感等方面的聯想都是好的,更深入的視覺設計細節請參考前輩們的文章吧!

圖表的實際用途比美感重要,更應將用戶使用情境列入設計考量。

對我來說,圖表實際用途的重要性,大於過度強調的美感要求;筆者無法認同用「這一切都是為了美」來作為不考慮資料呈現合理性的理由。所以,為了資訊不被錯誤理解,選擇適合的表現方式很重要;像是固定範圍內的子資料比重,適合湊在一起以圓餅圖表示、與時間相關的連續資料,用折線圖來表達事件隨時間脈絡的變化、相關但不互相影響的資料,考慮用長條圖等。近幾年來,發展出的圖表變形多不勝數。

測試可讀性與易用性

考慮圖表的使用情境,例如印刷品的色差、螢幕裝置的解析度、在響應式網頁如何呈現、投影幕亮度和焦距等等;一一測試圖表在可能載具上的可讀性,是否讓讀者一目瞭然。

針對網頁或行動裝置螢幕上呈現的資訊圖表,更應針對易用性仔細評估設計。各種介面上的設計細節,例如元件與頁面的轉場動畫和觸發方式、資料的必要性(是否有非必要的裝飾性資料)、呈現方式(數據、圖表、地圖等)、資訊出現時機(逐步、同步)、操控面板型態(點、線性或二維)、參數控制鈕的操作方式(分段或無段、點按/長按或拖曳)等等,都有諸多細節需要一一推敲。

設計出基本樣貌後,接著還需進行易用性測試,以確保使用者能有效利用圖表獲得精準資訊,進一步促使某些行為發生。

小結

這塊領域還有許多文要爬,很幸運的是,網路有許多大師作品可參考;但不論看了多少美圖,實際動筆做才能感受鬼打牆後豁然開朗的感覺,聯想的廣度也會跟著強化,最後就很直覺的我手畫我心了!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.