一個合理、規范的標簽體系可以起到至關重要的作用，雖然標簽的面積較小，但它們的存在，卻可以給用戶提供關鍵信息。那么，怎么搭建好B2B平臺的標簽體系呢？本文結合實際案例分享了設計優化思路，一起來看一下。

一、前言

數字時代中，標簽在購物網站、社交媒體、搜索引擎等各個領域都發揮著重要作用。盡管標簽的面積較小，它們卻能夠為用戶提供關鍵信息，幫助用戶快速做出決策。因此，設計一個合理、規范的標簽體系成為了許多平臺需要面對的挑戰。作為百度旗下的B2B平臺，愛采購通過不斷優化標簽體系以提升用戶體驗。下面將以此為例，簡述B2B平臺標簽體系的設計優化思路。

1. 常見的標簽&作用

標簽常用于展示內容/功能/商品/活動/價格/身份等信息，用于對高優信息進行標記&分類，輔助用戶決策。

2. 標簽對愛采購平臺的作用

愛采購作為百度旗下的企業一站式采銷平臺，致力于讓買家直接接觸海量商品和優質商家，同時還為賣家提供商家運營后臺，幫助他們快速實現交易目標。

在平臺上，經過認證的商家和商品信息將會被打上相應的標簽，確保真實性和實力資質。這些標簽不僅展現了商家的優勢，更是他們寶貴的會員權益。

3. 原標簽體系因何而變

平臺的slogan從“買賣好貨源，做出好生意”轉變為“定制、批發、找工廠就來愛采購”的階段中，逐步推出「實力品牌」「交易服務」「加工定制」「資質認證」四類標簽權益。當推出新權益時，為了快速樹立用戶認知，將新權益的標簽權重進行強化。但隨著權益體系的逐步完善，各類標簽優先級排序不合理、不清晰等問題日益凸顯，影響用戶對各種權益的價值認知。

4. 新標簽體系如何求變

我們從平臺的角度出發，通過對標簽權重進行排序和分類、統一標簽的構成形式，致力于建立統一的標簽體系，統一會員權益的感知，完善設計規范，并建立標簽建設的協同機制，以規范后續標簽的更新迭代產出。

二、分類-排序-收斂

1. 標簽分類

現有的標簽從B2B平臺的屬性和用戶的視角來看，可以分為六大類：會員類、認證類、服務類、交易類、保障類、資質類。

2. 標簽排序

各類標簽都有其獨特的重要性，但在設計表達時，需要從助力買家尋找優質店鋪&服務這一核心情境出發，根據平臺對標簽的綜合定位和用戶的心智感知，定義標簽的權重排序，并劃分出強中弱三個梯級，以便后續的標簽樣式系統優化。

3. 標簽收斂

1）樣式收斂

新權益推出時，?；趹脠鼍坝谩拔恢谩焙汀皹邮健睆娀瘜臉撕?。隨著權益體系的完善，一個標簽存在多種樣式使得權益表達的不統一，影響了用戶對標簽價值的認知。為解決這一問題，需要對標簽樣式的數量進行收斂。保留符合標簽權重和通用性強的樣式，作為標簽迭代的基礎范式。

2）應用收斂

常規非特色信息使用標簽，反而影響其他標簽的權重和頁面的閱讀效率，根據奧卡姆剃刀原則“如無必要，勿增實體”，需要通過視覺降噪來提升頁面的可閱讀性。

三、統一標簽體系的構成

1. 形

標簽的大小通常分為大、中、小三種，而標簽的寬度常根據內容的長度進行適配。因此，在規則定義上，標簽的大小會受到其高度的影響。

1. 大標簽（高度18-22Pt）：常用于表格、表單等信息密度相對較低的場景，使用相對較大的標簽，以便與其他信息達到視覺上的平衡。
2. 中標簽（高度15-17Pt）：最常見的標簽大小，常用于Feeds、用戶信息卡等場景中。
3. 小標簽（高度12-14Pt）：由于面積較小，通常用來承載輔助信息，常見于Feeds等場景中。

結合愛采購平臺的核心場景和常用文字字號，16Pt的標簽高度與其他信息的大小比例最為平衡，故選擇16Pt的標簽高度作為基礎大小。

在標簽的造型上，可以將其分為常規形和異形兩種類型：

• 常規形：常見的標簽為矩形，具有規整有序的外觀，閱讀效率較高，有較強的通用性，適用于列表等大部分場景。
• 異形：異形標簽的形狀較為自由，由于其差異化較大，會更容易引起用戶的注意，適用于特殊的身份表達、大促活動等場景。

