表格在互聯網早期是基礎設施之一，之后許多設計師用更新更時髦的布局取而代之。雖然在如今的互聯網上很少露面，但是表格在我們基礎日常生活中，仍然為我們收集組織了許多信息。

例如，我覺得有一份表格可以稱之為表格之母：美國的“協調關稅表”，長達3550頁的表格，列出了每一種可以進口到美國的商品，包括多如牛毛的條目，例如“男士或男孩的大衣、短大衣、披肩、斗篷、厚夾克（包括滑雪衫）、防風服、和類似物品（包括帶襯里的、無袖的夾克）”。

不過短大衣到底是什么？

數據表格容易使人發火，毫無疑問這要歸咎于它們粗糙的設計，看起來糟糕透了。設計是表格的關鍵：如果處理得當，就能使復雜的數據能夠輕松瀏覽和比較。如果處理不善，它能讓信息完全無法理解。

我們當然要處理得當，是吧？

了解數字

數字生來并不等同。我不是指π和∞（雖然我在派對上經常用）；我是指數字有的是表格數字，有的是舊體數字，有的是等高數字，有的是比例數字。

下圖簡明地闡述了舊體數字和等高數字之間的區別。

舊體數字與等高數字

舊體數字在句子中表現很好，在句子當中它們更匹配小寫字母的尺寸和間距；等高數字更加統一，強調了一種網格式的表格結構。

比例數字和表格數字之間的區別不是那么明顯：

比例數字和表格數字

比例數字的設計初衷是保持黑白協調——也就是說字體的尺寸和間距大致相同。相反，表格數字每一個尺寸都相對獨立，數字就能縱向對齊。雖然在一兩行的情況下，兩者區別似乎不大。但使用表格數字，能讓大型表格瀏覽起來更輕松，不易出錯。

使用等高表格數字的技巧

設計時，你需要花點精力，確保用對了數字的類別（等高表格數字并不是默認的）。Adobe產品有一個“opentype”面板，可以對數字進行適當設置，CSS也提供了一種slightly-cryptic語法用來開啟這個功能。除此之外，稍微搜索一下你就能找到方向。

但也有個壞消息：并非所有字體都包含可用的等高表格數字。那些漂亮的非常貴。有少數例外：優秀的Work Sans字體是一款帶有等高表格數字的免費字體。

如果找不到合適的帶有等高表格數字的字體，可以退而求其次使用等寬字體——它們看起來更像“代碼”，總是很適合在表格中展示數字。而且，新的Apple系統默認字體——舊金山字體，就包含優秀的等高表格數字，并且在小字號情況下表現良好。

對齊很重要

可以遵循3條半原則：

• 1. 數字應該右對齊
• 2. 文字信息左對齊
• 3. 表頭與數據對齊
• 不要使用居中對齊

美國各州歷年人口統計——維基百科

數字是從右向左讀的；這是因為，我們對比數字時，首先看個位，然后十位、百位。多數人也是這么學會算數的——從右邊開始，向左移動，在移動中傳遞數字[1]。因此，表格的數字應當右對齊。

文字信息是從左向右讀（至少在英文中如此）。比較文本元素通常是靠字母表順序排列：如果兩個條目首字母相同，就對比第二個字母，以此類推。如果不采用左對齊，嘗試快速瀏覽文字會使人抓狂。

通常，表頭應當符合數據的對齊方式。這能保持表格豎直方向整潔，營造一致性和上下文環境。

居中對齊會導致表格的行“參差不齊”，瀏覽條目就會更難，常常需要額外的分隔物或圖形元素。

最小數位一致 = 更好的對齊

有個簡單辦法能使表格正確對齊，保持數字的最小數位一致——通常是指小數部分的數位——每一列保持統一。數位展開來講可以寫一整篇文章，那么我在此就簡單總結：數位用的越少越好。

短小精悍的標簽

使用標簽來配合數據至關重要。這些搭配的內容能讓表格被更多讀者理解，適用于更多的情況。

密西西比河洪水預報——NOAA

標題

雖然是老生常談，但給數據表格起一個清晰簡明的標題，與其他的設計決策同等重要。有了好的標題，表格就可以獨立使用：它們可以用在許多不同場合中，也可以由外部來源引用。

單位

表格中最常用的標簽，是數據的度量單位；通常，每條數據都會重復加上單位。其實不該如此，應該只在每列的第一條數據加上單位。

表頭

表頭盡可能短；數據表格的設計，應當使注意力集中在數據本身，而且長表頭標簽會占用過多的視覺空間。

盡可能少著墨

考慮如何裝飾表格中的圖形元素時，目標應當始終為削弱表格的痕跡，同時精確保持表格的結構。盡可能少“著墨”，就能做到這一點——也就是說，盡可能不給元素加裝飾。

2016年美國棒球聯盟擊球統計——BaseballReference

分隔線

如果在表格中使用適合的對齊方式，分隔線就是多余的。它們最大的貢獻，就是讓你縮減元素之間的距離，但仍能區分不同元素。即使要用，分隔線也要非常淡，不能妨礙快速瀏覽。

水平分隔線最有用，因為它們能顯著減輕長表格在垂直方向的視覺重量，加快大量數值的對比工作，或者從時間中發現趨勢。

關于分隔線，我有一條未經證實的觀念，間隔條紋很不好。真的非常糟糕，信不信由你。

背景

在指示不同領域的數據時，背景是最有用的：例如從單條數據轉為總和或平均值。

突出顯示數據，為數據增加額外信息，或者用于指明與前一時期相比有變化的數據。達成這些目的，不用背景也行。單單用一些圖形元素，例如?、?（我的最愛之一）或?。

而且，表格應當是黑白的。運用彩色來提供組織性或增加含義，也會增加誤解或錯誤的可能，并且引發視覺障礙者的易用性問題。

結論

表格或許很枯燥，但它們是數據豐富的文檔的主要元素，值得我們投入每一絲每一毫的設計思考。設計更有效、簡潔、易用的表格，可以極大改善分析理解大量數據時的痛苦體驗。

原文鏈接：https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.9hag7vx1g

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產品經理專欄作家，UI/UX設計師，關注互聯網，關注科技?，F居杭州，與小伙伴們正在創業途中?；蛟S不是一名優秀的設計師，至少是個快樂的設計師。

本文原創發布于人人都是產品經理，未經許可，不得轉載。