作者：ethankdesign | 公眾號(hào)：RTK設(shè)計(jì)研究室

我們?cè)谠O(shè)計(jì)某一個(gè)頁(yè)面的時(shí)候，同時(shí)需要給頁(yè)面提取賣點(diǎn)增加標(biāo)簽。設(shè)計(jì)標(biāo)簽不難，但用好它就不容易了，很多設(shè)計(jì)同學(xué)可能會(huì)出現(xiàn)下面這幾種情況：

借鑒：別人加什么標(biāo)簽，咱就加什么標(biāo)簽；

順從：產(chǎn)品說(shuō)啥就是啥，老板說(shuō)啥就是啥，開(kāi)發(fā)說(shuō)啥就是啥；

腦殘粉：某文章某設(shè)計(jì)說(shuō)過(guò)某產(chǎn)品適合某種標(biāo)簽，這就是圣旨；

顏控：一切原因只因?yàn)楹每矗?/p>

霸道：別問(wèn)為什么，我現(xiàn)在只能想到這類樣式。

一個(gè)小小的標(biāo)簽就可以映射出設(shè)計(jì)領(lǐng)域里面的很多門道。想要做好標(biāo)簽，首先要正確認(rèn)識(shí)標(biāo)簽。

標(biāo)簽

標(biāo)簽是信息集合的一種方式，他給目標(biāo)確定關(guān)鍵詞，便于用戶查找與定位，而在 UI 中，作為事物抽象的定義，用于用戶標(biāo)記和算法識(shí)別。

1.傳達(dá)信息：傳達(dá)產(chǎn)品基本信息、優(yōu)惠信息、產(chǎn)品賣點(diǎn)，建立操作預(yù)知

在視覺(jué)層面上標(biāo)簽常用于傳達(dá)產(chǎn)品基本信息、優(yōu)惠信息、產(chǎn)品賣點(diǎn)等。對(duì)產(chǎn)品而言，它能優(yōu)化信息層級(jí)，又能簡(jiǎn)單明確的傳達(dá)產(chǎn)品特點(diǎn)；對(duì)用戶而言，可以第一時(shí)間獲取關(guān)鍵信息，降低用戶閱讀門檻。

此外標(biāo)簽也用于建立用戶操作預(yù)知，例如音頻標(biāo)簽、視頻標(biāo)簽等，讓用戶在點(diǎn)擊前預(yù)知點(diǎn)擊后的效果。

2. 關(guān)鍵詞標(biāo)簽：方便分類、優(yōu)化搜索

標(biāo)簽廣泛用于用戶區(qū)分產(chǎn)品內(nèi)容，進(jìn)行分類，進(jìn)而確定關(guān)鍵詞，優(yōu)化搜索。為用戶打上不同的標(biāo)簽，用于區(qū)分不同用戶群體，分類精準(zhǔn)定向推送產(chǎn)品，例如：考拉的搜索發(fā)現(xiàn)。

3. 營(yíng)銷引流：提升點(diǎn)擊率，增加轉(zhuǎn)化率

標(biāo)簽還可用于吸引用戶注意，建立好感，直擊對(duì)應(yīng)痛點(diǎn)，提升用戶購(gòu)買欲，提高點(diǎn)擊率與轉(zhuǎn)化率，最終促使用戶下單。例如電商類型的限時(shí)搶購(gòu)、京東自營(yíng)、美團(tuán)專送等。

4. 交互減步長(zhǎng)

標(biāo)簽也可作為搜索和關(guān)鍵字的存在，方便用戶跳轉(zhuǎn)到下級(jí)頁(yè)面，進(jìn)行流量分發(fā)，也方便用戶快速、直接的找到自己想要的相關(guān)產(chǎn)品，做到交互減步長(zhǎng)。

場(chǎng)景

標(biāo)簽樣式千千萬(wàn)萬(wàn)，各式標(biāo)簽要怎樣運(yùn)用到我們的產(chǎn)品中？下面一個(gè)案例，我們將一一為大家講解析。

