表格在 B 端產(chǎn)品中扮演著非常重要的角色。它是一種有效的信息組織手段，可以清晰地展示大量的結(jié)構(gòu)化數(shù)據(jù)，包括靜態(tài)數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)。在以網(wǎng)頁(yè)或桌面端為載體的 B 端產(chǎn)品中，表格的設(shè)計(jì)和功能對(duì)于產(chǎn)品的易用性和用戶體驗(yàn)有著至關(guān)重要的影響。隨著對(duì)數(shù)據(jù)的深入理解和處理數(shù)據(jù)的能力的提高，表格在 B 端產(chǎn)品中的應(yīng)用也越來越廣泛。它不僅可以用于管理數(shù)據(jù)、優(yōu)化業(yè)務(wù)流程、支持決策制定，還可以幫助企業(yè)實(shí)現(xiàn)數(shù)字化轉(zhuǎn)型。

一、B端CRM系統(tǒng)表格

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

二、表格基礎(chǔ)構(gòu)成

CRM 表格主要由內(nèi)外兩部分組成

1. 表格內(nèi)部

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

2. 表格外部

由搜索、篩選、相關(guān)命令按鈕、分頁(yè)等構(gòu)成

三、場(chǎng)景分析

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

同時(shí)也要為業(yè)務(wù)的實(shí)際場(chǎng)景服務(wù)，保證美觀度的同時(shí)要更多的帶入場(chǎng)景，比如用戶的工作狀態(tài)，工作強(qiáng)度，工作設(shè)備，需要同時(shí)考慮其中。這有助于確定表格的功能和設(shè)計(jì)，以滿足用戶的實(shí)際需求。

四、系統(tǒng)痛點(diǎn)問題

通過用戶訪談、業(yè)務(wù)訪談、設(shè)備測(cè)試，CRM 業(yè)務(wù)表格存在的主要問題是：

1. 視覺陳舊、設(shè)計(jì)質(zhì)量低
2. 操作不一致
3. 交互行為不流暢
4. 布局混亂操作繁瑣
5. 字段過多過長(zhǎng)，可讀性差
6. 語(yǔ)義復(fù)雜
7. ……

五、減負(fù)提效關(guān)鍵點(diǎn)

結(jié)合業(yè)務(wù)問題現(xiàn)狀，確定了 2 個(gè)優(yōu)化原則，分別是

A·易讀性

B·易操作性

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

1. 規(guī)范選擇

在規(guī)范選擇字號(hào)和組件時(shí)，整體優(yōu)化思路是：

字號(hào)：選擇使用 12 號(hào)字作為基礎(chǔ)字號(hào)是一個(gè)很好的折中方案。這種字號(hào)在大多數(shù)應(yīng)用場(chǎng)景下都能保證足夠的可讀性，同時(shí)也不會(huì)占用過多空間。而 14 號(hào)字作為強(qiáng)調(diào)字號(hào)也是一個(gè)不錯(cuò)的選擇，它可以在需要突出某些內(nèi)容時(shí)使用，例如標(biāo)題、標(biāo)簽或重要的提示信息。

基礎(chǔ)字號(hào)（12 號(hào)）：適用于大多數(shù)文本內(nèi)容，如正文、描述等。

強(qiáng)調(diào)字號(hào)（14 號(hào)）：適用于標(biāo)題、標(biāo)簽、提示信息等需要引起用戶注意的內(nèi)容。

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

2. 反饋處理

hover 高亮底色：鼠標(biāo)懸停高亮底色，使得此行與行界限分明。強(qiáng)化橫向視覺注意力，解決列數(shù)過多容易看錯(cuò)行的問題。

長(zhǎng)內(nèi)容處理：?jiǎn)卧駜?nèi)容展示不全，hover 浮層展示，操作靈活成本低。

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

3. 表頭處理

為解決業(yè)務(wù)字段過多會(huì)出現(xiàn)左右橫劃場(chǎng)景的處理：

1. 信息精簡(jiǎn)：表頭內(nèi)容應(yīng)該簡(jiǎn)單準(zhǔn)確，節(jié)省空間，減輕閱讀的視覺壓力。如果內(nèi)容實(shí)在精簡(jiǎn)不了且空間不夠就直接截?cái)嗵幚?，鼠?biāo)懸停展示完整內(nèi)容。
2. 寬度自定義：在不同用戶不同場(chǎng)景對(duì)不同的字段可能有差異化需求，寬度自定義可更好的把內(nèi)容展示區(qū)，展示多少的問題交回給用戶。更好的滿足用戶個(gè)性化需求
3. 表頭吸頂：當(dāng)表頭在當(dāng)前屏幕不可見的情況下就進(jìn)行吸頂展示，這樣可以讓用戶閱讀更輕松，不至于看著看著就忘記自己在看什么了。

4. 行的處理

行高：行高是非常重要的參數(shù)，直接影響閱讀體驗(yàn)，較小的行高可承載更多信息，讓用戶無(wú)需滑動(dòng)鼠標(biāo)就能看到更多的信息，但是會(huì)降低視覺掃描效果，容易看錯(cuò)行。通過反復(fù)測(cè)試綜合衡量最終確定 CRM 業(yè)務(wù)表格單行高度為 44px，雙行高度為 52px

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

5. 列的處理

凍結(jié)列：在一定出現(xiàn)橫劃的表格場(chǎng)景，根基業(yè)務(wù)實(shí)際需要可進(jìn)行首尾列凍結(jié)，如商機(jī)名稱放在首列進(jìn)行凍結(jié)，操作列放在尾列進(jìn)行凍結(jié)，避免字段對(duì)應(yīng)困難，提升閱讀信息的流暢度。

列的強(qiáng)調(diào)：正確使用分割線可以實(shí)現(xiàn)對(duì)表格行與列的強(qiáng)調(diào)，為增強(qiáng)同類信息的對(duì)比，使用相同粗細(xì)的縱向分割線進(jìn)行列的視覺強(qiáng)化。

最后

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

針對(duì)不同類型和使用目的的表格，應(yīng)該進(jìn)行不同的設(shè)計(jì)側(cè)重。對(duì)于復(fù)雜的表格，應(yīng)該注重如何簡(jiǎn)化信息、突出關(guān)鍵信息、提供清晰的視覺層次和布局，使用戶能夠輕松地瀏覽和對(duì)比數(shù)據(jù)。對(duì)于簡(jiǎn)單的表格，應(yīng)該注重如何保持信息的清晰度和可讀性，避免用戶誤解或產(chǎn)生困惑。

平衡瀏覽目的和視覺傳達(dá)的關(guān)系是表格體驗(yàn)優(yōu)化的關(guān)鍵。設(shè)計(jì)師需要了解用戶的需求和目的，考慮用戶使用場(chǎng)景、使用強(qiáng)度，以及需要從表格中獲取哪些關(guān)鍵信息。一個(gè)合理的視覺傳達(dá)能大大提升用戶對(duì)信息的接收和理解速度～

作者：58UXD