起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識從表格入手，快速提升B端后臺數據的易讀性和易操作性體驗（二）
本篇文章通過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，整行的顏色發生變化，將當前行與其它行進行區分?？刹僮鞯陌粹o同時為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協議
你好，想問下這個原型是用什么軟件做的呢？
感謝作者分享。請問文中的”FC”的產品名稱全寫是什么？
感覺相比AD更本土化，打算去學習體驗。
鳳巢 ??
我覺得無論表格如何設計，需要考慮用戶的操作習慣，用戶是否接受這種設計，用戶是否會使用當前的設計，好的設計能給用戶帶來什么體驗，任何設計要從用戶角度考慮，不能一味的追求酷炫。
挺好的一篇文章，就是動圖中的鼠標太晃了，看著眼睛疼，謝謝作者~收藏了。
多謝提醒，下次注意 ??
不錯的文章，對做B端后臺體驗優化有很大的啟發，加油哦 ??
??