關於Web/移動端新消息通知的設計

這是一個小紅點和小氣泡的故事。這兩個小東西極大地影響著廣大互聯網用戶的瀏覽路徑，而似乎這方面乾貨水文比較少。於是自謅一篇。

首先我們分析下，新消息到來後，產品是怎樣一步步引導用戶查看消息的。

a. 入口：從用戶登錄web或app開始，到進入消息列表頁之前，所有引導用戶點擊的btn、鏈接或卡片。引導路徑中可能包括多個步驟。小紅點和小氣泡通常出現在這些入口中。

b. 消息列表：即陳列消息的容器。可能是下拉框、也可能是頁面。小紅點和小氣泡也可能出現在這裡，用來標記是否已讀。

c. 相關詳情頁：這一步並非一定要有。想讓用戶耐心地經歷漫長的路徑點擊到某個內容詳情頁，內容本身必須對用戶來講是「值得」的。

1. 紅點或氣泡何時消失？

【對話型】消息，入口的紅點和氣泡可以點擊不消失。

聊天、私信、新評論等，這些與用戶個人息息相關的信息（在現實生活中就像人與人在對話），我們將其歸類為【對話型】消息。對這種類型的新消息，用戶只點擊a.入口，入口處的紅點與氣泡是不消失的，直到用戶從b消息列表點擊到c.相關詳情，整個路徑中的通知標記才消失。

為什麼呢？這種情況，用戶看到這樣的新消息，查看消息詳情的迫切性與目的性非常強，即使路徑稍長，也一定要點進去看看。只要在各個入口標記好清晰明顯的新消息提示，用戶的思考負擔並不重，不太會由於路徑長而產生煩躁的心情。另外，新消息的內容長度不可預知，光靠消息列表中提供的信息，用戶也是無法get到信息全貌的，自然而然願意進一步點擊到詳情頁查看。

例如微信朋友圈，巧妙地利用了這一點。（可以移步微信朋友圈路徑為什麼這麼深？ ）

除【對話型】消息外，最好點擊入口處項目則氣泡消失。

這種消息，更多的是為滿足產品商業目的而非用戶目標，葯太猛容易引發用戶反感。我們就進體會一下知乎的消息。ios知乎的「通知」也是如此。

再舉個有意思的栗子：網易雲音樂web端的消息處理，暖暖的，很貼心。

• 點擊進入消息中心裡，氣泡消失。用戶沒有閱讀新消息進入其他tab頁，消息中心的氣泡又恢復。極大緩解了焦慮。
• 點擊進入消息中心，二級菜單有4個項目，頁面優先跳轉有新消息的項目頁。

一個反例是，蝦米的消息中心。。。不說了，自行體會吧。

2. 何時用小紅點，何時用小氣泡？

我們都認可小紅點相比小氣泡大大降低了給用戶造成的焦慮感，同時也降低了點擊率。所以使用小紅點的場合可以歸結為：

• 重引導而不重通知的場合（例如前文里微信「發現」tab中的遊戲卡片）

• 重點傳達「有新內容」而忽略「有n條未讀內容」的場合

好了，最後再推薦一篇前人的文章，共勉。

Web網站通知系統設計
推薦閱讀：