表格(Table)可讀性提升的系統(tǒng)總結(jié)，包括“行列組織關(guān)系模糊、單元格內(nèi)容不清晰”兩大方面...

前邊寫了個(gè)大框架，好像有點(diǎn)籠統(tǒng)，因?yàn)闆]有各點(diǎn)的圖文分析。最近用表格比較多，本文具體對(duì)表格可讀性的提升做個(gè)系統(tǒng)總結(jié)，順便把Readability Framework更新到了v1.1。如下圖：

追溯表格(Table)的歷史，最早設(shè)計(jì)師們喜歡用表格來布局，因?yàn)榭梢暬唵沃庇^，從而大大降低了web design的技術(shù)難度。在錯(cuò)誤理解表格的基礎(chǔ)上，不僅用錯(cuò)，而且模糊了表格的真正用途。到后來web standards改革，某些不實(shí)觀點(diǎn)又把表格打入冷宮，認(rèn)為

是罪惡之源。

實(shí)際上，用戶會(huì)有各種復(fù)雜或簡單的多維度大數(shù)據(jù)量內(nèi)容展示需求，為了更好的對(duì)比分析因此才用到表格（比如Excel），因?yàn)楸砀窨梢宰寖?nèi)容能更清晰易讀。比如，在記事本上用Tab也可以排出具有良好可讀性的“序列”效果，但畢竟不是直觀且有語義的組織模式，因此我認(rèn)為表格就是為可讀性而生的。

表格是web上最常用的內(nèi)容表現(xiàn)形式，所以多年來，關(guān)于表格的設(shè)計(jì)和代碼一直是考驗(yàn)web designer基礎(chǔ)的經(jīng)典題目。在表現(xiàn)層如何讓表格傳達(dá)更好，考驗(yàn)視覺傳達(dá)設(shè)計(jì)的功力；在語義層如何讓表格結(jié)構(gòu)更靈活，考驗(yàn)結(jié)構(gòu)表現(xiàn)結(jié)合的功力。二者相輔相成，共同影響表格在表現(xiàn)層的可讀性。那么哪些因素會(huì)影響表格的傳達(dá)？應(yīng)該如何做具體的傳達(dá)提升？看下文例子。

行列組織關(guān)系模糊

主要關(guān)于單元格之間的關(guān)系問題對(duì)可讀性的影響。通過輔助手段可以讓信息呈現(xiàn)更好的差異化，或突出更重要的信息。從需求角度再次印證，HTML結(jié)構(gòu)代碼與表現(xiàn)效果緊密相關(guān)，語義化表格是我們進(jìn)一步提升用戶體驗(yàn)的核心基礎(chǔ)。

表頭表尾和表體明顯區(qū)分，表頭是，表尾是，表體是，三個(gè)結(jié)構(gòu)性代碼組合使用。其目地是為了更好的用樣式表控制視覺表現(xiàn)，以起到明顯區(qū)分的作用（通常表頭、表尾的效果一致）。區(qū)分了表頭和表尾更容易控制，某些瀏覽器直接支持只滾動(dòng)表身。如下圖，表頭表尾與表體的層次區(qū)分明顯，截圖有裁切：

用邊框分隔單元格，使用定義{border-collapse}來合并邊框，早期CSS不受重視的年代，做1像素細(xì)線表格還是挺不容易的事。給單元格加上邊框后，可以更清晰的表達(dá)數(shù)據(jù)，并且不易看岔行。但是得注意，表格的邊框顏色不能過于搶眼，否則看起來會(huì)很糟糕。如下圖，1像素灰色邊框表格和黑色文字的對(duì)比：

間行換色，其實(shí)與“用邊框分隔單元格”是解決同一類問題，間行換色更適用于表格過寬的需求，一定程度上能加強(qiáng)避免讀錯(cuò)。同樣，間行換色的兩種顏色不能反差過大，否則看來太“跳躍”。另外，間行換色也常與1像素邊框同時(shí)使用，如果不定義邊框顏色，此時(shí)的1像素邊框是背景色的間隙效果。如下圖，1像素表格的表體區(qū)域有不太明顯的間行換色效果：

