從表格入手，快速提升B端後臺資料的易讀性和易操作性體驗（二）
產品小白專屬，10周線上特訓，測、練、實戰，22位導師全程帶班，11項求職服務，保障就業！ ofollow,noindex">瞭解詳情
本篇文章通過9個方面，告訴大家如何在設計時提升表格的易操作性。
接上篇已講完了表格的易讀性設計。
附上全文整體的框架圖，大家可以參考這個框架直接定位自己感興趣的內容，有選擇性的閱讀：
一、表格的易操作性
表格的易操作性，設計時可從如下這9個方面來考慮：
1. 搜尋
當表格的資料量較大時，可增加搜尋功能來提升使用者查詢資料的效率。
建議採用模糊搜尋，精確搜尋對使用者記憶要求太高，適用的使用者較少。
如Adwords所示，不僅提供了模糊搜尋，還為使用者提供了跳轉的快捷方式：
2. 篩選
也稱資料過濾，常在資料量較大的場景中使用，須事先定義好篩選的過濾值。
搜尋是篩選的一種，其過濾的值是關鍵字，考慮到部份場景搜尋與篩選不需要共存，故本文將篩選和搜尋進行分開闡述。
根據篩選功能的位置不同，可分為表上方篩選和表頭篩選。
2.1 表上方篩選
篩選功能位於表格上方，與表頭篩選的不同之處：過濾值可以不限“表格列”的內容、可單次進行多列的交叉篩選。
如 Adwords在2018年的新版中，將之前表頭篩選合併成統一的入口置於搜尋的右邊，便於使用者結合搜尋一起使用，非常複雜的資料篩選可借鑑此種方式：
如淘寶賣家中心的表上方篩選，可以單次進行多列的交叉篩選：
如FC 財務後臺的表上方篩選，篩選項並非“表格列”，這些篩選項無須以資料列的方式放在表格，那樣會對顯得表格的資料冗餘：
2.2 表頭篩選
放置在列標籤上的篩選，受“表格列”內容的限制，僅能做單次單列的篩選。
如Ant design所示：
3. 資料細分展示
與篩選、搜尋相反，細分是使用者根據自身需求增加資料量、檢視明細的方式，通過細分設定可快速獲得目標資料的詳情進行解讀。
如Adwords所示，提供了資料細分檢視功能：
4. 排序
4.1 拖曳排序
常用於資料量較小，有拖曳排序需求的場景。
如Ant design所示：
4.2 表頭排序
可以輔助使用者快速挖掘出關注的資訊，發現數據信息之間的關係，一般可按數字大小、字母首字母順序、資料的特徵等進行排序。
如果表格中不是所有資料都能排序，則需要標識出可排序的列，一般採用箭頭做為標識；
每次單擊順序相反；
實時反饋當前排序中的狀態；
排序的箭頭一般置於列標籤的前方，若涉及換行，排序的箭頭須另起一行進行展示，確保可見。
如Adwords所示，以有效程度對狀態進行排序，因為Adwords平臺中所有表格列都可以進行排序，無須標識可排序的列；同時採用向上、向下的箭頭實時反饋當前列的排序狀態是升序還是降序：
5. 行資料的選擇
5.1 hover態
整行的hover態應與預設態有所區分，當前行可操作的按鈕狀態同步Hover態。
如Adwords所示：滑鼠hover，整行的顏色發生變化，將當前行與其它行進行區分。可操作的按鈕同時為hover態，明示使用者可操作的內容及功能：
5.2 行的單個選擇
標識選中行及選中行的數量，選中行可操作的命令狀態須同步，如禁用態切換成可用態等。 以Adwords為例：當前選中行前面的複選框會變成選中態，表頭反饋當前已選行的數量，明示當前行可操作的命令：
5.3 行的批量選擇
提供選擇當前頁所有行、選擇全部所有行、全不選三種功能；狀態反饋分未選態、半選態 、全選態共三種。
以Adwords為例：使用者未進行選擇時，表頭的選擇框的狀態是未選態；當用戶選擇1行資料時，此時表頭的選擇框的狀態切換為半選態，同時反饋已行的數量；當用戶在表頭勾選“當前頁所有行”時，表頭的選擇框切換成了全選態，且給出了選擇“全部所有行”的操作：
6. 行資料操作
6.1 新增
一般需要突出展示，便於使用者快速定位，比較複雜的後臺須將多種建立方式收納，如Adwords所示，點選“+”，可以建立此表格中的多種型別資料：
6.2 修改、刪除
資料量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時便於批處理和單個操作。
資料量較小，或僅支援單行資料操作時可放在行的尾部或頭部進行操作。
如Adwords所示，將行的操作均放置在了表外部上方：
以FC為例，把行操作放在了行的尾部：
當遇到禁用態命令時，需給出解釋：
7. 單元格資料操作
單個、高頻、輕量單元格操作，可以直接在表格的單元格內直接操作，一般處理的資料較為輕量。
7.1 數字資料編輯
如Adwords所示，採用含命令按鈕的浮層進行處理：
7.2 文字資料編輯
修改內容的體量小可直接用浮層。
如Adwords所示，採用含命令按鈕的浮層進行處理：
7.3 資料選擇
如FC所示，採用了浮層進行處理：
7.4 狀態更改
如Adwords所示，採用了浮層進行處理：
7.5 檢視詳情
資料體量較小可直接用浮層處理，如果資料的體量較大則採用替換式面板方式進行處理。
（1） 體量較小的詳情檢視，如Adwords所示：
（2） 體量較大的詳情檢視，採用了替換式面板進行資訊的展示。
如Adwords所示：
7.6 跳轉連結
可用於多張表之間跳轉、或更深層內容的下鑽等。
如Adwords所示，文字連結非常便於使用者在三張表之間跳轉：
7.7 其他操作
單元格批處理、低頻、重資料操作，可統一放置在表頭外部上方以選單的形式集中處理。
如Adwords所示：
8. 資料下載
為方便使用者對資料進行再次整合分析、統計分析等，可提供資料下載功能、及多種下載格式。
如 Adwords所示：
9. 空表
在表格的空白內容處加入建立的快捷入口，引導使用者新建。如 Adwords所示：
比較輕量的方式，是直接示意使用者建立資料，無須給出表格樣式，如FC的財務後臺所示：
沒有建立訴求的，直接告之暫無資料。
如FC的財務後臺所示，資料是系統產生的，不是由使用者建立的，直接告之暫無資料，話術的表述則需與後臺文案的整體風格保持一致。
參考文獻：
劉平（2017）《WEB表格設計攻略》計算機與網路
本文由 @崔玲美 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
