在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，標(biāo)簽雖然不是很起眼，但是絕對不能忽視它，只要使用得當(dāng)，尤其是在電商類產(chǎn)品中堪稱神助攻的存在，其功能的強(qiáng)大不是筆者幾段文字能介紹清楚的，了解過產(chǎn)品運(yùn)營、用戶行為及心理學(xué)的設(shè)計(jì)師就知道為什么會“愛”上標(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)簽的定義、屬性特征及使用場景作出一些思考和探索，幫助大家對標(biāo)簽有一個(gè)更清晰的認(rèn)識。
分享目錄
一、標(biāo)簽基本介紹
二、標(biāo)簽在設(shè)計(jì)中的作用
三、不同場景下的使用方式
四、標(biāo)簽的設(shè)計(jì)（主產(chǎn)品列表）
五、結(jié)語
一、標(biāo)簽基本介紹
1、什么是標(biāo)簽
標(biāo)簽是結(jié)合產(chǎn)品內(nèi)容及屬性特征經(jīng)提煉后產(chǎn)出的關(guān)鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統(tǒng)識別。好的標(biāo)簽設(shè)計(jì)會根據(jù)業(yè)務(wù)需求場景、服務(wù)理念形成獨(dú)特的視覺標(biāo)記，依托產(chǎn)品、用戶目標(biāo)需求，引導(dǎo)或促進(jìn)用戶進(jìn)入下一步操作，用以提高商品、信息的轉(zhuǎn)化。
2、標(biāo)簽色彩
標(biāo)簽主要幫助用戶快速識別信息、提升信息轉(zhuǎn)化效率，色彩是一個(gè)很重要的因素，好的配色能高效、精準(zhǔn)的傳達(dá)信息。在標(biāo)簽的配色中，主要針對以下兩種場景：
一種是白色背景，這種沒有任何沖突的背景給標(biāo)簽配色創(chuàng)造了極佳的條件，主體色、輔助色、點(diǎn)綴色均可使用，在面對同一組信息多標(biāo)簽的情況下，還能多種色彩混合，以便對標(biāo)簽更好的分類；另一種是圖片背景，更多用在封面、頭圖、商品詳情等位置，相比白色背景會受到很多局限，一般使用白色/黑色+不透明度、或者主體色作為標(biāo)簽容器，文字使用黑色或反白處理。
3、標(biāo)簽形狀
形狀是標(biāo)簽信息傳遞中的視覺輪廓表現(xiàn)，它是用于承載信息的容器，對文字元素的包容性極強(qiáng)，能使標(biāo)簽信息更加聚焦，讓用戶在獲取內(nèi)容、信息歸類時(shí)更加專注。常用的標(biāo)簽形狀有圓形、矩形（半圓角、全圓角）、三角形（角標(biāo)）、氣泡或異形，真實(shí)情況還得受界面使用場景、品牌調(diào)性以及設(shè)計(jì)規(guī)范等因素的控制。
二、標(biāo)簽在設(shè)計(jì)中的作用
為了對信息進(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)惠活動已經(jīng)啟動，以激發(fā)用戶點(diǎn)擊的欲望；打開外賣應(yīng)用，看到琳瑯滿目的滿減、特色標(biāo)簽，也能讓我們快速的擇優(yōu)處理?？傊?，在什么時(shí)間、需要使用什么樣的標(biāo)簽，主要看產(chǎn)品想達(dá)到一個(gè)什么樣的目的。
1、突出產(chǎn)品特色（營銷）
標(biāo)簽的首要任務(wù)就是為滿足用戶的隱性需求而傳達(dá)特色信息，通過讓用戶對產(chǎn)品產(chǎn)生聯(lián)想并增加需求欲望，促進(jìn)用戶完成下一步操作。對于產(chǎn)品而言，標(biāo)簽?zāi)軅鬟f出折扣、優(yōu)惠、賣點(diǎn)、特色等與用戶利益相關(guān)的各種信息，而對于用戶來說又能讓其快速獲取關(guān)鍵信息，降低內(nèi)容的理解難度等。
例如：美團(tuán)、餓了么店鋪的優(yōu)惠，如滿x減x、免費(fèi)配送、店鋪紅包、首次優(yōu)惠…等標(biāo)簽讓用戶潛意識的認(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)擊后會發(fā)生什么。例如：登錄騰訊動漫時(shí)，會用小標(biāo)簽提示上次的的登錄方式，降低多賬號的記憶成本；騰訊視頻的封面會有VIP（需開通會員）、付費(fèi)（需額外付費(fèi)）、等標(biāo)簽，讓用戶在操作之前就能根據(jù)當(dāng)前賬號情況來判斷操作之后可能會發(fā)生的事情，提前有一定的心理預(yù)期。
3、個(gè)性化內(nèi)容推薦
用戶在接觸一個(gè)新產(chǎn)品或新功能時(shí)，一開始總會有些不知所措，這時(shí)系統(tǒng)會提供一些用戶可能感興趣的、產(chǎn)品希望用戶選擇的標(biāo)簽，并引導(dǎo)用戶操作來獲取想要的內(nèi)容，以滿足用戶的潛在需求。
4.操作前/后的內(nèi)容引流
標(biāo)簽既能突出產(chǎn)品特色信息、又不會占用太多空間，所以通過對用戶建立好感、吸引其注意力進(jìn)行引流也是一個(gè)很不錯(cuò)的方式。
常見的有兩種引流方式，一種是在用戶操作之前沒有目標(biāo)，系統(tǒng)通過標(biāo)簽對用戶進(jìn)行方向性的指引，例如淘寶搜索中的歷史、熱搜、興趣推薦等。另一種則是用戶在完成某個(gè)任務(wù)之后，產(chǎn)品通過相似或相關(guān)聯(lián)的標(biāo)簽吸引用戶繼續(xù)瀏覽其他相關(guān)內(nèi)容的潛在需求，以增加用戶在應(yīng)用中的停留時(shí)長，例如小紅書文章詳情頁的結(jié)尾，會提供與當(dāng)前內(nèi)容相關(guān)的標(biāo)簽，點(diǎn)擊之后可快速查看其他相似的內(nèi)容。
5、信息分類
通過標(biāo)簽建立有效的信息分類，能幫助用戶快速篩選出自己想要的內(nèi)容，避免用戶因浪費(fèi)大量時(shí)間瀏覽了非需求內(nèi)的信息而失去耐心。例如淘票票電影評論區(qū)，用戶可選擇自己感興趣的標(biāo)簽去查找自己想要的信息，提高瀏覽效率，節(jié)約時(shí)間成本。
6、從眾心理推動轉(zhuǎn)化
當(dāng)用戶對某個(gè)商品猶豫不決、無法快速做出決定時(shí)，正處在轉(zhuǎn)化的邊緣，這時(shí)只需要一個(gè)“催化劑”，可利用從眾心理推動用戶轉(zhuǎn)化。例如商品的銷售量、收藏量、有多少用戶正在下單…等，都會對當(dāng)前用戶的心理產(chǎn)生極大影響，很多時(shí)候，用戶的想法和行為受到周圍人的影響程度，往往超過理性的認(rèn)知。
三、不同場景下的使用方式
在用戶層面，標(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)營說“目前我們在做活動，要特別突出折扣優(yōu)惠”、業(yè)務(wù)說“有很多用戶不知道xxx，需要設(shè)計(jì)的最明顯”……最后一致決定都很重要。相信絕大多數(shù)設(shè)計(jì)師都遇到過這種問題，怎么辦？是直接拒絕還是等著各部門撕逼后給出一個(gè)確定的結(jié)果？
其實(shí)面對上述情況，設(shè)計(jì)師的角色不要只停留在畫界面上，應(yīng)該站在用戶的角度去分析，提這些需求的人到底想表達(dá)什么（表面上用視覺突出），能給用戶帶來什么，需要經(jīng)過討論，深度分析產(chǎn)品的真實(shí)需求、用戶的痛點(diǎn)及訴求，從中找到一個(gè)最佳的平衡點(diǎn)，然后通過結(jié)論來確定設(shè)計(jì)的可行性、易用性以及視覺表現(xiàn)方式，不要忘了，設(shè)計(jì)的本質(zhì)就是解決問題。
最后你會發(fā)現(xiàn)，如有必要，將眾多信息同時(shí)展示出來、而且還不可以影響其他信息的傳達(dá)并非不可能，使用標(biāo)簽就是一個(gè)很不錯(cuò)的解決方式，下面讓我們來一起來看看，不同類型的類產(chǎn)品標(biāo)簽在不同的場景下都有什么關(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)背后的算法與自動推薦機(jī)制，產(chǎn)品的背后總有一雙無形的大手在幫我們自動匹配。而＃+文字標(biāo)簽的出現(xiàn)只不過是將關(guān)聯(lián)、或想推薦給我們的內(nèi)容擺在的明面上（系統(tǒng)、用戶推薦均可），把選擇權(quán)交給了用戶，即便用戶沒有點(diǎn)擊標(biāo)簽，劃走后或許還是逃不脫系統(tǒng)的算法推薦，可用戶一旦主動點(diǎn)擊，產(chǎn)品內(nèi)容會更加匹配，用戶的滿意度就會更高。這樣通過明（用戶主動點(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é)尾也會有相關(guān)聯(lián)的標(biāo)簽，用戶可通過該標(biāo)簽快速跳到其他相似的內(nèi)容列表，以便獲取更多對自己有價(jià)值的信息。
2、圖片封面標(biāo)簽
常用在帶有封面圖片的內(nèi)容列表中，例如視頻、音樂、電商類型的應(yīng)用，在產(chǎn)品封面配上圖標(biāo)或文字小標(biāo)簽后，不僅讓用戶對信息有更快速的理解，還能豐富圖片內(nèi)容、讓視覺表現(xiàn)更加生動。需要說明的是，因圖片本身的色彩比較復(fù)雜，一定要注意標(biāo)簽的配色，標(biāo)簽既然作為輔助說明來傳遞信息，就需要有一定程度的突出，不然，一旦與圖片該區(qū)域的色彩融合或嚴(yán)重沖突，就會給整個(gè)界面的美觀度帶來負(fù)面效果。這種類型的標(biāo)簽大多數(shù)只用于信息傳遞，并無對應(yīng)的交互操作，分為動態(tài)和靜態(tài)兩種類型。
騰訊視頻列表封面的標(biāo)簽屬于動態(tài)，也就是通過后臺管理系統(tǒng)隨時(shí)對內(nèi)容進(jìn)行調(diào)整，可能今天是A標(biāo)簽、明天就變成了B標(biāo)簽、或者什么都沒有，標(biāo)簽的類型數(shù)量及樣式會有一定的控制，針對分類、功能、權(quán)限類的標(biāo)記非常實(shí)用。
京東的商品封面則是靜態(tài)標(biāo)簽，為了體現(xiàn)出其質(zhì)量、折扣、品牌等信息，在處理圖片之初就將標(biāo)簽融合，讓其成為圖片本身的一部分，不過會增加相應(yīng)的制作成本。相比前者，靜態(tài)標(biāo)簽的使用方式非常靈活且不受系統(tǒng)的控制，對用戶的吸引力更強(qiáng)，對產(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)簽信息層級，無時(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ì)量的評價(jià)來表達(dá)店鋪特色時(shí)，這個(gè)標(biāo)簽占了整整一行的位置，并沒有進(jìn)行特別的簡化。
下面是某購票平臺，標(biāo)簽也很簡短，大部分能一看就懂，但有幾個(gè)就不一定了，“兌”是什么意思？可兌換火車票、還是購票后可以兌換其他禮品呢；“靜”又是代表什么呢？乘車環(huán)境安靜、人員相對安靜還是需要乘客制造安靜？雖然我們花點(diǎn)時(shí)間也能猜出個(gè)七七八八，但這無疑增加了用戶的理解難度和時(shí)間成本。
2、視覺突出
因?yàn)闃?biāo)簽本身比較小的原因，一般我們會通過配色來吸引用戶的注意，但面對不同的產(chǎn)品屬性，其色彩的表現(xiàn)形式也有很大的區(qū)別。
在騰訊視頻中，采用的固定底色的容器標(biāo)簽，旨在強(qiáng)調(diào)產(chǎn)品的特權(quán)屬性，視覺非常突出；而酷狗音樂采用的是黑色帶透明底、文字反白的標(biāo)簽，僅僅作為輔助提示，對封面的干擾比較小、但依然能保持信息的有效傳遞。
3、一致性
同類型、同視覺權(quán)重的標(biāo)簽應(yīng)盡量保持一致，即便應(yīng)對多元化，盡量只在色彩上作出調(diào)整，其容器的外觀形狀、字體字號仍需保持相同的屬性特征，要讓用戶一看就知道這幾個(gè)標(biāo)簽屬于同一種類別。
4、差異性
上面說到了一致性，現(xiàn)在又說差異性，乍一看似乎是有沖突，其實(shí)不然。這里的差異性是針對不同類型、不同視覺權(quán)重的標(biāo)簽，需要通過不同的視覺樣式及色彩體現(xiàn)出信息的層級關(guān)系。
例如：用戶在購買這個(gè)商品之前最想知道、且對用戶最有吸引力的標(biāo)簽一定是最突出的，用戶掃一眼就能看到，根據(jù)視覺權(quán)重依次類推，最后是對用戶來說不是很重要、甚至沒有看到也不會有什么影響的這類標(biāo)簽弱化顯示。
結(jié)語
文中主要總結(jié)了標(biāo)簽的作用、不同場景下的使用方式以及設(shè)計(jì)中的注意事項(xiàng)，不難看出，UI設(shè)計(jì)中的標(biāo)簽跟我們?nèi)粘Ｉ钪械臉?biāo)簽很相似，它不僅能對產(chǎn)品作分類、特色標(biāo)記，還能在用戶猶豫不決的時(shí)候起到一定的推動作用，是平臺內(nèi)部信息導(dǎo)流和滿足用戶潛在需求過程中至關(guān)重要的一環(huán)。
標(biāo)簽設(shè)計(jì)不應(yīng)該是簡單的色塊+文字的堆疊，它應(yīng)該與產(chǎn)品之間存在著某種潛在的關(guān)聯(lián)，需要針對不同的使用場景為產(chǎn)品量身定做，形成一套具備專業(yè)化的標(biāo)簽體系。好的標(biāo)簽不僅能滿足上述提到的基本需求，還能在無形之中給予用戶經(jīng)驗(yàn)的感覺，一度超出用戶的預(yù)期，最終滿足產(chǎn)品的商業(yè)價(jià)值。
作者：大漠飛鷹CYSJ
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》標(biāo)簽篇 | 打造獨(dú)特視覺標(biāo)記、精準(zhǔn)傳達(dá)信息
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司