展示組件在頁面中主要承擔(dān)著向用戶傳達(dá)信息功能，以幫助用戶快速地定位和瀏覽數(shù)據(jù)。常用的展示組件包含徽標(biāo)、標(biāo)簽、走馬燈、文字提示、氣泡卡片、折疊面板、表格等。接下來我將逐個講解一下這些組件。

一、徽標(biāo)

徽標(biāo)常出現(xiàn)在通知圖標(biāo)或者頭像右上角，用來展示需要處理的消息或任務(wù)條數(shù)。

常見徽標(biāo)類型有帶數(shù)字樣式、圓點樣式、多彩圓點樣式。徽標(biāo)常見位置有右上角及左右排布。有一點要注意的是徽標(biāo)設(shè)計時建議加上一個顏色和大背景色一致的描邊，以便徽標(biāo)和底下內(nèi)容清晰區(qū)分。

二、標(biāo)簽

標(biāo)簽一般有兩種使用場景：一是用于標(biāo)記事物的屬性和維度，二是進(jìn)行分類。標(biāo)簽常見的樣式有描邊樣式、淺色填充樣式、描邊+淺色填充樣式、深色填充樣式。部分標(biāo)簽可支持刪除功能。

三、走馬燈

走馬燈又叫輪播圖，一般用于一組平級內(nèi)容的并列展示模式，例如圖片或卡片輪播，輪播方式一般支持用戶主動觸發(fā)或者系統(tǒng)自動輪播兩種方式。比較常見于產(chǎn)品介紹頁面或運營廣告模塊。輪播的數(shù)量建議控制在 3~5 個之間，同時應(yīng)清晰展示輪播數(shù)量以及當(dāng)前輪播位置。

四、文字提示

即文字簡單的氣泡框，鼠標(biāo)移入則顯示提示，移出后消失。文字提示應(yīng)有兩不承載，一是不承載復(fù)雜文本，二是不承載任何操作。一般氣泡填充為暗黑色半透明，特殊場景下可用彩色填充，之所以用色塊填充是因為文字太少信息不明顯 ，需要用大色塊凸顯。

文字提示一般有如下 12 種樣式，根據(jù)頁面所處位置進(jìn)行靈活選用。

五、氣泡卡片

氣泡卡片也是氣泡框樣式，鼠標(biāo)移入或點擊則顯示提示，移出或再次點擊后消失。

氣泡卡片適合文字較多情況下，且支持承載操作，同時填充一般為淺色（常見為白色） 氣泡卡片一般有如下 12 種樣式，根據(jù)頁面所處位置進(jìn)行靈活選用。

氣泡卡片常見類型包括純文本、文本+按鈕/鏈接、帶標(biāo)題文本等。 這里還歸納總結(jié)了文字提示與氣泡卡片的特點，以便我們加深理解。

六、折疊面板

折疊面板可以將較多或較復(fù)雜的內(nèi)容進(jìn)行分組，分組內(nèi)容區(qū)可以折疊展開或隱藏，利用好折疊面板可以將復(fù)雜頁面內(nèi)容收納的更簡潔有條理。折疊面板放置內(nèi)容可以是純文本、圖文、子列表等形式。

從功能上講折疊面板可分為常規(guī)式、手風(fēng)琴式、嵌套式，常規(guī)式可以同時展開多個折疊項，且每個折疊項展開后需要手動收起；手風(fēng)琴式則只允許單個折疊項展開，展開另一個會自動折疊當(dāng)前展開內(nèi)容；嵌套式指折疊內(nèi)容多層嵌套的折疊面板，可實現(xiàn)對更復(fù)雜內(nèi)容收納。

從樣式上說折疊面板可分為帶框與不帶框，圖標(biāo)位于左側(cè)與右側(cè)等常見幾種

七、表格

表格常用于大量同類結(jié)構(gòu)下多種數(shù)據(jù)展示，方便用戶對數(shù)據(jù)進(jìn)行對比分析與組織，同時支持搜索、排序、篩選、編輯數(shù)據(jù)，以及對數(shù)據(jù)分頁。表格可以說在 B 端設(shè)計中是必不可少且應(yīng)用非常高頻的一類組件，接下來我們著重來聊下關(guān)于表格的那些事兒。

1. 風(fēng)格樣式

常見表格樣式有常規(guī)式，線框式，斑馬紋式。其中常規(guī)式樣式簡約輕量，對表格內(nèi)容視覺干擾最小，優(yōu)先應(yīng)用于大部分場景。

