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

一、前言

數(shù)字時代中，標(biāo)簽在購物網(wǎng)站、社交媒體、搜索引擎等各個領(lǐng)域都發(fā)揮著重要作用。盡管標(biāo)簽的面積較小，它們卻能夠為用戶提供關(guān)鍵信息，幫助用戶快速做出決策。因此，設(shè)計一個合理、規(guī)范的標(biāo)簽體系成為了許多平臺需要面對的挑戰(zhàn)。作為百度旗下的B2B平臺，愛采購?fù)ㄟ^不斷優(yōu)化標(biāo)簽體系以提升用戶體驗。下面將以此為例，簡述B2B平臺標(biāo)簽體系的設(shè)計優(yōu)化思路。

1. 常見的標(biāo)簽&作用

標(biāo)簽常用于展示內(nèi)容/功能/商品/活動/價格/身份等信息，用于對高優(yōu)信息進(jìn)行標(biāo)記&分類，輔助用戶決策。

2. 標(biāo)簽對愛采購平臺的作用

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

在平臺上，經(jīng)過認(rèn)證的商家和商品信息將會被打上相應(yīng)的標(biāo)簽，確保真實性和實力資質(zhì)。這些標(biāo)簽不僅展現(xiàn)了商家的優(yōu)勢，更是他們寶貴的會員權(quán)益。

3. 原標(biāo)簽體系因何而變

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

4. 新標(biāo)簽體系如何求變

我們從平臺的角度出發(fā)，通過對標(biāo)簽權(quán)重進(jìn)行排序和分類、統(tǒng)一標(biāo)簽的構(gòu)成形式，致力于建立統(tǒng)一的標(biāo)簽體系，統(tǒng)一會員權(quán)益的感知，完善設(shè)計規(guī)范，并建立標(biāo)簽建設(shè)的協(xié)同機制，以規(guī)范后續(xù)標(biāo)簽的更新迭代產(chǎn)出。

二、分類-排序-收斂

1. 標(biāo)簽分類

現(xiàn)有的標(biāo)簽從B2B平臺的屬性和用戶的視角來看，可以分為六大類：會員類、認(rèn)證類、服務(wù)類、交易類、保障類、資質(zhì)類。

2. 標(biāo)簽排序

各類標(biāo)簽都有其獨特的重要性，但在設(shè)計表達(dá)時，需要從助力買家尋找優(yōu)質(zhì)店鋪&服務(wù)這一核心情境出發(fā)，根據(jù)平臺對標(biāo)簽的綜合定位和用戶的心智感知，定義標(biāo)簽的權(quán)重排序，并劃分出強中弱三個梯級，以便后續(xù)的標(biāo)簽樣式系統(tǒng)優(yōu)化。

3. 標(biāo)簽收斂

1）樣式收斂

新權(quán)益推出時，?；趹?yīng)用場景用“位置”和“樣式”強化對應(yīng)的標(biāo)簽。隨著權(quán)益體系的完善，一個標(biāo)簽存在多種樣式使得權(quán)益表達(dá)的不統(tǒng)一，影響了用戶對標(biāo)簽價值的認(rèn)知。為解決這一問題，需要對標(biāo)簽樣式的數(shù)量進(jìn)行收斂。保留符合標(biāo)簽權(quán)重和通用性強的樣式，作為標(biāo)簽迭代的基礎(chǔ)范式。

2）應(yīng)用收斂

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

三、統(tǒng)一標(biāo)簽體系的構(gòu)成

1. 形

標(biāo)簽的大小通常分為大、中、小三種，而標(biāo)簽的寬度常根據(jù)內(nèi)容的長度進(jìn)行適配。因此，在規(guī)則定義上，標(biāo)簽的大小會受到其高度的影響。

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

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

在標(biāo)簽的造型上，可以將其分為常規(guī)形和異形兩種類型：

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

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

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

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

新的標(biāo)簽體系從產(chǎn)品設(shè)計語言出發(fā)，選擇小圓角矩形作為主要標(biāo)簽的基本型，以保持整體視覺風(fēng)格的一致性。

2. 色

