本篇文章通過9個(gè)方面，告訴大家如何在設(shè)計(jì)時(shí)提升表格的易操作性。

接上篇已講完了表格的易讀性設(shè)計(jì)。

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

一、表格的易操作性

表格的易操作性，設(shè)計(jì)時(shí)可從如下這9個(gè)方面來考慮：

1. 搜索

當(dāng)表格的數(shù)據(jù)量較大時(shí)，可增加搜索功能來提升用戶查找數(shù)據(jù)的效率。

建議采用模糊搜索，精確搜索對(duì)用戶記憶要求太高，適用的用戶較少。

如Adwords所示，不僅提供了模糊搜索，還為用戶提供了跳轉(zhuǎn)的快捷方式：

2. 篩選

也稱數(shù)據(jù)過濾，常在數(shù)據(jù)量較大的場(chǎng)景中使用，須事先定義好篩選的過濾值。

搜索是篩選的一種，其過濾的值是關(guān)鍵字，考慮到部份場(chǎng)景搜索與篩選不需要共存，故本文將篩選和搜索進(jìn)行分開闡述。

根據(jù)篩選功能的位置不同，可分為表上方篩選和表頭篩選。

2.1?表上方篩選

篩選功能位于表格上方，與表頭篩選的不同之處：過濾值可以不限“表格列”的內(nèi)容、可單次進(jìn)行多列的交叉篩選。

如 Adwords在2018年的新版中，將之前表頭篩選合并成統(tǒng)一的入口置于搜索的右邊，便于用戶結(jié)合搜索一起使用，非常復(fù)雜的數(shù)據(jù)篩選可借鑒此種方式：

如淘寶賣家中心的表上方篩選，可以單次進(jìn)行多列的交叉篩選：

如FC 財(cái)務(wù)后臺(tái)的表上方篩選，篩選項(xiàng)并非“表格列”，這些篩選項(xiàng)無須以數(shù)據(jù)列的方式放在表格，那樣會(huì)對(duì)顯得表格的數(shù)據(jù)冗余：

2.2 表頭篩選

放置在列標(biāo)簽上的篩選，受“表格列”內(nèi)容的限制，僅能做單次單列的篩選。

如Ant design所示：

3. 數(shù)據(jù)細(xì)分展示

與篩選、搜索相反，細(xì)分是用戶根據(jù)自身需求增加數(shù)據(jù)量、查看明細(xì)的方式，通過細(xì)分設(shè)置可快速獲得目標(biāo)數(shù)據(jù)的詳情進(jìn)行解讀。

如Adwords所示，提供了數(shù)據(jù)細(xì)分查看功能：

4. 排序

4.1 拖曳排序

常用于數(shù)據(jù)量較小，有拖曳排序需求的場(chǎng)景。

如Ant design所示：

4.2 表頭排序

可以輔助用戶快速挖掘出關(guān)注的信息，發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系，一般可按數(shù)字大小、字母首字母順序、數(shù)據(jù)的特征等進(jìn)行排序。

如果表格中不是所有數(shù)據(jù)都能排序，則需要標(biāo)識(shí)出可排序的列，一般采用箭頭做為標(biāo)識(shí)；

每次單擊順序相反；

實(shí)時(shí)反饋當(dāng)前排序中的狀態(tài)；

排序的箭頭一般置于列標(biāo)簽的前方，若涉及換行，排序的箭頭須另起一行進(jìn)行展示，確?？梢?。

如Adwords所示，以有效程度對(duì)狀態(tài)進(jìn)行排序，因?yàn)锳dwords平臺(tái)中所有表格列都可以進(jìn)行排序，無須標(biāo)識(shí)可排序的列；同時(shí)采用向上、向下的箭頭實(shí)時(shí)反饋當(dāng)前列的排序狀態(tài)是升序還是降序：

5. 行數(shù)據(jù)的選擇

5.1 hover態(tài)

整行的hover態(tài)應(yīng)與默認(rèn)態(tài)有所區(qū)分，當(dāng)前行可操作的按鈕狀態(tài)同步Hover態(tài)。

如Adwords所示：鼠標(biāo)hover，整行的顏色發(fā)生變化，將當(dāng)前行與其它行進(jìn)行區(qū)分。可操作的按鈕同時(shí)為hover態(tài)，明示用戶可操作的內(nèi)容及功能：

5.2 行的單個(gè)選擇

