我之前寫(xiě)的文章都是關(guān)于某一個(gè)組件或者設(shè)計(jì)元素的使用總結(jié)，今天這篇文章是對(duì)產(chǎn)品中的標(biāo)記系統(tǒng)做的一個(gè)整理分析，里面涉及到的內(nèi)容比較雜，希望可以幫助到大家。

標(biāo)記系統(tǒng)

寫(xiě)這篇文章的緣由是我最近經(jīng)常在“餓了么”里點(diǎn)外賣(mài)，我發(fā)現(xiàn)一個(gè)店鋪有很多“標(biāo)簽”，每個(gè)標(biāo)簽帶有不同的意思?！靶隆贝磉@家店是剛開(kāi)的；“減”代表有滿減優(yōu)惠；“首”代表新用戶下單會(huì)立減消費(fèi)金額；“?！贝碓摰赇亝⒓恿恕巴赓u(mài)?！庇?jì)劃，食品安全有保障；“票”代表該商家支持開(kāi)發(fā)票等等。非常的復(fù)雜，我就問(wèn)我自己：如果我做的產(chǎn)品中有這么多的標(biāo)簽，我應(yīng)該怎么展示呢？為了解決這個(gè)問(wèn)題，我覺(jué)得有必要梳理一下產(chǎn)品中的標(biāo)記系統(tǒng)。

從這個(gè)角度來(lái)說(shuō)大家不知道標(biāo)記系統(tǒng)這很正常，因?yàn)檫@只是我為了表述方便而起的一個(gè)名字，你完全可以有自己的叫法。設(shè)計(jì)其實(shí)是一個(gè)包容性很強(qiáng)的行業(yè)，沒(méi)有所謂的非黑即白，非對(duì)即錯(cuò)。同樣的一個(gè)設(shè)計(jì)理念，每個(gè)人都有不同的叫法和理解。我所理解的標(biāo)記系統(tǒng)是為了滿足營(yíng)銷宣傳需要或者狀態(tài)發(fā)生變更而對(duì)特定內(nèi)容進(jìn)行標(biāo)記讓用戶能夠感知。如果你看不懂，沒(méi)關(guān)系，下面有詳細(xì)的介紹。

標(biāo)記系統(tǒng)里的幾個(gè)常見(jiàn)的設(shè)計(jì)元素有角標(biāo)、標(biāo)簽、紅點(diǎn)和印章。

角標(biāo)

角標(biāo)主要用于營(yíng)銷宣傳期間，提升用戶點(diǎn)擊率。例如最近圣誕節(jié)快到了，你要想重點(diǎn)宣傳一個(gè)產(chǎn)品，你可以使用角標(biāo)來(lái)吸引用戶注意力，加上“爆款”“折扣”“熱銷”等字眼。

在我看來(lái)，角標(biāo)是表現(xiàn)力最強(qiáng)的標(biāo)記元素。因?yàn)榻菢?biāo)一般會(huì)出現(xiàn)在界面的左上方和右上方，左上方的居多，而根據(jù)用戶的“Z”型瀏覽習(xí)慣，角標(biāo)很容易被用戶感知到，而且角標(biāo)一般都是面狀，更是可以很好的達(dá)到吸引用戶注意力的目的。

角標(biāo)的缺點(diǎn)在于一次只能出現(xiàn)一個(gè)，如果你的產(chǎn)品具有“爆品”“加價(jià)購(gòu)”“APP特惠”等多個(gè)賣(mài)點(diǎn)的時(shí)候，使用角標(biāo)就不太合適了。

當(dāng)然你如果非要用角標(biāo)來(lái)展示也不是不行，但是太過(guò)于擁擠。這個(gè)就涉及到信息優(yōu)先級(jí)排布的問(wèn)題，以上面的“餓了么”為例，如果我是這個(gè)平臺(tái)的設(shè)計(jì)師，我也會(huì)把“新店”做成角標(biāo)。因?yàn)榻菢?biāo)的對(duì)用戶的吸引力要更強(qiáng)一點(diǎn)，而我們必須通過(guò)這種強(qiáng)有力的宣傳來(lái)幫助新店度過(guò)剛開(kāi)張的時(shí)期。如果沒(méi)有這種保護(hù)措施，新店存活不下去，沒(méi)有新鮮血液注入，這個(gè)平臺(tái)早晚會(huì)玩完。

標(biāo)簽

標(biāo)簽Tag，主要用于標(biāo)記和選擇。標(biāo)簽與角標(biāo)相比表現(xiàn)力會(huì)弱點(diǎn)，但是它的優(yōu)勢(shì)在于可以同時(shí)展示多個(gè)，我剛才說(shuō)的那個(gè)例子就可以用標(biāo)簽來(lái)完成。而且不同的標(biāo)簽我們可以設(shè)置不同的背景色來(lái)加以區(qū)分。

