標簽設(shè)計是什么意思？詳解標簽設(shè)計的要點、方法及應(yīng)用

2023-08-29 09:30:59

標簽設(shè)計是什么意思

一、標簽設(shè)計是什么意思

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

二、標簽的釋義

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

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

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

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

三、標簽體系設(shè)計

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

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

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

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

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

2、標簽分類

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

(1)、方便管理標簽，便于維護和擴展。

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

(3)、為標簽建模提供子集。方便獨立計算某個標簽下的屬性偏好或者權(quán)重。

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

標簽分類

標簽深度控制在四級比較合適，方便管理，到了第四級就是具體的標簽實例。

標簽深度控制

四、標簽設(shè)計的要點

1、精煉

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

2、視覺突出

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

3、一致性與差異化

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

五、標簽設(shè)計的方法

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

1、顏色

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

標簽用色原則

2、形狀

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

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

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

基本型標簽

標簽的一致性

3、標簽層級設(shè)計

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

標簽層級設(shè)計

標簽視覺層級

六、標簽設(shè)計的應(yīng)用

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

1、常規(guī)標簽

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

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

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

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

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

常規(guī)標簽

2、異形標簽

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

異形標簽

3、會員/等級標簽

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

會員等級標簽

會員/等級標簽

4、營銷引流標簽

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

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

局左側(cè)展示：按鈕高度大于單行標準按鈕高度且重要層級高，或右側(cè)有選擇項占用時；

營銷引流標簽

5、角標

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

角標

6、印章標簽

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

印章標簽

七、標簽的作用

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

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

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

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

2、用戶行為

簡單的標簽可以緩解用戶誤操作的焦慮，增強安全感。在電商平臺中，用戶行為也成為了重要的標簽符號，買過，訂閱過、瀏覽過等標簽可以喚醒用戶的記憶，拉進商品與用戶間的距離，有助于帶來更好的點擊量。

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

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