表格在 B 端設計中跟吃飯一樣常見，哪哪都是它，只要 B 端產品還活著，就有它的身影，它必須依附表格而很好的活著，B 端產品就是為企業降本增效的，很多數據都需要依靠表格才能很好的進行可視化呈現，同時表格也被公認為是展示結構化數據最為清晰、高效的形式，很多 B 端用戶都是數據控、性能控，他們非常的在意數據，所以聊 B 端，少不了聊表格，因為表格是數據收納的最好容器，下面我們就來細細聊聊表格中有哪些顆粒化不為人關注的點。

一、 表格的含義

表格通常是指將相關的數據和信息以行和列的結構化方式進行排列，以便清晰、準確、高效地呈現，在 B 端設計中，表格是一種重要的信息展示和處理工具，能夠幫助用戶有效管理數據。

二、 表格在 B 端設計中作用

三、B 端表格 5 大組成部分

1. 篩選區

篩選區它由搜索和條件篩選兩部分組成，它可以是單屬性的搜索，可以是多屬性組合搜索。

2. 標題

大部分的表格都會有一個標題，標題是對表格內容的一個簡要的概括。

3. 表頭

表頭包含列的標題，用于說明每列數據的含義和屬性；根據業務需求，有的表頭還需要包含篩選的控件，讓無序的數據展示更加的有序。

① 無控件表頭

無控件表頭，就是表頭中沒有任何的控件，只有列信息的一個標題，在樣式方面有三種表現方式，一種是強對比的標題展示方式，一種是弱對比的標題展示方式，還有一種是帶圖標的標題展示方式。

② 帶排序和篩選控件的表頭

帶控件的表頭用于希望數據展示呈現一定的規律，比方說升序排列、降序排列、篩選特定數據的排列等；通過這些控件的使用，它可以提升數據處理效率，優化業務流程，提升用戶體驗。

③ 分組表頭

當一個表格里面有多條數據在同一個小范圍的維度進行展示時，表頭有很多分組進行區分，這時可以通過硬拆分將數據進行切割分類。

4. 表體

① 行

表格中的橫向數據單元，用于展示不同的數據記錄。

② 列

表格中的縱向數據單元，根據數據的類型和屬性進行劃分。

③ 單元格

行和列的交叉處，用于填寫具體的數據內容。

④ 滾動條

當表格數據較多，超出顯示區域時，用于上下或左右滾動查看數據。

⑤ 操作列

包含編輯、刪除、查看詳情等對每行數據的操作或鏈接。

⑥ 選中標記

用于支持用戶選擇多行數據進行批量操作。

⑦ 總計行

當用戶對行或列信息有計算需求時，這時候可以根據需求多衍生一個專門用于計算的行。

5. 底欄

① 分頁控件

如果數據量較大，需要分頁顯示，這時就要用到分頁控件進行頁面切換。

四、B 端設計中的 9 種表格

1. 基礎數據表格：

用于展示最基本的數據信息，適合內容項較少，內容無需按照相關性分組的表單（該類表單適用的承載容器為彈窗）。

2. 詳情表格

當表格內容比較復雜，已經不能通過一個表格進行詮釋時，我們可以把那些復雜點的內容設計成有顏色的字體，這樣人們就知道這樣的表格內容中還深藏著信息，需要點擊才能看到更加全面的信息，這種表格就是我們常說的詳情表格。

3. 可編輯表格

用戶可以直接在表格中修改數據，常用于數據量較小且需要頻繁更新的場景。以下是自己項目中運用的一個可以編輯的表格使用場景。

4. 樹形表格

適用于具有層級關系的數據展示，通過縮進或展開的方式呈現數據的層次結構。

5. 區域內分組表格

單次任務表單中需要填寫內容較多，且內容之中存在一定可分類歸納性，這時候建議使用區域內分組表單，它可以讓信息看起來更加的有條理、清晰。

6. 動態表格

可以根據用戶的篩選、排序等操作實時更新數據展示。這是我日常項目中做的一個動態表格，表格中的數據可以根據用戶的需求動態顯示，數據可以升序排列，也可以降序排列。

7. 分步驟復雜表格

如果信息存在邏輯的先后順序，我們就可以采用分步表單，分步可以讓用戶更好的理解和操作，比如一些復雜的購買流程就很適合這類表單。

8. 多卡片分區表單

