編輯導(dǎo)語：標(biāo)簽設(shè)計(jì)是UI設(shè)計(jì)中一個(gè)重要的組成部分，可以用于傳達(dá)信息，有助于完成任務(wù)目標(biāo)等。本文作者分享了有關(guān)標(biāo)簽設(shè)計(jì)的內(nèi)容，講述了標(biāo)簽的基本概念、標(biāo)簽在設(shè)計(jì)中的應(yīng)用、不同場(chǎng)景下的使用方式、標(biāo)簽的設(shè)計(jì)等內(nèi)容，一起來學(xué)習(xí)一下吧。

在現(xiàn)實(shí)生活中，每個(gè)人都會(huì)不同程度的給別人、被別人貼標(biāo)簽，這是一種低門檻、高效率的記住一個(gè)人/物的有效方式。

我們?cè)诒澈笳務(wù)撃硞€(gè)人/物的特點(diǎn)，最直觀的表達(dá)方式就是利用標(biāo)簽敘述，例如，某個(gè)人好帥/善良、某件事做起來很簡單/方便等，甚至將某種相似的人/物進(jìn)行簡單的歸類后使用共同的標(biāo)簽，這都能讓我們更清晰的掌握某些關(guān)鍵信息。

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，標(biāo)簽雖然不是很起眼，但是絕對(duì)不能忽視它，只要使用得當(dāng)，尤其是在電商類產(chǎn)品中堪稱神助攻的存在，其功能的強(qiáng)大不是筆者幾段文字能介紹清楚的，了解過產(chǎn)品運(yùn)營、用戶行為及心理學(xué)的設(shè)計(jì)師就知道為什么會(huì)“愛”上標(biāo)簽了。

很多時(shí)候，看似簡單的組件/元素，背后都蘊(yùn)藏著不簡單的運(yùn)作方式，其方式的不同，給產(chǎn)品帶來的結(jié)果也截然不同。

UI設(shè)計(jì)中的標(biāo)簽可用于傳達(dá)信息、建立可預(yù)知操作等，能幫助或促進(jìn)用戶更快速完成任務(wù)、協(xié)助產(chǎn)品達(dá)成業(yè)務(wù)目標(biāo)，深受產(chǎn)品經(jīng)理、運(yùn)營者的喜愛，但作為設(shè)計(jì)師的我們真的能聽之任之嗎？

標(biāo)簽該不該用、怎么用、如何更好的使用都有一定的原則，即便同一個(gè)產(chǎn)品，被不同的設(shè)計(jì)師設(shè)計(jì)出來也可能是千變?nèi)f化。

本文筆者將根據(jù)標(biāo)簽的定義、屬性特征及使用場(chǎng)景作出一些思考和探索，幫助大家對(duì)標(biāo)簽有一個(gè)更清晰的認(rèn)識(shí)。

一、標(biāo)簽基本介紹

1. 什么是標(biāo)簽

標(biāo)簽是結(jié)合產(chǎn)品內(nèi)容及屬性特征經(jīng)提煉后產(chǎn)出的關(guān)鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統(tǒng)識(shí)別。

好的標(biāo)簽設(shè)計(jì)會(huì)根據(jù)業(yè)務(wù)需求場(chǎng)景、服務(wù)理念形成獨(dú)特的視覺標(biāo)記，依托產(chǎn)品、用戶目標(biāo)需求，引導(dǎo)或促進(jìn)用戶進(jìn)入下一步操作，用以提高商品、信息的轉(zhuǎn)化。

2. 標(biāo)簽色彩

標(biāo)簽主要幫助用戶快速識(shí)別信息、提升信息轉(zhuǎn)化效率，色彩是一個(gè)很重要的因素，好的配色能高效、精準(zhǔn)的傳達(dá)信息。在標(biāo)簽的配色中，主要針對(duì)以下兩種場(chǎng)景：

• 一種是白色背景，這種沒有任何沖突的背景給標(biāo)簽配色創(chuàng)造了極佳的條件，主體色、輔助色、點(diǎn)綴色均可使用，在面對(duì)同一組信息多標(biāo)簽的情況下，還能多種色彩混合，以便對(duì)標(biāo)簽更好的分類；
• 另一種是圖片背景，更多用在封面、頭圖、商品詳情等位置，相比白色背景會(huì)受到很多局限，一般使用白色/黑色+不透明度、或者主體色作為標(biāo)簽容器，文字使用黑色或反白處理。

3. 標(biāo)簽形狀

