當(dāng)產(chǎn)品想讓用戶知道TA有未讀消息或者未處理任務(wù)時(shí)，產(chǎn)品可以通過(guò)徽標(biāo)數(shù)的提示，來(lái)讓用戶獲得直觀感知。不過(guò)雖然徽標(biāo)數(shù)可以幫助提升曝光，在產(chǎn)品設(shè)計(jì)中，它卻不能隨便亂用。具體如何進(jìn)行徽標(biāo)數(shù)的相關(guān)設(shè)計(jì)，以提升通知易用性？一起來(lái)看看作者的分析和解讀吧。

一、前言

在 Nielsen Norman的十大可用性原則中第一條，系統(tǒng)可見(jiàn)性原則：保持界面的狀態(tài)可見(jiàn)、變化可見(jiàn)和內(nèi)容可見(jiàn)。讓用戶知道發(fā)生了什么。

徽標(biāo)數(shù)在系統(tǒng)可見(jiàn)方面扮演著重要角色。通過(guò)徽標(biāo)數(shù)的提示讓用戶直觀的感受到系統(tǒng)的可見(jiàn)性，其目的是告知用戶有未讀的消息或有未處理的任務(wù)，當(dāng)用戶完成后徽標(biāo)數(shù)消失。

徽標(biāo)數(shù)本是提升點(diǎn)擊率和曝光率的利器，然而有些產(chǎn)品卻將徽標(biāo)數(shù)當(dāng)作信息觸達(dá)的利器，隨意使用這件殺傷力武器，使得徽標(biāo)數(shù)被濫用，造成用戶免疫，徽標(biāo)數(shù)反而失去了本身的作用。

本文通過(guò)簡(jiǎn)析徽標(biāo)數(shù)設(shè)計(jì)，探討如何通過(guò)徽標(biāo)數(shù)（紅點(diǎn)）提升通知易用性？

二、徽標(biāo)數(shù)構(gòu)成

1. 容器：承載內(nèi)容的容器，一般由圓或圓角矩形等構(gòu)成。
2. 內(nèi)容：字符/圖標(biāo)，通常表示未讀信息的數(shù)量或狀態(tài)。

如下圖所示，是幾種常見(jiàn)的徽標(biāo)數(shù)類型。

三、徽標(biāo)數(shù)類型

1）紅點(diǎn)徽標(biāo)（Dot）

單純紅點(diǎn)，視覺(jué)強(qiáng)度較弱。多用于低重要度的提醒內(nèi)容、功能、狀態(tài)或動(dòng)態(tài)更新。

2）數(shù)字徽標(biāo)（Digital）

有具體的數(shù)量，多用于IM消息對(duì)話通知。最大值根據(jù)不同場(chǎng)景顯示如99+或 999+。

3）文字徽標(biāo)（Text）

有具體的引導(dǎo)文字，多用于吸引或引導(dǎo)用戶注意，文案簡(jiǎn)單易懂。文字盡量少于 4 個(gè)字。

4）自定義徽標(biāo)（Custom）

有自定義圖標(biāo)或圖案，多用于較強(qiáng)的提醒內(nèi)容、功能、狀態(tài)或動(dòng)態(tài)更新。

由于不同機(jī)型的適配不同，需要注意最大字符，避免超出所在的范圍。如下圖所示：

四、使用場(chǎng)景

目前市面上的使用場(chǎng)景大致有以下3個(gè)方向：

1. 消息通知

消息本身具備數(shù)量，那么可以通過(guò)徽標(biāo)數(shù)告知給用戶。

在微信tab 1通過(guò)徽標(biāo)數(shù)告知用戶未讀消息條數(shù)，當(dāng)用戶完成閱讀后，則徽標(biāo)數(shù)量減少或消失，如下圖所示：

淘寶-我的淘寶-個(gè)人訂單中，通過(guò)徽標(biāo)數(shù)告知用戶不同狀態(tài)的訂單數(shù)量。

微博粉絲群，當(dāng)設(shè)置消息免打擾后，徽標(biāo)數(shù)從數(shù)字變?yōu)榧t點(diǎn)提示。告知用戶粉絲群有新消息。

2. 營(yíng)銷通知

通過(guò)徽標(biāo)數(shù)，傳達(dá)某種利益點(diǎn)，提升用戶有效曝光率和點(diǎn)擊率。

例如支付寶的基金，通過(guò)徽標(biāo)數(shù)傳遞基金正確投資方式，立足長(zhǎng)期，才能獲得更多收益。

滴滴通過(guò)徽標(biāo)數(shù)告知用戶有超值券超值活動(dòng)，提升用戶點(diǎn)擊率和成交轉(zhuǎn)化率。

3. 系統(tǒng)通知

系統(tǒng)消息以徽標(biāo)數(shù)的形式，傳達(dá)給用戶。

如QQ的動(dòng)漫列表，通過(guò)紅點(diǎn)提示用戶今日有獎(jiǎng)勵(lì)可以領(lǐng)取。

五、設(shè)計(jì)要點(diǎn)

