構(gòu)建高效標(biāo)簽體系:如何優(yōu)化平臺權(quán)益感知,提升用戶體驗?

2024-6-7    ui設(shè)計分享達人

 
一、前言
 

在數(shù)字化浪潮席卷全球的今天,標(biāo)簽早已不再是簡單的文字標(biāo)識,它們成為了連接用戶與信息的重要橋梁。從購物網(wǎng)站上的商品分類,到社交媒體上的話題標(biāo)簽,再到搜索引擎的關(guān)鍵詞,標(biāo)簽無處不在,默默地引導(dǎo)著我們的視線和選擇。

特別是在B2B領(lǐng)域,標(biāo)簽的作用更是不可忽視。在百度旗下的B2B平臺愛采購上,一個精心設(shè)計的標(biāo)簽體系不僅能幫助企業(yè)更精準(zhǔn)地展示產(chǎn)品信息,還能助力買家快速找到所需商品,極大地提升了交易的效率和便捷性。

一個優(yōu)秀的B2B平臺標(biāo)簽體系應(yīng)該具備哪些特點呢?接下來,我們將以愛采購為例,深入探討B(tài)2B平臺標(biāo)簽體系的設(shè)計優(yōu)化思路。

首先,標(biāo)簽需要具有明確的信息傳遞功能。在愛采購平臺上,標(biāo)簽被廣泛應(yīng)用于展示商品的各種信息,如功能、價格、活動優(yōu)惠等。這些標(biāo)簽不僅能幫助買家快速了解商品的特性,還能引導(dǎo)他們做出更明智的購買決策。

標(biāo)簽的分類和標(biāo)記功能也是至關(guān)重要的。通過合理的分類和標(biāo)記,愛采購平臺能夠?qū)⒑A康纳唐沸畔⒂行虻爻尸F(xiàn)出來,讓買家能夠輕松找到自己需要的商品。同時,這也為賣家提供了一個展示自己產(chǎn)品優(yōu)勢的機會,增加了商品的曝光率和吸引力。

一個優(yōu)秀的標(biāo)簽體系還需要具備高度的靈活性和可定制性。隨著市場變化和用戶需求的演變,標(biāo)簽體系也需要不斷地進行優(yōu)化和調(diào)整。愛采購平臺通過引入智能算法和數(shù)據(jù)分析技術(shù),實現(xiàn)了對標(biāo)簽體系的實時監(jiān)控和優(yōu)化,確保了標(biāo)簽信息的準(zhǔn)確性和有效性。

 
1、常見的標(biāo)簽&作用
 
標(biāo)簽常用于展示內(nèi)容/功能/商品/活動/價格/身份等信息,用于對高優(yōu)信息進行標(biāo)記&分類,輔助用戶決策。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
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)益。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
3、原標(biāo)簽體系因何而變
 
平臺的slogan從“買賣好貨源,做出好生意”轉(zhuǎn)變?yōu)?ldquo;定制、批發(fā)、找工廠就來愛采購”的階段中,逐步推出「實力品牌」「交易服務(wù)」「加工定制」「資質(zhì)認(rèn)證」四類標(biāo)簽權(quán)益。當(dāng)推出新權(quán)益時,為了快速樹立用戶認(rèn)知,將新權(quán)益的標(biāo)簽權(quán)重進行強化。但隨著權(quán)益體系的逐步完善,各類標(biāo)簽優(yōu)先級排序不合理、不清晰等問題日益凸顯,影響用戶對各種權(quán)益的價值認(rèn)知。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
4、新標(biāo)簽體系如何求變
 
我們從平臺的角度出發(fā),通過對標(biāo)簽權(quá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)出。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
 
二、分類-排序-收斂
 
1、標(biāo)簽分類
 
現(xiàn)有的標(biāo)簽從B2B平臺的屬性和用戶的視角來看,可以分為六大類:會員類、認(rèn)證類、服務(wù)類、交易類、保障類、資質(zhì)類。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2、標(biāo)簽排序
 
各類標(biāo)簽都有其獨特的重要性,但在設(shè)計表達時,需要從助力買家尋找優(yōu)質(zhì)店鋪&服務(wù)這一核心情境出發(fā),根據(jù)平臺對標(biāo)簽的綜合定位和用戶的心智感知,定義標(biāo)簽的權(quán)重排序,并劃分出強中弱三個梯級,以便后續(xù)的標(biāo)簽樣式系統(tǒng)優(yōu)化。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
3、標(biāo)簽收斂
 
1)樣式收斂
 
新權(quán)益推出時,?;趹?yīng)用場景用“位置”和“樣式”強化對應(yīng)的標(biāo)簽。隨著權(quán)益體系的完善,一個標(biāo)簽存在多種樣式使得權(quán)益表達的不統(tǒng)一,影響了用戶對標(biāo)簽價值的認(rèn)知。為解決這一問題,需要對標(biāo)簽樣式的數(shù)量進行收斂。保留符合標(biāo)簽權(quán)重和通用性強的樣式,作為標(biāo)簽迭代的基礎(chǔ)范式。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2)應(yīng)用收斂
 
常規(guī)非特色信息使用標(biāo)簽,反而影響其他標(biāo)簽的權(quán)重和頁面的閱讀效率,根據(jù)奧卡姆剃刀原則“如無必要,勿增實體”,需要通過視覺降噪來提升頁面的可閱讀性。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
 
三、統(tǒng)一標(biāo)簽體系的構(gòu)成
 
1、形
 