美團(tuán)外賣是我們經(jīng)常使用的一款促銷型 APP，在美團(tuán)外賣 Feed 流頁(yè)面，美團(tuán)用不同樣式的標(biāo)簽將文字層級(jí)清晰的分級(jí)，讓用戶能立刻得到自己想看到的信息，從而達(dá)到首頁(yè)的分流，促使下單。

問(wèn)：

為什么美團(tuán)外賣會(huì)有不同類型的標(biāo)簽？

在標(biāo)簽的樣式中這些層級(jí)如何劃分？

不同類型的標(biāo)簽樣式都能很好的區(qū)分信息層級(jí)，降低用戶的閱讀門檻；

從視覺(jué)上，我們可以解答出來(lái)，色塊占比越大、飽和度明度越高的標(biāo)簽層級(jí)越高，所以可以得知：

問(wèn)：

當(dāng)我們得到這些模塊后，憑什么來(lái)給這些信息評(píng)判等級(jí)?

我們是否可以隨便將提取的信息進(jìn)行層級(jí)劃分呢？當(dāng)然不是。

下面我們將從用戶層面、產(chǎn)品層面、視覺(jué)層面 3 個(gè)方面為大家講解：

01.需求拆解

產(chǎn)品的角度：產(chǎn)品需要用戶能快速篩選信息，促使用戶下單

用戶的角度：用戶需要商品與自身相匹配，能快速找到需要的信息

02.需求分析

當(dāng)我們得到需求后，要如何去分析需求的重要程度？這里我們可以從用戶層面與產(chǎn)品層面分別去了解需求對(duì)用戶與產(chǎn)品的重要程度，在配合著 KANO 模型對(duì)需求進(jìn)行評(píng)分，根據(jù)最后分值對(duì)需求進(jìn)行視覺(jué)的層級(jí)排序。

? 從用戶層面去了解

大品牌（干凈健康、口碑可靠“3分”）

大品牌的入駐意味著平臺(tái)具備較強(qiáng)的可靠性，而且大品牌更注重口碑，食物一般會(huì)比較干凈、健康，用戶會(huì)放心的下單購(gòu)買

優(yōu)惠（優(yōu)惠力度的強(qiáng)弱“3分”）

當(dāng)我們確定平臺(tái)的可靠時(shí)，食蔬的干凈健康后，那么價(jià)格是否能接受，是否能最低的價(jià)格享受最好的食物也是吸引用戶下單的一點(diǎn)，如果一個(gè)大品牌的店鋪你可以用 60 元享受 8 斤小龍蝦，健康的食材、優(yōu)惠的價(jià)格也是決定著用戶下單的重要因素。

評(píng)論（優(yōu)質(zhì)的評(píng)論能很好的吸引用戶嘗試“2分”）

當(dāng)然不是所有的商戶都是比較知名的品牌，當(dāng)用戶撇開(kāi)品牌去了解一個(gè)新的店鋪，之前顧客的留言點(diǎn)評(píng)就起著很大一部分決定的因素，菜品是否新鮮干凈，口味是否美味，這都可以從之前顧客的評(píng)論中得出。

特色（保證用戶需求的前提下提供的驚喜服務(wù)“1分”）

特色意味著一些小的服務(wù)，比如：今日過(guò)生日，下單后老板多送一個(gè)小蛋糕一張小賀卡。之前抖音曾經(jīng)火過(guò)一段時(shí)間的視頻：點(diǎn)一份外賣，老板會(huì)按照用戶的需求畫一個(gè)動(dòng)漫小人物之類的。

如果在口味相差不多，價(jià)格差別不大的情況下，這些小的驚喜服務(wù)也是顧客喜愛(ài)的一點(diǎn)。

? 從產(chǎn)品層面去了解

大品牌（流量、提高用戶信任感“3分”）

大品牌入駐可以引入品牌的流量，也提升了用戶對(duì)平臺(tái)的信任感，提高用戶下單率。