Tips：在實際設(shè)計中常規(guī)式與線框式表格存在橫向閱讀不夠直觀缺陷，可用 hover 狀態(tài)整行淺灰填充方式來彌補。

2. 基本構(gòu)成

表格一般由表頭、行、列、單元格這些基本元素構(gòu)成。

① 表頭

a. 表頭常見樣式

表頭常見樣式有標(biāo)準(zhǔn)表頭、帶排序/篩選表頭、分組表頭。其中分組表頭適合采用前面提到的線框式表格。為了直觀區(qū)分表頭與內(nèi)容區(qū)，一般會讓表頭區(qū)背景色與內(nèi)容區(qū)不一樣，以及將表頭文字與內(nèi)容區(qū)文字樣式做出區(qū)分。

b. 表頭標(biāo)題

表頭標(biāo)題文案應(yīng)當(dāng)足夠精簡且表意清晰，這里有兩種方法保證文案簡潔：一是如果表頭標(biāo)題文案重復(fù)啰嗦，可去掉重復(fù)字段精簡文案；二是當(dāng)表頭標(biāo)題過長且無法精簡時，表頭上可只保留簡短標(biāo)題，用文字提示承載長標(biāo)題全稱。

c. 表頭固定

縱向滾動表格時，為了方便用戶高效獲取信息，表頭應(yīng)保持固定。

② 單元格

這里總結(jié)了幾個關(guān)于單元格的幾個設(shè)計要點：

③ 行

行分為單行文本與多行文本兩種情況，下面給出了兩種情況常規(guī)表格行高參考計算公式，如若計算結(jié)果為非偶整數(shù)可就近取偶整數(shù)。

當(dāng)然除了常規(guī)行高，為了滿足不同用戶閱讀習(xí)慣，我們還可以支持用戶自定義多種行高功能，一般行高建議 3-4 種為宜。

④ 列

a. 列寬自適應(yīng)規(guī)則

假設(shè)我們定義表格左右空白間距為 a，列間距為 b。其中 a 固定不變，b 根據(jù)表格內(nèi)容自適應(yīng)，同時可定義 b 一個最小值，隨著表格列數(shù)增加，當(dāng)表格內(nèi)容寬度超出頁面寬度時，固定首或尾列（可同時固定首尾列），出現(xiàn)橫向滾動條可左右滑動。

b. 對齊規(guī)則

列常見對齊方式一般有左對齊與右對齊，通常情況下建議采用左對齊方式，以便用戶高效閱讀。兩種情況下可采用右對齊方式，一是涉及比較數(shù)據(jù)大小時，二是位于尾列操作列可采用右對齊。至于居中對齊由于視覺動線曲折，通常不建議在表格中運用。

小 Tips：當(dāng)表格列數(shù)較多時，一般有兩種處理方式，一是將列數(shù)控制在 7 條左右，只展示用戶最關(guān)注的內(nèi)容，其他次要內(nèi)容放到詳情中展示即可；二是當(dāng)多用戶對內(nèi)容關(guān)注側(cè)重點不同時，可支持用戶自定義列展示。

3. 詳情查看

① 詳情入口

表格很多都會涉及到詳情查看這一塊內(nèi)容，一般詳情查入口有兩種形式：一是將標(biāo)題高亮，點擊進(jìn)入詳情，這種適合查看詳情為高頻操作或操作列已有較多按鈕場景；二是操作列放置詳情按鈕，點擊進(jìn)入詳情，這種適合操作列沒有或較少操作按鈕場景。

② 交互方式

常見查看詳情交互方式有：表格展開收起、彈窗、抽屜、頁面。

表格展開收起適用于追求輕量簡潔體驗、用戶操作連貫性高的場景；

彈窗則適用于詳情頁面承載中等量重要信息與操作，且可接受彈窗打斷場景；

抽屜適用于追求快捷查看詳情且快速切換不同項目詳情（抽屜去掉黑色遮罩即可），以及詳情內(nèi)容量較多且不希望跳轉(zhuǎn)頁面查看詳情情況；

頁面適用詳情頁面承載大量重要信息與操作場景，需要新開頁面前往操作。

到這里關(guān)于 B 端的展示組件就全部梳理完了，后續(xù)有時間我再整理一篇關(guān)于錄入組件的總結(jié)，敬請期待。

部分參考資料：

1. 《B 端產(chǎn)品設(shè)計-Mia》
2. 《Ant Design》

作者：huang。亮