編輯導(dǎo)語：消息與通知連接了用戶和系統(tǒng)，系統(tǒng)給予用戶反饋信息，進(jìn)而推動用戶下一步操作的進(jìn)行。那么，針對不同的業(yè)務(wù)場景與事項緊急程度，消息通知組件又應(yīng)當(dāng)有何差異化設(shè)計？本篇文章里，作者對消息通知設(shè)計進(jìn)行了總結(jié)，一起來看一下。

一、前言

消息和通知作為系統(tǒng)和用戶之間交流的窗口，在用法上、表達(dá)上存在一定的規(guī)律，本文解答網(wǎng)頁端界面消息系統(tǒng)設(shè)計的如下問題：

• 常見的消息通知設(shè)計；
• 如何進(jìn)行消息通知設(shè)計；
• 觸發(fā)通知的業(yè)務(wù)場景。

二、常見的消息通知組件和模板

在 Ant design 的設(shè)計系統(tǒng)里，消息和反饋組件并為「反饋」欄（查看詳情），涉及消息的組件有如下的內(nèi)容：

警告提示（Alert ）、 全局提示（Message）、對話框（Modal）、通知提醒框（Modal）、氣泡確認(rèn)框（Popcomfirm）、結(jié)果（Result），結(jié)合 TechUI 提供的業(yè)務(wù)模板，總結(jié)了以下常見的消息通知組件和模板：

以上的消息通知設(shè)計在設(shè)計的時遵循什么樣的規(guī)律，以下用一張圖來說明。

三、消息通知設(shè)計指南圖

根據(jù)消息反饋的強(qiáng)弱分為：高注意力、中注意力、低注意力；每個維度再從操作干預(yù)度 & 信息展示量作以下分類。

此圖試圖解答不同的通知設(shè)計組件/模板的使用場景，分為高注意力、中注意力和低注意力的場景，以及每個場景下不同組件信息量的大小和操作的干預(yù)度大小。

四、通知的使用場景和強(qiáng)弱排序

1. 高注意力的使用場景

• 【警報】需立即關(guān)注；
• 【錯誤】需立即采取措施；
• 【異?！肯到y(tǒng)等異常情況；
• 【確認(rèn)】需要用戶確認(rèn)才能進(jìn)行。

在需要高注意力的場景下用戶必須對消息錯處反映才能繼續(xù)當(dāng)前操作，操作干預(yù)度強(qiáng)。

使用頁面級獨(dú)占式布局的結(jié)果（Result）通知，告知用戶操作結(jié)論以及引導(dǎo)后續(xù)的操作；使用對話框和氣泡確認(rèn)框讓用戶了解當(dāng)前的系統(tǒng)情況，詢問和引導(dǎo)后續(xù)操作；表單校驗提示和全局提示告知用戶當(dāng)前的異常場景，幫助用戶改正以繼續(xù)當(dāng)前操作。

使用示例：

2. 中注意力的使用場景

• 【警告】無需立即采取措施；
• 【訊息】用戶操作的反饋及系統(tǒng)通知。

在中注意力的場景下，當(dāng)消息出現(xiàn)時，用戶可以選擇性地繼續(xù)當(dāng)前操作，也可以處理當(dāng)前的消息，操作干預(yù)度中。

使用通知提示框（查看示例），可以在頁面中的邊緣位置彈出消息提示，后臺可以設(shè)置停留時長（當(dāng)作為永久停留時并需要用戶操作確認(rèn)，功能等同于對話框）；頁面的警告提示常用于在頁面的全局進(jìn)行通知的展示，用戶可手動關(guān)閉。

使用示例：

3. 低注意力的使用場景

• 【信息性消息】無需立即采取措施；
• 【徽章】自上次互動后的新消息。

在低注意力的場景下，消息出現(xiàn)后采用弱提示，對用戶的當(dāng)前操作幾乎不產(chǎn)生干擾。

此時，全局提示常用于成功狀態(tài)下的提示或跳轉(zhuǎn)狀態(tài)，幾秒后自動消失；徽章用于更新消息的狀態(tài)。

使用示例：

五、觸發(fā)通知的業(yè)務(wù)場景

通知的觸發(fā)場景存在于用戶之間以及系統(tǒng)和用戶之間。消息組件的設(shè)計選擇需要根據(jù)具體的業(yè)務(wù)場景來定，以下是通用的推薦情境。

例如，在以請求審批作為核心功能的應(yīng)用系統(tǒng)，成功和失敗的通知可以采用「中注意力」的通知提示框和警告提示；若請求審批是附屬的功能，如，請求某人加入某項目成為訪客，則可以采用低注意力的通知方式，降低操作干擾度。

又如，釘釘?shù)臅h通知，采用了較強(qiáng)操作干預(yù)度的對話框請求確認(rèn)，釘釘?shù)募磿r消息通知用戶可以自定義設(shè)置是否在桌面展示消息，當(dāng)不設(shè)置為桌面展示時，采用的是紅點(diǎn)徽章的表達(dá)方式。

六、通知設(shè)計原則

1. 提供明確指引

• 在用戶解決問題之前，錯誤消息不應(yīng)消失；
• 避免僅通過將字段變?yōu)榧t色來指示錯誤，色盲用戶難以辨認(rèn)；
• 消息文本內(nèi)容過多不建議采用懸浮通知中心。

2. 簡單高效

• 需要明確限制通知的標(biāo)題和文案的字段數(shù)量；
• 避免無故打擾用戶的通知設(shè)計；
• 非持久性通知的持續(xù)時間不可過短，至少需要讓用戶閱讀完文本內(nèi)容，適當(dāng)情況下提供關(guān)閉功能；
• 通知文案簡明易懂，無歧義。

參考資料：

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

作者：梓美，螞蟻集團(tuán)設(shè)計師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議