標(biāo)簽的大小通常分為大、中、小三種,而標(biāo)簽的寬度常根據(jù)內(nèi)容的長度進行適配。因此,在規(guī)則定義上,標(biāo)簽的大小會受到其高度的影響。
 
  •  
    大標(biāo)簽(高度18-22Pt):常用于表格、表單等信息密度相對較低的場景,使用相對較大的標(biāo)簽,以便與其他信息達到視覺上的平衡。
 
  •  
    中標(biāo)簽(高度15-17Pt):最常見的標(biāo)簽大小,常用于Feeds、用戶信息卡等場景中。
 
  •  
    小標(biāo)簽(高度12-14Pt):由于面積較小,通常用來承載輔助信息,常見于Feeds等場景中。
 
結(jié)合愛采購平臺的核心場景和常用文字字號,16Pt的標(biāo)簽高度與其他信息的大小比例最為平衡,故選擇16Pt的標(biāo)簽高度作為基礎(chǔ)大小。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
在標(biāo)簽的造型上,可以將其分為常規(guī)形和異形兩種類型:
 
  •  
    常規(guī)形:常見的標(biāo)簽為矩形,具有規(guī)整有序的外觀,閱讀效率較高,有較強的通用性,適用于列表等大部分場景。
 
  •  
    異形:異形標(biāo)簽的形狀較為自由,由于其差異化較大,會更容易引起用戶的注意,適用于特殊的身份表達、大促活動等場景。
 
在統(tǒng)一的場景中,同屬性類型的標(biāo)簽形狀應(yīng)該保持統(tǒng)一和諧,避免在相同類別的標(biāo)簽中混用不同形狀,造成視覺上的不統(tǒng)一感。通過統(tǒng)一標(biāo)簽形狀,可以提升用戶對標(biāo)簽信息的識別和理解。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
在標(biāo)簽的圓角上,我們可以分為以下幾種形狀:
 
  •  
    膠囊形狀(圓角為高度的50%):圓潤的外觀給用戶帶來柔和的視覺感受。
 
  •  
    大圓角矩形(圓角為高度的18%~32%):擁有視覺亮點的同時保持一定的圓潤度。
 
  •  
    小圓角矩形(圓角為高度的6%~12%):標(biāo)簽更加銳利,但又不失整體的和諧性。
 
  •  
    直角矩形(圓角度為0):具有簡潔硬朗的外觀,適用于某些特定的場景或者設(shè)計風(fēng)格。
 
新的標(biāo)簽體系從產(chǎn)品設(shè)計語言出發(fā),選擇小圓角矩形作為主要標(biāo)簽的基本型,以保持整體視覺風(fēng)格的一致性。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2、色
 
采用HSB色彩系統(tǒng)來構(gòu)建標(biāo)簽的色彩體系。在HSB顏色模式下,我們以品牌紅的0°為起點,每隔24°遞增,選擇不同心智的輔助色。為了色彩體系在視覺上的統(tǒng)一性,通過色彩矯正保持H不變,對S/B進行20°以內(nèi)的微調(diào)。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
在建立新的標(biāo)簽色彩體系之前,需要根據(jù)現(xiàn)有標(biāo)簽的分類,在延續(xù)之前標(biāo)簽色彩心智的基礎(chǔ)上,對不同類型的標(biāo)簽選用具有不同心智的色彩。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
深色場景的調(diào)色方式
 
在特定情境下,標(biāo)簽會應(yīng)用于深色背景上,這就需要在原有基礎(chǔ)上對顏色進行有規(guī)則的調(diào)整,以確保標(biāo)簽的可閱讀性和統(tǒng)一性。
 
對于彩色標(biāo)簽,在這種HSB色值模式下,保持色相(H)不變,通過微調(diào)飽和度(S)和亮度(B),使在亮色和暗色背景上的對比度保持一致,以確保標(biāo)簽在不同背景下都能清晰統(tǒng)一。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
3、字
 
針對常規(guī)標(biāo)簽,我們采用系統(tǒng)字體,而對于高優(yōu)特色標(biāo)簽,則使用特殊字形(非默認(rèn)字形)。通過對比原則,我們在保持整體統(tǒng)一的基礎(chǔ)上尋找差異,以強化高優(yōu)標(biāo)簽的視覺效果。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
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)進行強弱排順,形成強、中、弱三個層級的標(biāo)簽構(gòu)成樣式。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
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)確地獲取所需信息,同時保持界面整潔和易于閱讀。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
1)標(biāo)簽體系改動的對比
 
通過“形-色-字-構(gòu)”的維度建立起統(tǒng)一的標(biāo)簽構(gòu)成形式,然后根據(jù)不同的強弱層級確定標(biāo)簽的形態(tài)。結(jié)合之前的標(biāo)簽權(quán)重層級排序,就可以得到新的標(biāo)簽體系。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
2)標(biāo)簽體系應(yīng)用的對比
 
統(tǒng)一各場景中用戶對標(biāo)簽價值的感知。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
 
四、沉淀設(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)一性。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
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ā)展。
 
  •  
    人:不同角色需密切合作,共同理解標(biāo)簽的重要性和功能,確保標(biāo)簽體系連貫有效。
 
  •  
    交付物:需求文檔和設(shè)計稿標(biāo)注至關(guān)重要。需求文檔應(yīng)明確描述標(biāo)簽在體系中的含義、特征、排序和權(quán)重層級。
 
  •  
    協(xié)同關(guān)鍵節(jié)點:建立覆蓋多方的協(xié)同機制,以確保在關(guān)鍵節(jié)點,標(biāo)簽體系得到合理建設(shè)和完善。
 
標(biāo)簽體系優(yōu)化助力統(tǒng)一平臺權(quán)益感知
 
 
 
寫在最后
 
平臺標(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)一有序。
 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTYxNjQ1Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

藍藍設(shè)計(www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司用戶體驗公司、高端網(wǎng)站設(shè)計公司銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