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

一、 表格的含義

表格通常是指將相關(guān)的數(shù)據(jù)和信息以行和列的結(jié)構(gòu)化方式進(jìn)行排列，以便清晰、準(zhǔn)確、高效地呈現(xiàn)，在 B 端設(shè)計中，表格是一種重要的信息展示和處理工具，能夠幫助用戶有效管理數(shù)據(jù)。

二、 表格在 B 端設(shè)計中作用

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

1. 篩選區(qū)

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

2. 標(biāo)題

大部分的表格都會有一個標(biāo)題，標(biāo)題是對表格內(nèi)容的一個簡要的概括。

3. 表頭

表頭包含列的標(biāo)題，用于說明每列數(shù)據(jù)的含義和屬性；根據(jù)業(yè)務(wù)需求，有的表頭還需要包含篩選的控件，讓無序的數(shù)據(jù)展示更加的有序。

① 無控件表頭

無控件表頭，就是表頭中沒有任何的控件，只有列信息的一個標(biāo)題，在樣式方面有三種表現(xiàn)方式，一種是強(qiáng)對比的標(biāo)題展示方式，一種是弱對比的標(biāo)題展示方式，還有一種是帶圖標(biāo)的標(biāo)題展示方式。

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

帶控件的表頭用于希望數(shù)據(jù)展示呈現(xiàn)一定的規(guī)律，比方說升序排列、降序排列、篩選特定數(shù)據(jù)的排列等；通過這些控件的使用，它可以提升數(shù)據(jù)處理效率，優(yōu)化業(yè)務(wù)流程，提升用戶體驗。

③ 分組表頭

當(dāng)一個表格里面有多條數(shù)據(jù)在同一個小范圍的維度進(jìn)行展示時，表頭有很多分組進(jìn)行區(qū)分，這時可以通過硬拆分將數(shù)據(jù)進(jìn)行切割分類。

4. 表體

① 行

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

② 列

表格中的縱向數(shù)據(jù)單元，根據(jù)數(shù)據(jù)的類型和屬性進(jìn)行劃分。

③ 單元格

行和列的交叉處，用于填寫具體的數(shù)據(jù)內(nèi)容。

④ 滾動條

當(dāng)表格數(shù)據(jù)較多，超出顯示區(qū)域時，用于上下或左右滾動查看數(shù)據(jù)。

⑤ 操作列

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

⑥ 選中標(biāo)記

用于支持用戶選擇多行數(shù)據(jù)進(jìn)行批量操作。

⑦ 總計行

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

5. 底欄

① 分頁控件

如果數(shù)據(jù)量較大，需要分頁顯示，這時就要用到分頁控件進(jìn)行頁面切換。

四、B 端設(shè)計中的 9 種表格

1. 基礎(chǔ)數(shù)據(jù)表格：

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

2. 詳情表格

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

3. 可編輯表格

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

4. 樹形表格

適用于具有層級關(guān)系的數(shù)據(jù)展示，通過縮進(jìn)或展開的方式呈現(xiàn)數(shù)據(jù)的層次結(jié)構(gòu)。

5. 區(qū)域內(nèi)分組表格

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

6. 動態(tài)表格

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

7. 分步驟復(fù)雜表格

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

8. 多卡片分區(qū)表單

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

9.  頁簽類表格

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

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

1. 標(biāo)題固定

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

2. 適度留白

表格內(nèi)容中的列項要有合適的留白和間距。表格中一般都是文字和參數(shù)，如果沒有合適的間距作為區(qū)分，很容易混成一團(tuán)，難以區(qū)分。

3. 字體大小和行高合適

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

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

4. 文字規(guī)律對齊

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

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

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

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

6. 表格設(shè)計要好操作

表格應(yīng)該是可交互的、易用的，讓人能快速定位到需要的數(shù)據(jù)，從而做出良好的決策，如導(dǎo)出、編輯等快捷操作。

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

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

7. 表格中數(shù)據(jù)沒有時不要空著

如果表格中部分內(nèi)容沒有數(shù)據(jù)則用 0 或者--占位，盡量不空著，不讓人產(chǎn)生數(shù)據(jù)還沒加載好的錯覺。

8. 表格中數(shù)據(jù)文字盡量不要換行

列表中的文字選擇固定最大字?jǐn)?shù)+省略號（氣泡顯示）

9. 設(shè)計表格的時要明確表格的目的和主題

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

當(dāng)我們對數(shù)據(jù)有排序、對比、篩選需求的時候就要用表格標(biāo)題中帶篩選、排序功能形式的表頭。每種表格樣式的選擇，都跟我們的目的是息息相關(guān)的。

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

10. 在合理范圍內(nèi)，表格占比區(qū)域要盡量大，提升屏效

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

這是我參與設(shè)計的一個 B 端產(chǎn)品，考慮到屏幕的利用效率，可以設(shè)計一個折疊的功能圖標(biāo)，當(dāng)列表內(nèi)容很多，點擊折疊圖標(biāo)后，列表的數(shù)據(jù)信息可以得到一個最大化的展示。

11. 表格標(biāo)題要簡短

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

12. 要設(shè)置防錯措施

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

13. 數(shù)據(jù)為空時，要有圖文說明

整個表格沒有數(shù)據(jù)時，要設(shè)計空狀態(tài)圖標(biāo)，不要整個頁面都空著，用圖形和文字描述清楚當(dāng)前的一個狀況。

下面這個表格，當(dāng)前是沒有數(shù)據(jù)的，它用一個空狀態(tài)圖標(biāo)和文字進(jìn)行了說明，這樣用戶就不會產(chǎn)生焦慮情緒，同時比空著，頁面也更加美觀。

14. 控制列數(shù)

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

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

15. 自定義列

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

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

1. 斑馬條紋分割型表格

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

2. 水平線分割型表格

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

3. 留白分割型表格

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

4. 網(wǎng)格分割型表格

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

七、B 端表格設(shè)計 5 大原則

B 端產(chǎn)品中表格的設(shè)計應(yīng)遵循清晰可讀、結(jié)構(gòu)化布局、功能齊全、響應(yīng)式設(shè)計、可定制性和性能優(yōu)化等原則，這些原則將有助于提高表格的可用性和用戶體驗。

1. 清晰可讀

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

2. 結(jié)構(gòu)化布局

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

3. 功能齊全

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

4. 響應(yīng)式布局

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

5. 性能優(yōu)化

處理海量數(shù)據(jù)時，表格性能至關(guān)重要。設(shè)計時需注重加載速度，優(yōu)化渲染過程，避免卡頓?？梢允褂梅猪?、延遲加載或數(shù)據(jù)壓縮技術(shù)，減輕服務(wù)器負(fù)擔(dān)，提升響應(yīng)速度。目標(biāo)是讓用戶在操作數(shù)據(jù)時，感受到絲滑而非卡頓，確保效率和體驗的雙贏。

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

總結(jié)

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

姝斐suphie