前言

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

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

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

更多小紅點設計干貨：

一、徽標數構成

1. 容器：承載內容的容器，一般由圓或圓角矩形等構成。
2. 內容：字符/圖標，通常表示未讀信息的數量或狀態。

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

二、徽標數類型

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

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

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

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

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

四、使用場景

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

1. 消息通知

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

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

淘寶-我的淘寶-個人訂單中，通過徽標數告知用戶不同狀態的訂單數量。

微博粉絲群，當設置消息免打擾后，徽標數從數字變為紅點提示。告知用戶粉絲群有新消息。

2. 營銷通知

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

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

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

3. 系統通知

系統消息以徽標數的形式，傳達給用戶。

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

四、設計要點

徽標數的設計要點有以下 5 點：

1. 一致性

當使用數字徽標時，徽標計數具有一致性，數字的計數僅統計數字的計數，不包含紅點數量。

如下圖抖音的消息徽標數統計。各個二級列表的徽標數量之和等于上一級徽標數量。

2. 連貫性

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

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

3. 合理使用

合理的使用可以避免用戶對徽標數產生免疫。

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

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

下圖 1 中，美團首頁金剛區，沒有業務模塊通過徽標數去提升業務的點擊率，做的相當克制。

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

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

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

4. 給用戶選擇的權利

針對于徽標數產生機制，有時候會產生過量的徽標計數，如何通過設計去平衡數量，這時候可以將選擇權交給用戶。

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

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

5. 創新形式

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

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

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

五、后記

有些 APP 做了一鍵清除未讀消息的功能，其目的是為了快捷解決用戶消除徽標數的使用場景，方便用戶。然而站在產品側來看：對消息的觸達不利，甚至會讓整個消息系統喪失作用。

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