評(píng)論（優(yōu)惠力度的強(qiáng)弱“3分”）

優(yōu)質(zhì)的評(píng)論對(duì)用戶來(lái)講真是真實(shí)可靠的，對(duì)于產(chǎn)品而言，優(yōu)質(zhì)的評(píng)論可以提高用戶的購(gòu)買率，提升店鋪的曝光度與店鋪對(duì)平臺(tái)的依賴度。良性的評(píng)論圈能讓平臺(tái)用最少的成本獲取最大的收入。

特色（提升用戶的重復(fù)購(gòu)買“2分”）

對(duì)產(chǎn)品而言，店鋪的特色服務(wù)能很好的挽留用戶，提升用戶的重復(fù)購(gòu)買率。

優(yōu)惠（平臺(tái)商家獲利少“1分”）

對(duì)于平臺(tái)商家而言越大的優(yōu)惠獲利越少，雖然用優(yōu)惠來(lái)吸引用戶是比較高效的，但是也是最下下之選。

當(dāng)我們從用戶層面和產(chǎn)品層面詳細(xì)的分析了需求后，在 KANO 模型上為需求打上分值，這樣我們就能在提升用戶滿意度的同時(shí)，完成產(chǎn)品的需求。

03.視覺(jué)展示

得到標(biāo)簽的成績(jī)區(qū)分后，我們需要在視覺(jué)層面上直接展示給用戶，讓用戶能直接的接受重要的信息。

當(dāng)然，標(biāo)簽樣式不僅僅是簡(jiǎn)單的色塊、描邊的疊加，還有樣式的疊加。比如為了更應(yīng)景，在旅游類 APP、購(gòu)票類 APP中。我們是否可以將標(biāo)簽樣式設(shè)計(jì)成實(shí)體票務(wù)的樣式，讓用戶有更有代入感，更能理解呢。

總 結(jié)

好的設(shè)計(jì)可以驅(qū)動(dòng)著數(shù)據(jù)，一個(gè)小小的標(biāo)簽也可以在無(wú)形中給用戶驚艷的感覺(jué)。本篇文章從認(rèn)識(shí)標(biāo)簽到需求分析，從信息分級(jí)到視覺(jué)設(shè)計(jì)進(jìn)行了統(tǒng)一的講解。

【認(rèn)識(shí)標(biāo)簽】

標(biāo)簽可以用于信息的傳達(dá)、建立操作預(yù)知，也可以幫用戶及產(chǎn)品進(jìn)行分類，也可以進(jìn)行營(yíng)銷分流與智能場(chǎng)景的運(yùn)用。

【標(biāo)簽視覺(jué)層級(jí)的劃分】

色塊占比越大，飽和度明度越高的標(biāo)簽層級(jí)越高，越能吸引用戶的注意；反之純文字型標(biāo)簽與灰色線框標(biāo)簽層級(jí)較低，用于點(diǎn)綴于輔助信息的傳遞。

【標(biāo)簽信息層級(jí)的劃分】

拿到需求后，不隨便的臨摹競(jìng)品，有理有據(jù)的使用 KANO模型進(jìn)行需求分析，得到用戶與產(chǎn)品想要的效果。

【視覺(jué)設(shè)計(jì)】

融入彩蛋型設(shè)計(jì)如：票務(wù)型圖形標(biāo)簽設(shè)計(jì)、飛豬品牌元素標(biāo)簽設(shè)計(jì)等等，讓設(shè)計(jì)更貼近品牌與生活。

生活是多元的，設(shè)計(jì)是也多元的，它不會(huì)朝著一個(gè)方向持續(xù)發(fā)展，它會(huì)發(fā)展成各種各樣的樣式。設(shè)計(jì)來(lái)源于生活，且豐富生活多彩的一面。

如何讓設(shè)計(jì)更為出彩，要看你站在什么角度去審視自己的設(shè)計(jì)。最后，希望本篇文章對(duì)你在標(biāo)簽設(shè)計(jì)上或者生活上有更多的幫助。