編輯導語：標籤設計是UI設計中一個重要的組成部分，可以用於傳達資訊，有助於完成任務目標等。本文作者分享了有關標籤設計的內容，講述了標籤的基本概念、標籤在設計中的應用、不同場景下的使用方式、標籤的設計等內容，一起來學習一下吧。

在現實生活中，每個人都會不同程度的給別人、被別人貼標籤，這是一種低門檻、高效率的記住一個人/物的有效方式。

我們在背後談論某個人/物的特點，最直觀的表達方式就是利用標籤敘述，例如，某個人好帥/善良、某件事做起來很簡單/方便等，甚至將某種相似的人/物進行簡單的歸類後使用共同的標籤，這都能讓我們更清晰的掌握某些關鍵資訊。

在網際網路產品設計中，標籤雖然不是很起眼，但是絕對不能忽視它，只要使用得當，尤其是在電商類產品中堪稱神助攻的存在，其功能的強大不是筆者幾段文字能介紹清楚的，瞭解過產品運營、使用者行為及心理學的設計師就知道為什麼會“愛”上標籤了。

很多時候，看似簡單的元件/元素，背後都蘊藏著不簡單的運作方式，其方式的不同，給產品帶來的結果也截然不同。

UI設計中的標籤可用於傳達資訊、建立可預知操作等，能幫助或促進使用者更快速完成任務、協助產品達成業務目標，深受產品經理、運營者的喜愛，但作為設計師的我們真的能聽之任之嗎？

標籤該不該用、怎麼用、如何更好的使用都有一定的原則，即便同一個產品，被不同的設計師設計出來也可能是千變萬化。

本文筆者將根據標籤的定義、屬性特徵及使用場景作出一些思考和探索，幫助大家對標籤有一個更清晰的認識。

一、標籤基本介紹

1. 什麼是標籤

標籤是結合產品內容及屬性特徵經提煉後產出的關鍵詞，是資訊的一種集合方式，便於使用者查詢、定位以及系統識別。

好的標籤設計會根據業務需求場景、服務理念形成獨特的視覺標記，依託產品、使用者目標需求，引導或促進使用者進入下一步操作，用以提高商品、資訊的轉化。

2. 標籤色彩

標籤主要幫助使用者快速識別資訊、提升資訊轉化效率，色彩是一個很重要的因素，好的配色能高效、精準的傳達資訊。在標籤的配色中，主要針對以下兩種場景：

一種是白色背景，這種沒有任何衝突的背景給標籤配色創造了極佳的條件，主體色、輔助色、點綴色均可使用，在面對同一組資訊多標籤的情況下，還能多種色彩混合，以便對標籤更好的分類；

另一種是圖片背景，更多用在封面、頭圖、商品詳情等位置，相比白色背景會受到很多侷限，一般使用白色/黑色+不透明度、或者主體色作為標籤容器，文字使用黑色或反白處理。

3. 標籤形狀

形狀是標籤資訊傳遞中的視覺輪廓表現，它是用於承載資訊的容器，對文字元素的包容性極強，能使標籤資訊更加聚焦，讓使用者在獲取內容、資訊歸類時更加專注。常用的標籤形狀有圓形、矩形（半圓角、全圓角）、三角形（角標）、氣泡或異形，真實情況還得受介面使用場景、品牌調性以及設計規範等因素的控制。

二、標籤在設計中的作用

為了對資訊進行歸類，標籤可能出現在任何一個頁面，透過精、簡的表達方式，希望能引起使用者的關注以及激發使用者想要進一步瞭解的慾望。

例如雙11快到了，手機裡的各大應用圖示都貼上了雙11標籤，預示優惠活動已經啟動，以激發使用者點選的慾望；開啟外賣應用，看到琳琅滿目的滿減、特色標籤，也能讓我們快速的擇優處理。

總之，在什麼時間、需要使用什麼樣的標籤，主要看產品想達到一個什麼樣的目的。

1. 突出產品特色（營銷）

標籤的首要任務就是為滿足使用者的隱性需求而傳達特色資訊，透過讓使用者對產品產生聯想並增加需求慾望，促進使用者完成下一步操作。

對於產品而言，標籤能傳遞出折扣、優惠、賣點、特色等與使用者利益相關的各種資訊，而對於使用者來說又能讓其快速獲取關鍵資訊，降低內容的理解難度等。

例如：美團、餓了麼店鋪的優惠，如滿x減x、免費配送、店鋪紅包、首次優惠…等標籤讓使用者潛意識的認為能降低經濟成本，即便事實並非如此。

透過產品特色資訊，如品牌、服務、復購率、售出累計、排名…等標籤體現出專業、高質量以及熱情的服務態度，無時不刻都在擊潰使用者最後的心理防線，以提高產品的轉化率。

2. 建立使用者操作預知

透過建立使用者操作預知，讓其在操作之前就能清楚點選後會發生什麼。例如：登入騰訊動漫時，會用小標籤提示上次的的登入方式，降低多賬號的記憶成本。

