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

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

不過(guò)短大衣到底是什么？

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

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

了解數(shù)字

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

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

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

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

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

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

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

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

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

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

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

對(duì)齊很重要

可以遵循3條半原則：

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

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

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

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

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

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

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

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

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

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

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

標(biāo)題

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

單位

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

表頭

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

盡可能少著墨

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

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

分隔線

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

水平分隔線最有用，因?yàn)樗鼈兡茱@著減輕長(zhǎng)表格在垂直方向的視覺(jué)重量，加快大量數(shù)值的對(duì)比工作，或者從時(shí)間中發(fā)現(xiàn)趨勢(shì)。

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

背景

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

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

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

結(jié)論

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

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

#專欄作家#

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

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