表格排版資訊圖表易讀,關鍵是少即是多

多數人以為,表格的框線畫得越密、資訊圖表用的顏色越豐富,讀者才看得懂重點在哪。設計研究顯示的方向常常正好相反,線條與色彩每多加一分,讀者反而要多花一分力氣去分辨,眼前這條線、這塊顏色,是真正的資料,還是純粹的裝飾。

這背後有個明確的判準,叫做資料墨水比(data-ink ratio),意思是一張圖表裡,真正用來呈現資料的線條與色塊,占了全部墨水多少比例。這個概念是學者愛德華・塔夫特(Edward Tufte)在 1983 年出版的《The Visual Display of Quantitative Information》裡提出的,後來也被 Nielsen Norman Group 這類使用者體驗研究機構,拿來檢驗圖表與資訊圖表夠不夠易讀,同一套邏輯放到表格排版上一樣說得通。換句話說,重點從來不是多加了什麼,而是敢不敢拿掉不必要的東西。

接下來就先拆表格排版最常見的四個錯誤,再看資訊圖表怎麼用留白做減法,把每一分墨水都留給真正該讓讀者看到的資料。

為什麼線條、顏色加越多,讀者反而看不懂重點?

資料墨水比的核心邏輯其實不難懂,一張圖表裡,凡是拿掉也不會讓讀者少讀懂一點資料的線條、色塊、裝飾,都可以拿掉。塔夫特把這些多餘的視覺元素稱為雜訊圖表(chartjunk),意思是它們占了版面,卻沒有幫讀者多理解任何一筆資料。

常見的雜訊圖表有幾種固定樣貌。立體長條圖硬要做出 3D 效果,結果讀者要多判斷一次每根柱子實際頂到哪一條刻度;表格每一格都畫上格線,讀者的視線被切成一段一段;漸層底色與陰影看起來有質感,卻讓真正該被看到的數字,淹沒在背景的明暗變化裡。

同一組季度數字,左邊雜訊圖表被滿版格線、漸層、陰影、外框埋住,右邊拿掉裝飾後長條與數字一眼就跳出來。
把格線、漸層、陰影與外框這些裝飾拿掉,資料墨水比一提高,同一組數字反而更清楚。

要判斷這些元素該不該留,有個問法可以直接套用。先問自己,把這條線、這塊底色拿掉,讀者還看得懂資料在講什麼嗎?如果拿掉之後讀者一樣看得懂,那它就是多餘的裝飾,不是資料。後面不管是表格排版的修法,還是資訊圖表的留白原則,基本上都是從這個判準延伸出來的。

表格排版最常見的錯,以及對應修法

進到實際的表格,問題通常不是資料本身有錯,而是排版方式讓讀者要花額外力氣才能比對。以下四個錯誤,幾乎在報告、簡報裡的表格都看得到,每一條都能直接對照著手上正在做的表格檢查。

同一份表格,左邊滿版框線、全置中、每欄上色、小數點不齊很難掃視,右邊只留必要水平線、文字靠左數字靠右、單色標一列、小數點對齊後好讀許多。
資料一模一樣,只改框線精簡、文字靠左數字靠右、單色強調、小數點對齊這四處,表格就從難讀變好讀。

錯誤一:框線加越多,資料反而更難一眼比對

表格加外框、每一格都畫格線,是最常見的直覺做法,理由通常是看起來比較正式、比較完整。但格線一多,讀者水平掃視一整排資料時,視線會被格線切成一段一段,垂直方向的格線尤其容易變成純粹的雜訊,因為資料本身只要對齊整齊,結構就已經很清楚,不需要再靠線條去框。

Science Editor 期刊一篇談表格設計的文章就指出,一張表格通常只需要少數幾條水平線,而且線要盡量細、顏色要淺;A List Apart 也建議盡量不要用外框,能不用格線就不用格線,真的要用也只用在一個方向。修法可以很直接,只留表頭下方一條、加總上下各一條,拿掉多餘的垂直線與外框,讓資料本身的對齊撐出結構;真的需要分隔線,線要細、顏色要淺,不能搶過資料本身。

錯誤二:置中對齊看起來最整齊,其實最難掃視

很多人排表格時,直覺會把每一欄都設成置中對齊,理由是感覺比較美觀、比較工整。問題是置中會讓每一行文字的左右邊緣參差不齊,讀者的視線得不斷重新尋找每一行的起點,掃視速度比靠左對齊慢上不少。

A List Apart 與 Science Editor 都建議文字資料靠左對齊、數字資料靠右對齊;A List Apart 進一步建議欄位標題也要跟著自己那一欄的資料方向走,數字欄的標題一樣靠右,讓整欄從標題到資料維持在同一條隱形直線上。

錯誤三:色塊到處強調重點,等於沒有重點

另一個常見錯誤,是想強調的地方太多,乾脆整張表格到處上色,不管數字重不重要都各標一次顏色,甚至每一欄換一種底色。結果讀者打開表格,滿版都是顏色,反而分不出哪一格才是真正要看的重點。顏色一旦到處都在講這裡重要,等於沒有一處真正重要。

