跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

資訊圖像化不可不知的5項要點

想知道資訊設計的訣竅,就必須先認識簡單中的不簡單

將設計重點放在你想傳達的資訊重點

製作圖表時這是最先需要思考的,是澄清事實、提出問題、統整比較,還是鼓勵採取行動?一味地將所有資訊圖像化只會失去焦點,最怕讀者看完資訊圖表以後什麼也沒留下。

一張資訊圖表如果超過三個重點就等於沒有重點,以下圖為例,如果想要強調台北市長的市「讚」率,可以將資料分為兩類:「台北市長的市讚率」和「其他五都市長的市讚率」,仔細觀察百分比,就可以發現台北市長的數據,比其他五都市長全部加起來還要多!比起同時呈現每位市長的市讚率(下圖左),以甜甜圈圖(下圖右)表示,組成類別減至兩種,讓圖表重點更清楚易懂,還可以將想要強調的資訊圖像化置放於圖表中。

小提醒:不過建議還是要將完整的資料來源附上,讓有興趣的讀者可以自行判斷和探索,也增加資訊圖表的可信度喔!

不怕資訊多,只怕資訊沒層次

「一秒鐘」、「一分鐘」、「十分鐘」...你的設計能夠讓目光停留不同時間長度的人讀到不一樣的資訊深度嗎?

通常資訊看起來過長是因為缺乏「層次」,要讓資訊層次分明,首先要搞清楚這些資訊的「結構」和「重要次序」:

・結構:一個適當的標題,再透過視覺化的方式呈現資訊結構,能讓人在第一眼抓到這些資訊之間的關係,接著看內容時就比較不容易迷失在資訊裡。

・重要次序:將你想要傳遞的訊息按照重要順序分層,再透過視覺呈現設計來凸顯重點,例如字級使用大至小層次清楚(最大為標題、最小至附註)、善用顏色區分重點(詳細說明請參考原則五:顏色運用有邏輯)、依照資訊的重要性安排其所佔的版面大小。

參考上方右圖範例,若只是將資訊分成不同區塊呈現,乍看之下只有幾個不知所云的標題關鍵字,但若將事件發生的脈絡,透過簡單的視覺化呈現,則在第一眼就能大致抓到三中全會到底發生了什麼需要關注的改變和順序。除了將資訊架構具體視覺化呈現之外,我們也將資訊分層,讓趕時間的人第一眼能夠

透過資訊圖表中的次標題和圖像了解三中全會造成的影響,接著可以就自己有興趣的部分細看文字,清楚的架構能讓讀者隨時挑自己想看的段落閱讀,也不至於迷失在文字海裡。

掌握注意力及眼球運動的軌跡

 

讓人無所適從的不是資訊內容本身,而是混亂的視覺動線設計

只要觀眾在接受資訊時感到混亂、困惑,就會阻礙他們理解資訊,在這種情況下,你的資訊圖表在第一眼就很有可能被觀眾的大腦打槍。

 

影響視覺動線的重要因素:

・ 閱讀慣性

人們平常的閱讀習慣,建立在閱讀行為的便利及效率之上,是最難改變的一項因素。閱讀慣性雖然會因為文化而有所不同,但大致上為從上而下、自左而右(文案採橫式書寫時)、自右而左(文案採直式書寫時)是最普遍的方向。

 

如果你想要打破一般的閱讀方向慣性,就要很清楚知道為什麼要這樣做,也許是和傳遞的資訊本身內容有關,如樹的蒸散作用過程(從樹根在地底吸收水分一路往上到頂端的樹葉被蒸散出去)、也可能是為了引起更大的關注而打破規則(但要設計功力能夠配合,並執行得成功才行!)

用對顏色提高資訊吸收效果

 

初學者製作資訊圖表很容易迷失在顏色的遊樂園中,每個迷人的顏色都想嘗試,最後卻花花綠綠的讓觀眾眼花撩亂,模糊了你最先想要傳達的訊息。

建議初學者從兩到三種顏色開始練習,再慢慢增加,在思考顏色運用的規劃時,可以想想這幾個問題:

1. 整張資訊圖表想要給人的感受是什麼?

(歡樂、和諧、悲傷、強烈、理性、感性......)

依照自己想要傳達的感受選擇適合的主色系,再依照資訊內容選擇輔助的顏色,如果想要傳達的感覺相對中性,或是沒有特別想要傳達的感覺,可以依照資訊內容本身的特性選擇對應的顏色,接著看下個問題!

2. 想要傳遞的資訊本身有沒有特別適合的顏色?

・ 與生活經驗做連結

「想到蘋果,你會想到什麼顏色?」

顏色的聯想往往和生活經驗的連結和共鳴有很大的關係,如提到水,很多人會想到藍色;提到愛情,大部分的人會想到紅色或粉紅色系。如果你想要加強讀者對於資訊圖表中提到的關鍵事物的連結和印象,用符合該事物形象的顏色會是很好的選擇;相反的,如果該事物在資訊圖表中只是配角,其實它本身的顏色更適合跟著整張圖表的色調搭配。

・ 顏色的語言

「『禁止』和『通過』,你會分別用什麼顏色表示?」

除了具體事物之外,還有一些抽象的感觀或體驗,像是「『禁止』和『通過』,相信很多人都會聯想到「紅綠燈」,因此回答「紅色」和「綠色」。使用能夠引起溝通對象共鳴的顏色,通常能夠大幅降低誤解和困惑發生的機率,若應用得當,還能夠提高資訊吸收和記憶的效果!

3. 是否有特殊的使用情境和特定的溝通對象?

觀察資訊圖表的使用環境和情境,並巧妙的運用顏色來吸引注意力或選擇融入環境。

創造不一樣的溝通體驗

除了多從讀者的角度出發思考之外,還有一些具體的面向可以著手:

1. 文案設計:最容易創造互動性的方法,可以對讀者說話、用問句作開頭引發思考等等。

2. 明確的引導:讓讀者知道當下該做什麼、該思考什麼讓讀者知道事後該怎麼做、該改變什麼。

3. 提供更多資訊:在溝通對象的興趣和共鳴被勾起之後,可以去哪裡做更進一步的學習和了解呢?