在統一的場景中，同屬性類型的標簽形狀應該保持統一和諧，避免在相同類別的標簽中混用不同形狀，造成視覺上的不統一感。通過統一標簽形狀，可以提升用戶對標簽信息的識別和理解。

在標簽的圓角上，我們可以分為以下幾種形狀：

• 膠囊形狀（圓角為高度的50%）：圓潤的外觀給用戶帶來柔和的視覺感受。
• 大圓角矩形（圓角為高度的18%~32%）：擁有視覺亮點的同時保持一定的圓潤度。
• 小圓角矩形（圓角為高度的6%~12%）：標簽更加銳利，但又不失整體的和諧性。
• 直角矩形（圓角度為0）：具有簡潔硬朗的外觀，適用于某些特定的場景或者設計風格。

新的標簽體系從產品設計語言出發，選擇小圓角矩形作為主要標簽的基本型，以保持整體視覺風格的一致性。

2. 色

采用HSB色彩系統來構建標簽的色彩體系。在HSB顏色模式下，我們以品牌紅的0°為起點，每隔24°遞增，選擇不同心智的輔助色。為了色彩體系在視覺上的統一性，通過色彩矯正保持H不變，對S/B進行20°以內的微調。

在建立新的標簽色彩體系之前，需要根據現有標簽的分類，在延續之前標簽色彩心智的基礎上，對不同類型的標簽選用具有不同心智的色彩。

深色場景的調色方式：

在特定情境下，標簽會應用于深色背景上，這就需要在原有基礎上對顏色進行有規則的調整，以確保標簽的可閱讀性和統一性。

對于彩色標簽，在這種HSB色值模式下，保持色相（H）不變，通過微調飽和度（S）和亮度（B），使在亮色和暗色背景上的對比度保持一致，以確保標簽在不同背景下都能清晰統一。

3. 字

針對常規標簽，我們采用系統字體，而對于高優特色標簽，則使用特殊字形（非默認字形）。通過對比原則，我們在保持整體統一的基礎上尋找差異，以強化高優標簽的視覺效果。

4. 構

1）標簽體系樣式的構成

標簽的構成形式可拆解為：雙色和單色、實心和半透明、描邊和填充、純文字或圖標加文字等，這些形式可以搭配組合出豐富的標簽樣式。

在標簽內部，重色占比越大，飽和度和對比度越高，標簽的視覺權重就越高。根據視覺上的強弱，對各類結構進行強弱排順，形成強、中、弱三個層級的標簽構成樣式。

2）標簽體系樣式搭配的構成

在相同的場景中，應盡量避免過多臨近權重的標簽，而是需要確立一個合理的強弱比例。盡管每個標簽都可能有其重要性，但根據其權重和優先級順序，應賦予各個標簽合理的比例。綜合考慮標簽的重要性和數量分配，以確保用戶可以快速準確地獲取所需信息，同時保持界面整潔和易于閱讀。

5. 改動對比

1）標簽體系改動的對比

通過“形-色-字-構”的維度建立起統一的標簽構成形式，然后根據不同的強弱層級確定標簽的形態。結合之前的標簽權重層級排序，就可以得到新的標簽體系。

2）標簽體系應用的對比

統一各場景中用戶對標簽價值的感知。

四、沉淀設計規范&搭建協同機制

1. 提煉共性沉淀設計規范

在確定了標簽的構成形式并明確了各個場景的標簽使用規則后，我們需要從標簽形態/尺寸/圓角/間距/字體/使用場景等多個維度出發，制定標簽的設計規范，從樣式&場景應用上規范后續標簽的增刪改，以提升全場景標簽的統一性。

2. 搭建標簽體系建設協同機制

標簽體系由多個標簽組成，牽一發而動全身。因此在構建健全的標簽體系時，需要從人、交付物、協同關鍵節點三個方面建立協同機制，共同推動標簽體系的持續優化和發展。

1. 人：不同角色需密切合作，共同理解標簽的重要性和功能，確保標簽體系連貫有效。
2. 交付物：需求文檔和設計稿標注至關重要。需求文檔應明確描述標簽在體系中的含義、特征、排序和權重層級。
3. 協同關鍵節點：建立覆蓋多方的協同機制，以確保在關鍵節點，標簽體系得到合理建設和完善。

寫在最后

平臺標簽的重點不僅應在樣式上符合用戶對該標簽的心智認知，且標簽的視覺權重順序也應該正確符合平臺&用戶的訴求，保障各標簽能在用戶的決策路徑中起到高效正確的引導。對于標簽系統來說，規范的構成形式應對全局標簽的構成起到統領作用，良好的共建機制保障標簽體系在業務發展的各個階段始終保持統一有序。