間列換色，也叫隔行換色，使用&組合標(biāo)簽對(duì)列進(jìn)行格式化，等于是間行換色的“垂直”版本，可以更強(qiáng)化列與列之間的差異。雖然看起來用處有限，但往往在應(yīng)對(duì)實(shí)際需求時(shí)，就是這樣的簡單改動(dòng)可以避免使用JS再開發(fā)。如下圖，分別給不同列指定背景色：

#p#

重要數(shù)據(jù)列強(qiáng)調(diào)，同樣使用&來控制，可以任意指定數(shù)據(jù)列強(qiáng)調(diào)顯示，表示當(dāng)前的操作結(jié)果。如下圖，表格的Visits字段，表示目前正在降序排列：

單元格內(nèi)容不清晰

主要是單元格內(nèi)容的展示以及數(shù)據(jù)屬性對(duì)可讀性的影響。分別闡述了根據(jù)數(shù)據(jù)特性定制顯示的四種對(duì)齊方式，首先是滿足用戶需求，其次才是迎合用戶的閱讀習(xí)慣。最后一點(diǎn)，應(yīng)該注意單元格的內(nèi)容不留空。

可變長度字符串左對(duì)齊，“可變長度”指長度不一定的數(shù)據(jù)列，比如商品名稱。此類情況應(yīng)該符合用戶的視線規(guī)律，左對(duì)齊排列，也能輔助對(duì)比明確各條數(shù)據(jù)的長短。如下圖，表格的Title, Company, Location三個(gè)字段數(shù)據(jù)：

固定長度、較短字符串居中，“固定長度”指長度規(guī)格不會(huì)變化的數(shù)據(jù)列，比如日期2009.02.21（補(bǔ)0是數(shù)字書寫規(guī)范）?！拜^短字符串”指很短也不需邏輯對(duì)比的數(shù)據(jù)列，比如操作鏈接，或表狀態(tài)文字，放中間左右留白均等是折中的最好效果。如下圖，表格的“報(bào)告、狀態(tài)”兩個(gè)字段數(shù)據(jù)：

可比較字符串右對(duì)齊，“可比較”指需要關(guān)聯(lián)對(duì)比的數(shù)據(jù)列，基本都指數(shù)字的情況，比如錢有十位的￥24.30和百位的￥452.10。注意一點(diǎn)，這里的“可比較”其實(shí)也是“可變長度”的，只不過“可比較”是更重要的需求。表格的數(shù)據(jù)列對(duì)比，是各種系統(tǒng)和平臺(tái)最經(jīng)常碰到的需求，此點(diǎn)也是最容易被忽視的問題。如下圖，表格的數(shù)字縱向?qū)Ρ刃Ч?/p>

合并列的單元格頂部對(duì)齊，“合并列的單元格”指使用了rowspan這個(gè)跨行屬性，指需要在水平方向跨多個(gè)單元格的需求，復(fù)雜表格中一對(duì)多的關(guān)系。此時(shí)已經(jīng)rowspan的單元格應(yīng)該定義valign=”top”靠頂，以保證所有數(shù)據(jù)在第一行能顯示完整。因?yàn)閱卧衲J(rèn)垂直居中，如果是多行的數(shù)據(jù)表，用戶從上往下的閱讀開始往往搞不清楚對(duì)應(yīng)的后續(xù)數(shù)據(jù)列內(nèi)容。如下圖，表格的“聯(lián)系人、狀態(tài)、價(jià)格”三個(gè)字段數(shù)據(jù)：

不留空白，空白單元格容易造成用戶困惑甚至誤解，用戶會(huì)搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？正確做法，沒有數(shù)據(jù)的顯示0，給沒有值的單元格劃線或者打叉。如下圖，單元格內(nèi)劃橫杠表示不支持：