香港大學聯招(JUPAS)網站上,有一幅圓形圖介紹了城市大學2020年畢業生的就業情況。這個圓形圖色彩繽紛,還做成立體效果,佔了頁面的大部分——但讀者要真正看懂內容,還是要仔細閱讀四周散落的黑色細字標籤。到了這個地步,一個平實的表格反而更快能做到同樣的事。
不過,我們大多數時候都無法自行選擇圖表類型。如果你的上司或教授已經決定要用圓形圖,以下是我們認為將它畫好的方法。
01 違背了圓形圖的本意
圖表的任務,是讓人在讀到具體數字之前,先憑視覺作出比較。這正正是圓形圖應該輕鬆做到的事:看一眼兩塊餅,不用計算,就能大概知道哪一塊比較大。
將圓形圖傾斜做成立體效果,正正與此背道而馳。我們對比例的判斷,是為平面形狀而調校的——平面上的圓形與角度。加上一個假的透視效果後,較接近「鏡頭」的一塊會顯得比同樣大小、但較遠的一塊更大,純粹因為傾斜角度所致。結果讀者要花更多心力去修正判斷,而不是更少。如果一個圖表可以用平面表達,幾乎在任何情況下都應該這樣做;立體效果很少真正值得採用。它之所以還這麼常見,主要是因為在Microsoft Office中只需一下點擊,而且對不少觀眾來說,一個會旋轉的立體圖表,聽起來始終比平面圖表更厲害。
02 將每塊餅都切開,反而失去強調的作用
原本的圖表還將每一塊餅都拉離中心,令整個圓形圖看起來像正在爆開一樣。將某一塊拉離中心,本來是一種強調手法——告訴讀者「特別留意這一塊」,通常還會配以獨立的顏色。但如果對每一塊都這樣做,這個技巧就會互相抵消:因為全部都被強調,結果等於甚麼都沒有被強調。它實際傳達的,只是「這是一個立體圖表」,而這並非讀者需要知道的資訊。
03 環圈圖的解決方法,及為何它漸漸成為更友善的預設選擇
要表達百分比的分佈,我們愈來愈傾向使用環圈圖,而非圓形圖。部分原因很簡單:圓形在設計上是一個死板的形狀——將它拉長就會變成橢圓形,看起來通常像是失誤,而非刻意的設計選擇。環圈圖則多給你一個自由度:你可以設定圓環本身的粗幼,這是實心圓形圖做不到的。
更實用的原因,在於中間那個洞。這是一塊「免費地皮」。與其將標題浮放在圖表上方或旁邊,你可以直接將圖表的主題放在正中央,令標籤與圖形合而為一,而不是要讀者自行將兩者連繫起來。
04 排列次序沒有官方規則——但有一套不錯的慣例
棒形圖有大家熟悉的排列慣例:由大到小,或按類別由左至右排列。圓形圖與環圈圖則較為含糊——應該順時針還是逆時針排列?又應該從哪裡開始?目前並無單一公認的答案,但我們最喜歡的處理方法,來自Dona Wong所著的The Wall Street Journal Guide to Information Graphics,這是這個主題上真正的經典著作。
將圖表想像成一個時鐘錶面。將最大的一塊由12點鐘方向開始,順時針排列。然後將第二大、第三大,如此類推,由12點鐘方向開始逆時針排列,同樣由大到小。這樣做的好處是:最大的兩個類別,最終會分別緊貼在12點鐘的左右兩側,讀者一眼就能認出頭兩位,不需要閱讀任何標籤。
05 標籤與顏色應該放在哪裡
圓形圖的標籤通常散落在外圍,哪裡有空位就放在哪裡。對於這個圖表,我們認為打破這個慣例會更有用:將所有類別按大小順序,於一側以單一直欄列出。次序本身就成為一種資訊——讀者不需要用眼睛比較角度大小,也能看出排名。我們為每一項都清楚標示文字,而不只依賴一個小小的色點,因為類別名稱與其佔比同樣重要。
至於顏色,我們完全略過了Office的預設色系。城市大學本身的品牌顏色——一種特定的洋紅粉色——是最明顯的起點,於是我們將它輸入配色網站(mycolor.space是一個簡單、免費的選擇),生成一系列深淺一致的色調,而不是在色輪上逐一手動挑選顏色。由於每一塊都來自同一色系,我們在各節之間加上一道與背景同色的幼邊,以免相近色調的鄰近區塊在視覺上互相混淆。
06 圓形圖真的是最好的選擇嗎?
說了以上一系列技巧,也值得問一個更根本的問題。單看百分比,會掩蓋背後實際的人數——47.2%可以是47位畢業生,也可以是4,700位。如果有實際數字的話,我們寧願將畢業生總人數放在環圈圖的中心,取代單純的標題,並稍為調整文字,讓數字本身也能發揮作用。
同樣值得記住的是,百分比分佈未必自動就是看待這組數據最重要的方式。城市大學畢業生實際在各行業工作的人數,可以說與佔比同樣值得關注——而這樣的故事,用象形圖(以一個圖示代表若干位畢業生)來說,或許比任何圓形圖或環圈圖都更直接了當。哪一種圖表類型才真正切合問題,是在打開圖表選單之前,而不是之後,就值得先想清楚的決定。