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

一、前言

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

徽標(biāo)數(shù)在系統(tǒng)可見方面扮演著重要角色。通過徽標(biāo)數(shù)的提示讓用戶直觀的感受到系統(tǒng)的可見性，其目的是告知用戶有未讀的消息或有未處理的任務(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ù)反而失去了本身的作用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、使用場景

目前市面上的使用場景大致有以下3個方向：

1. 消息通知

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

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

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

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

2. 營銷通知

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

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

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

3. 系統(tǒng)通知

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

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

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

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

1. 一致性

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

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

2. 連貫性

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

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

3. 合理使用

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

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

對于非IM場景，滿屏的徽標(biāo)會給人帶來壓力且沒有重點(diǎn)。

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

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

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

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

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

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

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

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

5. 創(chuàng)新形式

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

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

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

六、后記

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

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