起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何通過徽標數（紅點）提升通知易用性？
當產品想讓用戶知道TA有未讀消息或者未處理任務時，產品可以通過徽標數的提示，來讓用戶獲得直觀感知。不過雖然徽標數可以幫助提升曝光，在產品設計中，它卻不能隨便亂用。具體如何進行徽標數的相關設計，以提升通知易用性？一起來看看作者的分析和解讀吧。
一、前言
在 Nielsen Norman的十大可用性原則中第一條，系統可見性原則：保持界面的狀態可見、變化可見和內容可見。讓用戶知道發生了什么。
徽標數在系統可見方面扮演著重要角色。通過徽標數的提示讓用戶直觀的感受到系統的可見性，其目的是告知用戶有未讀的消息或有未處理的任務，當用戶完成后徽標數消失。
徽標數本是提升點擊率和曝光率的利器，然而有些產品卻將徽標數當作信息觸達的利器，隨意使用這件殺傷力武器，使得徽標數被濫用，造成用戶免疫，徽標數反而失去了本身的作用。
本文通過簡析徽標數設計，探討如何通過徽標數（紅點）提升通知易用性？
二、徽標數構成
- 容器：承載內容的容器，一般由圓或圓角矩形等構成。
- 內容：字符/圖標，通常表示未讀信息的數量或狀態。
如下圖所示，是幾種常見的徽標數類型。
三、徽標數類型
1）紅點徽標（Dot）
單純紅點，視覺強度較弱。多用于低重要度的提醒內容、功能、狀態或動態更新。
2）數字徽標（Digital）
有具體的數量，多用于IM消息對話通知。最大值根據不同場景顯示如99+或 999+。
3）文字徽標（Text）
有具體的引導文字，多用于吸引或引導用戶注意，文案簡單易懂。文字盡量少于 4 個字。
4）自定義徽標（Custom）
有自定義圖標或圖案，多用于較強的提醒內容、功能、狀態或動態更新。
由于不同機型的適配不同，需要注意最大字符，避免超出所在的范圍。如下圖所示：
四、使用場景
目前市面上的使用場景大致有以下3個方向：
1. 消息通知
消息本身具備數量，那么可以通過徽標數告知給用戶。
在微信tab 1通過徽標數告知用戶未讀消息條數，當用戶完成閱讀后，則徽標數量減少或消失，如下圖所示：
淘寶-我的淘寶-個人訂單中，通過徽標數告知用戶不同狀態的訂單數量。
微博粉絲群，當設置消息免打擾后，徽標數從數字變為紅點提示。告知用戶粉絲群有新消息。
2. 營銷通知
通過徽標數，傳達某種利益點，提升用戶有效曝光率和點擊率。
例如支付寶的基金，通過徽標數傳遞基金正確投資方式，立足長期，才能獲得更多收益。
滴滴通過徽標數告知用戶有超值券超值活動，提升用戶點擊率和成交轉化率。
3. 系統通知
系統消息以徽標數的形式，傳達給用戶。
如QQ的動漫列表，通過紅點提示用戶今日有獎勵可以領取。
五、設計要點
徽標數的設計要點有以下5點：
1. 一致性
當使用數字徽標時，徽標計數具有一致性，數字的計數僅統計數字的計數，不包含紅點數量。
如下圖抖音的消息徽標數統計。各個二級列表的徽標數量之和等于上一級徽標數量。
2. 連貫性
對于多層級徽標數，需要各個層級頁面具備一定的連貫性。
如支付寶紅點層級具備一定的連貫性，這樣可以很好地指導用戶到達指定的頁面。
3. 合理使用
合理的使用可以避免用戶對徽標數產生免疫。
蘋果的Human Interface Guidelines提到：最好的體驗是提供簡潔、信息豐富的通知。用戶打開通知以獲得快速更新，因此專注于簡潔地提供有價值的信息。
對于非IM場景，滿屏的徽標會給人帶來壓力且沒有重點。
下圖1中，美團首頁金剛區，沒有業務模塊通過徽標數去提升業務的點擊率，做的相當克制。
而圖2則滿屏的徽標數。每個業務模塊都想去強化提示，從而提升有效曝光率和點擊率，結果造成整個頁面沒有重點，甚至導致整體數據變差。
從通知的重要程度來考慮，可根據不同情況大致分為以下三個層次：
- 高關注度：強提醒或需要及時回應，這種情況常使用數字徽標。
- 中關注度：無需立即回復，較為重要的活動消息或營銷通知，這種情況常使用文字徽標或自定義徽標。
- 低關注度：不關注但需要偶爾查看，免打擾的消息通知或不太重要的營銷通知，這種情況下使用紅點。
4. 給用戶選擇的權利
針對于徽標數產生機制，有時候會產生過量的徽標計數，如何通過設計去平衡數量，這時候可以將選擇權交給用戶。
如下圖所示：隨著加的微信群越來越多，微信群消息也開始泛濫，對于有些群不重要的信息，用戶可以根據自身情況去設置消息免打擾，降低微信群消息轟炸。
如下圖所示：為了解決淘寶賣家對于用戶過度營銷，造成騷擾，淘寶設計了拒收功能。用戶點擊后即可屏蔽商家發送的消息，只有下次用戶主動和商家交流時，商家才能繼續發消息。
5. 創新形式
使用微動效的徽標可以增強用戶操作趣味性，提高關注度。對于信息的觸達有明顯的提升。當然也要適度避免濫用。
如下圖所示：京東和拼多多的徽標數動效既增強了趣味性又提升了關注度。
如下圖Dribbble上@Oleg Frolov的動效作品，下圖1 通過徽標數的發散增強了趣味性和關注度。圖2，文字在徽標數的容器輪播，使得更多信息的傳遞。
六、后記
有些APP做了一鍵清除未讀消息的功能，其目的是為了快捷解決用戶消除徽標數的使用場景，方便用戶。然而站在產品側來看：對消息的觸達不利，甚至會讓整個消息系統喪失作用。
如下圖：淘寶消息頂部做了一鍵清除未讀消息功能，而拼多多沒有做。
作者：Ruby；公眾號：ASAK設計（ID：ASAK_Design），ASAK設計團隊（Astro x Akira）
本文由 @ASAK設計 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
那幾個創新形式還挺有意思的誒，特別是那個八元，看著就很想點，滾動展示也是，本來不會注意的現在一定要看看究竟滾過去了什么
原來一個小小的徽標數也有這么多考究，有這么多作用，作者的內容很有幫助