同一個(gè)頁(yè)面標(biāo)簽在不同設(shè)計(jì)師手中，會(huì)有千萬(wàn)種變化?？吹絼e人新設(shè)計(jì)的標(biāo)簽，有時(shí)你腦中就會(huì)閃現(xiàn)：“噢，原來(lái)標(biāo)簽還有這種樣式，為什么我沒(méi)想到呢？”而筆者就關(guān)注到了這一點(diǎn)，并進(jìn)一步介紹了UI中的標(biāo)簽使用方法。

為什么我們自己就想不到新的標(biāo)簽設(shè)計(jì)樣式呢？用了這么久的標(biāo)簽，你真的了解“它”嗎？

我們?cè)谠O(shè)計(jì)某一個(gè)頁(yè)面的時(shí)候，同時(shí)需要給頁(yè)面提取賣(mài)點(diǎn)增加標(biāo)簽。這時(shí)，很多設(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)楹每?/li>
• 霸道：別問(wèn)為什么，我現(xiàn)在只能想到這類樣式

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

一、標(biāo)簽

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

1. 傳達(dá)信息，建立操作預(yù)知

在視覺(jué)層面上標(biāo)簽常用于傳達(dá)產(chǎn)品基本信息、優(yōu)惠信息、產(chǎn)品賣(mài)點(diǎn)等。

對(duì)產(chǎn)品而言，它能優(yōu)化信息層級(jí)，又能簡(jiǎn)單明確地傳達(dá)產(chǎn)品特點(diǎn)；對(duì)用戶而言，可以第一時(shí)間獲取關(guān)鍵信息，降低用戶閱讀門(mén)檻。

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

2. 方便分類

標(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)銷引流

標(biāo)簽還可用于吸引用戶注意，建立好感，直擊對(duì)應(yīng)痛點(diǎn)，提升用戶購(gòu)買(mǎi)欲，提高點(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)外賣(mài)是我們經(jīng)常使用的一款促銷型 APP，在美團(tuán)外賣(mài) Feed 流頁(yè)面，美團(tuán)用不同樣式的標(biāo)簽將文字層級(jí)清晰的分級(jí)，讓用戶能立刻得到自己想看到的信息，從而達(dá)到首頁(yè)的分流，促使下單。

問(wèn)：

• 為什么美團(tuán)外賣(mài)會(huì)有不同類型的標(biāo)簽？
• 在標(biāo)簽的樣式中這些層級(jí)如何劃分？

1. 不同類型的標(biāo)簽樣式都能很好的區(qū)分信息層級(jí)，降低用戶的閱讀門(mén)檻。
2. 從視覺(jué)上，我們可以解答出來(lái)，色塊占比越大、飽和度明度越高的標(biāo)簽層級(jí)越高，所以可以得知：

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

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

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

1. 需求拆解

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

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

2. 需求分析

當(dāng)我們得到需求后，要如何去分析需求的重要程度？

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

從用戶層面去了解：

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

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

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

當(dāng)我們確定平臺(tái)的可靠時(shí)，食蔬的干凈健康后，那么價(jià)格是否能接受，是否能最低的價(jià)格享受最好的食物也是吸引用戶下單的一點(diǎn)。

如果一個(gè)大品牌的店鋪你可以用 60 元享受 8 斤小龍蝦，健康的食材、優(yōu)惠的價(jià)格也是決定著用戶下單的重要因素。

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

當(dāng)然不是所有的商戶都是比較知名的品牌，當(dāng)用戶撇開(kāi)品牌去了解一個(gè)新的店鋪，之前顧客的留言點(diǎn)評(píng)就起著很大一部分決定的因素。

菜品是否新鮮干凈、口味是否美味，這都可以從之前顧客的評(píng)論中得出。

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

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

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

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

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

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

（2）評(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)買(mǎi)率，提升店鋪的曝光度與店鋪對(duì)平臺(tái)的依賴度。良性的評(píng)論圈能讓平臺(tái)用最少的成本獲取最大的收入。

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

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

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

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

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

3. 視覺(jué)展示

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

當(dāng)然，標(biāo)簽樣式不僅僅是簡(jiǎn)單的色塊、描邊的疊加，它還可以用樣式的疊加來(lái)表現(xià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)一的講解。

1. 認(rèn)識(shí)標(biāo)簽

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

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

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

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

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

4. 視覺(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ì)上或者生活上有更多的幫助。

作者：EDC設(shè)計(jì)研究中心，公眾號(hào)：EDC設(shè)計(jì)研究中心

來(lái)源：
https://mp.weixin.qq.com/s/HnroU_etM5UP-MPoOibaoA

本文由 @EDC設(shè)計(jì)研究中心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議