一、標(biāo)簽設(shè)計(jì)是什么意思

在UI設(shè)計(jì)中，標(biāo)簽設(shè)計(jì)是指通過對標(biāo)簽的顏色、文字、形狀進(jìn)行視覺設(shè)計(jì)，是一種組件設(shè)計(jì)，用于信息的傳達(dá)、建立操作預(yù)知，可以幫用戶及產(chǎn)品進(jìn)行分類，也可以進(jìn)行營銷分流與智能場景的運(yùn)用，能幫助用戶完成當(dāng)前的任務(wù)，幫助產(chǎn)品達(dá)到業(yè)務(wù)目標(biāo)。

二、標(biāo)簽的釋義

網(wǎng)絡(luò)標(biāo)簽(Tag)是一種互聯(lián)網(wǎng)內(nèi)容組織方式，是相關(guān)性很強(qiáng)的關(guān)鍵字，它幫助人們輕松的描述和分類內(nèi)容，以便于檢索和分享，Tag已經(jīng)成為web 2.0的重要元素。標(biāo)簽將內(nèi)容的組織權(quán)利從網(wǎng)站管理者下放到用戶手中，充分體現(xiàn)了web2.0自下而上，用戶參與的特點(diǎn)。

標(biāo)簽體系在產(chǎn)品設(shè)計(jì)過程中是非常重要的，也是設(shè)計(jì)連接前后端同學(xué)將業(yè)務(wù)需求在開發(fā)落地中不可或缺的一部分。科學(xué)的標(biāo)簽設(shè)計(jì)會(huì)根據(jù)業(yè)務(wù)需求+品牌理念的設(shè)計(jì)策略，此類標(biāo)簽擁有獨(dú)特的視覺符號(hào)，方便用戶快速識(shí)別，提升信息轉(zhuǎn)化的效率。

標(biāo)簽相當(dāng)于連接內(nèi)容的"傳聲筒"，其音量的大小可以影響到用戶的決策。依托于用戶場景，將重點(diǎn)信息內(nèi)容透傳給用戶側(cè)，對提升用戶對內(nèi)容的認(rèn)知度有所幫助，輔助用戶決策，即標(biāo)簽的價(jià)值。

簡而言之，標(biāo)簽就是結(jié)合產(chǎn)品內(nèi)容和特征提煉出的一種關(guān)鍵詞，便于用戶根據(jù)自身需求查找和使用的一種描述和定義。用戶最終通過標(biāo)簽進(jìn)行信息反饋和交互操作。

三、標(biāo)簽體系設(shè)計(jì)

1、業(yè)務(wù)梳理

用戶行為流，以業(yè)務(wù)需求為導(dǎo)向，可以按下面的思路來梳理標(biāo)簽體系：

(1)、有哪些產(chǎn)品線？產(chǎn)品線有哪些來源渠道？一一列出。

(2)、每個(gè)產(chǎn)品線有哪些業(yè)務(wù)對象？比如用戶，商品。

(3)、最后再根據(jù)對象聚合業(yè)務(wù)，每個(gè)對象涉及哪些業(yè)務(wù)？每個(gè)業(yè)務(wù)下哪些業(yè)務(wù)數(shù)據(jù)和用戶行為？

2、標(biāo)簽分類

按業(yè)務(wù)需求梳理了業(yè)務(wù)數(shù)據(jù)后，可以繼續(xù)按照業(yè)務(wù)產(chǎn)出對象的屬性來進(jìn)行分類，主要目的：

(1)、方便管理標(biāo)簽，便于維護(hù)和擴(kuò)展。

(2)、結(jié)構(gòu)清晰，展示標(biāo)簽之間的關(guān)聯(lián)關(guān)系。

(3)、為標(biāo)簽建模提供子集。方便獨(dú)立計(jì)算某個(gè)標(biāo)簽下的屬性偏好或者權(quán)重。

梳理標(biāo)簽分類時(shí)，盡可能按照MECE原則，相互獨(dú)立，完全窮盡。每一個(gè)子集的組合都能覆蓋到父集所有數(shù)據(jù)。

標(biāo)簽分類

標(biāo)簽深度控制在四級(jí)比較合適，方便管理，到了第四級(jí)就是具體的標(biāo)簽實(shí)例。

標(biāo)簽深度控制

四、標(biāo)簽設(shè)計(jì)的要點(diǎn)

1、精煉

