哈嘍，這里是設計夾，今天分享的是「B 端表格」，文章來源于設計師 staro 星若的總結。

往期B端干貨：

表格作為 B 端常見且重要的要素之一，能把大量的數據整合起來查看、對比和操作，本篇文章從實際出發，挖掘更多視覺和體驗的提升方案。

一、基礎組成

一個內容豐富的表格通常包含篩選區、標題欄、表格區域和分頁欄(圖片來、源于 ant design5.0 組件庫的 protable)

① 篩選區

主要針對表格數據有條件的查詢，常用篩選的方式有搜索框填寫、從下拉列表中選擇等。

② 標題欄

表明表格的內容主題，比較醒目，一般放在左側。如有需要可以在右邊添加切換 table 或搜索框作為篩選條件 。

③ 表格區域

包括表頭和數據區，用于數據查看，根據需要在末尾列有對應單列的操作。

④ 分頁欄

分頁展示篩選后總數據量和總頁數，也可以選擇顯示的項目數和每頁的跳轉頁數。樣式和內容都比較固定，不是所有的表都有。

以下內容說明：在表格這個大組件中，篩選區域和表格主體有很多變化，本次主要說一下表格區域的各種玩法。

二、表頭

① 作用

表頭起到分類的作用，展示這一列的信息主題是什么。

② 視覺樣式

大部分地表頭相對內容行會偏矮一些，有時為了能突出數據還會縮小表頭的文字大小，表頭的背景顏色按需選擇。

③ 內容分類

純文字

當表格表頭只有文字時，則只是基礎分類作用；

如果想強調標題，特別是信息分類差別不大(如多列都是同一個范圍的數字數據)和列數較多的情況，背景色相對于單元格更深一些，文字也會加粗加黑；

如果想弱化標題，則使用白底，文字顏色與單元格一致或更淺，風格簡約且更關注內容，內容的樣式可以更加豐富，常見于國外的設計中。

需要注意的是，有的標題除了主題文字還會加上單位，尤其是數字數據列，會加上如百分比、萬等單位，使數字數據理解更加準確。

文字+功能圖標

解釋：在文字的任意一側有一個感嘆號/問號圖標，當鼠標移動到相應位置時，會彈出氣泡彈窗，解釋表頭的標題；

排序：一般在左側或右側放置一個上下箭頭的圖標，用于按數字和字母的升序或降序對本欄內的字段進行排序，這也是常見的排序方式。如下圖的“創建人”標題是按照英文字母順序排列的；

篩選：針對比較復雜的情況，添加篩選圖標，補充或替換篩選條件，減少篩選條件的空間；對于更復雜的情況兩者都有。與篩選一樣，使用氣泡彈窗承載選項(如下圖所示)。由于不是本次的重點，這里不深入討論。

文字+裝飾圖標

還有比較少見，在 excel 表格類型中出現過，用于收集或統計大量數據的趣味表格，讓分類更加清晰，也避免視覺疲勞。

④ 特殊情況

如果表格涉及多選操作，在表頭最前會有一個全選的按鈕，一列都樣式一致，點擊后則下面所有行最前面的按鈕都會點選，即表示選擇當前表格頁所有行(如上圖)；

如果表格最后列是操作按鈕，則表頭部分可以省略文字或者顯示為“操作區” 。

三、數據區

① 作用

承載著表格數據主體，是需要進行閱讀，也是決定下一步的操作的依據，如常見的查看詳情(這里主要討論單組表格的情況)。

② 設計原則

主要是高效閱讀，下面將從兩個方面進行詳述：

減少視覺干擾

a. 表格框線