騰訊影片的封面會有VIP（需開通會員）、付費（需額外付費）、等標籤，讓使用者在操作之前就能根據當前賬號情況來判斷操作之後可能會發生的事情，提前有一定的心理預期。

3. 個性化內容推薦

使用者在接觸一個新產品或新功能時，一開始總會有些不知所措，這時系統會提供一些使用者可能感興趣的、產品希望使用者選擇的標籤，並引導使用者操作來獲取想要的內容，以滿足使用者的潛在需求。

4. 操作前/後的內容引流

標籤既能突出產品特色資訊、又不會佔用太多空間，所以透過對使用者建立好感、吸引其注意力進行引流也是一個很不錯的方式。

常見的有兩種引流方式，一種是在使用者操作之前沒有目標，系統透過標籤對使用者進行方向性的指引，例如淘寶搜尋中的歷史、熱搜、興趣推薦等。

另一種則是使用者在完成某個任務之後，產品透過相似或相關聯的標籤吸引使用者繼續瀏覽其他相關內容的潛在需求，以增加使用者在應用中的停留時長，例如小紅書文章詳情頁的結尾，會提供與當前內容相關的標籤，點選之後可快速檢視其他相似的內容。

5. 資訊分類

透過標籤建立有效的資訊分類，能幫助使用者快速篩選出自己想要的內容，避免使用者因浪費大量時間瀏覽了非需求內的資訊而失去耐心。

例如淘票票電影評論區，使用者可選擇自己感興趣的標籤去查詢自己想要的資訊，提高瀏覽效率，節約時間成本。

6. 從眾心理推動轉化

當用戶對某個商品猶豫不決、無法快速做出決定時，正處在轉化的邊緣，這時只需要一個“催化劑”，可利用從眾心理推動使用者轉化。

例如商品的銷售量、收藏量、有多少使用者正在下單…等，都會對當前使用者的心理產生極大影響，很多時候，使用者的想法和行為受到周圍人的影響程度，往往超過理性的認知。

三、不同場景下的使用方式

在使用者層面，標籤提供的是內容的核心或特色關鍵詞，能提升使用者瀏覽效率，幫助其快速做出決策。站在設計角度，標籤不僅能多樣化的展示各種關鍵資訊、提高視覺表現力，最主要的是能透過設計手段為業務賦能，促進產品、資訊的轉化。

直白一點，產品經理說“需要重點突出功能的特色、賣點”、運營說“目前我們在做活動，要特別突出折扣優惠”、業務說“有很多使用者不知道xxx，需要設計的最明顯”。

最後一致決定都很重要。相信絕大多數設計師都遇到過這種問題，怎麼辦？是直接拒絕還是等著各部門撕逼後給出一個確定的結果？

其實面對上述情況，設計師的角色不要只停留在畫介面上，應該站在使用者的角度去分析，提這些需求的人到底想表達什麼（表面上用視覺突出），能給使用者帶來什麼，需要經過討論，深度分析產品的真實需求、使用者的痛點及訴求，從中找到一個最佳的平衡點。

然後透過結論來確定設計的可行性、易用性以及視覺表現方式，不要忘了，設計的本質就是解決問題。

最後你會發現，如有必要，將眾多資訊同時展示出來、而且還不可以影響其他資訊的傳達並非不可能，使用標籤就是一個很不錯的解決方式，下面讓我們來一起來看看，不同型別的類產品標籤在不同的場景下都有什麼關聯以及不同的使用特點。

1. 超連結標籤

這種型別的標籤以#+文字形式的超連結為主，大多出現在文字內容較多的列表頁面、詳情頁的開頭或結尾，也可以理解大家常說的話題，它能讓使用者透過標籤就能瞭解到這些內容的主題及核心，幫使用者快速連結到與該內容相關聯的資訊。

相信有一些設計師應該經歷過這種情況，看新聞越看越感興趣、刷抖音刷到停不下來、看旅遊攻略根本不想睡覺…等，這都是源於系統背後的演算法與自動推薦機制，產品的背後總有一雙無形的大手在幫我們自動匹配。

而＃+文字標籤的出現只不過是將關聯、或想推薦給我們的內容擺在的明面上（系統、使用者推薦均可），把選擇權交給了使用者，即便使用者沒有點選標籤，划走後或許還是逃不脫系統的演算法推薦，可使用者一旦主動點選，產品內容會更加匹配，使用者的滿意度就會更高。

這樣透過明（使用者主動點選標籤）、暗（系統演算法推薦機制）的雙刃劍，不僅能滿足使用者想瀏覽其他內容的潛在需求，也達到了產品相關聯屬性內容的引流。

例如抖音將標籤放在了標題後面，使用者隨時能知曉當前短影片的型別、屬性等資訊；小紅書的文章詳情頁結尾也會有相關聯的標籤，使用者可透過該標籤快速跳到其他相似的內容列表，以便獲取更多對自己有價值的資訊。

2. 圖片封面標籤

