商家會(huì)做各種力度的促銷活動(dòng)。大家現(xiàn)在打開(kāi)APP會(huì)不會(huì)下意識(shí)會(huì)關(guān)注下標(biāo)簽Tag里的信息，比如電商類活動(dòng)，我們會(huì)關(guān)注有沒(méi)有折扣、活動(dòng)、高性價(jià)比的服務(wù)等等～
內(nèi)容類的會(huì)關(guān)注是否帶話題、發(fā)布人或是內(nèi)容的屬性；功能類的會(huì)關(guān)注類型選擇或者是相關(guān)引導(dǎo)操作。
其實(shí)不同用戶對(duì)不同平臺(tái)的標(biāo)簽感知度以及能夠投入的注意力是不同的。
比如大多用戶對(duì)
重消費(fèi)重決策
的電商產(chǎn)品標(biāo)簽的關(guān)注度要遠(yuǎn)遠(yuǎn)高于內(nèi)容型和功能型產(chǎn)品。但凡商品有優(yōu)惠，用戶火眼金睛一定會(huì)關(guān)注到，生怕錯(cuò)過(guò)一根羊毛；那這個(gè)情況下，用戶對(duì)標(biāo)簽的感知度是比較強(qiáng)的，樣式設(shè)計(jì)的相對(duì)突出用戶是不會(huì)太反感的。
而像偏瀏覽型的內(nèi)容產(chǎn)品，如果露出太多且太重，用戶可能會(huì)被打斷瀏覽動(dòng)線從而產(chǎn)生不好的使用體驗(yàn)。
所以不同類型產(chǎn)品，標(biāo)簽設(shè)計(jì)一定要適用于自身的產(chǎn)品調(diào)性。不違和且恰到好處的提醒用戶達(dá)成產(chǎn)品策略。
四、不同標(biāo)簽類型的使用與設(shè)計(jì)
一般對(duì)標(biāo)簽給出的定義是“用來(lái)進(jìn)行標(biāo)記和分類”。一是用于標(biāo)記事物的屬性和維度，二是進(jìn)行分類。
整體基于功能屬性和信息層級(jí)，將標(biāo)簽的樣式區(qū)分了多種樣式。由此拓展到移動(dòng)端我們?cè)谧鰳?biāo)簽的設(shè)計(jì)時(shí)可以以此作為參考。
5、預(yù)設(shè)狀態(tài)的標(biāo)簽
維基百科給出的定義是：標(biāo)簽是指貼在包裝或產(chǎn)品上的一張紙、塑料薄膜、布、金屬或其他材料，上面寫(xiě)有相關(guān)產(chǎn)品或物品的信息。衣服上的標(biāo)簽又稱吊牌，它通過(guò)繩子或長(zhǎng)條的塑料與衣服相連。
不管是誰(shuí)的定義，我們可以觀察到幾個(gè)關(guān)鍵詞，比如
“分類” “標(biāo)記” “相關(guān)信息” “向用戶展示” “警告用戶”
；通過(guò)幾個(gè)關(guān)鍵詞我們可以接著思考，標(biāo)簽為什么會(huì)被逐漸應(yīng)用到移動(dòng)產(chǎn)品當(dāng)中？其次標(biāo)簽在產(chǎn)品中又有那些分類呢？
從兩個(gè)維度來(lái)看：一是對(duì)于產(chǎn)品而言為什么需要展示標(biāo)簽【標(biāo)簽對(duì)產(chǎn)品實(shí)際產(chǎn)生的價(jià)值/收入？】；二是對(duì)于用戶而言為什么需要展示標(biāo)簽【用戶可以通過(guò)標(biāo)簽獲得什么價(jià)值/體驗(yàn)？】
我分別從電商產(chǎn)品、內(nèi)容產(chǎn)品、功能產(chǎn)品，看一看標(biāo)簽對(duì)于產(chǎn)品方和用戶方的作用是哪些。
1、通過(guò)
條件性讓利
使消費(fèi)者感到占了便宜，從而刺激消費(fèi)
提升轉(zhuǎn)化
，而標(biāo)簽就是吸引用戶注意力的抓手。
2、通過(guò)標(biāo)簽為用戶提供更多的
個(gè)性化推薦
，以及被搜索引擎和推薦系統(tǒng)發(fā)現(xiàn)和推薦，提升商品的
曝光率和銷量
。
1、及時(shí)通過(guò)標(biāo)簽識(shí)別關(guān)注并享受到優(yōu)惠，
薅的到羊毛
。
2、通過(guò)標(biāo)簽
獲得更多信息
。
產(chǎn)品側(cè)：
關(guān)注的更多是
內(nèi)容引流
，而標(biāo)簽則是用來(lái)
內(nèi)容歸類及提示用戶
的媒介。
用戶側(cè)：
通過(guò)標(biāo)簽來(lái)
識(shí)別判斷
優(yōu)質(zhì)的博主及內(nèi)容、或是感興趣且合適的內(nèi)容信息。
產(chǎn)品側(cè)：
關(guān)注的更多是
引導(dǎo)用戶操作
，而標(biāo)簽可以用來(lái)
信息傳遞和提示用戶
。
用戶側(cè)：
標(biāo)簽可以適時(shí)輔助用戶
高效完成任務(wù)
，快速獲取到信息且有一個(gè)較好的使用體驗(yàn)。
接下來(lái)還是從電商、內(nèi)容、功能這三大類產(chǎn)品來(lái)進(jìn)行標(biāo)簽種類的劃分，將其劃分為6種：
功能標(biāo)簽劃分為
篩選分類
和
內(nèi)容聚合
兩種。
內(nèi)容標(biāo)簽劃分為
話題、內(nèi)容屬性、內(nèi)容提煉、內(nèi)容彈幕 四種。
商品標(biāo)簽劃分為
品牌/平臺(tái)、促銷利益點(diǎn)、服務(wù)保障、物流時(shí)效 四種。
活動(dòng)標(biāo)簽劃分為
大促角標(biāo)、營(yíng)銷活動(dòng)、營(yíng)銷招手、榜單 四種。
價(jià)格標(biāo)簽劃分為
促銷價(jià)、專享價(jià) 兩種。
[促銷價(jià)] 指商品設(shè)置了促銷，這個(gè)價(jià)格就需要自動(dòng)計(jì)算并展示給消費(fèi)者，一般包含了補(bǔ)貼，滿減，預(yù)售，以及直降折扣等等。
[專享價(jià)] 指商品提供給某一些人群或某一個(gè)區(qū)域的價(jià)格，比如店鋪會(huì)員，平臺(tái)會(huì)員等
用戶標(biāo)簽劃分為
用戶交易行為、用戶身份屬性 兩種。
用戶交易行為是指用戶過(guò)往在平臺(tái)的一些購(gòu)買記錄、評(píng)論數(shù)據(jù)；而用戶身份屬性大多是指會(huì)員等級(jí)劃分。
上面了解了標(biāo)簽的定義、用處、分類，接下來(lái)再看看如何去進(jìn)行標(biāo)簽設(shè)計(jì)～
主要從
視覺(jué)維度
切入，拆分為三點(diǎn)來(lái)看：
標(biāo)簽的色彩、標(biāo)簽的形狀、標(biāo)簽的構(gòu)成
不同色彩、用色的面積/重量，給到用戶的感知以及品牌傳達(dá)是不同的。
不同產(chǎn)品的標(biāo)簽多采用 品牌色 延展應(yīng)用。比如，京東紅、知乎藍(lán)、豆瓣綠；當(dāng)然除了主要應(yīng)用自身的品牌色，依據(jù)品牌顏色映射以及業(yè)務(wù)自有顏色，也會(huì)延展出一些輔助色。
用色面積和重量，可以拆分五個(gè)維度去看分別是：區(qū)塊面積、描邊粗細(xì)、顏色飽和、字體、字重字色變化。
而標(biāo)簽用色面積主要依賴于標(biāo)簽想要
傳遞的信息及層級(jí)的劃分。
我拿電商產(chǎn)品舉例 （上圖由左往右分別是京東、淘寶、拼多多）：
對(duì)于用戶而言是
重要決策信息
時(shí)，一般會(huì)采用飽和較高的紅色進(jìn)行完全填充。
對(duì)于用戶而言是
次要決策信息
時(shí)，可采用正負(fù)形樣式。
對(duì)于用戶而言是
一般決策信息
時(shí)，可采用淺色描邊樣式。
對(duì)于用戶而言是
弱決策信息
時(shí)，可采用灰色描邊或者淡淺色拖底標(biāo)簽。
通過(guò)不同層次的顏色表達(dá)，來(lái)進(jìn)行整體內(nèi)容層級(jí)的劃分，并將多個(gè)信息有序的傳遞給用戶。以此去更好的承接產(chǎn)品策略。
標(biāo)簽的形狀決定了整體的 體積占比、對(duì)文字信息的承載包容 、與周邊環(huán)境的互相作用。
主要的標(biāo)簽形狀有方形、橢圓、氣泡、異形四種。
方形標(biāo)簽更接近現(xiàn)實(shí)生活中我們隨處可見(jiàn)的一些標(biāo)簽樣式，比如衣服上的標(biāo)簽、一些危險(xiǎn)警告標(biāo)簽，其次在頁(yè)面場(chǎng)景中較多標(biāo)簽排序時(shí)，方形標(biāo)簽顯得更
規(guī)整有序
。
橢圓標(biāo)簽，更圓潤(rùn)，隨著進(jìn)來(lái)各大APP推崇大圓角卡片的設(shè)計(jì)手法以來(lái)，一些
信息歸類
多用橢圓形標(biāo)簽表達(dá)。其次當(dāng)頁(yè)面多為方形標(biāo)簽時(shí)，一個(gè)橢圓標(biāo)簽恰恰能差異化突出該信息。
【需要注意的是，橢圓標(biāo)簽類似可操作的button，多用于可點(diǎn)擊或者選擇觸發(fā)的一些標(biāo)簽樣式】
氣泡標(biāo)簽有
明確的指向性
且
相對(duì)獨(dú)立
，多用在價(jià)格表達(dá)、營(yíng)銷招手以及一些新功能提示上。
異形標(biāo)簽一般形狀會(huì)更自由一些，設(shè)計(jì)師發(fā)揮的空間相對(duì)較大，用于表達(dá)較強(qiáng)業(yè)務(wù)屬性上，比如大促、營(yíng)銷活動(dòng)、
重點(diǎn)內(nèi)容引流
。因?yàn)樾螤畹牟町愋员磉_(dá)，用戶一般會(huì)首先注意到。
【正因?yàn)楫愋螛?biāo)簽形狀相對(duì)自由，因此需要注意與周邊環(huán)境的相互作用，當(dāng)異形標(biāo)簽放置在圖片上方時(shí)，我們要依據(jù)圖片的大小和圖片上方的信息，考量標(biāo)簽的樣式以及兩者之間的排版關(guān)系?！?/div>
標(biāo)簽的構(gòu)成主要是標(biāo)簽的組合表達(dá)，常規(guī)來(lái)看是一個(gè)框框里面一段文字，除此之外還有純文字表達(dá)、以及特殊樣式【文字+ICON】
純文字表達(dá)的應(yīng)用場(chǎng)景主要有兩種。
第一種在內(nèi)容產(chǎn)品中多表示話題，與前后內(nèi)容關(guān)聯(lián)，以此觸發(fā)用戶流入下一層內(nèi)容池。
第二種應(yīng)用在多產(chǎn)品中的次提醒內(nèi)容，比如商品的輔助信息、用戶的交易行為、或者文章的關(guān)鍵詞、作者屬性等。
這種一般可以劃分為三類，分別是常規(guī)樣式（獨(dú)立icon+標(biāo)簽字段）、正負(fù)形｜色塊區(qū)隔（獨(dú)立色塊強(qiáng)化展示icon）、修飾文字（文字作為主修飾元素展示）
我們可以發(fā)現(xiàn)，這三種類型的標(biāo)簽區(qū)塊面積的逐級(jí)增加，透?jìng)髂芰σ搽S之逐級(jí)增強(qiáng)。
此外這幾種結(jié)構(gòu)的標(biāo)簽主要應(yīng)用在
品牌/平臺(tái)、營(yíng)銷活動(dòng)、用戶身份、功能屬性。
不同的產(chǎn)品依據(jù)自身的調(diào)性和訴求會(huì)呈現(xiàn)出不同層級(jí)樣式的標(biāo)簽，盡管如此我們?cè)谠O(shè)計(jì)中始終要注意：
在保持整體表達(dá)手法統(tǒng)一的情況下尋找差異；除了基礎(chǔ)屬性的統(tǒng)一，還需要盡量和自身產(chǎn)品的設(shè)計(jì)手法保持一致。
標(biāo)簽雖然只是一個(gè)小小的視覺(jué)表達(dá)，TA可以是不同的形狀、大小、顏色，但卻很考量設(shè)計(jì)師是否能夠著眼于細(xì)節(jié)?；诋a(chǎn)品策略和用戶體驗(yàn)去設(shè)計(jì)，助力產(chǎn)品正向的提升轉(zhuǎn)化、有效的傳遞信息、友好的引導(dǎo)用戶操作、并能形成統(tǒng)一的設(shè)計(jì)體系。
總結(jié)下來(lái)有幾個(gè)關(guān)鍵點(diǎn)需要注意：
1、
明確標(biāo)簽的作用和用途：
在設(shè)計(jì)標(biāo)簽之前，設(shè)計(jì)師需要了解標(biāo)簽的作用和用途。有助于我們更好地選擇適當(dāng)?shù)臉邮?、顏色和位置?/div>
2、
選擇適當(dāng)?shù)念伾蜆邮剑?/div>
標(biāo)簽的顏色和樣式應(yīng)該與整個(gè)UI設(shè)計(jì)風(fēng)格保持一致，同時(shí)需要注意與其他元素的整體性和對(duì)比，確保標(biāo)簽易于辨認(rèn)和識(shí)別。一般情況下我們可以選擇相對(duì)突出的顏色，吸引用戶的注意力，但也要注意避免過(guò)多的顏色使用導(dǎo)致視覺(jué)混亂。
3、
考慮標(biāo)簽的位置和大?。?/div>
標(biāo)簽的位置和大小也非常重要，因?yàn)樗鼈儧Q定了標(biāo)簽的可見(jiàn)性和易用性。標(biāo)簽通常放置在內(nèi)容上方或下方，并且與內(nèi)容之間有一定的距離，以避免視覺(jué)混亂。標(biāo)簽的大小應(yīng)該根據(jù)其重要性和內(nèi)容長(zhǎng)度來(lái)確定，以確保標(biāo)簽的易讀性和易操作性。
4、
使用簡(jiǎn)潔明確的文本：
標(biāo)簽的文本應(yīng)該簡(jiǎn)明扼要，而且具有表達(dá)清晰、易懂的特點(diǎn)。
5、
確保標(biāo)簽的一致性和可預(yù)測(cè)性：
標(biāo)簽的一致性和可預(yù)測(cè)性是保證用戶體驗(yàn)的關(guān)鍵。它以避免用戶的困惑和誤解。例如，標(biāo)簽的樣式、位置和文本應(yīng)該在整個(gè)UI中保持一致，以便用戶更容易理解和使用。