形狀是標(biāo)簽信息傳遞中的視覺輪廓表現(xiàn)，它是用于承載信息的容器，對(duì)文字元素的包容性極強(qiáng)，能使標(biāo)簽信息更加聚焦，讓用戶在獲取內(nèi)容、信息歸類時(shí)更加專注。常用的標(biāo)簽形狀有圓形、矩形（半圓角、全圓角）、三角形（角標(biāo)）、氣泡或異形，真實(shí)情況還得受界面使用場(chǎng)景、品牌調(diào)性以及設(shè)計(jì)規(guī)范等因素的控制。

二、標(biāo)簽在設(shè)計(jì)中的作用

為了對(duì)信息進(jìn)行歸類，標(biāo)簽可能出現(xiàn)在任何一個(gè)頁面，通過精、簡的表達(dá)方式，希望能引起用戶的關(guān)注以及激發(fā)用戶想要進(jìn)一步了解的欲望。

例如雙11快到了，手機(jī)里的各大應(yīng)用圖標(biāo)都貼上了雙11標(biāo)簽，預(yù)示優(yōu)惠活動(dòng)已經(jīng)啟動(dòng)，以激發(fā)用戶點(diǎn)擊的欲望；打開外賣應(yīng)用，看到琳瑯滿目的滿減、特色標(biāo)簽，也能讓我們快速的擇優(yōu)處理。

總之，在什么時(shí)間、需要使用什么樣的標(biāo)簽，主要看產(chǎn)品想達(dá)到一個(gè)什么樣的目的。

1. 突出產(chǎn)品特色（營銷）

標(biāo)簽的首要任務(wù)就是為滿足用戶的隱性需求而傳達(dá)特色信息，通過讓用戶對(duì)產(chǎn)品產(chǎn)生聯(lián)想并增加需求欲望，促進(jìn)用戶完成下一步操作。

對(duì)于產(chǎn)品而言，標(biāo)簽?zāi)軅鬟f出折扣、優(yōu)惠、賣點(diǎn)、特色等與用戶利益相關(guān)的各種信息，而對(duì)于用戶來說又能讓其快速獲取關(guān)鍵信息，降低內(nèi)容的理解難度等。

例如：美團(tuán)、餓了么店鋪的優(yōu)惠，如滿x減x、免費(fèi)配送、店鋪紅包、首次優(yōu)惠…等標(biāo)簽讓用戶潛意識(shí)的認(rèn)為能降低經(jīng)濟(jì)成本，即便事實(shí)并非如此。

通過產(chǎn)品特色信息，如品牌、服務(wù)、復(fù)購率、售出累計(jì)、排名…等標(biāo)簽體現(xiàn)出專業(yè)、高質(zhì)量以及熱情的服務(wù)態(tài)度，無時(shí)不刻都在擊潰用戶最后的心理防線，以提高產(chǎn)品的轉(zhuǎn)化率。

2. 建立用戶操作預(yù)知

通過建立用戶操作預(yù)知，讓其在操作之前就能清楚點(diǎn)擊后會(huì)發(fā)生什么。例如：登錄騰訊動(dòng)漫時(shí)，會(huì)用小標(biāo)簽提示上次的的登錄方式，降低多賬號(hào)的記憶成本。

騰訊視頻的封面會(huì)有VIP（需開通會(huì)員）、付費(fèi)（需額外付費(fèi)）、等標(biāo)簽，讓用戶在操作之前就能根據(jù)當(dāng)前賬號(hào)情況來判斷操作之后可能會(huì)發(fā)生的事情，提前有一定的心理預(yù)期。

3. 個(gè)性化內(nèi)容推薦

用戶在接觸一個(gè)新產(chǎn)品或新功能時(shí)，一開始總會(huì)有些不知所措，這時(shí)系統(tǒng)會(huì)提供一些用戶可能感興趣的、產(chǎn)品希望用戶選擇的標(biāo)簽，并引導(dǎo)用戶操作來獲取想要的內(nèi)容，以滿足用戶的潛在需求。

4. 操作前/后的內(nèi)容引流

標(biāo)簽既能突出產(chǎn)品特色信息、又不會(huì)占用太多空間，所以通過對(duì)用戶建立好感、吸引其注意力進(jìn)行引流也是一個(gè)很不錯(cuò)的方式。

常見的有兩種引流方式，一種是在用戶操作之前沒有目標(biāo)，系統(tǒng)通過標(biāo)簽對(duì)用戶進(jìn)行方向性的指引，例如淘寶搜索中的歷史、熱搜、興趣推薦等。