標(biāo)簽通常面積比較小，主要作為輔助或者補(bǔ)充信息，幫助用戶更好的理解主體信息。因此需要精煉易懂，不適合展示大段內(nèi)容。但是過于簡單的標(biāo)簽，無法給用戶足夠的信息，容易讓用戶看不懂、產(chǎn)生疑惑。

2、視覺突出

由于面積比較小，標(biāo)簽通常會(huì)增加背景色，或者采用鮮亮的色彩、圖形吸引用戶的注意。但是在不同的產(chǎn)品中，視覺突出的方式也是不同的。

3、一致性與差異化

在淘寶中，標(biāo)簽基本是固定在同一色系中，采用相近的視覺形式。當(dāng)然首單優(yōu)惠、次日達(dá)等重點(diǎn)服務(wù)特性則采用了明顯的差異化表現(xiàn)形式。另外電商平臺(tái)中的廣告標(biāo)簽，更多是滿足政策法規(guī)的要求，不得已而為之，因此相比價(jià)格優(yōu)惠等利益點(diǎn)標(biāo)簽，明顯被弱化了。

五、標(biāo)簽設(shè)計(jì)的方法

標(biāo)簽由顏色、文字、形狀等元素組成，每個(gè)元素相輔相成，和諧統(tǒng)一。

1、顏色

顏色是標(biāo)簽設(shè)計(jì)中的一個(gè)重要元素，可以幫助用戶快速識(shí)別，提升信息轉(zhuǎn)化的效率。標(biāo)簽的顏色應(yīng)用上不僅要清晰，精準(zhǔn)，高效的傳達(dá)信息，同時(shí)在多種顏色組合中也要兼顧著品牌。

標(biāo)簽用色原則

2、形狀

形狀是標(biāo)簽信息的一個(gè)外化直觀傳遞，應(yīng)符合產(chǎn)品的品牌調(diào)性（比如直角、圓角、其它隱喻造型…..)。

基本型：4px圓角矩形，高度以28px為主；

異型：高度以32px為主，具體根據(jù)業(yè)務(wù)場景需要設(shè)計(jì)。

基本型標(biāo)簽

標(biāo)簽的一致性

3、標(biāo)簽層級(jí)設(shè)計(jì)

結(jié)合顏色層級(jí)設(shè)計(jì)規(guī)則，有差別的通過線、面等樣式表現(xiàn)出標(biāo)簽的權(quán)重層級(jí)。

標(biāo)簽層級(jí)設(shè)計(jì)

標(biāo)簽視覺層級(jí)

六、標(biāo)簽設(shè)計(jì)的應(yīng)用

對于標(biāo)簽類型而言，由于每個(gè)平臺(tái)的屬性各不同。所以面對復(fù)雜的應(yīng)用場景，在設(shè)計(jì)匹配時(shí)要尋找屬于復(fù)合自身產(chǎn)品業(yè)務(wù)的屬性的方法，常見的標(biāo)簽有：常規(guī)標(biāo)簽、異形標(biāo)簽、會(huì)員/等級(jí)標(biāo)簽、營銷標(biāo)簽、角標(biāo)簽、印章標(biāo)簽。

1、常規(guī)標(biāo)簽

主要適用于貨源列表、訂單列表，小黑板，詳情頁…等業(yè)務(wù)功能場景，是產(chǎn)品中最高頻使用的類型，按重要層級(jí)可分為：首要標(biāo)簽 > 中等標(biāo)簽 > 一般標(biāo)簽 > 次要標(biāo)簽

首要標(biāo)簽：用與描述重要信息，主要以（深色面）背景樣式展示

中等標(biāo)簽：用與描述次重要信息，主要是以（淺色面）背景樣式展示

一般標(biāo)簽：用與描述一般信息，主要是以（有色描邊）樣式展示

次要標(biāo)簽：用與描述輔助信息，主要是以（灰色系）描邊或面的樣式展示（在不同情景下可由無色系升級(jí)為有色系展示）

常規(guī)標(biāo)簽

2、異形標(biāo)簽

適用于強(qiáng)調(diào)業(yè)務(wù)模塊中最重要層級(jí)的的功能信息標(biāo)識(shí)，采用非標(biāo)造型，重要層級(jí)：異形標(biāo)簽>常規(guī)標(biāo)簽，展示位置多采用全貼邊樣式（左上>右上…），根據(jù)內(nèi)容重要層級(jí)而定。

異形標(biāo)簽

3、會(huì)員/等級(jí)標(biāo)簽

主要用于會(huì)員業(yè)務(wù)的身份及等級(jí)標(biāo)識(shí)，多適用于人/姓名后展示，多以圖形或者圖形+文本的樣式展示