Science Editor 的建議是表格整體維持單一色調,只在真正要凸顯的一兩個數字或欄位上,用一種淺色底標示,欄數多的表格則可以用淺色斑馬紋幫讀者對齊每一列;同樣是顏色克制的邏輯,Nielsen Norman Group 也在圖表設計的建議裡提醒過,顏色要集中留給少數真正需要被看到的元素,而不是平均分散在整個畫面上。

錯誤四:小數點沒對齊,數字大小很難一眼比出來

就算已經把數字欄位設成靠右對齊,只要每一列的小數位數不一致,讀者還是很難在第一眼分出數字的大小。舉例來說,1.3 和 10.8 擺在同一欄,如果沒有對齊小數點,兩個數字看起來會像差不多長,讀者得多看一次才能確定誰比較大。

A List Apart 建議把整欄的小數位數統一,並盡量使用等寬數字(tabular numerals),讓每個字元占的寬度一致,金額類的數字再加上千分位符號,讀者不用逐位數去算就能比出大小。

資訊圖表別急著加東西,用「留白」做減法

表格是把資料整理整齊,資訊圖表則是把資料變成一眼能懂的畫面,但常見的教學多半在教怎麼挑圖示、怎麼選版型,很少提醒該拿掉什麼。資訊圖表最常出問題的地方,往往不是元素不夠多,而是每個元素都想搶戲,讀者反而抓不到重點在哪。以下三個原則,分別處理訊息太多、顏色太多、靠外框硬分組這三種最常見的加法陷阱。

原則一:一張圖只留一個重點,其餘都是雜訊

資訊圖表最容易犯的錯誤,是想把手上蒐集到的所有數據都塞進同一張圖,結果整張圖沒有明確的視覺層級,讀者不知道該先看哪裡、後看哪裡。這其實就是前面雜訊圖表的概念,搬到資訊圖表上的具體版本。

Nielsen Norman Group 在資訊圖表設計的建議中特別點出,視覺層級不清楚、比例被誇大扭曲,是最常見的錯誤之一。動筆前,先決定這張圖唯一要傳達的核心訊息是什麼,任何跟這個核心訊息沒有直接關係的數據點,都該移到別處或直接拿掉,再用字級大小、粗細做出明確的層級,而不是把所有文字都用同樣的大小塞滿版面。

原則二:配色先抓「60-30-10」比例,不是顏色越多越好

新手做資訊圖表時常見的直覺,是覺得顏色用得越多越吸睛,結果每種顏色都在搶讀者的注意力,反而找不到真正的重點在哪。Nielsen Norman Group 在色彩設計的建議中提出 60-30-10 這個分配比例:六成用主色、三成用輔助色,剩下一成留給強調色,主色與輔助色盡量選中性一點的顏色。放到資訊圖表上,剩下那一成強調色就該只留給真正要讀者看到的數字或結論,其餘版面愈克制愈好。

資訊圖表配色的 60-30-10 比例:六成主色鋪底、三成輔色撐層次,一成強調色只留給關鍵數字,顏色就不會互相搶戲。
配色抓 60-30-10:主色鋪底、輔色撐層次,剩下一成強調色只留給最該被看到的那個數字或結論。

這個比例的用意,是先把注意力還給少數幾個真正重要的地方,而不是讓所有顏色平均搶戲。另外也要顧到色弱或弱視讀者能不能分辨,顏色差異之外,最好再搭配文字標籤或形狀做區分,不要只靠顏色本身傳達差異。

原則三:留白就能分組,不必再靠外框或色塊圈資訊

很多人想把資訊圖表裡不同區塊的內容分開,直覺做法是加外框線、鋪底色色塊,或畫一條分隔線隔開。其實只要善用留白的間距,相關的資訊擺得近一點,不同區塊之間拉開距離,同樣能達到分組的效果,畫面反而更乾淨。

Nielsen Norman Group 在雜訊圖表的討論裡就提到,像圖例這種讀者得來回對照的元素,很多時候可以拿掉,直接把資料標籤標在資料本身旁邊,效果一樣清楚,還省掉一道對照的力氣。分組也是同樣的道理,相關的東西擺得靠近一點,讀者自然會把它們當成一組,不必額外加框線或色塊去強調。

不管是表格還是資訊圖表,讓讀者看懂的關鍵,從來不是加了多少設計,而是拿掉了多少多餘的東西。框線、顏色、外框、色塊,這些工具原本是幫讀者理解資料的,一旦用過頭,反而變成讀者要先克服的障礙。

下次動手排表格或畫資訊圖表之前,不妨先問自己一句:這條線、這塊顏色、這個圖示,拿掉之後讀者還看得懂嗎?看得懂,就該拿掉。

資料來源
  1. The Visual Display of Quantitative Information (1983) — Edward Tufte
  2. Clutter-Free: One of the 3 Cs for Better Charts — Nielsen Norman Group
  3. Designing Effective Infographics — Nielsen Norman Group
  4. Using Color to Enhance Your Design — Nielsen Norman Group
  5. Best Practices in Table Design — Science Editor
  6. Web Typography: Designing Tables to be Read, Not Looked At — A List Apart