另一種則是用戶在完成某個(gè)任務(wù)之后，產(chǎn)品通過相似或相關(guān)聯(lián)的標(biāo)簽吸引用戶繼續(xù)瀏覽其他相關(guān)內(nèi)容的潛在需求，以增加用戶在應(yīng)用中的停留時(shí)長，例如小紅書文章詳情頁的結(jié)尾，會(huì)提供與當(dāng)前內(nèi)容相關(guān)的標(biāo)簽，點(diǎn)擊之后可快速查看其他相似的內(nèi)容。

5. 信息分類

通過標(biāo)簽建立有效的信息分類，能幫助用戶快速篩選出自己想要的內(nèi)容，避免用戶因浪費(fèi)大量時(shí)間瀏覽了非需求內(nèi)的信息而失去耐心。

例如淘票票電影評(píng)論區(qū)，用戶可選擇自己感興趣的標(biāo)簽去查找自己想要的信息，提高瀏覽效率，節(jié)約時(shí)間成本。

6. 從眾心理推動(dòng)轉(zhuǎn)化

當(dāng)用戶對(duì)某個(gè)商品猶豫不決、無法快速做出決定時(shí)，正處在轉(zhuǎn)化的邊緣，這時(shí)只需要一個(gè)“催化劑”，可利用從眾心理推動(dòng)用戶轉(zhuǎn)化。

例如商品的銷售量、收藏量、有多少用戶正在下單…等，都會(huì)對(duì)當(dāng)前用戶的心理產(chǎn)生極大影響，很多時(shí)候，用戶的想法和行為受到周圍人的影響程度，往往超過理性的認(rèn)知。

三、不同場(chǎng)景下的使用方式

在用戶層面，標(biāo)簽提供的是內(nèi)容的核心或特色關(guān)鍵詞，能提升用戶瀏覽效率，幫助其快速做出決策。站在設(shè)計(jì)角度，標(biāo)簽不僅能多樣化的展示各種關(guān)鍵信息、提高視覺表現(xiàn)力，最主要的是能通過設(shè)計(jì)手段為業(yè)務(wù)賦能，促進(jìn)產(chǎn)品、信息的轉(zhuǎn)化。

直白一點(diǎn)，產(chǎn)品經(jīng)理說“需要重點(diǎn)突出功能的特色、賣點(diǎn)”、運(yùn)營說“目前我們?cè)谧龌顒?dòng)，要特別突出折扣優(yōu)惠”、業(yè)務(wù)說“有很多用戶不知道xxx，需要設(shè)計(jì)的最明顯”。

最后一致決定都很重要。相信絕大多數(shù)設(shè)計(jì)師都遇到過這種問題，怎么辦？是直接拒絕還是等著各部門撕逼后給出一個(gè)確定的結(jié)果？

其實(shí)面對(duì)上述情況，設(shè)計(jì)師的角色不要只停留在畫界面上，應(yīng)該站在用戶的角度去分析，提這些需求的人到底想表達(dá)什么（表面上用視覺突出），能給用戶帶來什么，需要經(jīng)過討論，深度分析產(chǎn)品的真實(shí)需求、用戶的痛點(diǎn)及訴求，從中找到一個(gè)最佳的平衡點(diǎn)。

然后通過結(jié)論來確定設(shè)計(jì)的可行性、易用性以及視覺表現(xiàn)方式，不要忘了，設(shè)計(jì)的本質(zhì)就是解決問題。

最后你會(huì)發(fā)現(xiàn)，如有必要，將眾多信息同時(shí)展示出來、而且還不可以影響其他信息的傳達(dá)并非不可能，使用標(biāo)簽就是一個(gè)很不錯(cuò)的解決方式，下面讓我們來一起來看看，不同類型的類產(chǎn)品標(biāo)簽在不同的場(chǎng)景下都有什么關(guān)聯(lián)以及不同的使用特點(diǎn)。

1. 超鏈接標(biāo)簽

這種類型的標(biāo)簽以#+文字形式的超鏈接為主，大多出現(xiàn)在文字內(nèi)容較多的列表頁面、詳情頁的開頭或結(jié)尾，也可以理解大家常說的話題，它能讓用戶通過標(biāo)簽就能了解到這些內(nèi)容的主題及核心，幫用戶快速鏈接到與該內(nèi)容相關(guān)聯(lián)的信息。