此外用戶可以進(jìn)行點(diǎn)擊選擇，快速找到帶有同一標(biāo)簽的其他產(chǎn)品。所以標(biāo)簽不僅可以完成標(biāo)記任務(wù)，還可以起到一個(gè)信息篩選和分類的作用。

但是并不是每一個(gè)標(biāo)簽都是可以點(diǎn)擊的，因?yàn)橛脩敉ㄟ^(guò)標(biāo)簽去查看該分類的其他信息不一定通過(guò)點(diǎn)擊標(biāo)簽自身來(lái)完成，也可以通過(guò)其他篩選途徑來(lái)完成。

此外“可點(diǎn)擊”標(biāo)簽為了避免用戶誤操作必然會(huì)擠占更多的界面空間，所以說(shuō)不可點(diǎn)擊的標(biāo)簽是有存在意義的。而標(biāo)簽的樣式又跟按鈕很像，怎么設(shè)計(jì)出讓用戶知道“這是不可點(diǎn)擊”的標(biāo)簽是一個(gè)難題，我之前采用的方法是采用斷線，但是感覺(jué)效果不太好有更好想法的朋友可以留言交流。

紅點(diǎn)

我們俗稱的“(數(shù)字)紅點(diǎn)”其實(shí)專業(yè)術(shù)語(yǔ)是Badge，主要出現(xiàn)在按鈕、圖標(biāo)旁的數(shù)字或者狀態(tài)標(biāo)記。

紅點(diǎn)的最基礎(chǔ)的用法就是來(lái)展示新消息的數(shù)量，當(dāng)然你也可以自定義顯示數(shù)字以外的文本內(nèi)容。

我們還可以不加任何文本內(nèi)容，直接展示一個(gè)小紅點(diǎn)表示當(dāng)前狀態(tài)或者內(nèi)容發(fā)生變更。

其實(shí)對(duì)于小紅點(diǎn)的使用，我們一定要慎重。因?yàn)樾〖t點(diǎn)的工作原理就在于用戶心中對(duì)于和諧統(tǒng)一界面的追求，突然這里出現(xiàn)了一個(gè)紅點(diǎn)，所以總是會(huì)忍不住的想去點(diǎn)擊。我們可以適當(dāng)?shù)慕档托〖t點(diǎn)的尺寸，或者使用一些微動(dòng)效來(lái)緩解用戶的內(nèi)心對(duì)于這個(gè)小紅點(diǎn)的煩躁心理。

印章

印章主要用于表單內(nèi)信息的標(biāo)記。表單內(nèi)一般文本信息比較多，為了進(jìn)行凸顯我們可以使用印章樣式，而且因?yàn)楝F(xiàn)實(shí)生活中的印章所帶來(lái)的隱喻，用戶也很容易接受。

?組件層級(jí)

即使在同一款產(chǎn)品中，因?yàn)槭褂脠?chǎng)景和信息層級(jí)的不同，相同的組件會(huì)有多種不同的展示樣式。

以使用場(chǎng)景為例，同樣的一個(gè)群消息提醒，是否開(kāi)啟了免打擾模式的小紅點(diǎn)的樣式是不一樣的，這里主要的不同是背景色。

以信息層級(jí)為例，同樣的標(biāo)簽，在列表頁(yè)的樣式是面狀而詳情頁(yè)是線狀。關(guān)于這點(diǎn)我是這樣理解的，在產(chǎn)品列表頁(yè)面，你得通過(guò)這些“誘人”的標(biāo)簽把用戶吸引過(guò)來(lái)，當(dāng)用戶點(diǎn)擊進(jìn)入到詳情頁(yè)后，就沒(méi)有必要突出這些標(biāo)簽了。

總結(jié)

最后我們可以從使用場(chǎng)景的角度對(duì)這四個(gè)元素進(jìn)行一個(gè)梳理：

• 角標(biāo)：表現(xiàn)力最強(qiáng)，適合展示信息層級(jí)最高或者最重要的功能；
• 標(biāo)簽：常規(guī)標(biāo)記元素，適合展示不太重要且數(shù)目較多的功能；
• 小紅點(diǎn)：著重于展示狀態(tài)的變更；
• 印章：表單類多文本信息的標(biāo)記首選。

以上就是我對(duì)標(biāo)記系統(tǒng)做的一個(gè)總結(jié)，希望可以幫助到大家。

#專欄作家#

王M爭(zhēng)（微信公眾號(hào)：王M爭(zhēng)），人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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