起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識從表格入手，快速提升B端后臺數據的易讀性和易操作性體驗（一）
表格的易讀性和易操作性設計，對提升B端用戶的操作效率來說十分重要，本篇文章將告訴大家表格的易讀性設計時，應該從這些方面來考慮。
以商業B端后臺-谷歌廣告投放系統（以下簡稱Adwords)為例，在Adwords的核心頁面中，表格占了近90%的空間，大部份的用戶在這個頁面的活動區域基本集中的表格，表格是商業B端后臺用戶操作頻率最高的交互控件之一。
如Adwords的界面所示：
對于B端用戶而言，來后臺主要目的之一就是對數據進行查閱和操作，而表格做為結構化數據的載體，承載了數據的保存、展示、對比分析、排序、篩選 、搜索等功能。
因此表格的易讀性和易操作性設計對于提升B端用戶的操作效率有著舉足輕重的作用。
表格通常由內外兩部分組成：
- 內部，由表頭、表體、表尾共3 部份組成。
- 外部，由搜索、篩選、相關命令按鈕、分頁等構成。
如Adwords所示：
本文從表格的易讀性和易操作性2個方向，共分24個方面進行詳細闡述：
以下為本文的框架圖，大家可以參考這個框架直接定位自己感興趣的內容，有選擇性的閱讀：
表格的易讀性設計時，可從15個方面來考慮：
1. 列的選擇、默認列的設置、列的默認排序
需要交互設計師基對實際業務需求及目標用戶訴求及行為的理解，即表格的設計要同時符合業務模型和用戶的心智模型。
列的選擇：盡量減少列的數量，避免出現用戶不需要的數據，同時也要避免省略必要信息，以免造出數據缺失；
默認列的設置：隱藏不必要的信息，用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決；
默認排序：目標用戶看數據訴求出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑。
2. 列標簽
對于B端產品而言，先能把事情說清楚，再考慮文字的簡潔性。一個簡單的檢驗方法是：少一個字不可。
在表格數據可以自我解釋的情況下，列標簽就不是必須的，如電子郵件的表格，就不需要列標簽，因為發件人和郵件主題的區分度比較高。
如Adwords所示，標簽的文案做到了“少一個字不可”：
3. 自定義列
B端后臺通常會對應不同的角色及不同的需求，可讓用戶根據自己的需求來定義表格的展示列及列的順序。
注意：系統應記住用戶上一次自定義列的設置。
如Adwords所示，數據較為復雜，對展示列的定義分成兩步：左側先選擇展示的列，右側對列進行排序：
4. 提供數據處理值
為便于用戶對數據進行對比分析，一般需要原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果，減少用戶心算和再做數據加工的過程，提升用戶閱讀信息的效率。
如Adwords所示，在表頭和表尾分別提供了總計數據：
如FC所示，在表頭提供了總計行，供用戶進行快速查閱：
5. 列寬的設置：
- 在固定寬度的基礎上，允許用戶自由拖動調整列寬的大?。缮炜s列）。如文本類最小列寬可為3個中文字符、含圖片的最小列寬不影響圖片的閱讀，超出部份換行顯示；
- 按字段內容屬性給出固定寬度，比如姓名固定3個中文字符、電話號碼固定為11個英文字符等。
以Adwords為例，采用的是固定列寬+可伸縮列：
6. 行高設置
單行文本的表格，建議行高為字體高度的2倍到3倍；多行文本（含圖文）的表格，建議內容到上下邊框的距離略小于文字高度。
7. 分隔線
- 水平分割線，能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度。
- 垂直分隔線，在表格中使用適合的對齊方式后，那么可以省略；數據量級比較大的表格，可以使用較淡的分隔線，提升瀏覽速度。
如Adwords，采用了同時采用了水平和垂直分隔線：
如Adwords，省略了垂直分隔線：
8. 單元格數據展示
1. 數據對齊：能形成的視覺邊界線，便于視線的流動，從而快速提升數據的瀏覽、對比效率。
常用對齊方式：數字右對齊，文字左對齊，混合型文本左對齊，列標簽的對齊方式與數據的對齊方式保持一致。如Adwords所示：
2. 空數據的展示：切忌不要與數據為“０”進行混淆，通用做法是用“－”表示。
B端后臺數據類型較多，最好能為空數據做出釋義，可以加在“列標簽”的名詞解釋文案中。
以Adwords為例，用“-”表示空數據：
3. 數據的關鍵屬性標識：比如用戶重點關注數據狀態、某些數據的上升和下降等，可以用符號進行標識，幫助用戶快速定位到目標信息。
如Adwords所示，用帶顏色的上圓圈示意當前行的狀態，綠色為有效、灰色為暫停：
4. 數字及非用戶操作數據展示：數字數據帶上單位，如金額加上幣種符號“￥”、預算要給出單位“/天”等，以幫助用戶快速理對數字進行區分閱讀；部份數據的操作人是系統，須與用戶產生的數據做區分展示。
如Adwords所示，預算數據帶上單位、費用帶上人民幣符號、系統產生的數據帶上了“自動”標識：
9. 行數據展示
1. 默認排序：常以創建時間進行排序，即最新創建的排在最前面。
如Adwords所示：
2. 從屬-行內展開可分為整行整開、某個單元格數據展開，以Adwords為例，“更改”這個列的數據展開：
3. 從屬-分行展示，從屬數據與主數據共用部份數據列，以Adwords為例:
10. 固定表頭
利于用戶向下翻屏時能夠便利的閱讀數據，固定的內容除列標簽以外，可視具體場景而定，加入其它行。
如Adwords所示，固定了列標簽與總計行：
11. 固定列
利于用戶進行數據定位與對比，固定列的內容可視業務及目標用戶的訴求而定，甚至可以讓用戶自定義。
如Adwords所示，固定了名稱列：
12. 可伸縮列
設定表格列的默認寬度時，優先考慮的是數據內容的查閱，這有可能會導致一些長的列標簽出現折行的情況，而可伸縮列則良好的解決了這個問題，系統應記住用戶自己設置的列寬。
如Adwords所示：
13. 多級表頭
數據結構比較復雜的，可使用多級表頭來體現數據的層次關系。
如FC所示，采用了多級表頭：
14. 全屏查閱
可減少與表格無關的視覺干擾，提供表格的沉浸式閱讀體驗，應注意可以讓用戶很便捷的退出。
如Adwords所示，全屏模式可以直接屏蔽掉上方的報表區域和左側及頂部的導航欄，用戶通過ESC鍵可以隨時退出全屏模式，學習成本較低。
15. 分頁及翻頁
用戶一般不喜翻頁，涉及到跨頁的數據操作時，分頁會帶來不便。但受限于數據加載的壓力，在WEB端、手機端等需要實時下載數據的終端，通常需要分頁展示數據來緩解服務器的壓力，因此用戶需要分頁查看和操作；而在客戶端，數據已下載到了本地，可以采用流的方式呈現數據，不需要分頁展示，用戶操作的成本更低。
在WEB端，表格的的數據內容超過一定“數量”時需要提供翻頁功能，這個“數量”由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定，大原則是整張表不要超過一屏，考慮到每個用戶的使用習慣，可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利。
翻頁控件內容 ：
用戶自定義每頁顯示的數量，當前頁碼（行數），全部數據的頁數（行數），向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。
注意:
- 當前用戶的數據未超過一頁時，無須展示翻頁控件。
- 對于B端后臺的用戶而言，告之當面數據的行數比當前的頁數更有用。
- 翻頁按鈕不可用時，須給出置灰態。
如Adwords所示：
翻頁控件做為篩選數據的一種方式，通常會結合日歷、排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網易的郵箱，翻頁與日歷結合一起使用，對于有大量郵件數據的用戶來說，查閱郵件的效率更高：
未完待續，“提升表格的易操作性”詳見下篇。
參考文獻
劉平《WEB表格設計攻略》計算機與網絡(2017)
本文由 @崔玲美 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
麻煩問下adwords怎么獲取演示環境，需要付費嗎？
感謝作者分享。請問文中的”FC”的產品名稱全寫是什么？
感覺相比AD更本土化，打算去學習體驗。
鳳巢 ??
感謝
google adwords 好像是需要消費使用是嗎？自己去試用好像是沒有免費的！
問個題外話。。這些展示交互的圖片是用什么工具做的呀
直接用QQ錄屏工具，然后，再用PS把文件壓縮
妹妹，你為何這么優秀呢
??
之前做了6年b端平臺化軟件的實施，文章中大部分的報表易讀性都有涉及。
平臺化軟件的好處是靈活，可自定義。當然對于用戶也有較高學習成本。
今年以來在互聯網公司做偏向C端的產品，明顯感受到兩者產品設計的目的差異性。C端產品更傾向于零學習成本，直接給用戶其想要的。當然C端產品的業務，邏輯也相對會簡單店。
這一前一后的產品切換，有時自己會轉彎不過來。做C端產品時常被大佬們說設計復雜了，考慮多了。
產品這條路，需要有快速切換視角的能力。
我是做了10多年的C端產品后轉的B端產品 ??
我個人的理解啊~
這兩類產品的目標有些不同，那么體驗設計的目標也會不同：
C用戶產品的目標主要是通過滿足用戶需求，提供良好的用戶體驗，吸引大量用戶使用。
B端商業產品的目標是在不影響用戶操作體驗的基礎上實現產品盈利，所以如何引導、幫助用戶盈利是體驗的核心。
泥土
學習了
相互學習