起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識UI中的標(biāo)簽使用方法，看這篇文章就夠了
同一個(gè)頁面標(biāo)簽在不同設(shè)計(jì)師手中，會有千萬種變化?？吹絼e人新設(shè)計(jì)的標(biāo)簽，有時(shí)你腦中就會閃現(xiàn)：“噢，原來標(biāo)簽還有這種樣式，為什么我沒想到呢？”而筆者就關(guān)注到了這一點(diǎn)，并進(jìn)一步介紹了UI中的標(biāo)簽使用方法。
為什么我們自己就想不到新的標(biāo)簽設(shè)計(jì)樣式呢？用了這么久的標(biāo)簽，你真的了解“它”嗎？
我們在設(shè)計(jì)某一個(gè)頁面的時(shí)候，同時(shí)需要給頁面提取賣點(diǎn)增加標(biāo)簽。這時(shí)，很多設(shè)計(jì)同學(xué)可能會出現(xiàn)下面這幾種情況：
- 借鑒：別人加什么標(biāo)簽，咱就加什么標(biāo)簽
- 順從：產(chǎn)品說啥就是啥，老板說啥就是啥，開發(fā)說啥就是啥
- 腦殘粉：某文章某設(shè)計(jì)說過某產(chǎn)品適合某種標(biāo)簽，這就是圣旨
- 顏控：一切原因只因?yàn)楹每?/li>
- 霸道：別問為什么，我現(xiàn)在只能想到這類樣式
一個(gè)小小的標(biāo)簽就可以映射出設(shè)計(jì)領(lǐng)域里面的很多門道。想要做好標(biāo)簽，首先要正確認(rèn)識標(biāo)簽。
一、標(biāo)簽
標(biāo)簽是信息集合的一種方式，他給目標(biāo)確定關(guān)鍵詞，便于用戶查找與定位。而在UI中，它作為事物抽象的定義，用于用戶標(biāo)記和算法識別。
1. 傳達(dá)信息，建立操作預(yù)知
在視覺層面上標(biāo)簽常用于傳達(dá)產(chǎn)品基本信息、優(yōu)惠信息、產(chǎn)品賣點(diǎn)等。
對產(chǎn)品而言，它能優(yōu)化信息層級，又能簡單明確地傳達(dá)產(chǎn)品特點(diǎn)；對用戶而言，可以第一時(shí)間獲取關(guā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.?營銷引流
標(biāo)簽還可用于吸引用戶注意，建立好感，直擊對應(yīng)痛點(diǎn)，提升用戶購買欲，提高點(diǎn)擊率與轉(zhuǎn)化率，最終促使用戶下單。
例如電商類型的限時(shí)搶購、京東自營、美團(tuán)專送等。
4.?交互（交互減步長）
標(biāo)簽也可作為搜索和關(guān)鍵字的存在，方便用戶跳轉(zhuǎn)到下級頁面，進(jìn)行流量分發(fā)，也方便用戶快速、直接地找到自己想要的相關(guān)產(chǎn)品，做到交互減步長。
二、場景
標(biāo)簽樣式千千萬萬，各式標(biāo)簽要怎樣運(yùn)用到我們的產(chǎn)品中？下面一個(gè)案例，我們將一一為大家講解析。
美團(tuán)外賣是我們經(jīng)常使用的一款促銷型 APP，在美團(tuán)外賣 Feed 流頁面，美團(tuán)用不同樣式的標(biāo)簽將文字層級清晰的分級，讓用戶能立刻得到自己想看到的信息，從而達(dá)到首頁的分流，促使下單。
問：
- 為什么美團(tuán)外賣會有不同類型的標(biāo)簽？
- 在標(biāo)簽的樣式中這些層級如何劃分？
- 不同類型的標(biāo)簽樣式都能很好的區(qū)分信息層級，降低用戶的閱讀門檻。
- 從視覺上，我們可以解答出來，色塊占比越大、飽和度明度越高的標(biāo)簽層級越高，所以可以得知：
當(dāng)我們得到這些模塊后，憑什么來給這些信息評判等級？
我們是否可以隨便將提取的信息進(jìn)行層級劃分呢？當(dāng)然不是。
下面我們將從用戶層面、產(chǎn)品層面、視覺層面 3 個(gè)方面為大家講解：
1.?需求拆解
產(chǎn)品的角度：產(chǎn)品需要用戶能快速篩選信息，促使用戶下單。
用戶的角度：用戶需要商品與自身相匹配，能快速找到需要的信息。
2.?需求分析
當(dāng)我們得到需求后，要如何去分析需求的重要程度？
這里我們可以從用戶層面與產(chǎn)品層面分別去了解需求對用戶與產(chǎn)品的重要程度，在配合著KANO模型對需求進(jìn)行評分，根據(jù)最后分值對需求進(jìn)行視覺的層級排序。
從用戶層面去了解：
（1）大品牌（干凈健康、口碑可靠“3分”）
大品牌的入駐意味著平臺具備較強(qiáng)的可靠性，而且大品牌更注重口碑，食物一般會比較干凈、健康，用戶會放心的下單購買
（2）優(yōu)惠（優(yōu)惠力度的強(qiáng)弱“3分”）
當(dāng)我們確定平臺的可靠時(shí)，食蔬的干凈健康后，那么價(jià)格是否能接受，是否能最低的價(jià)格享受最好的食物也是吸引用戶下單的一點(diǎn)。
如果一個(gè)大品牌的店鋪你可以用 60 元享受 8 斤小龍蝦，健康的食材、優(yōu)惠的價(jià)格也是決定著用戶下單的重要因素。
（3）評論（優(yōu)質(zhì)的評論能很好的吸引用戶嘗試“2分”）
當(dāng)然不是所有的商戶都是比較知名的品牌，當(dāng)用戶撇開品牌去了解一個(gè)新的店鋪，之前顧客的留言點(diǎn)評就起著很大一部分決定的因素。
菜品是否新鮮干凈、口味是否美味，這都可以從之前顧客的評論中得出。
（4）特色（保證用戶需求的前提下提供的驚喜服務(wù)“1分”）
特色意味著一些小的服務(wù)，比如：今日過生日，下單后老板多送一個(gè)小蛋糕一張小賀卡。之前抖音曾經(jīng)火過一段時(shí)間的視頻：點(diǎn)一份外賣，老板會按照用戶的需求畫一個(gè)動漫小人物之類的。
如果在口味相差不多，價(jià)格差別不大的情況下，這些小的驚喜服務(wù)也是顧客喜愛的一點(diǎn)。
從產(chǎn)品層面去了解：
（1）大品牌（流量、提高用戶信任感“3分”）
大品牌入駐可以引入品牌的流量，也提升了用戶對平臺的信任感，提高用戶下單率。
（2）評論（優(yōu)惠力度的強(qiáng)弱“3分”）
優(yōu)質(zhì)的評論對用戶來講真是真實(shí)可靠的，對于產(chǎn)品而言，優(yōu)質(zhì)的評論可以提高用戶的購買率，提升店鋪的曝光度與店鋪對平臺的依賴度。良性的評論圈能讓平臺用最少的成本獲取最大的收入。
（3）特色（提升用戶的重復(fù)購買“2分”）
對產(chǎn)品而言，店鋪的特色服務(wù)能很好的挽留用戶，提升用戶的重復(fù)購買率。
（4）優(yōu)惠（平臺商家獲利少“1分”）
對于平臺商家而言越大的優(yōu)惠獲利越少，雖然用優(yōu)惠來吸引用戶是比較高效的，但是也是最下下之選。
當(dāng)我們從用戶層面和產(chǎn)品層面詳細(xì)的分析了需求后，在 KANO 模型上為需求打上分值，這樣我們就能在提升用戶滿意度的同時(shí)，完成產(chǎn)品的需求。
3.?視覺展示
得到標(biāo)簽的成績區(qū)分后，我們需要在視覺層面上直接展示給用戶，讓用戶能直接的接受重要的信息。
當(dāng)然，標(biāo)簽樣式不僅僅是簡單的色塊、描邊的疊加，它還可以用樣式的疊加來表現(xiàn)。
比如為了更應(yīng)景，在旅游類APP、購票類APP中，我們是否可以將標(biāo)簽樣式設(shè)計(jì)成實(shí)體票務(wù)的樣式，讓用戶有更有代入感，更能理解呢？
三、總結(jié)
好的設(shè)計(jì)可以驅(qū)動著數(shù)據(jù)，一個(gè)小小的標(biāo)簽也可以在無形中給用戶驚艷的感覺。本篇文章從認(rèn)識標(biāo)簽到需求分析，從信息分級到視覺設(shè)計(jì)進(jìn)行了統(tǒng)一的講解。
1.?認(rèn)識標(biāo)簽
標(biāo)簽可以用于信息的傳達(dá)、建立操作預(yù)知，也可以幫用戶及產(chǎn)品進(jìn)行分類，也可以進(jìn)行營銷分流與智能場景的運(yùn)用。
2.?標(biāo)簽視覺層級的劃分
色塊占比越大，飽和度明度越高的標(biāo)簽層級越高，越能吸引用戶的注意；反之純文字型標(biāo)簽與灰色線框標(biāo)簽層級較低，用于點(diǎn)綴于輔助信息的傳遞。
3.?標(biāo)簽信息層級的劃分
拿到需求后，不隨便的臨摹競品，有理有據(jù)的使用 KANO模型進(jìn)行需求分析，得到用戶與產(chǎn)品想要的效果。
4. 視覺設(shè)計(jì)
融入彩蛋型設(shè)計(jì)如：票務(wù)型圖形標(biāo)簽設(shè)計(jì)、飛豬品牌元素標(biāo)簽設(shè)計(jì)等等，讓設(shè)計(jì)更貼近品牌與生活。
生活是多元的，設(shè)計(jì)是也多元的，它不會朝著一個(gè)方向持續(xù)發(fā)展，它會發(fā)展成各種各樣的樣式。設(shè)計(jì)來源于生活，且豐富生活多彩的一面。
如何讓設(shè)計(jì)更為出彩，要看你站在什么角度去審視自己的設(shè)計(jì)。
最后，希望本篇文章對你在標(biāo)簽設(shè)計(jì)上或者生活上有更多的幫助。
作者：EDC設(shè)計(jì)研究中心，公眾號：EDC設(shè)計(jì)研究中心
來源：https://mp.weixin.qq.com/s/HnroU_etM5UP-MPoOibaoA
本文由 @EDC設(shè)計(jì)研究中心 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
kano模型是這個(gè)2個(gè)x和y軸？這不叫kano模型吧。。。