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

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

如Adwords的界面所示：

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

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

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

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

如Adwords所示：

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

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

表格的易讀性設(shè)計(jì)時(shí)，可從15個(gè)方面來(lái)考慮：

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

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

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

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

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

2. 列標(biāo)簽

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

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

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

3. 自定義列

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

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

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

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

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

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

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

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

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

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

6. 行高設(shè)置

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

7. 分隔線

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如Adwords所示：

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

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

10. 固定表頭

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

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

11. 固定列

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

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

12. 可伸縮列

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

如Adwords所示：

13. 多級(jí)表頭

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

如FC所示，采用了多級(jí)表頭：

14. 全屏查閱

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

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

15. 分頁(yè)及翻頁(yè)

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

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

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

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

注意:

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

如Adwords所示：

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

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

參考文獻(xiàn)

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

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

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