糟糕的表格。它們到底問題出在哪裡?
表格在網際網路早期是基礎設施之一,之後許多設計師用更新更時髦的佈局取而代之。雖然在如今的網際網路上很少露面,但是表格在我們基礎日常生活中,仍然為我們收集組織了許多資訊。
例如,我覺得有一份表格可以稱之為表格之母:美國的“協調關稅表”,長達3550頁的表格,列出了每一種可以進口到美國的商品,包括多如牛毛的條目,例如“男士或男孩的大衣、短大衣、披肩、斗篷、厚夾克(包括滑雪衫)、防風服、和類似物品(包括帶襯裡的、無袖的夾克)”。
不過短大衣到底是什麼?
資料表格容易使人發火,毫無疑問這要歸咎於它們粗糙的設計,看起來糟糕透了。設計是表格的關鍵:如果處理得當,就能使複雜的資料能夠輕鬆瀏覽和比較。如果處理不善,它能讓資訊完全無法理解。
我們當然要處理得當,是吧?
瞭解數字
數字生來並不等同。我不是指π和∞(雖然我在派對上經常用);我是指數字有的是表格數字,有的是舊體數字,有的是等高數字,有的是比例數字。
下圖簡明地闡述了舊體數字和等高數字之間的區別。
舊體數字與等高數字
舊體數字在句子中表現很好,在句子當中它們更匹配小寫字母的尺寸和間距;等高數字更加統一,強調了一種網格式的表格結構。
比例數字和表格數字之間的區別不是那麼明顯:
比例數字和表格數字
比例數字的設計初衷是保持黑白協調——也就是說字型的尺寸和間距大致相同。相反,表格數字每一個尺寸都相對獨立,數字就能縱向對齊。雖然在一兩行的情況下,兩者區別似乎不大。但使用表格數字,能讓大型表格瀏覽起來更輕鬆,不易出錯。
使用等高表格數字的技巧
設計時,你需要花點精力,確保用對了數字的類別(等高表格數字並不是預設的)。Adobe產品有一個“opentype”皮膚,可以對數字進行適當設定,CSS也提供了一種slightly-cryptic語法用來開啟這個功能。除此之外,稍微搜尋一下你就能找到方向。
但也有個壞訊息:並非所有字型都包含可用的等高表格數字。那些漂亮的非常貴。有少數例外:優秀的Work Sans字型是一款帶有等高表格數字的免費字型。
如果找不到合適的帶有等高表格數字的字型,可以退而求其次使用等寬字型——它們看起來更像“程式碼”,總是很適合在表格中展示數字。而且,新的Apple系統預設字型——舊金山字型,就包含優秀的等高表格數字,並且在小字號情況下表現良好。
對齊很重要
可以遵循3條半原則:
1. 數字應該右對齊
2. 文字資訊左對齊
3. 表頭與資料對齊
3.5. 不要使用居中對齊
美國各州歷年人口統計——維基百科
數字是從右向左讀的;這是因為,我們對比數字時,首先看個位,然後十位、百位。多數人也是這麼學會算數的——從右邊開始,向左移動,在移動中傳遞數字[1]。因此,表格的數字應當右對齊。
文字資訊是從左向右讀(至少在英文中如此)。比較文字元素通常是靠字母表順序排列:如果兩個條目首字母相同,就對比第二個字母,以此類推。如果不採用左對齊,嘗試快速瀏覽文字會使人抓狂。
通常,表頭應當符合資料的對齊方式。這能保持表格豎直方向整潔,營造一致性和上下文環境。
居中對齊會導致表格的行“參差不齊”,瀏覽條目就會更難,常常需要額外的分隔物或圖形元素。
最小數位一致 = 更好的對齊
有個簡單辦法能使表格正確對齊,保持數字的最小數位一致——通常是指小數部分的數位——每一列保持統一。數位展開來講可以寫一整篇文章,那麼我在此就簡單總結:數位用的越少越好。
短小精悍的標籤
使用標籤來配合資料至關重要。這些搭配的內容能讓表格被更多讀者理解,適用於更多的情況。
密西西比河洪水預報——NOAA
標題
雖然是老生常談,但給資料表格起一個清晰簡明的標題,與其他的設計決策同等重要。有了好的標題,表格就可以獨立使用:它們可以用在許多不同場合中,也可以由外部來源引用。
單位
表格中最常用的標籤,是資料的度量單位;通常,每條資料都會重複加上單位。其實不該如此,應該只在每列的第一條資料加上單位。
表頭
表頭儘可能短;資料表格的設計,應當使注意力集中在資料本身,而且長表頭標籤會佔用過多的視覺空間。
儘可能少著墨
考慮如何裝飾表格中的圖形元素時,目標應當始終為削弱表格的痕跡,同時精確保持表格的結構。儘可能少“著墨”,就能做到這一點——也就是說,儘可能不給元素加裝飾。
2016年美國棒球聯盟擊球統計——BaseballReference
分隔線
如果在表格中使用適合的對齊方式,分隔線就是多餘的。它們最大的貢獻,就是讓你縮減元素之間的距離,但仍能區分不同元素。即使要用,分隔線也要非常淡,不能妨礙快速瀏覽。
水平分隔線最有用,因為它們能顯著減輕長表格在垂直方向的視覺重量,加快大量數值的對比工作,或者從時間中發現趨勢。
關於分隔線,我有一條未經證實的觀念,間隔條紋很不好。真的非常糟糕,信不信由你。
背景
在指示不同領域的資料時,背景是最有用的:例如從單條資料轉為總和或平均值。
突出顯示資料,為資料增加額外資訊,或者用於指明與前一時期相比有變化的資料。達成這些目的,不用背景也行。單單用一些圖形元素,例如✻、†(我的最愛之一)或▵。
而且,表格應當是黑白的。運用彩色來提供組織性或增加含義,也會增加誤解或錯誤的可能,並且引發視覺障礙者的易用性問題。
結論
表格或許很枯燥,但它們是資料豐富的文件的主要元素,值得我們投入每一絲每一毫的設計思考。設計更有效、簡潔、易用的表格,可以極大改善分析理解大量資料時的痛苦體驗。
延伸閱讀與啟發
FiveThirtyEight是一個很棒的靈感來源——他們用了一種名為Decima Mono的字型來展現資料,這是專為狹小空間展現大量資料而設計的。
Butterick的實用字型,我遇到字型相關的事情首先就會來這,其中的許多資料都儲存了一份——非常實用!
最後,所有的文章和資料設計,如果沒有Edward Tufte的箴言那都是不完整的。他在設計上的深刻見解不可或缺。
[1] 想了解有趣的算數方法,請看日本兒童使用的這種算盤,還有網格乘法。