標簽樣式設計或重或淺，單純來看僅僅是一個很小的視覺設計，但是對于用戶而言通過標簽可以更快獲得關鍵信息，對于產品/平臺而言，標簽也承載了一定的產品策略。

更多標簽設計干貨：

一、前言

前段時間將平臺不同版本的標簽進行梳理、并接入統一控件，以此達成整體標簽的統一和后續標簽的高效管理。在這個過程中我對標簽有了一些思考。

大家現在打開 APP 會不會下意識會看標簽 Tag 里的信息，比如電商類我們會關注有沒有折扣、活動、特殊服務；內容類的會關注是否帶話題、發布人或是內容的屬性；功能類的會關注類型選擇或者是相關引導操作。

其實不同用戶對不同平臺的標簽感知度以及能夠投入的注意力是不同的。

比如大多用戶對 重消費重決策的電商產品標簽的關注度要遠遠高于內容型和功能型產品。但凡商品有優惠，用戶火眼金睛一定會關注到，生怕錯過一根羊毛；那這個情況下，用戶對標簽的感知度是比較強的，樣式設計的相對突出用戶是不會太反感的。

而像偏瀏覽型的內容產品，標簽如果露出太多且太重，用戶可能會被打斷瀏覽動線從而產生不好的使用體驗。

所以不同類型產品，標簽設計一定要適用于自身的產品調性。不違和且恰到好處的提醒用戶達成產品策略。

二、標簽 Tag 的了解與思考

1. 標簽的定義

Ant Design 對標簽給出的定義是“用來進行標記和分類”。一是用于標記事物的屬性和維度，二是進行分類。

整體基于功能屬性和信息層級，Ant Design 將標簽的樣式區分了多種樣式。由此拓展到移動端我們在做標簽的設計時可以以此作為參考。

從 功能維度 來看分為 7 種，分別是：

1. 基本標簽
2. 動態添加和刪除
3. 添加動畫
4. 可選擇標簽
5. 預設狀態的標簽
6. 多彩標簽
7. 圖標按鈕

從 視覺維度 來看分為 5 種，分別是：

1. 灰色描邊
2. 透明度彩色
3. 透明度彩色+圖標
4. 實色彩色
5. 實色彩色+圖標

維基百科給出的定義是：標簽是指貼在包裝或產品上的一張紙、塑料薄膜、布、金屬或其他材料，上面寫有相關產品或物品的信息。衣服上的標簽又稱吊牌，它通過繩子或長條的塑料與衣服相連。

標簽有多種用途，①它向用戶展示相關產品的產地、制造商（例如品牌名稱）、用途、保質期等信息，其中部分或全部信息可能受法律規范，例如英國的食品法；②在許多國家/地區，毒藥或易燃液體等危險產品必須貼有警告標簽。

不管是 Ant Design 的定義還是維基百科的定義，我們可以觀察到幾個關鍵詞，比如 “分類” “標記” “相關信息” “向用戶展示” “警告用戶” ；通過幾個關鍵詞我們可以接著思考，標簽為什么會被逐漸應用到移動產品當中？其次標簽在產品中又有那些分類呢？

2. 為什么需要標簽？

從兩個維度來看：一是對于產品而言為什么需要展示標簽「標簽對產品實際產生的價值/收入？」；二是對于用戶而言為什么需要展示標簽「用戶可以通過標簽獲得什么價值/體驗？」

我分別從電商產品、內容產品、功能產品，看一看標簽對于產品方和用戶方的作用是哪些。

①電商產品

產品方：

通過 條件性讓利 使消費者感到占了便宜，從而刺激消費 提升轉化，而標簽就是吸引用戶注意力的抓手。

通過標簽為用戶提供更多的個性化推薦，以及被搜索引擎和推薦系統發現和推薦，提升商品的曝光率和銷量。

用戶方：

及時通過標簽識別關注并享受到優惠，薅到羊毛。

通過標簽獲得更多信息

②內容平臺

產品方：關注的更多是 內容引流，而標簽則是用來 內容歸類及提示用戶的媒介。

用戶方：通過標簽來識別判斷優質的博主及內容、或是感興趣且合適的內容信息。

③功能平臺

產品方：關注的更多是 引導用戶操作，而標簽可以用來信息傳遞和提示用戶。

