多圖示例！3個(gè)方面解析B端表格如何提升使用體驗(yàn)

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

往期B端干貨：

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

一、基礎(chǔ)組成

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

① 篩選區(qū)

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

② 標(biāo)題欄

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

③ 表格區(qū)域

包括表頭和數(shù)據(jù)區(qū)，用于數(shù)據(jù)查看，根據(jù)需要在末尾列有對(duì)應(yīng)單列的操作。

④ 分頁欄

分頁展示篩選后總數(shù)據(jù)量和總頁數(shù)，也可以選擇顯示的項(xiàng)目數(shù)和每頁的跳轉(zhuǎn)頁數(shù)。樣式和內(nèi)容都比較固定，不是所有的表都有。

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

二、表頭

① 作用

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

② 視覺樣式

大部分地表頭相對(duì)內(nèi)容行會(huì)偏矮一些，有時(shí)為了能突出數(shù)據(jù)還會(huì)縮小表頭的文字大小，表頭的背景顏色按需選擇。

③ 內(nèi)容分類

純文字

當(dāng)表格表頭只有文字時(shí)，則只是基礎(chǔ)分類作用；

如果想強(qiáng)調(diào)標(biāo)題，特別是信息分類差別不大(如多列都是同一個(gè)范圍的數(shù)字?jǐn)?shù)據(jù))和列數(shù)較多的情況，背景色相對(duì)于單元格更深一些，文字也會(huì)加粗加黑；

如果想弱化標(biāo)題，則使用白底，文字顏色與單元格一致或更淺，風(fēng)格簡約且更關(guān)注內(nèi)容，內(nèi)容的樣式可以更加豐富，常見于國外的設(shè)計(jì)中。

需要注意的是，有的標(biāo)題除了主題文字還會(huì)加上單位，尤其是數(shù)字?jǐn)?shù)據(jù)列，會(huì)加上如百分比、萬等單位，使數(shù)字?jǐn)?shù)據(jù)理解更加準(zhǔn)確。

文字+功能圖標(biāo)

解釋：在文字的任意一側(cè)有一個(gè)感嘆號(hào)/問號(hào)圖標(biāo)，當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)位置時(shí)，會(huì)彈出氣泡彈窗，解釋表頭的標(biāo)題；

排序：一般在左側(cè)或右側(cè)放置一個(gè)上下箭頭的圖標(biāo)，用于按數(shù)字和字母的升序或降序?qū)Ρ緳趦?nèi)的字段進(jìn)行排序，這也是常見的排序方式。如下圖的“創(chuàng)建人”標(biāo)題是按照英文字母順序排列的；

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

文字+裝飾圖標(biāo)

還有比較少見，在 excel 表格類型中出現(xiàn)過，用于收集或統(tǒng)計(jì)大量數(shù)據(jù)的趣味表格，讓分類更加清晰，也避免視覺疲勞。

④ 特殊情況

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

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

三、數(shù)據(jù)區(qū)

① 作用

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

② 設(shè)計(jì)原則

主要是高效閱讀，下面將從兩個(gè)方面進(jìn)行詳述：

減少視覺干擾

a. 表格框線

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

b. 背景顏色

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

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

c. 文字 (普通文字)

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

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

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

加強(qiáng)重點(diǎn)突出

a. 文字 (偏功能)

無操作但使用強(qiáng)調(diào)色的文字：通用用于一些需突出文本內(nèi)容的場景，尤其是和金額相關(guān)的數(shù)據(jù)，如增長和減少數(shù)據(jù)，注意國內(nèi)使用紅色代表漲、綠色代表跌，國外則相反。

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

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

b. 圖標(biāo)/按鈕

按鈕通常以文本、圖標(biāo)、文本+圖標(biāo)形式出現(xiàn)，表格中的圖標(biāo)大部分也以按鈕的形式存在。

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

展現(xiàn)方式-外顯：適合強(qiáng)調(diào)視覺的場景，尤其是高頻操作，如圖所示，信息質(zhì)量一欄的圖標(biāo)(符號(hào)化強(qiáng)調(diào))、最后一欄的操作(高頻操作)；

展現(xiàn)方式-隱藏：只有當(dāng)鼠標(biāo)移到相應(yīng)位置(對(duì)應(yīng)表格項(xiàng))才出現(xiàn)，一般用作操作按鈕，比如圖中的編輯圖標(biāo)(庫存一列、選中行的數(shù)字旁)。

分類：

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

注意當(dāng)操作項(xiàng)目較多時(shí)，根據(jù)情況選擇方案，如果寬度足夠且選項(xiàng)較少，可以直接平鋪；如果選項(xiàng)較多，可以選擇折疊低頻項(xiàng)、全部折疊，或者直接將操作放入根據(jù)操作頻率點(diǎn)擊跳轉(zhuǎn)的詳情頁中。

c. 圖表

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

特點(diǎn)是直觀清晰，用于流程進(jìn)度、比例等場景，使用時(shí)根據(jù)圖表本身適用場景而定。

③ 案例解析

根據(jù)最近的一個(gè)實(shí)際案例講解，需求是對(duì)展示審批的進(jìn)度列視覺強(qiáng)化，進(jìn)度項(xiàng)為：待提交、審批中、審批完成、審批退回，當(dāng)時(shí)完成如下方案并進(jìn)行思考：

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

方案(二)進(jìn)度環(huán)：靈感來源于 Xmind 里面的任務(wù)標(biāo)記，可以用一個(gè)或多個(gè)顏色，更直觀，適合表格內(nèi)容較少、有流程的場景；

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

由于是整體風(fēng)格比較簡約，且表格內(nèi)容較多，項(xiàng)目中最后用的方案一，簡單又明了。但在實(shí)際場景中，還需根據(jù)各自的項(xiàng)目內(nèi)容量和風(fēng)格來決定。

最后

有的同學(xué)可能會(huì)說平時(shí)設(shè)計(jì)基本很少有花樣，是的，B 端設(shè)計(jì)相對(duì) C 端設(shè)計(jì)更加克制，對(duì)應(yīng)用戶群體的話語權(quán)更高，但前提是自己的知識(shí)儲(chǔ)備足夠并了解業(yè)務(wù)，有理有據(jù)去分析和決策，這樣才更專業(yè)、才能讓人信服。

歡迎關(guān)注微信公眾號(hào)：「Clip設(shè)計(jì)夾」