資訊視覺化設計流程

Design by me

從開始接觸資訊視覺化設計大約4年時間,對資訊圖表的多樣性情有獨鍾,從一般的統計資料至雲端上的巨量資料、變動速度由小至大、幅度由低到高,載體涵蓋海報、簡報、螢幕介面..等,兼具理性與感性的表達形式,成功的激起人們探索資料的慾望,達到資訊傳達的目的。目前正在努力鑽研中,一起來試試吧!

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

  • 理解需求 與客戶溝通,理解客戶欲達到的最終目的,訂出主題,接著畫心智圖來勾勒主題延伸出來的各種議題,思考哪些議題能凸顯主題的重要性,去除相關性低的雜質資訊,最後留下3到5個重點議題來串接故事。
  • 蒐集/篩選資料 根據議題蒐集相關的量化或質性資料,可從各單位提供的open data、問卷調查或透過訪談、文本等量化/質性方法獲得資料。記得蒐集到的每筆外界資料註明參考來源,這是為了增加資料公信力,也是對資料提供者的尊重;另一個重點是篩選資料,若所有未經篩選的資料都呈現上來,造成無法聚焦,除了畫起來會很辛苦之外,接著你會看到觀眾面對花花綠綠的圖表,然後問你“所以你想表達的是什麼?"
  • 版面規劃 經過重重的整理和規劃,總算走到視覺設計的部分了。此時要釐清資料間的因果關係、串接各類資訊交集的部分、重要程度比重、呈現順序,視覺元件的形狀、位置、尺寸、呈現模式。我習慣用手繪先簡單繪製,方便與團隊討論和即時修正,順便簡單測試可讀性,因為一旦進了電腦就是一連串的大工程了。
  • 繪製精稿 製作工具沒有一定,Illustrator/ Photoshop/ Keynote/ Powerpoint,對視覺設計不熟悉也沒關係,目前網路上有許多套版或圖表製作工具都能協助快速產出。我習慣用Illustrator,向量最大的優點就是沒有失真的問題,編輯各元素也超方便。這個階段需要規劃的包涵版面主色調,可採用同色系、對比色系、補色系或單色系,只要配色能帶出主題精神、文化、情感等方面的聯想都是好的,更深入的視覺設計細節請參考前輩們的文章吧! 對我來說,圖表的實際用途大於過度強調的美感要求,無法認同用"這一切都是為了美"來作為不考慮資料呈現合理性的理由,所以為了資訊不被錯誤理解,選擇適合的表現方式很重要,像是固定範圍內的子資料比重適合湊在一起以圓餅圖表示、與時間相關的連續資料用折線圖來表達事件隨時間脈絡的變化、相關但不互相影響的資料考慮用長條圖..等,近幾年發展出的圖表變形多不勝數。
  • 測試可讀性與易用性 考慮圖表的使用情境,例如在印刷品的色差問題、螢幕裝置的解析度問題、在響應式網頁如何呈現、投影幕亮度和焦距..等等,測試圖表在可能載具上的可讀性是否一目了然。而易用性對於互動式資訊圖表尤其重要,常出現於網頁或行動裝置螢幕上,介面上的設計細節如元件與頁面的轉場動畫和觸發方式、資料的項目(資訊項目需對使用者完成任務有幫助,避免裝飾性的無用資訊)、呈現方式(數據、圖表、地圖..)、資訊出現時機(逐步、同步)、操控面板型態(點、線性或二維)、參數控制鈕的操作方式(分段或無段、點按長按或拖曳)。進行易用性測試,確保使用者能有效利用圖表獲得精準資訊,進一步促使某些行為發生。

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

~我是思儀(Evonne),UI/UX Designer。持續有新點子,歡迎Follow我喔~