表格框線的粗細深淺會影響到閱讀效率。一般沒有豎線，橫線則使用更細、淺的線條才不會影響閱讀(下圖 ant design 組件中框線設置為 1px，#F0F0F0)。

b. 背景顏色

靜態通常為白色，只有內容較多的表格才需要斑馬線(一行深一行淺的顏色)；

當選擇一行時，背景顏色也會變深，這里的背景色可以是淺灰色、淺藍色或者低透明度的品牌色(上圖中 ant design 組件中選擇的背景色是#FAFAFA，比框線稍淺）。

c. 文字 (普通文字)

除表頭外，表中普通文本的大小和顏色均相同(采用系統的普通文本格式，參考上圖中的 ant design 為 14px，#1F1F1F）；

注意 1：如果內容中沒有數據則填寫 0，如果沒有內容則使用- ，盡量不要留空，這樣會讓人誤以為還沒有加載好；遇到日期、手機號碼等時，使用相同的格式，不僅表格最好同一頁面的層級保持一致；

注意 2：由于表格寬度有限，有可能存在文字換行的情況，根據需要，可以選擇固定最大字數+省略號(氣泡顯示)或采用水平滑動(需要固定操作欄)，盡量不要選擇換行的形式，這樣會影響閱讀效率并且浪費縱向空間 。

加強重點突出

a. 文字 (偏功能)

無操作但使用強調色的文字：通用用于一些需突出文本內容的場景，尤其是和金額相關的數據，如增長和減少數據，注意國內使用紅色代表漲、綠色代表跌，國外則相反。

標簽文字：以標簽的形式出現，通常一個標簽是一個詞組，常用于有固定文字描述的表格項中。圖中的處理中、待開發，顏色選取了不同色相，一目了然。還有一種特殊的情況，為了與列表的常規內容區別，改變了文本內容的顏色并添加了背景色，比如圖中最后一列的時間警示。

鏈接/操作文字：前者是點擊跳轉到相關文字的詳情頁，后者是文字按鈕進行擊相應的操作，比如刪除、詳情一般使用采用藍鏈接(偶爾使用品牌色，特別是品牌顏色也是藍色)。

b. 圖標/按鈕

按鈕通常以文本、圖標、文本+圖標形式出現，表格中的圖標大部分也以按鈕的形式存在。

圖標本身也多選用基礎常見圖形，如說明的問號、警示的感嘆號、成功的打勾，顏色也符合普遍認知(紅綠燈配色)。

展現方式-外顯：適合強調視覺的場景，尤其是高頻操作，如圖所示，信息質量一欄的圖標(符號化強調)、最后一欄的操作(高頻操作)；

展現方式-隱藏：只有當鼠標移到相應位置(對應表格項)才出現，一般用作操作按鈕，比如圖中的編輯圖標(庫存一列、選中行的數字旁)。

分類：

如果是對整行進行操作，則放在最后一列，如果是對單元格/單項進行操作，一般放在文字后面(參考上圖)；

注意當操作項目較多時，根據情況選擇方案，如果寬度足夠且選項較少，可以直接平鋪；如果選項較多，可以選擇折疊低頻項、全部折疊，或者直接將操作放入根據操作頻率點擊跳轉的詳情頁中。

c. 圖表

屬于數據可視化的范疇，也是高效閱讀的重要手段。用的較多的是橫向環形圖、條形圖、堆疊條形圖等；

特點是直觀清晰，用于流程進度、比例等場景，使用時根據圖表本身適用場景而定。

③ 案例解析

根據最近的一個實際案例講解，需求是對展示審批的進度列視覺強化，進度項為：待提交、審批中、審批完成、審批退回，當時完成如下方案并進行思考：

方案(一)小圓點：視覺效果最弱，不容易影響表格整體的閱讀，需要使用不同色相的顏色進行區分，需要搭配文字，適合用于表格內容較多的場景；

方案(二)進度環：靈感來源于 Xmind 里面的任務標記，可以用一個或多個顏色，更直觀，適合表格內容較少、有流程的場景；

方案(三)圖標+標簽：視覺效果最強，屬于方案一的加強版，適合表格已有多種強調樣式、且此列需強突出的場景。

由于是整體風格比較簡約，且表格內容較多，項目中最后用的方案一，簡單又明了。但在實際場景中，還需根據各自的項目內容量和風格來決定。

最后

有的同學可能會說平時設計基本很少有花樣，是的，B 端設計相對 C 端設計更加克制，對應用戶群體的話語權更高，但前提是自己的知識儲備足夠并了解業務，有理有據去分析和決策，這樣才更專業、才能讓人信服。

歡迎關注微信公眾號：「Clip設計夾」