前言

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

· 常見(jiàn)的消息通知設(shè)計(jì)

· 如何進(jìn)行消息通知設(shè)計(jì)

· 觸發(fā)通知的業(yè)務(wù)場(chǎng)景

常見(jiàn)的消息通知組件和模板

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

警告提示（Alert ）、 全局提示（Message）、對(duì)話(huà)框（Modal）、通知提醒框（Modal）、氣泡確認(rèn)框（Popcomfirm）、結(jié)果（Result）。

結(jié)合 TechUI 提供的業(yè)務(wù)模板，總結(jié)了以下常見(jiàn)的消息通知組件和模板：

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

消息通知設(shè)計(jì)指南圖

根據(jù)消息反饋的強(qiáng)弱分為：高注意力、中注意力、低注意力；每個(gè)維度再?gòu)牟僮鞲深A(yù)度 & 信息展示量作以下分類(lèi)。

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

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

高注意力的使用場(chǎng)景

【警報(bào)】需立即關(guān)注

【錯(cuò)誤】需立即采取措施

【異常】系統(tǒng)等異常情況

【確認(rèn)】需要用戶(hù)確認(rèn)才能進(jìn)行

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

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

使用示例:

中注意力的使用場(chǎng)景

【警告】無(wú)需立即采取措施

【訊息】用戶(hù)操作的反饋及系統(tǒng)通知

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

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

使用示例:

低注意力的使用場(chǎng)景

【信息性消息】無(wú)需立即采取措施

【徽章】自上次互動(dòng)后的新消息

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

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

使用示例:

觸發(fā)通知的業(yè)務(wù)場(chǎng)景

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

例如，在以請(qǐng)求審批作為核心功能的應(yīng)用系統(tǒng)，成功和失敗的通知可以采用「中注意力」的通知提示框和警告提示；若請(qǐng)求審批是附屬的功能，如，請(qǐng)求某人加入某項(xiàng)目成為訪客，則可以采用低注意力的通知方式，降低操作干擾度。又如，釘釘?shù)臅?huì)議通知，采用了較強(qiáng)操作干預(yù)度的對(duì)話(huà)框請(qǐng)求確認(rèn)，釘釘?shù)募磿r(shí)消息通知用戶(hù)可以自定義設(shè)置是否在桌面展示消息，當(dāng)不設(shè)置為桌面展示時(shí)，采用的是紅點(diǎn)徽章的表達(dá)方式。 

通知設(shè)計(jì)原則

提供明確指引

· 在用戶(hù)解決問(wèn)題之前，錯(cuò)誤消息不應(yīng)消失

· 避免僅通過(guò)將字段變?yōu)榧t色來(lái)指示錯(cuò)誤，色盲用戶(hù)難以辨認(rèn)

· 消息文本內(nèi)容過(guò)多不建議采用懸浮通知中心

簡(jiǎn)單高效

· 需要明確限制通知的標(biāo)題和文案的字段數(shù)量

· 避免無(wú)故打擾用戶(hù)的通知設(shè)計(jì)

· 非持久性通知的持續(xù)時(shí)間不可過(guò)短，至少需要讓用戶(hù)閱讀完文本內(nèi)容，適當(dāng)情況下提供關(guān)閉功能

· 通知文案簡(jiǎn)明易懂，無(wú)歧義

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷    作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)