標(biāo)識(shí)選中行及選中行的數(shù)量，選中行可操作的命令狀態(tài)須同步，如禁用態(tài)切換成可用態(tài)等。 以Adwords為例：當(dāng)前選中行前面的復(fù)選框會(huì)變成選中態(tài)，表頭反饋當(dāng)前已選行的數(shù)量，明示當(dāng)前行可操作的命令：

5.3 行的批量選擇

提供選擇當(dāng)前頁(yè)所有行、選擇全部所有行、全不選三種功能；狀態(tài)反饋分未選態(tài)、半選態(tài) 、全選態(tài)共三種。

以Adwords為例：用戶未進(jìn)行選擇時(shí)，表頭的選擇框的狀態(tài)是未選態(tài)；當(dāng)用戶選擇1行數(shù)據(jù)時(shí)，此時(shí)表頭的選擇框的狀態(tài)切換為半選態(tài)，同時(shí)反饋已行的數(shù)量；當(dāng)用戶在表頭勾選“當(dāng)前頁(yè)所有行”時(shí)，表頭的選擇框切換成了全選態(tài)，且給出了選擇“全部所有行”的操作：

6. 行數(shù)據(jù)操作

6.1 新增

一般需要突出展示，便于用戶快速定位，比較復(fù)雜的后臺(tái)須將多種創(chuàng)建方式收納，如Adwords所示，點(diǎn)擊“+”，可以創(chuàng)建此表格中的多種類型數(shù)據(jù)：

6.2 修改、刪除

數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時(shí)便于批處理和單個(gè)操作。

數(shù)據(jù)量較小，或僅支持單行數(shù)據(jù)操作時(shí)可放在行的尾部或頭部進(jìn)行操作。

如Adwords所示，將行的操作均放置在了表外部上方：

以FC為例，把行操作放在了行的尾部：

當(dāng)遇到禁用態(tài)命令時(shí)，需給出解釋：

7. 單元格數(shù)據(jù)操作

單個(gè)、高頻、輕量單元格操作，可以直接在表格的單元格內(nèi)直接操作，一般處理的數(shù)據(jù)較為輕量。

7.1 數(shù)字?jǐn)?shù)據(jù)編輯

如Adwords所示，采用含命令按鈕的浮層進(jìn)行處理：

7.2 文字?jǐn)?shù)據(jù)編輯

修改內(nèi)容的體量小可直接用浮層。

如Adwords所示，采用含命令按鈕的浮層進(jìn)行處理：

7.3 數(shù)據(jù)選擇

如FC所示，采用了浮層進(jìn)行處理：

7.4 狀態(tài)更改

如Adwords所示，采用了浮層進(jìn)行處理：

7.5 查看詳情?

數(shù)據(jù)體量較小可直接用浮層處理，如果數(shù)據(jù)的體量較大則采用替換式面板方式進(jìn)行處理。

（1）體量較小的詳情查看，如Adwords所示：

（2）體量較大的詳情查看，采用了替換式面板進(jìn)行信息的展示。

如Adwords所示：

7.6 跳轉(zhuǎn)鏈接?

可用于多張表之間跳轉(zhuǎn)、或更深層內(nèi)容的下鉆等。

如Adwords所示，文字鏈接非常便于用戶在三張表之間跳轉(zhuǎn)：

7.7 其他操作

單元格批處理、低頻、重?cái)?shù)據(jù)操作，可統(tǒng)一放置在表頭外部上方以菜單的形式集中處理。

如Adwords所示：

8. 數(shù)據(jù)下載

為方便用戶對(duì)數(shù)據(jù)進(jìn)行再次整合分析、統(tǒng)計(jì)分析等，可提供數(shù)據(jù)下載功能、及多種下載格式。

如 Adwords所示：

9. 空表

在表格的空白內(nèi)容處加入創(chuàng)建的快捷入口，引導(dǎo)用戶新建。如 Adwords所示：

比較輕量的方式，是直接示意用戶創(chuàng)建數(shù)據(jù)，無須給出表格樣式，如FC的財(cái)務(wù)后臺(tái)所示：

沒有創(chuàng)建訴求的，直接告之暫無數(shù)據(jù)。

如FC的財(cái)務(wù)后臺(tái)所示，數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)，話術(shù)的表述則需與后臺(tái)文案的整體風(fēng)格保持一致。

參考文獻(xiàn)：

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

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

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