多數人以為,表格的框線畫得越密、資訊圖表用的顏色越豐富,讀者才看得懂重點在哪。設計研究顯示的方向常常正好相反,線條與色彩每多加一分,讀者反而要多花一分力氣去分辨,眼前這條線、這塊顏色,是真正的資料,還是純粹的裝飾。
這背後有個明確的判準,叫做資料墨水比(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 這個分配比例:六成用主色、三成用輔助色,剩下一成留給強調色,主色與輔助色盡量選中性一點的顏色。放到資訊圖表上,剩下那一成強調色就該只留給真正要讀者看到的數字或結論,其餘版面愈克制愈好。

這個比例的用意,是先把注意力還給少數幾個真正重要的地方,而不是讓所有顏色平均搶戲。另外也要顧到色弱或弱視讀者能不能分辨,顏色差異之外,最好再搭配文字標籤或形狀做區分,不要只靠顏色本身傳達差異。
原則三:留白就能分組,不必再靠外框或色塊圈資訊
很多人想把資訊圖表裡不同區塊的內容分開,直覺做法是加外框線、鋪底色色塊,或畫一條分隔線隔開。其實只要善用留白的間距,相關的資訊擺得近一點,不同區塊之間拉開距離,同樣能達到分組的效果,畫面反而更乾淨。
Nielsen Norman Group 在雜訊圖表的討論裡就提到,像圖例這種讀者得來回對照的元素,很多時候可以拿掉,直接把資料標籤標在資料本身旁邊,效果一樣清楚,還省掉一道對照的力氣。分組也是同樣的道理,相關的東西擺得靠近一點,讀者自然會把它們當成一組,不必額外加框線或色塊去強調。
不管是表格還是資訊圖表,讓讀者看懂的關鍵,從來不是加了多少設計,而是拿掉了多少多餘的東西。框線、顏色、外框、色塊,這些工具原本是幫讀者理解資料的,一旦用過頭,反而變成讀者要先克服的障礙。
下次動手排表格或畫資訊圖表之前,不妨先問自己一句:這條線、這塊顏色、這個圖示,拿掉之後讀者還看得懂嗎?看得懂,就該拿掉。