用戶方：標簽可以適時輔助用戶高效完成任務。快速獲取到信息且有一個較好的使用體驗。

3. 標簽的分類

接下來還是從電商、內容、功能這三大類產品來進行標簽種類的劃分，將其劃分為 6 種：

1. 功能標簽
2. 內容標簽
3. 商品標簽
4. 活動標簽
5. 價格標簽
6. 用戶標簽

①功能標簽

功能標簽劃分為 篩選分類 和 內容聚合 兩種。

篩選分類 例子：“KEEP”的內容篩選及差異化設計“曬獎牌” 來引導用戶操作；豆瓣二級頁面將榜單劃分出時間和種類兩種維度來進行篩選 提升用戶體驗；

內容聚合 例子：“豆瓣”電影詳情頁將影片進行榜單歸類以此引流，“微信讀書”通過標簽形式將文章進行分類聚合，并差異化設計“Top200 總榜"，吸引用戶點擊進行內容引流。

②內容標簽

內容標簽劃分為 話題、內容屬性、內容提煉、內容彈幕 四種。

話題例子：“吃貨筆記”在內容 feeds 區將話題強化展示，吸引用戶點擊；“小紅書”在帖子的結尾處會打上多個話題來進行 內容引流，加強算法的機制。

內容屬性例子：“夸克”作文會在文章的上方打上該篇文章屬于句子還是文章以此劃分內容屬性；“淘寶”等電商平臺會在 feed 區打上直播、視頻的特殊標簽，以此 幫助用戶區分 內容屬性。

內容提煉例子：“美團買菜”評論區會將用戶評論提煉出幾個關鍵詞輔助用戶決策；“知乎”文章下方相關搜索以簡短標簽形式露出，提升屏效的同時保證更多內容的露出。

內容彈幕 例子：“百度知道”在博主回答區，將用戶評論以彈幕標簽的形式滾動展示出來，提高回答的熱度；“態棒”在商品詳情頁將用戶評論以彈幕形式滾動展示，輔助用戶決策加強轉化。

③商品標簽

商品標簽劃分為 品牌/平臺、促銷利益點、服務保障、物流時效四種。

品牌/平臺 例子：“美團買菜”在商品圖上加上品牌的標簽，加強商品給用戶的 品質保障「此處需注意放置在圖片上方的標簽需要額外注意圖版，避免圖版和標簽沖突，導致視覺混亂」；“淘寶”在商品 Feed 模塊如果是天貓平臺的商品則會加上天貓字樣的標簽以此區分。

促銷利益點 例子：“美團買菜“在商品區域會露出限量特價、買贈、滿減等利益點 刺激轉化；“淘寶”在商品區域露出官方立減 xx%刺激轉化。

服務保障 例子：“拼多多”“淘寶”等電商平臺均會在商品區域外露服務保障比如“買貴必賠、退貨包運費、降價補差”給足用戶安全感，刺激下單。

物流時效 例子：“美團買菜“將時效信息用主品牌色展示，強化產品核心價值時效快；“京東”同城業務在門詳頁面時效信息用標簽+字段的形式展示強化門店時效信息。

④活動標簽

活動標簽劃分為 大促角標、營銷活動、營銷招手、榜單 四種。

大促角標 例子：“京東”“淘寶”電商類產品在 618、雙十一雙十二都會在不同的場域下打上活動角標以此來做心智強化。

營銷活動 例子：“拼多多”“美團買菜”在商品區域會露出平臺策劃的不同緯度的營銷活動標簽，比如“低價、品牌秒殺、半價”等活動透傳。

營銷招手 例子：“美團買菜” “淘寶”在金剛類目區放置營銷招手，以此來進行 活動觸達和引流「注意，一個頁面放置招手數量需要控制，其次招手的動效不宜過多，以免過度分散用戶注意力，比如拿淘寶首頁舉例子，有三個招手展示，但只會有一個招手有動效露出。考慮到下方淘寶直播的動效及活動 banner 的輪播，限制了上方招手的動效，避免用戶信息過載」

榜單 例子：“美團買菜” “淘寶”在商品區域都會有品類榜單露出，一是給 商品背書刺激下單，二是進行同類商品引流給用戶更多選擇多維度提升轉化。

⑤價格標簽

