表格的易讀性和易操作性設(shè)計，對提升B端用戶的操作效率來說十分重要，本篇文章將告訴大家表格的易讀性設(shè)計時，應(yīng)該從這些方面來考慮。

以商業(yè)B端后臺-谷歌廣告投放系統(tǒng)（以下簡稱Adwords)為例，在Adwords的核心頁面中，表格占了近90%的空間，大部份的用戶在這個頁面的活動區(qū)域基本集中的表格，表格是商業(yè)B端后臺用戶操作頻率最高的交互控件之一。

如Adwords的界面所示：

對于B端用戶而言，來后臺主要目的之一就是對數(shù)據(jù)進(jìn)行查閱和操作，而表格做為結(jié)構(gòu)化數(shù)據(jù)的載體，承載了數(shù)據(jù)的保存、展示、對比分析、排序、篩選 、搜索等功能。

因此表格的易讀性和易操作性設(shè)計對于提升B端用戶的操作效率有著舉足輕重的作用。

表格通常由內(nèi)外兩部分組成：

• 內(nèi)部，由表頭、表體、表尾共3 部份組成。
• 外部，由搜索、篩選、相關(guān)命令按鈕、分頁等構(gòu)成。

如Adwords所示：

本文從表格的易讀性和易操作性2個方向，共分24個方面進(jìn)行詳細(xì)闡述：

以下為本文的框架圖，大家可以參考這個框架直接定位自己感興趣的內(nèi)容，有選擇性的閱讀：

表格的易讀性設(shè)計時，可從15個方面來考慮：

1. 列的選擇、默認(rèn)列的設(shè)置、列的默認(rèn)排序

需要交互設(shè)計師基對實際業(yè)務(wù)需求及目標(biāo)用戶訴求及行為的理解，即表格的設(shè)計要同時符合業(yè)務(wù)模型和用戶的心智模型。

列的選擇：盡量減少列的數(shù)量，避免出現(xiàn)用戶不需要的數(shù)據(jù)，同時也要避免省略必要信息，以免造出數(shù)據(jù)缺失；

默認(rèn)列的設(shè)置：隱藏不必要的信息，用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決；

默認(rèn)排序：目標(biāo)用戶看數(shù)據(jù)訴求出發(fā)，遵循用戶查看數(shù)據(jù)的習(xí)慣，尊重數(shù)據(jù)之間的關(guān)聯(lián)性，設(shè)計用戶查看、操作數(shù)據(jù)的路徑。

2. 列標(biāo)簽

對于B端產(chǎn)品而言，先能把事情說清楚，再考慮文字的簡潔性。一個簡單的檢驗方法是：少一個字不可。

在表格數(shù)據(jù)可以自我解釋的情況下，列標(biāo)簽就不是必須的，如電子郵件的表格，就不需要列標(biāo)簽，因為發(fā)件人和郵件主題的區(qū)分度比較高。

如Adwords所示，標(biāo)簽的文案做到了“少一個字不可”：

3. 自定義列

B端后臺通常會對應(yīng)不同的角色及不同的需求，可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。

注意：系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置。

如Adwords所示，數(shù)據(jù)較為復(fù)雜，對展示列的定義分成兩步：左側(cè)先選擇展示的列，右側(cè)對列進(jìn)行排序：

4. 提供數(shù)據(jù)處理值

為便于用戶對數(shù)據(jù)進(jìn)行對比分析，一般需要原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計等數(shù)據(jù)處理結(jié)果，減少用戶心算和再做數(shù)據(jù)加工的過程，提升用戶閱讀信息的效率。

如Adwords所示，在表頭和表尾分別提供了總計數(shù)據(jù)：

如FC所示，在表頭提供了總計行，供用戶進(jìn)行快速查閱：

5. 列寬的設(shè)置：

1. 在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大小（可伸縮列）。如文本類最小列寬可為3個中文字符、含圖片的最小列寬不影響圖片的閱讀，超出部份換行顯示；
2. 按字段內(nèi)容屬性給出固定寬度，比如姓名固定3個中文字符、電話號碼固定為11個英文字符等。

以Adwords為例，采用的是固定列寬+可伸縮列：

6. 行高設(shè)置

單行文本的表格，建議行高為字體高度的2倍到3倍；多行文本（含圖文）的表格，建議內(nèi)容到上下邊框的距離略小于文字高度。

7. 分隔線

1. 水平分割線，能顯著減輕表格在垂直方向的視覺重量，提升用戶進(jìn)行大量數(shù)據(jù)對比時的速度。
2. 垂直分隔線，在表格中使用適合的對齊方式后，那么可以省略；數(shù)據(jù)量級比較大的表格，可以使用較淡的分隔線，提升瀏覽速度。

如Adwords，采用了同時采用了水平和垂直分隔線：

如Adwords，省略了垂直分隔線：

8. 單元格數(shù)據(jù)展示

1. 數(shù)據(jù)對齊：能形成的視覺邊界線，便于視線的流動，從而快速提升數(shù)據(jù)的瀏覽、對比效率。

常用對齊方式：數(shù)字右對齊，文字左對齊，混合型文本左對齊，列標(biāo)簽的對齊方式與數(shù)據(jù)的對齊方式保持一致。如Adwords所示：

2. 空數(shù)據(jù)的展示：切忌不要與數(shù)據(jù)為“０”進(jìn)行混淆，通用做法是用“－”表示。

