實戰攻略！B端銷售系統CRM表格減負提效設計秘訣

表格在 B 端產品中扮演著非常重要的角色。它是一種有效的信息組織手段，可以清晰地展示大量的結構化數據，包括靜態數據和動態數據。在以網頁或桌面端為載體的 B 端產品中，表格的設計和功能對于產品的易用性和用戶體驗有著至關重要的影響。隨著對數據的深入理解和處理數據的能力的提高，表格在 B 端產品中的應用也越來越廣泛。它不僅可以用于管理數據、優化業務流程、支持決策制定，還可以幫助企業實現數字化轉型。

更多表格設計干貨：

一、B端CRM系統表格

以 B 端商業后臺-CRM 系統為例，在平臺的核心頁面中，表格占了 80%以上的空間，電話銷售員在本平臺使用的很多場景都集中在表格，表格是 CRM 用戶操作頻率最高的交互控件之一。如圖

二、表格基礎構成

CRM 表格主要由內外兩部分組成

1. 表格內部

由標題、表頭、表體共 3 部分組成（圖例用 CRM）。標題是對表格信息內容的整體描述。表頭一般指列標簽，這里也指首列行標簽，是對所屬行或列信息的描述。

2. 表格外部

由搜索、篩選、相關命令按鈕、分頁等構成

三、場景分析

通過與用戶交流、收集反饋和觀察用戶行為，可以了解到對于 CRM 用戶而言，使用平臺的主要目的之一就是對數據進行查閱和操作，其中表格承載了數據的保存、展示、對比分析、排序、篩選、搜索等功能。

同時也要為業務的實際場景服務，保證美觀度的同時要更多的帶入場景，比如用戶的工作狀態，工作強度，工作設備，需要同時考慮其中。這有助于確定表格的功能和設計，以滿足用戶的實際需求。

四、系統痛點問題

通過用戶訪談、業務訪談、設備測試，CRM 業務表格存在的主要問題是：

1. 視覺陳舊、設計質量低
2. 操作不一致
3. 交互行為不流暢
4. 布局混亂操作繁瑣
5. 字段過多過長，可讀性差
6. 語義復雜
7. ……

五、減負提效關鍵點

結合業務問題現狀，確定了 2 個優化原則，分別是

A·易讀性

B·易操作性

基于業務調研，針對一線用戶使用設備分辨率以 1366*768 為主，并且默認展示為 150%的實際情況，同時屏效問題對 CRM 業務實際場景工作效率影響極大。所以根據實際業務場景的優先級進行表格優化是至關重要的。這些優化不僅需要考慮視覺效果和交互體驗，還需要確保在實際工作環境中能夠真正提高效率。為了提高屏幕效率和用戶的工作效率。做了以下一系列的優化

1. 規范選擇

在規范選擇字號和組件時，整體優化思路是：

字號：選擇使用 12 號字作為基礎字號是一個很好的折中方案。這種字號在大多數應用場景下都能保證足夠的可讀性，同時也不會占用過多空間。而 14 號字作為強調字號也是一個不錯的選擇，它可以在需要突出某些內容時使用，例如標題、標簽或重要的提示信息。

基礎字號（12 號）：適用于大多數文本內容，如正文、描述等。

強調字號（14 號）：適用于標題、標簽、提示信息等需要引起用戶注意的內容。

組件：選擇 mini 號線框作為組件可以節省視覺高度，這對于在有限的空間內展示更多內容非常有幫助。線框高度定為 28px 是一個相對較小的尺寸，這可以確保組件更加緊湊。

2. 反饋處理

hover 高亮底色：鼠標懸停高亮底色，使得此行與行界限分明。強化橫向視覺注意力，解決列數過多容易看錯行的問題。

長內容處理：單元格內容展示不全，hover 浮層展示，操作靈活成本低。

空單元格處理：數據為空值，則單元格顯示為短橫線“-”避免給用戶帶來困擾

3. 表頭處理

為解決業務字段過多會出現左右橫劃場景的處理：

1. 信息精簡：表頭內容應該簡單準確，節省空間，減輕閱讀的視覺壓力。如果內容實在精簡不了且空間不夠就直接截斷處理，鼠標懸停展示完整內容。
2. 寬度自定義：在不同用戶不同場景對不同的字段可能有差異化需求，寬度自定義可更好的把內容展示區，展示多少的問題交回給用戶。更好的滿足用戶個性化需求
3. 表頭吸頂：當表頭在當前屏幕不可見的情況下就進行吸頂展示，這樣可以讓用戶閱讀更輕松，不至于看著看著就忘記自己在看什么了。

4. 行的處理

行高：行高是非常重要的參數，直接影響閱讀體驗，較小的行高可承載更多信息，讓用戶無需滑動鼠標就能看到更多的信息，但是會降低視覺掃描效果，容易看錯行。通過反復測試綜合衡量最終確定 CRM 業務表格單行高度為 44px，雙行高度為 52px

橫向斑馬線：斑馬線又稱作隔行換色。他能讓行間界限更為明顯，同時加強視覺流的橫向引導，避免在閱讀過寬表格時出現看錯行的情況，考慮到設備顯示問題，強化了兩種顏色對比，為進一步強化核心元素減少視疲勞同步使用了 1 像素邊框。

5. 列的處理

凍結列：在一定出現橫劃的表格場景，根基業務實際需要可進行首尾列凍結，如商機名稱放在首列進行凍結，操作列放在尾列進行凍結，避免字段對應困難，提升閱讀信息的流暢度。

列的強調：正確使用分割線可以實現對表格行與列的強調，為增強同類信息的對比，使用相同粗細的縱向分割線進行列的視覺強化。

最后

業務數據類型過多一直是 CRM 業務的真實現狀，很多時候簡單粗暴的凍結首尾列并不一定能真正解決用戶體驗的問題。畢竟橫劃體驗一直都不夠友好。那么自定義列展示就是一個很好的解決方式，讓用戶根據自己的實際需要定制自己的專屬表格。

針對不同類型和使用目的的表格，應該進行不同的設計側重。對于復雜的表格，應該注重如何簡化信息、突出關鍵信息、提供清晰的視覺層次和布局，使用戶能夠輕松地瀏覽和對比數據。對于簡單的表格，應該注重如何保持信息的清晰度和可讀性，避免用戶誤解或產生困惑。

平衡瀏覽目的和視覺傳達的關系是表格體驗優化的關鍵。設計師需要了解用戶的需求和目的，考慮用戶使用場景、使用強度，以及需要從表格中獲取哪些關鍵信息。一個合理的視覺傳達能大大提升用戶對信息的接收和理解速度～

歡迎關注「58UXD」的微信公眾號：