價格標簽劃分為 促銷價、專享價 兩種。

[促銷價] 指商品設置了促銷，這個價格就需要自動計算并展示給消費者，一般包含了補貼，滿減，預售，以及直降折扣等等。

[專享價] 指商品提供給某一些人群或某一個區域的價格，比如店鋪會員，平臺會員等

促銷價例子：“淘特” “美團” “口碑” “盒馬”在商品價格采用不同的促銷形式，比如補貼、已省、折扣、直降等 刺激下單。

專享價例子 ：“淘寶” “美團” “美團買菜” “山姆會員”在商品區域會露出會員價格或折扣，以此 提升會員轉化和用戶留存。

⑥用戶標簽

用戶標簽劃分為 用戶交易行為、用戶身份屬性 兩種。

用戶交易行為是指用戶過往在平臺的一些購買記錄、評論數據；而用戶身份屬性大多是指會員等級劃分。

用戶交易行為 例子：“美團”“美團買菜”“美團外賣”“盒馬”在商品及評論區都會外露其它用戶的一些交易行為比如好評率、售賣次數等，說到底就是讓該商品看起來很受歡迎，達到 推銷商品 的目的。

用戶身份屬性 例子 ：“百度知道”在內容發布區個人信息旁展示會員等級以及平臺擬定的一些正向標簽，給予用戶 正向反饋 達成用戶一定的自我價值實現。“淘寶”在直播間展示用戶的等級，通過從眾心理刺激用戶觀看互動。 “大眾點評”通過用戶等級來 激勵用戶活躍，沉淀優質的點評內容。

上面了解了標簽的定義、用處、分類，接下來再看看如何去進行標簽設計～

三、如何設計標簽

主要從 視覺維度 切入，拆分為三點來看：標簽的形狀、標簽的色彩、標簽的構成

1. 標簽形狀

標簽的形狀決定了整體的 體積占比、對文字信息的承載包容 、 與周邊環境的互相作用。

主要的標簽形狀有方形、橢圓、氣泡、異形四種。

①方形標簽

方形標簽更接近現實生活中我們隨處可見的一些標簽樣式，比如衣服上的標簽、一些危險警告標簽，

其次在頁面場景中較多標簽排序時，方形標簽顯得更規整有序。

②橢圓標簽

橢圓標簽，更圓潤，隨著進來各大 APP 推崇大圓角卡片的設計手法以來，一些 信息歸類 多用橢圓形標簽表達。其次當頁面多為方形標簽時，一個橢圓標簽恰恰能差異化突出該信息（比如拼多多的百億補貼頻道商品模塊：平臺活動類及服務保障類標簽整體使用方形標簽，唯獨價格標簽是橢圓，差異化處理讓用戶能在一堆標簽內快速 get 優惠了多少價格）

「 需要注意的是，橢圓標簽類似可操作的 button，多用于可點擊或者選擇觸發的一些標簽樣式」

③氣泡標簽

氣泡標簽有 明確的指向性，且 相對獨立，多用在價格表達、營銷招手以及一些新功能提示上。

④異形標簽

異形標簽一般形狀會更自由一些，設計師發揮的空間相對較大，用于表達較強業務屬性上，比如大促、營銷活動、重點內容引流。因為形狀的差異性表達，用戶一般會首先注意到。

正因為異形標簽形狀相對自由，因此需要注意與周邊環境的相互作用，當異形標簽放置在圖片上方時，我們要依據圖片的大小和圖片上方的信息，考量標簽的樣式以及兩者之間的排版關系。

除此之外還需考慮與圖版的沖突，比如下圖左一左二，當圖版僅僅是 sku 的商品圖時，放置標簽是可行的，但是當圖版為充滿腰帶和利益點信息的右一右二時，盡量避免放置標簽，不然會降低用戶體驗，信息傳達的效率也會大大降低。

2. 標簽色彩

不同色彩、用色的面積/重量，給到用戶的感知以及品牌傳達是不同的。

①品牌色延展

不同產品的標簽多采用 品牌色 延展應用。比如，京東紅、知乎藍、豆瓣綠；當然除了主要應用自身的品牌色，依據品牌顏色映射以及業務自有顏色，也會延展出一些輔助色。