B端后臺數(shù)據(jù)類型較多，最好能為空數(shù)據(jù)做出釋義，可以加在“列標(biāo)簽”的名詞解釋文案中。

以Adwords為例，用“-”表示空數(shù)據(jù)：

3. 數(shù)據(jù)的關(guān)鍵屬性標(biāo)識：比如用戶重點關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可以用符號進(jìn)行標(biāo)識，幫助用戶快速定位到目標(biāo)信息。

如Adwords所示，用帶顏色的上圓圈示意當(dāng)前行的狀態(tài)，綠色為有效、灰色為暫停：

4. 數(shù)字及非用戶操作數(shù)據(jù)展示：數(shù)字?jǐn)?shù)據(jù)帶上單位，如金額加上幣種符號“￥”、預(yù)算要給出單位“/天”等，以幫助用戶快速理對數(shù)字進(jìn)行區(qū)分閱讀；部份數(shù)據(jù)的操作人是系統(tǒng)，須與用戶產(chǎn)生的數(shù)據(jù)做區(qū)分展示。

如Adwords所示，預(yù)算數(shù)據(jù)帶上單位、費用帶上人民幣符號、系統(tǒng)產(chǎn)生的數(shù)據(jù)帶上了“自動”標(biāo)識：

9. 行數(shù)據(jù)展示

1. 默認(rèn)排序：常以創(chuàng)建時間進(jìn)行排序，即最新創(chuàng)建的排在最前面。

如Adwords所示：

2. 從屬-行內(nèi)展開可分為整行整開、某個單元格數(shù)據(jù)展開，以Adwords為例，“更改”這個列的數(shù)據(jù)展開：

3. 從屬-分行展示，從屬數(shù)據(jù)與主數(shù)據(jù)共用部份數(shù)據(jù)列，以Adwords為例:

10. 固定表頭

利于用戶向下翻屏?xí)r能夠便利的閱讀數(shù)據(jù)，固定的內(nèi)容除列標(biāo)簽以外，可視具體場景而定，加入其它行。

如Adwords所示，固定了列標(biāo)簽與總計行：

11. 固定列

利于用戶進(jìn)行數(shù)據(jù)定位與對比，固定列的內(nèi)容可視業(yè)務(wù)及目標(biāo)用戶的訴求而定，甚至可以讓用戶自定義。

如Adwords所示，固定了名稱列：

12. 可伸縮列

設(shè)定表格列的默認(rèn)寬度時，優(yōu)先考慮的是數(shù)據(jù)內(nèi)容的查閱，這有可能會導(dǎo)致一些長的列標(biāo)簽出現(xiàn)折行的情況，而可伸縮列則良好的解決了這個問題，系統(tǒng)應(yīng)記住用戶自己設(shè)置的列寬。

如Adwords所示：

13. 多級表頭

數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的，可使用多級表頭來體現(xiàn)數(shù)據(jù)的層次關(guān)系。

如FC所示，采用了多級表頭：

14. 全屏查閱

可減少與表格無關(guān)的視覺干擾，提供表格的沉浸式閱讀體驗，應(yīng)注意可以讓用戶很便捷的退出。

如Adwords所示，全屏模式可以直接屏蔽掉上方的報表區(qū)域和左側(cè)及頂部的導(dǎo)航欄，用戶通過ESC鍵可以隨時退出全屏模式，學(xué)習(xí)成本較低。

15. 分頁及翻頁

用戶一般不喜翻頁，涉及到跨頁的數(shù)據(jù)操作時，分頁會帶來不便。但受限于數(shù)據(jù)加載的壓力，在WEB端、手機端等需要實時下載數(shù)據(jù)的終端，通常需要分頁展示數(shù)據(jù)來緩解服務(wù)器的壓力，因此用戶需要分頁查看和操作；而在客戶端，數(shù)據(jù)已下載到了本地，可以采用流的方式呈現(xiàn)數(shù)據(jù)，不需要分頁展示，用戶操作的成本更低。

在WEB端，表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能，這個“數(shù)量”由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定，大原則是整張表不要超過一屏，考慮到每個用戶的使用習(xí)慣，可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏?xí)憷?/p>

翻頁控件內(nèi)容 ：

用戶自定義每頁顯示的數(shù)量，當(dāng)前頁碼（行數(shù)），全部數(shù)據(jù)的頁數(shù)（行數(shù)），向前翻頁，向后翻頁，到達(dá)第一頁，到達(dá)最后一頁等。

注意:

1. 當(dāng)前用戶的數(shù)據(jù)未超過一頁時，無須展示翻頁控件。
2. 對于B端后臺的用戶而言，告之當(dāng)面數(shù)據(jù)的行數(shù)比當(dāng)前的頁數(shù)更有用。
3. 翻頁按鈕不可用時，須給出置灰態(tài)。

如Adwords所示：

翻頁控件做為篩選數(shù)據(jù)的一種方式，通常會結(jié)合日歷、排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網(wǎng)易的郵箱，翻頁與日歷結(jié)合一起使用，對于有大量郵件數(shù)據(jù)的用戶來說，查閱郵件的效率更高：

未完待續(xù)，“提升表格的易操作性”詳見下篇。

參考文獻(xiàn)

劉平《WEB表格設(shè)計攻略》計算機與網(wǎng)絡(luò)(2017)

本文由 @崔玲美 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議