徽標(biāo)數(shù)的設(shè)計(jì)要點(diǎn)有以下5點(diǎn)：

1. 一致性

當(dāng)使用數(shù)字徽標(biāo)時(shí)，徽標(biāo)計(jì)數(shù)具有一致性，數(shù)字的計(jì)數(shù)僅統(tǒng)計(jì)數(shù)字的計(jì)數(shù)，不包含紅點(diǎn)數(shù)量。

如下圖抖音的消息徽標(biāo)數(shù)統(tǒng)計(jì)。各個(gè)二級(jí)列表的徽標(biāo)數(shù)量之和等于上一級(jí)徽標(biāo)數(shù)量。

2. 連貫性

對(duì)于多層級(jí)徽標(biāo)數(shù)，需要各個(gè)層級(jí)頁(yè)面具備一定的連貫性。

如支付寶紅點(diǎn)層級(jí)具備一定的連貫性，這樣可以很好地指導(dǎo)用戶到達(dá)指定的頁(yè)面。

3. 合理使用

合理的使用可以避免用戶對(duì)徽標(biāo)數(shù)產(chǎn)生免疫。

蘋果的Human Interface Guidelines提到：最好的體驗(yàn)是提供簡(jiǎn)潔、信息豐富的通知。用戶打開通知以獲得快速更新，因此專注于簡(jiǎn)潔地提供有價(jià)值的信息。

對(duì)于非IM場(chǎng)景，滿屏的徽標(biāo)會(huì)給人帶來(lái)壓力且沒(méi)有重點(diǎn)。

下圖1中，美團(tuán)首頁(yè)金剛區(qū)，沒(méi)有業(yè)務(wù)模塊通過(guò)徽標(biāo)數(shù)去提升業(yè)務(wù)的點(diǎn)擊率，做的相當(dāng)克制。

而圖2則滿屏的徽標(biāo)數(shù)。每個(gè)業(yè)務(wù)模塊都想去強(qiáng)化提示，從而提升有效曝光率和點(diǎn)擊率，結(jié)果造成整個(gè)頁(yè)面沒(méi)有重點(diǎn)，甚至導(dǎo)致整體數(shù)據(jù)變差。

從通知的重要程度來(lái)考慮，可根據(jù)不同情況大致分為以下三個(gè)層次：

1. 高關(guān)注度：強(qiáng)提醒或需要及時(shí)回應(yīng)，這種情況常使用數(shù)字徽標(biāo)。
2. 中關(guān)注度：無(wú)需立即回復(fù)，較為重要的活動(dòng)消息或營(yíng)銷通知，這種情況常使用文字徽標(biāo)或自定義徽標(biāo)。
3. 低關(guān)注度：不關(guān)注但需要偶爾查看，免打擾的消息通知或不太重要的營(yíng)銷通知，這種情況下使用紅點(diǎn)。

4. 給用戶選擇的權(quán)利

針對(duì)于徽標(biāo)數(shù)產(chǎn)生機(jī)制，有時(shí)候會(huì)產(chǎn)生過(guò)量的徽標(biāo)計(jì)數(shù)，如何通過(guò)設(shè)計(jì)去平衡數(shù)量，這時(shí)候可以將選擇權(quán)交給用戶。

如下圖所示：隨著加的微信群越來(lái)越多，微信群消息也開始泛濫，對(duì)于有些群不重要的信息，用戶可以根據(jù)自身情況去設(shè)置消息免打擾，降低微信群消息轟炸。

如下圖所示：為了解決淘寶賣家對(duì)于用戶過(guò)度營(yíng)銷，造成騷擾，淘寶設(shè)計(jì)了拒收功能。用戶點(diǎn)擊后即可屏蔽商家發(fā)送的消息，只有下次用戶主動(dòng)和商家交流時(shí)，商家才能繼續(xù)發(fā)消息。

5. 創(chuàng)新形式

使用微動(dòng)效的徽標(biāo)可以增強(qiáng)用戶操作趣味性，提高關(guān)注度。對(duì)于信息的觸達(dá)有明顯的提升。當(dāng)然也要適度避免濫用。

如下圖所示：京東和拼多多的徽標(biāo)數(shù)動(dòng)效既增強(qiáng)了趣味性又提升了關(guān)注度。

如下圖Dribbble上@Oleg Frolov的動(dòng)效作品，下圖1 通過(guò)徽標(biāo)數(shù)的發(fā)散增強(qiáng)了趣味性和關(guān)注度。圖2，文字在徽標(biāo)數(shù)的容器輪播，使得更多信息的傳遞。

六、后記

有些APP做了一鍵清除未讀消息的功能，其目的是為了快捷解決用戶消除徽標(biāo)數(shù)的使用場(chǎng)景，方便用戶。然而站在產(chǎn)品側(cè)來(lái)看：對(duì)消息的觸達(dá)不利，甚至?xí)屨麄€(gè)消息系統(tǒng)喪失作用。

如下圖：淘寶消息頂部做了一鍵清除未讀消息功能，而拼多多沒(méi)有做。