但電商類產品涉及到折扣優惠，標簽不約而同都會用紅色表達。比如得物、美團、美團買菜等「除了紅色的視覺突出、心理暗示、傳統節日用色，大家應該本能覺得紅色是電商類產品的主色調」

②用色面積/重量

用色面積和重量，可以拆分五個維度去看分別是：區塊面積、描邊粗細、顏色飽和、字體、字重字色變化。

而標簽用色面積主要依賴于標簽想要傳遞的信息及層級的劃分。

我拿電商產品舉例（下圖由左往右分別是京東、淘寶、拼多多）：

對于用戶而言是 重要決策信息時，一般會采用飽和較高的紅色進行完全填充。

對于用戶而言是次要決策信息時，可采用正負形樣式。

對于用戶而言是一般決策信息時，可采用淺色描邊樣式。

對于用戶而言是弱決策信息時，可采用灰色描邊或者淡淺色拖底標簽。

通過不同層次的顏色表達，來進行整體內容層級的劃分，并將多個信息有序的傳遞給用戶。以此去更好的承接產品策略。

3. 標簽構成

標簽的構成主要是標簽的組合表達，常規來看是一個框框里面一段文字，除此之外還有純文字表達、以及特殊樣式「文字+ICON」

常規樣式我就不贅述了，主要看看純文字表達、文字+ICON 這兩種。

①純文字表達

純文字表達的應用場景主要有兩種。

第一種在內容產品中多表示話題，與前后內容關聯，以此觸發用戶流入下一層內容池。

第二種應用在多產品中的次提醒內容，比如商品的輔助信息、用戶的交易行為、或者文章的關鍵詞、作者屬性等。

②ICON+文字

這種一般可以劃分為三類，分別是常規樣式（獨立 icon+標簽字段）、正負形｜色塊區隔（獨立色塊強化展示 icon）、修飾文字（文字作為主修飾元素展示）

我們可以發現，這三種類型的標簽區塊面積的逐級增加，透傳能力也隨之逐級增強。

此外這幾種結構的標簽主要應用在 品牌/平臺、營銷活動、用戶身份、功能屬性。

不同的產品依據自身的調性和訴求會呈現出不同層級樣式的標簽，盡管如此我們在設計中始終要注意

在保持整體表達手法統一的情況下尋找差異；除了基礎屬性的統一，還需要盡量和自身產品的設計手法保持一致。

舉個例子：觀察天貓的標簽設計，由于整體頁面的大圓角設計，在標簽的表達手法上也整體采用了相較于其它產品大一些的圓角（雖然依然存在各位頻道不統一，應該是還沒有完全 push 改動），但是這種統一的處理手法值得借鑒和學習。

四、總結

標簽雖然只是一個小小的視覺表達，TA 可以是不同的形狀、大小、顏色，但卻很考量設計師是否能夠著眼于細節。基于產品策略和用戶體驗去設計，助力產品正向的提升轉化、有效的傳遞信息、友好的引導用戶操作、并能形成統一的設計體系。

總結下來有幾個關鍵點需要注意

1. 明確標簽的作用和用途：在設計標簽之前，設計師需要了解標簽的作用和用途。有助于我們更好地選擇適當的樣式、顏色和位置。
2. 選擇適當的顏色和樣式：標簽的顏色和樣式應該與整個 UI 設計風格保持一致，同時需要注意與其他元素的整體性和對比，確保標簽易于辨認和識別。一般情況下我們可以選擇相對突出的顏色，吸引用戶的注意力，但也要注意避免過多的顏色使用導致視覺混亂。
3. 考慮標簽的位置和大小：標簽的位置和大小也非常重要，因為它們決定了標簽的可見性和易用性。標簽通常放置在內容上方或下方，并且與內容之間有一定的距離，以避免視覺混亂。標簽的大小應該根據其重要性和內容長度來確定，以確保標簽的易讀性和易操作性。
4. 使用簡潔明確的文本：標簽的文本應該簡明扼要，而且具有表達清晰、易懂的特點。
5. 確保標簽的一致性和可預測性：標簽的一致性和可預測性是保證用戶體驗的關鍵。它以避免用戶的困惑和誤解。例如，標簽的樣式、位置和文本應該在整個 UI 中保持一致，以便用戶更容易理解和使用。

以上是我對標簽的一些思考，希望對大家有幫助。