一、前言

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

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

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

2. 標(biāo)簽對(duì)愛(ài)采購(gòu)平臺(tái)的作用

愛(ài)采購(gòu)作為百度旗下的企業(yè)一站式采銷(xiāo)平臺(tái)，致力于讓買(mǎi)家直接接觸海量商品和優(yōu)質(zhì)商家，同時(shí)還為賣(mài)家提供商家運(yùn)營(yíng)后臺(tái)，幫助他們快速實(shí)現(xiàn)交易目標(biāo)。在平臺(tái)上，經(jīng)過(guò)認(rèn)證的商家和商品信息將會(huì)被打上相應(yīng)的標(biāo)簽，確保真實(shí)性和實(shí)力資質(zhì)。這些標(biāo)簽不僅展現(xiàn)了商家的優(yōu)勢(shì)，更是他們寶貴的會(huì)員權(quán)益。

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

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

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

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

二、分類(lèi)-排序-收斂

1. 標(biāo)簽分類(lèi)

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

2. 標(biāo)簽排序

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

3. 標(biāo)簽收斂

①樣式收斂

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

②應(yīng)用收斂

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

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

1. 形

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

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

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

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

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

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

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

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

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

2. 色

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

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

①深色場(chǎng)景的調(diào)色方式

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

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

3. 字

針對(duì)常規(guī)標(biāo)簽，我們采用系統(tǒng)字體，而對(duì)于高優(yōu)特色標(biāo)簽，則使用特殊字形（非默認(rèn)字形）。通過(guò)對(duì)比原則，我們?cè)诒３终w統(tǒng)一的基礎(chǔ)上尋找差異，以強(qiáng)化高優(yōu)標(biāo)簽的視覺(jué)效果。

4. 構(gòu)

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

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

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

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

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

5. 改動(dòng)對(duì)比

①標(biāo)簽體系改動(dòng)的對(duì)比

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

②標(biāo)簽體系應(yīng)用的對(duì)比

統(tǒng)一各場(chǎng)景中用戶(hù)對(duì)標(biāo)簽價(jià)值的感知。

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

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

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

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

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

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

寫(xiě)在最后

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

作者：百度MEUX