當場景中有多種需求，用一個卡片表單已經無法訴說清楚時，這時候就需要用到多卡片分區表單了。下面這個場景就是這樣的，在一個頁面同時要檢測“IAAS 層診斷”、“PASS 層診斷”、“SAAS 層診斷”的情況，明顯一個卡片表單已經無法滿足需求，這時候就要用到多卡片分區表單。

9.? 頁簽類表格

如果信息既沒有邏輯的先后順序，又沒有關聯性，這時候就要用到頁簽類表單，這樣會更易于用戶查看。

五、B 端表格設計中的 15 個注意事項

1. 標題固定

表格標題和表格內容做明顯的區分，然后通常表格是固定不動的，因為用戶始終要參考這些關鍵信息。就像下面的這個表格，要看的信息非常多，當無限往下滑的時候，如果標題不固定，都會迷惑當前內容對應的類型是什么。

2. 適度留白

表格內容中的列項要有合適的留白和間距。表格中一般都是文字和參數，如果沒有合適的間距作為區分，很容易混成一團，難以區分。

3. 字體大小和行高合適

常用的的文字大小：表頭標題字號大小有 14px、15px、16px（極少用）；列文字常用大小 12px、13px、14px，正常文字不能低于 12px，低于了就會影響識別，產生閱讀障礙，這個是底線；對于年齡大一點的用戶的話，為了更好識別，列表文字要用 14 px，這樣識別度會更高。

表格的行高要在合適范圍內，以免影響用戶的閱讀體驗; 文字行高可以設定為字號的 1.2~1.8 倍，文字與分割線間距可以設定為字號的 1~1.5 倍。

4. 文字規律對齊

表格中的文字要形成有規律的對齊方式，通常有左對齊和居中對齊兩種，特殊情況下也有右對齊的。

1. 文字較長時左對齊，因為左對齊更加符合用戶的習慣。
2. 文字較短時，左對齊或居中對齊。
3. 金額數字時，右對齊，因為這樣對齊可以很清晰的比較出每個金額的大小。

5. 表格中盡量多用可視化圖形表達方式

表格中全篇的文字會引起用戶閱讀的乏味，這是日常項目中遇到的一個表格，主機 CPU 使用率和主機內存使用率都用了進度條的形式來表達，增加了數據的可理解性，也增加了表格的美觀度。

6. 表格設計要好操作

表格應該是可交互的、易用的，讓人能快速定位到需要的數據，從而做出良好的決策，如導出、編輯等快捷操作。

下面是我項目中改良的一個表格設計，之前表格上方的操作按鈕以線性圖標加文字的形式展示，導致用戶看的不是很清晰，而且間距有點小，容易誤操作。

改良后的表格就好多了，用了帶有明顯圖像化的圖標加文字，間距也更加舒展，布局排列更加的清晰，同時視覺也更加美觀。

7. 表格中數據沒有時不要空著

如果表格中部分內容沒有數據則用 0 或者--占位，盡量不空著，不讓人產生數據還沒加載好的錯覺。

8. 表格中數據文字盡量不要換行

列表中的文字選擇固定最大字數+省略號（氣泡顯示）

9. 設計表格的時要明確表格的目的和主題

當我們明確好了目的和主題時，就可以很好的協助我們選擇表格的樣式，當內容少時，我們可以不用一定只能用斑馬樣式的表格，可以用普通的水平線分割型。

當我們對數據有排序、對比、篩選需求的時候就要用表格標題中帶篩選、排序功能形式的表頭。每種表格樣式的選擇，都跟我們的目的是息息相關的。

每一種的表格樣式和表頭樣式的誕生，都是由它的業務需求衍生而來的，做為 B 端設計師，我們多多跟客戶交流總是沒有錯的，會給產品提效帶來很多幫助。

10. 在合理范圍內，表格占比區域要盡量大，提升屏效

B 端產品-數據為王的世界，盡可能把空間留給數據展示，讓更多的數據一屏展示，會給用戶帶來更好的體驗。

這是我參與設計的一個 B 端產品，考慮到屏幕的利用效率，可以設計一個折疊的功能圖標，當列表內容很多，點擊折疊圖標后，列表的數據信息可以得到一個最大化的展示。

11. 表格標題要簡短

表格標題是對整個表格信息內容的一個概括，它需要簡短，不需要長篇大論，需要給更多的空間給到操作控件。

12. 要設置防錯措施

