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

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

不過短大衣到底是什么？

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

我們當(dāng)然要處理得當(dāng)，是吧？

了解數(shù)字

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

下圖簡明地闡述了舊體數(shù)字和等高數(shù)字之間的區(qū)別。

舊體數(shù)字與等高數(shù)字

舊體數(shù)字在句子中表現(xiàn)很好，在句子當(dāng)中它們更匹配小寫字母的尺寸和間距；等高數(shù)字更加統(tǒng)一，強(qiáng)調(diào)了一種網(wǎng)格式的表格結(jié)構(gòu)。

比例數(shù)字和表格數(shù)字之間的區(qū)別不是那么明顯：

比例數(shù)字和表格數(shù)字

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

使用等高表格數(shù)字的技巧

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

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

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

對齊很重要

可以遵循3條半原則：

• 1. 數(shù)字應(yīng)該右對齊
• 2. 文字信息左對齊
• 3. 表頭與數(shù)據(jù)對齊
• 不要使用居中對齊

美國各州歷年人口統(tǒng)計——維基百科

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

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

通常，表頭應(yīng)當(dāng)符合數(shù)據(jù)的對齊方式。這能保持表格豎直方向整潔，營造一致性和上下文環(huán)境。

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

最小數(shù)位一致 = 更好的對齊

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

短小精悍的標(biāo)簽

使用標(biāo)簽來配合數(shù)據(jù)至關(guān)重要。這些搭配的內(nèi)容能讓表格被更多讀者理解，適用于更多的情況。

密西西比河洪水預(yù)報——NOAA

標(biāo)題

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

單位

表格中最常用的標(biāo)簽，是數(shù)據(jù)的度量單位；通常，每條數(shù)據(jù)都會重復(fù)加上單位。其實不該如此，應(yīng)該只在每列的第一條數(shù)據(jù)加上單位。

表頭

表頭盡可能短；數(shù)據(jù)表格的設(shè)計，應(yīng)當(dāng)使注意力集中在數(shù)據(jù)本身，而且長表頭標(biāo)簽會占用過多的視覺空間。

盡可能少著墨

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

2016年美國棒球聯(lián)盟擊球統(tǒng)計——BaseballReference

分隔線

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

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

關(guān)于分隔線，我有一條未經(jīng)證實的觀念，間隔條紋很不好。真的非常糟糕，信不信由你。

背景

在指示不同領(lǐng)域的數(shù)據(jù)時，背景是最有用的：例如從單條數(shù)據(jù)轉(zhuǎn)為總和或平均值。

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

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

結(jié)論

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

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

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計師，至少是個快樂的設(shè)計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。