采用HSB色彩系統(tǒng)來構(gòu)建標(biāo)簽的色彩體系。在HSB顏色模式下，我們以品牌紅的0°為起點，每隔24°遞增，選擇不同心智的輔助色。為了色彩體系在視覺上的統(tǒng)一性，通過色彩矯正保持H不變，對S/B進(jìn)行20°以內(nèi)的微調(diào)。

在建立新的標(biāo)簽色彩體系之前，需要根據(jù)現(xiàn)有標(biāo)簽的分類，在延續(xù)之前標(biāo)簽色彩心智的基礎(chǔ)上，對不同類型的標(biāo)簽選用具有不同心智的色彩。

深色場景的調(diào)色方式：

在特定情境下，標(biāo)簽會應(yīng)用于深色背景上，這就需要在原有基礎(chǔ)上對顏色進(jìn)行有規(guī)則的調(diào)整，以確保標(biāo)簽的可閱讀性和統(tǒng)一性。

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

3. 字

針對常規(guī)標(biāo)簽，我們采用系統(tǒng)字體，而對于高優(yōu)特色標(biāo)簽，則使用特殊字形（非默認(rèn)字形）。通過對比原則，我們在保持整體統(tǒng)一的基礎(chǔ)上尋找差異，以強化高優(yōu)標(biāo)簽的視覺效果。

4. 構(gòu)

1）標(biāo)簽體系樣式的構(gòu)成

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

在標(biāo)簽內(nèi)部，重色占比越大，飽和度和對比度越高，標(biāo)簽的視覺權(quán)重就越高。根據(jù)視覺上的強弱，對各類結(jié)構(gòu)進(jìn)行強弱排順，形成強、中、弱三個層級的標(biāo)簽構(gòu)成樣式。

2）標(biāo)簽體系樣式搭配的構(gòu)成

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

5. 改動對比

1）標(biāo)簽體系改動的對比

通過“形-色-字-構(gòu)”的維度建立起統(tǒng)一的標(biāo)簽構(gòu)成形式，然后根據(jù)不同的強弱層級確定標(biāo)簽的形態(tài)。結(jié)合之前的標(biāo)簽權(quán)重層級排序，就可以得到新的標(biāo)簽體系。

2）標(biāo)簽體系應(yīng)用的對比

統(tǒng)一各場景中用戶對標(biāo)簽價值的感知。

四、沉淀設(shè)計規(guī)范&搭建協(xié)同機制

1. 提煉共性沉淀設(shè)計規(guī)范

在確定了標(biāo)簽的構(gòu)成形式并明確了各個場景的標(biāo)簽使用規(guī)則后，我們需要從標(biāo)簽形態(tài)/尺寸/圓角/間距/字體/使用場景等多個維度出發(fā)，制定標(biāo)簽的設(shè)計規(guī)范，從樣式&場景應(yīng)用上規(guī)范后續(xù)標(biāo)簽的增刪改，以提升全場景標(biāo)簽的統(tǒng)一性。

2. 搭建標(biāo)簽體系建設(shè)協(xié)同機制

標(biāo)簽體系由多個標(biāo)簽組成，牽一發(fā)而動全身。因此在構(gòu)建健全的標(biāo)簽體系時，需要從人、交付物、協(xié)同關(guān)鍵節(jié)點三個方面建立協(xié)同機制，共同推動標(biāo)簽體系的持續(xù)優(yōu)化和發(fā)展。

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

寫在最后

平臺標(biāo)簽的重點不僅應(yīng)在樣式上符合用戶對該標(biāo)簽的心智認(rèn)知，且標(biāo)簽的視覺權(quán)重順序也應(yīng)該正確符合平臺&用戶的訴求，保障各標(biāo)簽?zāi)茉谟脩舻臎Q策路徑中起到高效正確的引導(dǎo)。對于標(biāo)簽系統(tǒng)來說，規(guī)范的構(gòu)成形式應(yīng)對全局標(biāo)簽的構(gòu)成起到統(tǒng)領(lǐng)作用，良好的共建機制保障標(biāo)簽體系在業(yè)務(wù)發(fā)展的各個階段始終保持統(tǒng)一有序。