相信有一些設(shè)計(jì)師應(yīng)該經(jīng)歷過這種情況，看新聞越看越感興趣、刷抖音刷到停不下來、看旅游攻略根本不想睡覺…等，這都是源于系統(tǒng)背后的算法與自動(dòng)推薦機(jī)制，產(chǎn)品的背后總有一雙無形的大手在幫我們自動(dòng)匹配。

而＃+文字標(biāo)簽的出現(xiàn)只不過是將關(guān)聯(lián)、或想推薦給我們的內(nèi)容擺在的明面上（系統(tǒng)、用戶推薦均可），把選擇權(quán)交給了用戶，即便用戶沒有點(diǎn)擊標(biāo)簽，劃走后或許還是逃不脫系統(tǒng)的算法推薦，可用戶一旦主動(dòng)點(diǎn)擊，產(chǎn)品內(nèi)容會(huì)更加匹配，用戶的滿意度就會(huì)更高。

這樣通過明（用戶主動(dòng)點(diǎn)擊標(biāo)簽）、暗（系統(tǒng)算法推薦機(jī)制）的雙刃劍，不僅能滿足用戶想瀏覽其他內(nèi)容的潛在需求，也達(dá)到了產(chǎn)品相關(guān)聯(lián)屬性內(nèi)容的引流。

例如抖音將標(biāo)簽放在了標(biāo)題后面，用戶隨時(shí)能知曉當(dāng)前短視頻的類型、屬性等信息；小紅書的文章詳情頁結(jié)尾也會(huì)有相關(guān)聯(lián)的標(biāo)簽，用戶可通過該標(biāo)簽快速跳到其他相似的內(nèi)容列表，以便獲取更多對(duì)自己有價(jià)值的信息。

2. 圖片封面標(biāo)簽

常用在帶有封面圖片的內(nèi)容列表中，例如視頻、音樂、電商類型的應(yīng)用，在產(chǎn)品封面配上圖標(biāo)或文字小標(biāo)簽后，不僅讓用戶對(duì)信息有更快速的理解，還能豐富圖片內(nèi)容、讓視覺表現(xiàn)更加生動(dòng)。

需要說明的是，因圖片本身的色彩比較復(fù)雜，一定要注意標(biāo)簽的配色，標(biāo)簽既然作為輔助說明來傳遞信息，就需要有一定程度的突出，不然，一旦與圖片該區(qū)域的色彩融合或嚴(yán)重沖突，就會(huì)給整個(gè)界面的美觀度帶來負(fù)面效果。

這種類型的標(biāo)簽大多數(shù)只用于信息傳遞，并無對(duì)應(yīng)的交互操作，分為動(dòng)態(tài)和靜態(tài)兩種類型。

騰訊視頻列表封面的標(biāo)簽屬于動(dòng)態(tài)，也就是通過后臺(tái)管理系統(tǒng)隨時(shí)對(duì)內(nèi)容進(jìn)行調(diào)整，可能今天是A標(biāo)簽、明天就變成了B標(biāo)簽、或者什么都沒有，標(biāo)簽的類型數(shù)量及樣式會(huì)有一定的控制，針對(duì)分類、功能、權(quán)限類的標(biāo)記非常實(shí)用。

京東的商品封面則是靜態(tài)標(biāo)簽，為了體現(xiàn)出其質(zhì)量、折扣、品牌等信息，在處理圖片之初就將標(biāo)簽融合，讓其成為圖片本身的一部分，不過會(huì)增加相應(yīng)的制作成本。

相比前者，靜態(tài)標(biāo)簽的使用方式非常靈活且不受系統(tǒng)的控制，對(duì)用戶的吸引力更強(qiáng)，對(duì)產(chǎn)品促銷、提高轉(zhuǎn)化率能起到很大的作用。

3. 商品列表標(biāo)簽（多元化）

電商應(yīng)用的產(chǎn)品列表主要為突出特色、賣點(diǎn)來進(jìn)行促銷，類型及樣式比較多元化，且單個(gè)產(chǎn)品可能多達(dá)4~5個(gè)標(biāo)簽，以此來吸引用戶購買。

以下圖淘寶、美團(tuán)外賣列表為例，使用了線框、淺色底、深色底容器標(biāo)簽以及銷量、費(fèi)用類型的純文字標(biāo)簽，樣式可單用、可混搭，形形色色的展示出了商品的各標(biāo)簽信息層級(jí)，無時(shí)不刻都在吸引著用戶的注意力。

四、標(biāo)簽的設(shè)計(jì)（主產(chǎn)品列表）

