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