常用在帶有封面圖片的內容列表中，例如影片、音樂、電商型別的應用，在產品封面配上圖示或文字小標籤後，不僅讓使用者對資訊有更快速的理解，還能豐富圖片內容、讓視覺表現更加生動。

需要說明的是，因圖片本身的色彩比較複雜，一定要注意標籤的配色，標籤既然作為輔助說明來傳遞資訊，就需要有一定程度的突出，不然，一旦與圖片該區域的色彩融合或嚴重衝突，就會給整個介面的美觀度帶來負面效果。

這種型別的標籤大多數只用於資訊傳遞，並無對應的互動操作，分為動態和靜態兩種型別。

騰訊影片列表封面的標籤屬於動態，也就是通過後臺管理系統隨時對內容進行調整，可能今天是A標籤、明天就變成了B標籤、或者什麼都沒有，標籤的型別數量及樣式會有一定的控制，針對分類、功能、許可權類的標記非常實用。

京東的商品封面則是靜態標籤，為了體現出其質量、折扣、品牌等資訊，在處理圖片之初就將標籤融合，讓其成為圖片本身的一部分，不過會增加相應的製作成本。

相比前者，靜態標籤的使用方式非常靈活且不受系統的控制，對使用者的吸引力更強，對產品促銷、提高轉化率能起到很大的作用。

3. 商品列表標籤（多元化）

電商應用的產品列表主要為突出特色、賣點來進行促銷，型別及樣式比較多元化，且單個產品可能多達4~5個標籤，以此來吸引使用者購買。

以下圖淘寶、美團外賣列表為例，使用了線框、淺色底、深色底容器標籤以及銷量、費用型別的純文字標籤，樣式可單用、可混搭，形形色色的展示出了商品的各標籤資訊層級，無時不刻都在吸引著使用者的注意力。

四、標籤的設計（主產品列表）

1. 精煉

標籤作為輔助補充資訊的存在，不宜展示大段的內容，所以大家看到過的標籤基本都很短。簡短的標籤是在資訊表達清晰、使用者能足夠理解的前提下提煉出來的，我們這裡所說的精煉並非一味的求短，雖然“短”是標籤必備的因素，但有時候，過於簡短的標籤根本沒辦法給使用者傳達足夠的資訊，甚至會導致使用者更加疑惑，這也失去了新增標籤的初衷。

例如美團外賣列表，標籤都很簡短，但在用一句話形容、或使用者高質量的評價來表達店鋪特色時，這個標籤佔了整整一行的位置，並沒有進行特別的簡化。

下面是某購票平臺，標籤也很簡短，大部分能一看就懂，但有幾個就不一定了，“兌”是什麼意思？

可兌換火車票、還是購票後可以兌換其他禮品呢；“靜”又是代表什麼呢？乘車環境安靜、人員相對安靜還是需要乘客製造安靜？雖然我們花點時間也能猜出個七七八八，但這無疑增加了使用者的理解難度和時間成本。

2. 視覺突出

因為標籤本身比較小的原因，一般我們會透過配色來吸引使用者的注意，但面對不同的產品屬性，其色彩的表現形式也有很大的區別。

在騰訊影片中，採用的固定底色的容器標籤，旨在強調產品的特權屬性，視覺非常突出；而酷狗音樂採用的是黑色帶透明底、文字反白的標籤，僅僅作為輔助提示，對封面的干擾比較小、但依然能保持資訊的有效傳遞。

3. 一致性

同類型、同視覺權重的標籤應儘量保持一致，即便應對多元化，儘量只在色彩上作出調整，其容器的外觀形狀、字型字號仍需保持相同的屬性特徵，要讓使用者一看就知道這幾個標籤屬於同一種類別。

4. 差異性

上面說到了一致性，現在又說差異性，乍一看似乎是有衝突，其實不然。這裡的差異性是針對不同型別、不同視覺權重的標籤，需要透過不同的視覺樣式及色彩體現出資訊的層級關係。

例如：使用者在購買這個商品之前最想知道、且對使用者最有吸引力的標籤一定是最突出的，使用者掃一眼就能看到，根據視覺權重依次類推，最後是對使用者來說不是很重要、甚至沒有看到也不會有什麼影響的這類標籤弱化顯示。

五、結語

文中主要總結了標籤的作用、不同場景下的使用方式以及設計中的注意事項，不難看出，UI設計中的標籤跟我們日常生活中的標籤很相似，它不僅能對產品作分類、特色標記，還能在使用者猶豫不決的時候起到一定的推動作用，是平臺內部資訊導流和滿足使用者潛在需求過程中至關重要的一環。

標籤設計不應該是簡單的色塊+文字的堆疊，它應該與產品之間存在著某種潛在的關聯，需要針對不同的使用場景為產品量身定做，形成一套具備專業化的標籤體系。

好的標籤不僅能滿足上述提到的基本需求，還能在無形之中給予使用者經驗的感覺，一度超出使用者的預期，最終滿足產品的商業價值。

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力於產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾使用者帶來更好的體驗，即好看、好用。

本文原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議。