起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識通知消息系統設計指南
編輯導語：消息與通知連接了用戶和系統，系統給予用戶反饋信息，進而推動用戶下一步操作的進行。那么，針對不同的業務場景與事項緊急程度，消息通知組件又應當有何差異化設計？本篇文章里，作者對消息通知設計進行了總結，一起來看一下。
一、前言
消息和通知作為系統和用戶之間交流的窗口，在用法上、表達上存在一定的規律，本文解答網頁端界面消息系統設計的如下問題：
- 常見的消息通知設計；
- 如何進行消息通知設計；
- 觸發通知的業務場景。
二、常見的消息通知組件和模板
在 Ant design 的設計系統里，消息和反饋組件并為「反饋」欄（查看詳情），涉及消息的組件有如下的內容：
警告提示（Alert ）、 全局提示（Message）、對話框（Modal）、通知提醒框（Modal）、氣泡確認框（Popcomfirm）、結果（Result），結合 TechUI 提供的業務模板，總結了以下常見的消息通知組件和模板：
以上的消息通知設計在設計的時遵循什么樣的規律，以下用一張圖來說明。
三、消息通知設計指南圖
根據消息反饋的強弱分為：高注意力、中注意力、低注意力；每個維度再從操作干預度 & 信息展示量作以下分類。
此圖試圖解答不同的通知設計組件/模板的使用場景，分為高注意力、中注意力和低注意力的場景，以及每個場景下不同組件信息量的大小和操作的干預度大小。
四、通知的使用場景和強弱排序
1. 高注意力的使用場景
- 【警報】需立即關注；
- 【錯誤】需立即采取措施；
- 【異?！肯到y等異常情況；
- 【確認】需要用戶確認才能進行。
在需要高注意力的場景下用戶必須對消息錯處反映才能繼續當前操作，操作干預度強。
使用頁面級獨占式布局的結果（Result）通知，告知用戶操作結論以及引導后續的操作；使用對話框和氣泡確認框讓用戶了解當前的系統情況，詢問和引導后續操作；表單校驗提示和全局提示告知用戶當前的異常場景，幫助用戶改正以繼續當前操作。
使用示例：
2. 中注意力的使用場景
- 【警告】無需立即采取措施；
- 【訊息】用戶操作的反饋及系統通知。
在中注意力的場景下，當消息出現時，用戶可以選擇性地繼續當前操作，也可以處理當前的消息，操作干預度中。
使用通知提示框（查看示例），可以在頁面中的邊緣位置彈出消息提示，后臺可以設置停留時長（當作為永久停留時并需要用戶操作確認，功能等同于對話框）；頁面的警告提示常用于在頁面的全局進行通知的展示，用戶可手動關閉。
使用示例：
3. 低注意力的使用場景
- 【信息性消息】無需立即采取措施；
- 【徽章】自上次互動后的新消息。
在低注意力的場景下，消息出現后采用弱提示，對用戶的當前操作幾乎不產生干擾。
此時，全局提示常用于成功狀態下的提示或跳轉狀態，幾秒后自動消失；徽章用于更新消息的狀態。
使用示例：
五、觸發通知的業務場景
通知的觸發場景存在于用戶之間以及系統和用戶之間。消息組件的設計選擇需要根據具體的業務場景來定，以下是通用的推薦情境。
例如，在以請求審批作為核心功能的應用系統，成功和失敗的通知可以采用「中注意力」的通知提示框和警告提示；若請求審批是附屬的功能，如，請求某人加入某項目成為訪客，則可以采用低注意力的通知方式，降低操作干擾度。
又如，釘釘的會議通知，采用了較強操作干預度的對話框請求確認，釘釘的即時消息通知用戶可以自定義設置是否在桌面展示消息，當不設置為桌面展示時，采用的是紅點徽章的表達方式。
六、通知設計原則
1. 提供明確指引
- 在用戶解決問題之前，錯誤消息不應消失；
- 避免僅通過將字段變為紅色來指示錯誤，色盲用戶難以辨認；
- 消息文本內容過多不建議采用懸浮通知中心。
2. 簡單高效
- 需要明確限制通知的標題和文案的字段數量；
- 避免無故打擾用戶的通知設計；
- 非持久性通知的持續時間不可過短，至少需要讓用戶閱讀完文本內容，適當情況下提供關閉功能；
- 通知文案簡明易懂，無歧義。
參考資料：
https://ant.design/docs/spec/research-message-and-feedback-cn
https://uxdesign.cc/toasts-or-snack-bars-design-organic-system-notifications-1236f2883023
https://www.toptal.com/designers/ux/notification-design
作者：梓美，螞蟻集團設計師
本文由 @Ant Design 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
