數(shù)字時(shí)代中，標(biāo)簽在購物網(wǎng)站、社交媒體、搜索引擎等各個(gè)領(lǐng)域都發(fā)揮著重要作用。盡管標(biāo)簽的面積較小，它們卻能夠?yàn)橛脩籼峁╆P(guān)鍵信息，幫助用戶快速做出決策。因此，設(shè)計(jì)一個(gè)合理、規(guī)范的標(biāo)簽體系成為了許多平臺(tái)需要面對(duì)的挑戰(zhàn)。作為百度旗下的B2B平臺(tái)，愛采購?fù)ㄟ^不斷優(yōu)化標(biāo)簽體系以提升用戶體驗(yàn)。下面將以此為例，簡述B2B平臺(tái)標(biāo)簽體系的設(shè)計(jì)優(yōu)化思路。
標(biāo)簽常用于展示內(nèi)容/功能/商品/活動(dòng)/價(jià)格/身份等信息，用于對(duì)高優(yōu)信息進(jìn)行標(biāo)記&分類，輔助用戶決策。
愛采購作為百度旗下的企業(yè)一站式采銷平臺(tái)，致力于讓買家直接接觸海量商品和優(yōu)質(zhì)商家，同時(shí)還為賣家提供商家運(yùn)營后臺(tái)，幫助他們快速實(shí)現(xiàn)交易目標(biāo)。在平臺(tái)上，經(jīng)過認(rèn)證的商家和商品信息將會(huì)被打上相應(yīng)的標(biāo)簽，確保真實(shí)性和實(shí)力資質(zhì)。這些標(biāo)簽不僅展現(xiàn)了商家的優(yōu)勢(shì)，更是他們寶貴的會(huì)員權(quán)益。
平臺(tái)的slogan從“買賣好貨源，做出好生意”轉(zhuǎn)變?yōu)?ldquo;定制、批發(fā)、找工廠就來愛采購”的階段中，逐步推出「實(shí)力品牌」「交易服務(wù)」「加工定制」「資質(zhì)認(rèn)證」四類標(biāo)簽權(quán)益。當(dāng)推出新權(quán)益時(shí)，為了快速樹立用戶認(rèn)知，將新權(quán)益的標(biāo)簽權(quán)重進(jìn)行強(qiáng)化。但隨著權(quán)益體系的逐步完善，各類標(biāo)簽優(yōu)先級(jí)排序不合理、不清晰等問題日益凸顯，影響用戶對(duì)各種權(quán)益的價(jià)值認(rèn)知。
我們從平臺(tái)的角度出發(fā)，通過對(duì)標(biāo)簽權(quán)重進(jìn)行排序和分類、統(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)出。
現(xiàn)有的標(biāo)簽從B2B平臺(tái)的屬性和用戶的視角來看，可以分為六大類：會(huì)員類、認(rèn)證類、服務(wù)類、交易類、保障類、資質(zhì)類。
各類標(biāo)簽都有其獨(dú)特的重要性，但在設(shè)計(jì)表達(dá)時(shí)，需要從助力買家尋找優(yōu)質(zhì)店鋪&服務(wù)這一核心情境出發(fā)，根據(jù)平臺(tái)對(duì)標(biāo)簽的綜合定位和用戶的心智感知，定義標(biāo)簽的權(quán)重排序，并劃分出強(qiáng)中弱三個(gè)梯級(jí)，以便后續(xù)的標(biāo)簽樣式系統(tǒng)優(yōu)化。
新權(quán)益推出時(shí)，?；趹?yīng)用場景用“位置”和“樣式”強(qiáng)化對(duì)應(yīng)的標(biāo)簽。隨著權(quán)益體系的完善，一個(gè)標(biāo)簽存在多種樣式使得權(quán)益表達(dá)的不統(tǒng)一，影響了用戶對(duì)標(biāo)簽價(jià)值的認(rèn)知。為解決這一問題，需要對(duì)標(biāo)簽樣式的數(shù)量進(jìn)行收斂。保留符合標(biāo)簽權(quán)重和通用性強(qiáng)的樣式，作為標(biāo)簽迭代的基礎(chǔ)范式。
常規(guī)非特色信息使用標(biāo)簽，反而影響其他標(biāo)簽的權(quán)重和頁面的閱讀效率，根據(jù)奧卡姆剃刀原則“如無必要，勿增實(shí)體”，需要通過視覺降噪來提升頁面的可閱讀性。
標(biāo)簽的大小通常分為大、中、小三種，而標(biāo)簽的寬度常根據(jù)內(nèi)容的長度進(jìn)行適配。因此，在規(guī)則定義上，標(biāo)簽的大小會(huì)受到其高度的影響。
-
大標(biāo)簽（高度18-22Pt）：常用于表格、表單等信息密度相對(duì)較低的場景，使用相對(duì)較大的標(biāo)簽，以便與其他信息達(dá)到視覺上的平衡。
-
中標(biāo)簽（高度15-17Pt）：最常見的標(biāo)簽大小，常用于Feeds、用戶信息卡等場景中。
-
小標(biāo)簽（高度12-14Pt）：由于面積較小，通常用來承載輔助信息，常見于Feeds等場景中。
結(jié)合愛采購平臺(tái)的核心場景和常用文字字號(hào)，16Pt的標(biāo)簽高度與其他信息的大小比例最為平衡，故選擇16Pt的標(biāo)簽高度作為基礎(chǔ)大小。
在標(biāo)簽的造型上，可以將其分為常規(guī)形和異形兩種類型：
-
常規(guī)形：常見的標(biāo)簽為矩形，具有規(guī)整有序的外觀，閱讀效率較高，有較強(qiáng)的通用性，適用于列表等大部分場景。
-
異形：異形標(biāo)簽的形狀較為自由，由于其差異化較大，會(huì)更容易引起用戶的注意，適用于特殊的身份表達(dá)、大促活動(dòng)等場景。
在統(tǒng)一的場景中，同屬性類型的標(biāo)簽形狀應(yīng)該保持統(tǒng)一和諧，避免在相同類別的標(biāo)簽中混用不同形狀，造成視覺上的不統(tǒng)一感。通過統(tǒng)一標(biāo)簽形狀，可以提升用戶對(duì)標(biāo)簽信息的識(shí)別和理解。
在標(biāo)簽的圓角上，我們可以分為以下幾種形狀：
-
膠囊形狀（圓角為高度的50%）：圓潤的外觀給用戶帶來柔和的視覺感受。
-
大圓角矩形（圓角為高度的6%~12%）：擁有視覺亮點(diǎn)的同時(shí)保持一定的圓潤度。
-
小圓角矩形（圓角為高度的18%~32%）：標(biāo)簽更加銳利，但又不失整體的和諧性。
-
直角矩形（圓角度為0）：具有簡潔硬朗的外觀，適用于某些特定的場景或者設(shè)計(jì)風(fēng)格。
新的標(biāo)簽體系從產(chǎn)品設(shè)計(jì)語言出發(fā)，選擇小圓角矩形作為主要標(biāo)簽的基本型，以保持整體視覺風(fēng)格的一致性。
采用HSB色彩系統(tǒng)來構(gòu)建標(biāo)簽的色彩體系。在HSB顏色模式下，我們以品牌紅的0°為起點(diǎn)，每隔24°遞增，選擇不同心智的輔助色。為了色彩體系在視覺上的統(tǒng)一性，通過色彩矯正保持H不變，對(duì)S/B進(jìn)行20°以內(nèi)的微調(diào)。
在建立新的標(biāo)簽色彩體系之前，需要根據(jù)現(xiàn)有標(biāo)簽的分類，在延續(xù)之前標(biāo)簽色彩心智的基礎(chǔ)上，對(duì)不同類型的標(biāo)簽選用具有不同心智的色彩。
在特定情境下，標(biāo)簽會(huì)應(yīng)用于深色背景上，這就需要在原有基礎(chǔ)上對(duì)顏色進(jìn)行有規(guī)則的調(diào)整，以確保標(biāo)簽的可閱讀性和統(tǒng)一性。
對(duì)于彩色標(biāo)簽，在這種HSB色值模式下，保持色相（H）不變，通過微調(diào)飽和度（S）和亮度（B），使在亮色和暗色背景上的對(duì)比度保持一致，以確保標(biāo)簽在不同背景下都能清晰統(tǒng)一。
針對(duì)常規(guī)標(biāo)簽，我們采用系統(tǒng)字體，而對(duì)于高優(yōu)特色標(biāo)簽，則使用特殊字形（非默認(rèn)字形）。通過對(duì)比原則，我們?cè)诒３终w統(tǒng)一的基礎(chǔ)上尋找差異，以強(qiáng)化高優(yōu)標(biāo)簽的視覺效果。
標(biāo)簽的構(gòu)成形式可拆解為：雙色和單色、實(shí)心和半透明、描邊和填充、純文字或圖標(biāo)加文字等，這些形式可以搭配組合出豐富的標(biāo)簽樣式。
在標(biāo)簽內(nèi)部，重色占比越大，飽和度和對(duì)比度越高，標(biāo)簽的視覺權(quán)重就越高。根據(jù)視覺上的強(qiáng)弱，對(duì)各類結(jié)構(gòu)進(jìn)行強(qiáng)弱排順，形成強(qiáng)、中、弱三個(gè)層級(jí)的標(biāo)簽構(gòu)成樣式。
在相同的場景中，應(yīng)盡量避免過多臨近權(quán)重的標(biāo)簽，而是需要確立一個(gè)合理的強(qiáng)弱比例。盡管每個(gè)標(biāo)簽都可能有其重要性，但根據(jù)其權(quán)重和優(yōu)先級(jí)順序，應(yīng)賦予各個(gè)標(biāo)簽合理的比例。綜合考慮標(biāo)簽的重要性和數(shù)量分配，以確保用戶可以快速準(zhǔn)確地獲取所需信息，同時(shí)保持界面整潔和易于閱讀。
通過“形-色-字-構(gòu)”的維度建立起統(tǒng)一的標(biāo)簽構(gòu)成形式，然后根據(jù)不同的強(qiáng)弱層級(jí)確定標(biāo)簽的形態(tài)。結(jié)合之前的標(biāo)簽權(quán)重層級(jí)排序，就可以得到新的標(biāo)簽體系。
統(tǒng)一各場景中用戶對(duì)標(biāo)簽價(jià)值的感知。
在確定了標(biāo)簽的構(gòu)成形式并明確了各個(gè)場景的標(biāo)簽使用規(guī)則后，我們需要從標(biāo)簽形態(tài)/尺寸/圓角/間距/字體/使用場景等多個(gè)維度出發(fā)，制定標(biāo)簽的設(shè)計(jì)規(guī)范，從樣式&場景應(yīng)用上規(guī)范后續(xù)標(biāo)簽的增刪改，以提升全場景標(biāo)簽的統(tǒng)一性。
標(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ā)展。
-
人：不同角色需密切合作，共同理解標(biāo)簽的重要性和功能，確保標(biāo)簽體系連貫有效。
-
交付物：需求文檔和設(shè)計(jì)稿標(biāo)注至關(guān)重要。需求文檔應(yīng)明確描述標(biāo)簽在體系中的含義、特征、排序和權(quán)重層級(jí)。
-
協(xié)同關(guān)鍵節(jié)點(diǎn)：建立覆蓋多方的協(xié)同機(jī)制，以確保在關(guān)鍵節(jié)點(diǎn)，標(biāo)簽體系得到合理建設(shè)和完善。
平臺(tái)標(biāo)簽的重點(diǎn)不僅應(yīng)在樣式上符合用戶對(duì)該標(biāo)簽的心智認(rèn)知，且標(biāo)簽的視覺權(quán)重順序也應(yīng)該正確符合平臺(tái)&用戶的訴求，保障各標(biāo)簽?zāi)茉谟脩舻臎Q策路徑中起到高效正確的引導(dǎo)。對(duì)于標(biāo)簽系統(tǒng)來說，規(guī)范的構(gòu)成形式應(yīng)對(duì)全局標(biāo)簽的構(gòu)成起到統(tǒng)領(lǐng)作用，良好的共建機(jī)制保障標(biāo)簽體系在業(yè)務(wù)發(fā)展的各個(gè)階段始終保持統(tǒng)一有序。
作者：百度MEUX
鏈接：https://www.zcool.com.cn/article/ZMTYxNjQ1Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
