金融產(chǎn)品中的表格真不少，來(lái)看看設(shè)計(jì)時(shí)需要注意的細(xì)節(jié)吧！

令人不爽的表格。他的問(wèn)題究竟出自哪里？

在互聯(lián)網(wǎng)早期時(shí)代，表格是基本構(gòu)成元素之一，后來(lái)被設(shè)計(jì)師用更新更符合潮流的布局取代。雖然現(xiàn)在表格在網(wǎng)絡(luò)上很少出現(xiàn)，但它仍在我們的日?；A(chǔ)交流中收集組織了大部分信息。

例如，我認(rèn)為有一份表格可以算是表格的始祖：美國(guó)的“協(xié)調(diào)關(guān)稅表”，它足足有3440頁(yè)，并列出了每種可進(jìn)口到美國(guó)的商品，包孕浩大的條目紀(jì)錄如“男人或男孩的大衣、短大衣、披肩、斗篷、帶風(fēng)帽的夾克（包孕滑雪夾克）、風(fēng)衣、和類(lèi)似商品（包孕帶襯里的、無(wú)袖的夾克）”。

短大衣究竟是什么？

如果說(shuō)這樣的數(shù)據(jù)表格讓人惱火，那毫無(wú)疑問(wèn)是因?yàn)檫@些表格太爛了，完全沒(méi)有被認(rèn)真設(shè)計(jì)過(guò)。設(shè)計(jì)是表格的關(guān)鍵：如果設(shè)計(jì)得當(dāng)，瀏覽比較復(fù)雜的數(shù)據(jù)會(huì)很容易，如果設(shè)計(jì)不妥，信息就完全無(wú)法理解。

所以我們當(dāng)然要正確設(shè)計(jì)，對(duì)嗎？

雖然都是數(shù)字，但它們長(zhǎng)得都不太一樣。我不是在說(shuō)數(shù)字各不相等，就像π不等于∞那樣（雖然我在聚會(huì)上經(jīng)常使用）；我是指他們有的是表列數(shù)字、有的是舊式數(shù)字，有的是等高數(shù)字，有的是成比例數(shù)字。

下圖簡(jiǎn)潔快速地區(qū)分了舊式數(shù)字和等高數(shù)字的區(qū)別：

舊式數(shù)字vs等高數(shù)字

舊式數(shù)字在句子中看起來(lái)很贊，在句子中他們更匹配小寫(xiě)字母的尺寸和間距。等高字體更統(tǒng)一，而且強(qiáng)化了網(wǎng)格狀的表格結(jié)構(gòu)。

成比例數(shù)字和表列數(shù)字的區(qū)別并不明顯：

成比例數(shù)字vs表列數(shù)字

設(shè)計(jì)成比例數(shù)字的目的用于連結(jié)顏色協(xié)調(diào)——即字體的大小和間距要一致。另一方面，表列數(shù)字的尺寸相對(duì)獨(dú)立，所以他們可以縱向?qū)R。雖然在只有一到兩行的情況下，這種區(qū)別并不明顯，但在對(duì)于大型表格來(lái)說(shuō)，使用表列數(shù)字會(huì)瀏覽起來(lái)更便利且不易出錯(cuò)。

在設(shè)計(jì)時(shí)，你需要做一點(diǎn)工作來(lái)確保使用的數(shù)字是正確的（等高表列數(shù)字通常不是默認(rèn)的）。Adobe產(chǎn)品有一個(gè)“opentype”面板用于正確設(shè)置數(shù)字，CSS也提供了一種”slightly－cryptics“語(yǔ)法來(lái)確保其可用。除了這些，一些基本搜索也可以引導(dǎo)你找到正確的標(biāo)的目的。

但是壞消息是：并不是所有的字體包羅的等高表列數(shù)字都可用。有一些可用的往往很貴。但有少數(shù)例外：優(yōu)秀的“Work Sans”字體是一款帶有等高表列數(shù)字的免費(fèi)字體。

如果你無(wú)法找到合適的帶有等高表列數(shù)字的字體，可以使用等寬字體代替——它們看起來(lái)更像“源代碼”，總是很適合在表格中展示數(shù)字。別的，新的蘋(píng)果系統(tǒng)的默認(rèn)字體“San Francisco”也包羅優(yōu)秀的等高表列數(shù)字，而且在小尺寸的時(shí)候看起來(lái)很棒。

有3個(gè)半原則要遵循：

1. 數(shù)字要右對(duì)齊

2. 文字要左對(duì)齊

3. 表頭與數(shù)據(jù)對(duì)齊

3.5 不要使用居中對(duì)齊

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

數(shù)字從右向左讀；這就是說(shuō)，我們比較數(shù)字時(shí)，首先看個(gè)位，然后是十位、百位。大多數(shù)人們也是這樣學(xué)習(xí)算術(shù)的——從右邊開(kāi)始，向左移動(dòng)，動(dòng)態(tài)地傳遞數(shù)據(jù)。所以，表格中的數(shù)字應(yīng)該連結(jié)右對(duì)齊。

文本信息（英文）從左向右讀。通常是按字母挨次排序的方法比較文本信息：如果兩個(gè)條目以相同的字母開(kāi)頭，就比較第二個(gè)字母，以此類(lèi)推。如果沒(méi)有左對(duì)齊，，試圖快速瀏覽這樣的文本會(huì)使人煩躁。

表頭通常應(yīng)當(dāng)遵循表格中數(shù)據(jù)的對(duì)齊方式。這是的表格垂直標(biāo)的目的看起來(lái)更整潔，并提供了一致性和上下文環(huán)境。

居中對(duì)齊會(huì)使表格的行看起來(lái)“參差不齊”，瀏覽條目會(huì)更困難，常常要使用額外的分隔線和圖形元素。

有一種簡(jiǎn)單的方法能讓你的表格看起來(lái)更整齊，就是連結(jié)一致的有效數(shù)字(一般情況下指小數(shù)點(diǎn)后的位數(shù))，這樣每一列數(shù)據(jù)中的小數(shù)點(diǎn)后位數(shù)都是一樣的。有效數(shù)字細(xì)究起來(lái)就沒(méi)玩沒(méi)了了，這里就不過(guò)多詳述，我的簡(jiǎn)單建議就是：表格數(shù)字不是越精確越好，需要多少有效數(shù)字就顯示多少，不必太多。

使用標(biāo)簽輔助數(shù)據(jù)很重要。這些輔助的內(nèi)容使數(shù)據(jù)表格能獲得更多讀者，適用于更廣泛的情況。

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

標(biāo)簽：鹽城 林芝 九江 烏魯木齊 東營(yíng)