當鼠標放置在某一行時，選中行要高亮顯示，跟其他的行要有差異，讓用戶清楚的知道自己選擇的是哪一行。

13. 數據為空時，要有圖文說明

整個表格沒有數據時，要設計空狀態圖標，不要整個頁面都空著，用圖形和文字描述清楚當前的一個狀況。

下面這個表格，當前是沒有數據的，它用一個空狀態圖標和文字進行了說明，這樣用戶就不會產生焦慮情緒，同時比空著，頁面也更加美觀。

14. 控制列數

7 加減 2 原則是一個心理學和認知科學中的概念，它指出人類短時記憶信息的處理能力大約在 5 到 9 個信息塊之間，因此我們控制合適的列數，可以方便用戶記憶。

同時列舉用戶更為關注的數據，用戶需要的非重點、輔助性信息可以在詳情中展示。

15. 自定義列

每個用戶想看到的信息側重不同，讓用戶能自定義列是很好的處理方法。在默認情況下僅展示最常用、最重要的幾個指標(如下圖)。這樣處理的優點是：用戶能在表格上方看到所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況;其次，用戶可以根據自己的需要，自由的選擇需要顯示的指標，隱藏不必要的指標，減少干擾。

六、B 端表格樣式的 4 個種類

1. 斑馬條紋分割型表格

通過低飽和度的顏色交替對行進行分割，可以很好的對數據進行劃分，便于閱讀。

2. 水平線分割型表格

僅對行進行分割，通過間距與對齊的方式對列進行視覺上的分割，這樣的方式可以很好的對數據進行劃分，便于閱讀。

3. 留白分割型表格

直接留白，通過間距來劃分，不建議使用這樣的方式，因為數據較多的時候，用戶十分容易將行對應錯，容易造成混亂。

4. 網格分割型表格

網格分割型表格類似 excel，這樣的方式可以很好的對所有行和列進行分割，但是網格很容易給人造成視覺疲勞。

七、B 端表格設計 5 大原則

B 端產品中表格的設計應遵循清晰可讀、結構化布局、功能齊全、響應式設計、可定制性和性能優化等原則，這些原則將有助于提高表格的可用性和用戶體驗。

1. 清晰可讀

清晰可讀性是表格設計的基礎，選對字體和顏色，確保對比度高，讓眼睛輕松閱讀；列標題簡潔明了，避免術語堆砌，讓用戶一目了然，快速把握信息。設計表格，就是在打造一個清晰、易懂的數據展示舞臺。

2. 結構化布局

表格布局的清晰性至關重要，將關鍵信息置于左側或頂部，符合大多數人的閱讀習慣，便于用戶迅速捕捉重點，保持合理間距，確保信息不顯擁擠，有助于提升閱讀體驗。此外，使用對齊方式，如左對齊、右對齊或居中對齊，可以進一步增強表格的整潔度和邏輯性。布局設計要以人為本，讓數據呈現既直觀又易于理解。

3. 功能齊全

表格功能全面，是提升工作效率的利器。排序讓數據井然有序，篩選幫用戶聚焦關鍵信息，搜索則快速定位所需，導出和打印則讓數據易于保存和分享。每個小工具都大有用途，讓表格成為數據處理的得力助手。

4. 響應式布局

在 B 端產品中，表格設計必須具備靈活性。響應式布局是關鍵，它允許表格在不同尺寸的屏幕和設備上自適應。設計時，要考慮最廣泛的用戶場景，確保在任何設備上都能提供一致的用戶體驗。通過這樣的設計，表格不僅僅是一個數據展示工具，更是一個全域可用的解決方案。

5. 性能優化

處理海量數據時，表格性能至關重要。設計時需注重加載速度，優化渲染過程，避免卡頓。可以使用分頁、延遲加載或數據壓縮技術，減輕服務器負擔，提升響應速度。目標是讓用戶在操作數據時，感受到絲滑而非卡頓，確保效率和體驗的雙贏。

八、B 端表格中常見的 12 種操作

總結

小處不可隨便，大事不可輕率，通過多方的調研以及結合自己平時工作實戰的積累，沒想到小小的表格也梳理出了將近 50 條設計細節，自己對表格設計也更加清晰、全面了，寫是很好的學，也是很好的梳理自己思路的好辦法，可能還有不夠完善的地方，也歡迎大家留言區補充討論，大家共同進步。