前言

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

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

本文通過簡析徽標數(shù)設(shè)計，探討如何通過徽標數(shù)（紅點）提升通知易用性。

一、徽標數(shù)構(gòu)成

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

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

二、徽標數(shù)類型

紅點徽標（Dot）：單純紅點，視覺強度較弱。多用于低重要度的提醒內(nèi)容、功能、狀態(tài)或動態(tài)更新。

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

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

自定義徽標（Custom）：有自定義圖標或圖案，多用于較強的提醒內(nèi)容、功能、狀態(tài)或動態(tài)更新。

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

四、使用場景

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

1. 消息通知

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

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

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

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

2. 營銷通知

通過徽標數(shù)，傳達某種利益點，提升用戶有效曝光率和點擊率。

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

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

3. 系統(tǒng)通知

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

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

四、設(shè)計要點

徽標數(shù)的設(shè)計要點有以下 5 點：

1. 一致性

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

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

2. 連貫性

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

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

3. 合理使用

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

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

對于非 IM 場景，滿屏的徽標會給人帶來壓力且沒有重點。

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

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

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

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

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

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

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

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

5. 創(chuàng)新形式

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

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

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

五、后記

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

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

ASAK設(shè)計