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

一、 表格的含義

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

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

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

1. 篩選區(qū)

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

2. 標(biāo)題

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

3. 表頭

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

① 無(wú)控件表頭

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

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

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

③ 分組表頭

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

4. 表體

① 行

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

② 列

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

③ 單元格

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

④ 滾動(dòng)條

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

⑤ 操作列

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

⑥ 選中標(biāo)記

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

⑦ 總計(jì)行

當(dāng)用戶(hù)對(duì)行或列信息有計(jì)算需求時(shí)，這時(shí)候可以根據(jù)需求多衍生一個(gè)專(zhuān)門(mén)用于計(jì)算的行。

5. 底欄

① 分頁(yè)控件

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

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

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

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

2. 詳情表格

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

3. 可編輯表格

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

4. 樹(shù)形表格

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

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

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

6. 動(dòng)態(tài)表格

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

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

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

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

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

9.  頁(yè)簽類(lèi)表格

如果信息既沒(méi)有邏輯的先后順序，又沒(méi)有關(guān)聯(lián)性，這時(shí)候就要用到頁(yè)簽類(lèi)表單，這樣會(huì)更易于用戶(hù)查看。

五、B 端表格設(shè)計(jì)中的 15 個(gè)注意事項(xiàng)

1. 標(biāo)題固定

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

2. 適度留白

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

3. 字體大小和行高合適

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

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

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

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

1. 文字較長(zhǎng)時(shí)左對(duì)齊，因?yàn)樽髮?duì)齊更加符合用戶(hù)的習(xí)慣。
2. 文字較短時(shí)，左對(duì)齊或居中對(duì)齊。
3. 金額數(shù)字時(shí)，右對(duì)齊，因?yàn)檫@樣對(duì)齊可以很清晰的比較出每個(gè)金額的大小。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14. 控制列數(shù)

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

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

15. 自定義列

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

六、B 端表格樣式的 4 個(gè)種類(lèi)

1. 斑馬條紋分割型表格

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

2. 水平線(xiàn)分割型表格

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

3. 留白分割型表格

直接留白，通過(guò)間距來(lái)劃分，不建議使用這樣的方式，因?yàn)閿?shù)據(jù)較多的時(shí)候，用戶(hù)十分容易將行對(duì)應(yīng)錯(cuò)，容易造成混亂。

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

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

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

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

1. 清晰可讀

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

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

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

3. 功能齊全

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

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

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

5. 性能優(yōu)化

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

八、B 端表格中常見(jiàn)的 12 種操作

總結(jié)

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

姝斐suphie