會(huì)員/等級(jí)標(biāo)簽

4、營銷引流標(biāo)簽

主要適用于業(yè)務(wù)功能營銷轉(zhuǎn)化引導(dǎo)，展示樣式主要有：文字后加標(biāo)簽、信息功能上部加標(biāo)簽，對比鮮明，在某些場景使用上和徽標(biāo)類似，除了對其識(shí)別造型統(tǒng)一外，還應(yīng)對其使用場景加以明確：

居右側(cè)展示：與按鈕組合使用時(shí)，標(biāo)簽字段數(shù)量不能大于標(biāo)簽1/2寬度，末端與按鈕右對齊；

局左側(cè)展示：按鈕高度大于單行標(biāo)準(zhǔn)按鈕高度且重要層級(jí)高，或右側(cè)有選擇項(xiàng)占用時(shí)；

營銷引流標(biāo)簽

5、角標(biāo)

主要用于描述業(yè)務(wù)目標(biāo)對象的特色及等級(jí)，置于角落（左上，右上…）±45°展示。

角標(biāo)

6、印章標(biāo)簽

主要用于描述功能任務(wù)（如協(xié)議簽訂，流程權(quán)益…..)的完成狀態(tài)。

印章標(biāo)簽

七、標(biāo)簽的作用

在移動(dòng)端產(chǎn)品中，標(biāo)簽通常出現(xiàn)在"發(fā)現(xiàn)"、"推薦"頁面，或者搜索結(jié)果頁面中。通過簡單精煉的表達(dá)方式，在有限的空間輔助信息表達(dá)，讓用戶可以更多維度地了解內(nèi)容，引起用戶注意并激發(fā)用戶興趣。所以標(biāo)簽所表達(dá)的內(nèi)容至關(guān)重要，主要包括以下 3 個(gè)信息方向。

1、商品或服務(wù)特點(diǎn)

對電商平臺(tái)而言，商品、價(jià)格，服務(wù)、物流等服務(wù)環(huán)節(jié)都會(huì)影響到用戶決策，因此需要盡可能地將商品及服務(wù)的價(jià)值點(diǎn)傳遞給用戶。而移動(dòng)端產(chǎn)品屏幕空間有限，需要將各類信息分層有序的展現(xiàn)出來。

標(biāo)簽既可以突出商品折扣、優(yōu)惠信息、服務(wù)特色吸引用戶，又不會(huì)占用太多的空間，所以成為了商品展示重要的輔助信息。

2、用戶行為

簡單的標(biāo)簽可以緩解用戶誤操作的焦慮，增強(qiáng)安全感。在電商平臺(tái)中，用戶行為也成為了重要的標(biāo)簽符號(hào)，買過，訂閱過、瀏覽過等標(biāo)簽可以喚醒用戶的記憶，拉進(jìn)商品與用戶間的距離，有助于帶來更好的點(diǎn)擊量。

3、從眾心理引導(dǎo)

當(dāng)用戶無法決策時(shí)，從眾心理會(huì)成為影響用戶決策的重要因素。所以在電商平臺(tái)，銷量作為非常重要的排序條件單獨(dú)展示，方便用戶快捷操作。同樣其他用戶的收藏量、下單量、播放量數(shù)據(jù)也會(huì)對用戶行為產(chǎn)生影響。因此這類信息廣泛應(yīng)用在標(biāo)簽設(shè)計(jì)中，積極引導(dǎo)用戶點(diǎn)擊和轉(zhuǎn)化。

總結(jié)

優(yōu)化猩SEO：標(biāo)簽設(shè)計(jì)在整個(gè)UI設(shè)計(jì)中看似不起眼的元素，卻隱藏了很多的作用，一套好的標(biāo)簽設(shè)計(jì)可以驅(qū)動(dòng)數(shù)據(jù)，賦能業(yè)務(wù)，而一個(gè)具有優(yōu)秀用戶體驗(yàn)的產(chǎn)品也不能缺少標(biāo)簽設(shè)計(jì)與規(guī)劃。

參考鏈接：

標(biāo)簽規(guī)范設(shè)計(jì)方法探索 人人都是產(chǎn)品經(jīng)理

http://www.woshipm.com/pd/5332368.html/comment-page-1

標(biāo)簽設(shè)計(jì) - 簡書

https://www.jianshu.com/p/801fb6c6315e

從3個(gè)方面，分析總結(jié)標(biāo)簽設(shè)計(jì)的體驗(yàn)細(xì)節(jié)！ - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/tag-design

修改于2023-08-30