1. 精煉

標(biāo)簽作為輔助補(bǔ)充信息的存在，不宜展示大段的內(nèi)容，所以大家看到過的標(biāo)簽基本都很短。簡短的標(biāo)簽是在信息表達(dá)清晰、用戶能足夠理解的前提下提煉出來的，我們這里所說的精煉并非一味的求短，雖然“短”是標(biāo)簽必備的因素，但有時(shí)候，過于簡短的標(biāo)簽根本沒辦法給用戶傳達(dá)足夠的信息，甚至?xí)?dǎo)致用戶更加疑惑，這也失去了添加標(biāo)簽的初衷。

例如美團(tuán)外賣列表，標(biāo)簽都很簡短，但在用一句話形容、或用戶高質(zhì)量的評(píng)價(jià)來表達(dá)店鋪特色時(shí)，這個(gè)標(biāo)簽占了整整一行的位置，并沒有進(jìn)行特別的簡化。

下面是某購票平臺(tái)，標(biāo)簽也很簡短，大部分能一看就懂，但有幾個(gè)就不一定了，“兌”是什么意思？

可兌換火車票、還是購票后可以兌換其他禮品呢；“靜”又是代表什么呢？乘車環(huán)境安靜、人員相對(duì)安靜還是需要乘客制造安靜？雖然我們花點(diǎn)時(shí)間也能猜出個(gè)七七八八，但這無疑增加了用戶的理解難度和時(shí)間成本。

2. 視覺突出

因?yàn)闃?biāo)簽本身比較小的原因，一般我們會(huì)通過配色來吸引用戶的注意，但面對(duì)不同的產(chǎn)品屬性，其色彩的表現(xiàn)形式也有很大的區(qū)別。

在騰訊視頻中，采用的固定底色的容器標(biāo)簽，旨在強(qiáng)調(diào)產(chǎn)品的特權(quán)屬性，視覺非常突出；而酷狗音樂采用的是黑色帶透明底、文字反白的標(biāo)簽，僅僅作為輔助提示，對(duì)封面的干擾比較小、但依然能保持信息的有效傳遞。

3. 一致性

同類型、同視覺權(quán)重的標(biāo)簽應(yīng)盡量保持一致，即便應(yīng)對(duì)多元化，盡量只在色彩上作出調(diào)整，其容器的外觀形狀、字體字號(hào)仍需保持相同的屬性特征，要讓用戶一看就知道這幾個(gè)標(biāo)簽屬于同一種類別。

4. 差異性

上面說到了一致性，現(xiàn)在又說差異性，乍一看似乎是有沖突，其實(shí)不然。這里的差異性是針對(duì)不同類型、不同視覺權(quán)重的標(biāo)簽，需要通過不同的視覺樣式及色彩體現(xiàn)出信息的層級(jí)關(guān)系。

例如：用戶在購買這個(gè)商品之前最想知道、且對(duì)用戶最有吸引力的標(biāo)簽一定是最突出的，用戶掃一眼就能看到，根據(jù)視覺權(quán)重依次類推，最后是對(duì)用戶來說不是很重要、甚至沒有看到也不會(huì)有什么影響的這類標(biāo)簽弱化顯示。

五、結(jié)語

文中主要總結(jié)了標(biāo)簽的作用、不同場(chǎng)景下的使用方式以及設(shè)計(jì)中的注意事項(xiàng)，不難看出，UI設(shè)計(jì)中的標(biāo)簽跟我們?nèi)粘Ｉ钪械臉?biāo)簽很相似，它不僅能對(duì)產(chǎn)品作分類、特色標(biāo)記，還能在用戶猶豫不決的時(shí)候起到一定的推動(dòng)作用，是平臺(tái)內(nèi)部信息導(dǎo)流和滿足用戶潛在需求過程中至關(guān)重要的一環(huán)。

標(biāo)簽設(shè)計(jì)不應(yīng)該是簡單的色塊+文字的堆疊，它應(yīng)該與產(chǎn)品之間存在著某種潛在的關(guān)聯(lián)，需要針對(duì)不同的使用場(chǎng)景為產(chǎn)品量身定做，形成一套具備專業(yè)化的標(biāo)簽體系。

好的標(biāo)簽不僅能滿足上述提到的基本需求，還能在無形之中給予用戶經(jīng)驗(yàn)的感覺，一度超出用戶的預(yù)期，最終滿足產(chǎn)品的商業(yè)價(jià)值。

#專欄作家#

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。