王M爭(zhēng)：今天這篇文章是對(duì)產(chǎn)品中的標(biāo)記系統(tǒng)做的一個(gè)整理分析，里面涉及到的內(nèi)容比較雜，希望可以幫助到大家。

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

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

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

下面詳細(xì)的介紹標(biāo)記系統(tǒng)里的幾個(gè)常見的設(shè)計(jì)元素，角標(biāo)、標(biāo)簽、紅點(diǎn)和印章。

角標(biāo)

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

在我看來，角標(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à)購」「APP特惠」等多個(gè)賣點(diǎn)的時(shí)候，使用角標(biāo)就不太合適了。

當(dāng)然，如果非要用角標(biāo)來展示也不是不行，但是太過于擁擠。這個(gè)就涉及到信息優(yōu)先級(jí)排布的問題，以上面的「餓了么」為例，如果我是這個(gè)平臺(tái)的設(shè)計(jì)師，我也會(huì)把「新店」做成角標(biāo)。因?yàn)榻菢?biāo)對(duì)用戶的吸引力要更強(qiáng)一點(diǎn)，而我們必須通過這種強(qiáng)有力的宣傳來幫助新店度過剛開張的時(shí)期。如果沒有這種保護(hù)措施，新店存活不下去，沒有新鮮血液注入，這個(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è)，我剛才說的那個(gè)例子就可以用標(biāo)簽來完成。而且不同的標(biāo)簽我們可以設(shè)置不同的背景色來加以區(qū)分。

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

但是并不是每一個(gè)標(biāo)簽都是可以點(diǎn)擊的，而標(biāo)簽的樣式又跟按鈕很像，怎么設(shè)計(jì)出讓用戶知道「這是不可點(diǎn)擊」的標(biāo)簽是一個(gè)難題，我之前采用的方法是斷線，但是感覺效果不太好，有更好想法的朋友可以留言交流。

紅點(diǎn)

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

紅點(diǎn)最基礎(chǔ)的用法就是來展示新消息的數(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)效來緩解用戶內(nèi)心對(duì)于這個(gè)小紅點(diǎn)的煩躁心理。

印章

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

組件層級(jí)

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

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

以信息層級(jí)為例，同樣的標(biāo)簽，在列表頁的樣式是面狀而詳情頁是線狀。關(guān)于這點(diǎn)我是這樣理解的，在產(chǎn)品列表頁面，你得通過這些「誘人」的標(biāo)簽把用戶吸引過來，當(dāng)用戶點(diǎn)擊進(jìn)入到詳情頁后，就沒有必要突出這些標(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é)，希望可以幫助到大家。

歡迎關(guān)注作者的微信公眾號(hào)：「王M爭(zhēng)」

「設(shè)計(jì)師必看！超全面的UI設(shè)計(jì)總結(jié)」

• 《最常見的Tab該怎么設(shè)計(jì)？》
• 《彈框體系總結(jié)：模態(tài)彈框和非模態(tài)彈框》
• 《最常見的日期選擇器，原來有這么多細(xì)節(jié)設(shè)計(jì)！》
• 《彈框體系總結(jié)：模態(tài)彈框和非模態(tài)彈框》
• 《超全面！UI設(shè)計(jì)中的字體配色方法總結(jié)》
• 《UI新手排版入門！最容易上手的6個(gè)排版套路》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com