消息通知是連接系統(tǒng)和用戶的橋梁，然而對(duì)于不同系統(tǒng)來(lái)說(shuō)，如何設(shè)計(jì)消息組件，促進(jìn)用戶與系統(tǒng)的溝通呢？對(duì)于平臺(tái)中的用戶與用戶之間的溝通，我們又該采用哪些互動(dòng)方式呢？讓我們一起來(lái)看一看不同的消息組件有哪些，希望能幫助我們做出更好地B端設(shè)計(jì)。

消息通知在我們?cè)O(shè)計(jì)的過(guò)程當(dāng)中非常重要，因?yàn)樗鳛橄到y(tǒng)與用戶之間溝通的橋梁，能夠幫助我們提示用戶：“目前的操作狀態(tài)、系統(tǒng)的公告、用戶之間的互動(dòng)內(nèi)容”，而不同的消息內(nèi)容，我們需要使用不同的消息通知組件來(lái)進(jìn)行反饋，比如用戶與用戶之間的互動(dòng)應(yīng)該采取什么互動(dòng)方式？那我們就來(lái)說(shuō)說(shuō)消息通知組件的具體使用。

一、消息通知的定義丨具體有哪些組件是消息通知

我查閱了各大設(shè)計(jì)系統(tǒng)[1]，發(fā)現(xiàn)它們對(duì)于消息通知的定義都叫做“反饋”，即信息反饋給用戶的形式。而在其反饋的組件當(dāng)中，會(huì)包含有：全局提示（Message）、通知提醒框（Modal）、氣泡確認(rèn)框（Popcomfirm）、對(duì)話框（Modal）、抽屜（Drawer）、進(jìn)度條（Progress）、結(jié)果頁(yè)（Result）、加載中（Spin）、骨架屏（Skeleton）但由于組件太多，我們把系統(tǒng)當(dāng)中用到最多的 消息通知 部分單獨(dú)拿出來(lái)分析，剩余部分則放在最后去做解析。

對(duì)于反饋的內(nèi)容來(lái)說(shuō)，系統(tǒng)當(dāng)中會(huì)存在 正面、負(fù)面、普通 三種不同的反饋情緒，比如你的賬號(hào)已經(jīng)過(guò)期，對(duì)于系統(tǒng)來(lái)說(shuō)他就會(huì)提供一個(gè) 負(fù)面 的消息通知組件，因此我們會(huì)對(duì)消息通知的類型進(jìn)行一個(gè)簡(jiǎn)單的分類：

• 正向主要包含有：全局提示（Message）、通知提醒框（Modal）、氣泡確認(rèn)框（Popcomfirm）
• 負(fù)向主要包含有：警告提示（Alert ）、對(duì)話框（Modal）、通知提醒框（Modal）

當(dāng)然大家一定要記住，關(guān)于 正向 和 負(fù)向 的類型，它并不是絕對(duì)的，只是大多數(shù)情況下它的情緒與這個(gè)相關(guān)。

[1]查閱的設(shè)計(jì)系統(tǒng)包含：Element、Arco、Ant、Lightning…

二、消息通知的設(shè)計(jì)丨關(guān)于消息通知究竟有哪些

為了讓所有同學(xué)能夠快速直接的了解消息通知的設(shè)計(jì)形式，我們嘗試去“測(cè)評(píng)”，將目前的所有消息通知組件，然后按照：「操作干擾度、反饋消息的強(qiáng)弱、出現(xiàn)位置」三個(gè)維度來(lái)對(duì)消息通知進(jìn)行分類，從而得出消息通知設(shè)計(jì)當(dāng)中，它們的差別究竟在哪？

信息展示量：

信息展示量表示組件能夠承載多少信息內(nèi)容。因?yàn)椴煌慕M件它們的使用環(huán)境本身并不相同，我們可以通過(guò)原子[2]的劃分大致歸納為：圖標(biāo)、文本、鏈接、按鈕、容器差別

操作干擾度：

操作干擾度主要是 對(duì)用戶當(dāng)中操作會(huì)不會(huì)產(chǎn)生相應(yīng)干擾，比如一個(gè) 全局提示和一個(gè)對(duì)話框，它們對(duì)于用戶的影響程度是完全不一樣的，因此會(huì)使用干擾度進(jìn)行判斷。

當(dāng)然操作干擾度這個(gè)維度過(guò)于主觀，我們又將其細(xì)分為：持續(xù)時(shí)間、是否阻斷、信息來(lái)源 三個(gè)方面持續(xù)時(shí)間：用于表示這個(gè)組件在頁(yè)面當(dāng)中究竟需要停留多久時(shí)間，這樣能夠幫助我們判斷其干擾程度。是否阻斷：頁(yè)面當(dāng)中是否會(huì)出現(xiàn) 蒙層 用于阻斷用戶注意力。這也是判斷干擾程度的重要指標(biāo)。信息來(lái)源：這條內(nèi)容主要來(lái)自哪里，分為 系統(tǒng)、用戶 兩種來(lái)源方式。

出現(xiàn)位置：

這個(gè)組件究竟會(huì)在哪一個(gè)地方出現(xiàn)，主要考慮它們的呼出方式，以及對(duì)應(yīng)呈現(xiàn)內(nèi)容，能夠幫助我們快速理解。?

[2]原子設(shè)計(jì)理論：原理分析丨聊一聊原子設(shè)計(jì)，對(duì)頁(yè)面造成的影響

1. 全局提示丨 Message

全局提示在用戶執(zhí)行操作時(shí)，不會(huì)中斷當(dāng)前用戶操作的前提下，通知提示一條簡(jiǎn)短的消息。它在整個(gè)B端系統(tǒng)當(dāng)中使用的頻率非常的高，比如：我們?cè)谔顚懸粋€(gè)表單過(guò)后，就會(huì)收到全局提示；修改完一個(gè)信息過(guò)后，會(huì)收到一個(gè)全局提示。

而它在使用過(guò)程當(dāng)中會(huì)有以下幾個(gè)特點(diǎn)：

信息展示量：

全局提示只會(huì)展示：圖標(biāo)、容器、提示文字，相對(duì)來(lái)說(shuō)它展示的內(nèi)容較少，是一個(gè)非常簡(jiǎn)單的組件類型。

在實(shí)際工作當(dāng)中，因?yàn)樗鼉?nèi)容量少，更多提示用戶的便是正確的操作，比如 已添加成功、編輯成功、保存成功 等正向情緒。

操作干擾度：

關(guān)于干擾程度，我們剛才講到一共會(huì)有三個(gè)判斷依據(jù)，因此我就從這三個(gè)方面來(lái)去判斷具體提示的干擾程度。

• 持續(xù)時(shí)間：非常駐，一般3-5s即可消失
• 是否阻斷：否
• 信息來(lái)源：系統(tǒng)收到用戶操作后的提醒

出現(xiàn)位置：

全局提示因?yàn)槠鋬?nèi)容較少（圖標(biāo)+文字），因此很多時(shí)候需要出現(xiàn)在較為顯眼的位置。我們?cè)谑褂萌痔崾镜臅r(shí)候，基本上都會(huì)出現(xiàn)在頁(yè)面頂部居中的位置，通常距離頂部的距離為 40-60px 。這個(gè)位置大概率是頂部導(dǎo)航與頁(yè)面內(nèi)容的交匯處，不會(huì)影響用戶的使用。

注意事項(xiàng)：

關(guān)于注意事項(xiàng)，其實(shí)就是我們?cè)趯?shí)際工作當(dāng)中，還需要去考慮的一些小知識(shí)點(diǎn)，我們將其匯總到此：

（1）全局提示一共會(huì)有五種樣式類型，分為是：指南提示（Info）、普通提示（Normal）、成功提示（Success）、警示提示（ Warning）、失敗提示（ Error）。

這時(shí)候，認(rèn)真的同學(xué)可能會(huì)問(wèn)：“老師，你剛才講了全局提示不是表達(dá) 正面 的結(jié)果嗎？怎么還會(huì)出現(xiàn) 警告、失敗等信息呢？其實(shí)這個(gè)原因主要是“失敗也要分很多種，就像我們的失敗一樣 /偷笑”比如：“在一些小的操作時(shí)，你確實(shí)不能提供對(duì)應(yīng)的功能，就可以展示警告信息，如下圖”

（2）全局提示“一般”不會(huì)存在關(guān)閉入口，因?yàn)樗梢宰詣?dòng)消失，不提供給用戶關(guān)閉入口還會(huì)讓他知道，這個(gè)通知本身就會(huì)自動(dòng)消失。所以很多情況下可以忽略關(guān)閉入口這個(gè)選擇。

（3）關(guān)于它的停留時(shí)間，我們可以在設(shè)計(jì)系統(tǒng)當(dāng)中的 API 里進(jìn)行自定義，通常 3s – 5s 即可。在去做組件時(shí)，一定要去看組件的對(duì)應(yīng)開發(fā)文檔，了解這個(gè)組件究竟支持哪些自定義功能（拒絕被開發(fā)忽悠）

（4）全局提示在短時(shí)間內(nèi)，可以提升多次，多次提示時(shí)，按照先后順序從上往下進(jìn)行排列

2. 警告提示丨Alert

警告提示常駐于頁(yè)面中，用于表示持續(xù)性的提示信息。多用于危險(xiǎn)、警告、緊急 等負(fù)面情緒當(dāng)中。在實(shí)際工作當(dāng)中，因?yàn)樗奶厥庑?，一般?huì)用在 系統(tǒng)、全局 性的危險(xiǎn)通知上。比如你的訂閱時(shí)間已超時(shí)、賬號(hào)團(tuán)隊(duì)即將解散等通知上。

信息展示量：

這里警告提示會(huì)比全局提示展示的信息更多，它主要包含：圖標(biāo)、提示文字、輔助文字、按鈕、關(guān)閉入口

操作干擾度：

• 持續(xù)時(shí)間：常駐，需用戶點(diǎn)擊關(guān)閉后才會(huì)消失
• 是否阻斷：否
• 信息來(lái)源：系統(tǒng)收到用戶操作后的提醒

警告提示的常用場(chǎng)景：多用于警告、危險(xiǎn)等情況，需要提醒用戶，引起他們的注意。比如提示欠費(fèi)、需要充值

出現(xiàn)位置：

因?yàn)槠湫枰ｑv，所以通常在設(shè)計(jì)時(shí)候，我們會(huì)將它放在模塊與模塊之間，進(jìn)行展示。這樣既不會(huì)影響到其他內(nèi)容呈現(xiàn)，同時(shí)自己又能常駐。

注意事項(xiàng)：

• 全局提示主要呈現(xiàn) 警告、緊急的消息通知，如果想通知一些普通消息，完全可以使用 通知提醒框 來(lái)進(jìn)行提示。
• 全局提示主要是在 模塊與模塊之間 去做呈現(xiàn)。

3. 通知提醒框丨 Notification

通知提醒框在頁(yè)面當(dāng)中，主要是以互動(dòng)的消息為主，全局展示通知提醒，將信息及時(shí)有效的傳達(dá)給用戶。在實(shí)際的工作當(dāng)中， 通知提醒框主要用來(lái)提示互動(dòng)等有價(jià)值的信息。

信息展示量：

這里通知提示框主要包含：標(biāo)題、輔助文字、按鈕、關(guān)閉入口

操作干擾度：

• 持續(xù)時(shí)間：常駐 / 3-5s消失
• 是否阻斷：否
• 信息來(lái)源：用戶與用戶之間的互動(dòng)、系統(tǒng)通知

出現(xiàn)位置：

在整個(gè)通知提醒框的使用過(guò)程中，因?yàn)樗旧砭褪桥c用戶之間的互動(dòng)所產(chǎn)生的，而這種活動(dòng)就如同在桌面端當(dāng)中你收到的消息，我們會(huì)將其歸納到右上角的位置去做呈現(xiàn)。這樣既不會(huì)太影響用戶，同時(shí)也能夠保證消息通知的及時(shí)性。

4. 氣泡確認(rèn)框丨Popconfirm

氣泡確認(rèn)框是我們?cè)诠ぷ鳟?dāng)中使用頻率相對(duì)較低的組件。它能夠通過(guò)組件當(dāng)中的卡片，完成與用戶的快捷對(duì)話，但是由于在實(shí)際的場(chǎng)景當(dāng)中，對(duì)話確認(rèn)是需要強(qiáng)提示的方式，因此總感覺(jué)氣泡確認(rèn)框在它的使用上，有著些許矛盾。氣泡卡片輕量、不易干擾用戶，但是對(duì)話框要求阻斷意味更強(qiáng)。

信息展示量：

首先我們從信息展示量來(lái)說(shuō)，氣泡確認(rèn)框主要由 觸發(fā)器、氣泡卡片、圖標(biāo)、文本、按鈕操作，五部分組成。

在設(shè)計(jì)時(shí)需要格外注意，氣泡確認(rèn)框本身不能夠過(guò)于復(fù)雜，否則在一個(gè)氣泡卡片當(dāng)中，就顯得格外擁擠。如果信息過(guò)多，就考慮使用 對(duì)話框 來(lái)進(jìn)行呈現(xiàn)與優(yōu)化

操作干擾度

• 持續(xù)時(shí)間：用戶點(diǎn)擊觸發(fā)器后才能展示，操作過(guò)后即可消失。
• 是否阻斷：否（氣泡卡片不會(huì)存在阻斷的情況）
• 出現(xiàn)位置：跟隨觸發(fā)器位置進(jìn)行呼出，通常會(huì)在觸發(fā)器的上方來(lái)進(jìn)行展示，如果觸發(fā)器位置靠近邊緣，則考慮移動(dòng)到其他位置進(jìn)行調(diào)整。

5. 對(duì)話框丨Modal

對(duì)話框在整個(gè)系統(tǒng)當(dāng)中非常重要，因?yàn)槟銜?huì)發(fā)現(xiàn)在整個(gè)系統(tǒng)當(dāng)中或多或少都會(huì)有它的身影，比如一個(gè)常見(jiàn)的數(shù)據(jù)錄入表單，它的整體感覺(jué)和對(duì)話框較為類似；又或者是 一個(gè)穿梭框，你會(huì)發(fā)現(xiàn)也有異曲同工之處，因此我們先來(lái)看一下對(duì)話框究竟是什么？

對(duì)話框主要用于信息確認(rèn)與信息錄入，使用對(duì)話框會(huì)中斷用戶當(dāng)前的任務(wù)流程，同時(shí)會(huì)對(duì)用戶造成些許干擾，因此在使用的時(shí)候，我們都需要非常謹(jǐn)慎。

操作干擾度：

• 持續(xù)時(shí)間：常駐，需要操作完信息后，點(diǎn)擊提交才會(huì)消失
• 是否阻斷：是，通過(guò)黑色蒙層的方式，讓用戶聚焦于表單內(nèi)部
• 信息來(lái)源：根據(jù)預(yù)設(shè)的內(nèi)容，進(jìn)行展示
• 出現(xiàn)位置：位于整個(gè)頁(yè)面的中部，主要目的能夠讓用戶聚焦于內(nèi)容，減少分心。因?yàn)閷?duì)話框的出現(xiàn)，用戶必須操作完對(duì)應(yīng)信息過(guò)后才能夠進(jìn)入到下一個(gè)環(huán)節(jié)， 因此它在整個(gè)流程當(dāng)中非常重要。

對(duì)話框的類型：

在整個(gè)對(duì)話框的展示當(dāng)中，你會(huì)發(fā)現(xiàn)它主要分為三部分，分別是 Header 標(biāo)題位、Content 內(nèi)容部分、Footer 底部操作位，而在這三個(gè)部分所組成的內(nèi)容當(dāng)中。

其中由于它的用途不同，我們可以將其簡(jiǎn)單的分類為：確認(rèn)對(duì)話框、消息提示對(duì)話框、功能業(yè)務(wù)對(duì)話框

確認(rèn)對(duì)話框：展示對(duì)內(nèi)容信息的二次確認(rèn)，這樣能夠減少用戶的誤操作，降低操作風(fēng)險(xiǎn)。主要差別是內(nèi)容部分以操作過(guò)程會(huì)出現(xiàn)的問(wèn)題為主，來(lái)進(jìn)行展示。其本質(zhì)就是一個(gè)二次確認(rèn)的過(guò)程，需要用戶去做出判斷，它要比 氣泡確認(rèn)框 更加重要，阻斷性也更強(qiáng)。

消息提示對(duì)話框：展示對(duì)應(yīng)的狀態(tài)提示，比如當(dāng)你刪除掉一個(gè)知識(shí)庫(kù)過(guò)后，這種重要操作時(shí)，我可以通過(guò)消息提示對(duì)話框來(lái)將成功或者失敗的消息展示給你，并且也能夠讓用戶知道問(wèn)題究竟出現(xiàn)在哪里。其本質(zhì)就是一個(gè)消息狀態(tài)通知，只是更為重要。

功能業(yè)務(wù)對(duì)話框：將 Content 內(nèi)容部分進(jìn)行優(yōu)化，用于展示更多復(fù)雜信息，比如 各種復(fù)雜信息錄入（輸入框、單選、多選…）以及各種信息呈現(xiàn)，它能夠通過(guò)功能業(yè)務(wù)對(duì)話框，去完成很多業(yè)務(wù)要求。

同時(shí)使用彈窗[3]的形式，能夠幫助我們不脫離當(dāng)前業(yè)務(wù)的前提下完成更多操作。當(dāng)然在實(shí)際工作當(dāng)中你會(huì)發(fā)現(xiàn)，它能夠承載的內(nèi)容是非常多的，比如步驟條、Tab 標(biāo)簽、各種選擇錄入，因此我認(rèn)為這種類型的對(duì)話框本質(zhì)上就是一個(gè) 容器，可以去承載很多內(nèi)容。更多注意事項(xiàng)就是彈窗部分的內(nèi)容，比如尺寸寬度究竟是多少、高度為多少，是否有蒙層等等。

三、幾個(gè)組件的差異對(duì)比丨了解組件的差別

為了讓同學(xué)們能夠快速了解這幾個(gè)組件之間的差別，我們嘗試把剛才提到的這么多組件進(jìn)行相應(yīng)的對(duì)比，分析一下其中差異點(diǎn)。

全局提示與警告提示

首先這兩個(gè)組件在設(shè)計(jì)樣式上是非常相似的，并且本身使用環(huán)境差距不大，因此很容易把這兩個(gè)組件進(jìn)行混淆。其實(shí)我們可以從多個(gè)方面去進(jìn)行對(duì)比區(qū)分：

1. 全局提示不建議使用關(guān)閉入口
2. 全局提示優(yōu)先級(jí)更低，主要提示非緊急通知；警告提示則提示更多緊急需要用戶立馬操作的通知
3. 全局提示會(huì)停留 3-5s 后自動(dòng)消失；警告提示則需要操作后消失

氣泡確認(rèn)框與對(duì)話框之間的差別

這兩個(gè)組件之間，同為用戶二次確認(rèn)的組件類型，但在實(shí)際的業(yè)務(wù)當(dāng)中有著重要級(jí)之間的關(guān)系。

1. 氣泡確認(rèn)框相對(duì)適合阻斷流程意味不強(qiáng)的情況，它更為輕量。對(duì)話框反之
2. 很多時(shí)候氣泡確認(rèn)框會(huì)成為 對(duì)話框 的二次確認(rèn)方式，這樣能夠避免出現(xiàn)彈窗套彈窗的尷尬局面

四、消息通知的優(yōu)化丨了解除了傳統(tǒng)組件之外的通知方式

我們?cè)谌ダ斫庀⑼ㄖ臅r(shí)候，往往不能夠只去看待消息通知本身的組件形式，最終的目的一定是讓用戶能夠更快速、直觀的了解到他所關(guān)心的內(nèi)容，因此在設(shè)計(jì)上，我們可以進(jìn)行對(duì)應(yīng)的優(yōu)化。

聲音提示

因?yàn)槲覀兇蠖鄶?shù) B 端產(chǎn)品都是采取網(wǎng)頁(yè)端的形式進(jìn)行內(nèi)容呈現(xiàn)，因此往往會(huì)忽略通知提示當(dāng)中的聲音部分。雖然我們?cè)诰W(wǎng)頁(yè)端，但是也能夠通過(guò)播放聲音 + 頁(yè)簽的信息通知（你有一個(gè)新消息，注意查看），讓用戶知道他有重要信息需要處理，這樣也能間接達(dá)到目的。

多端聯(lián)動(dòng)

大多數(shù) B 端產(chǎn)品，都會(huì)遇到系統(tǒng)當(dāng)中主要都是聚焦于桌面端，移動(dòng)端的體驗(yàn)幾乎為零。因?yàn)楹芏喈a(chǎn)品目前的移動(dòng)端都是使用小程序解決，那通知就變得更加困難，這時(shí)候其實(shí)可以嘗試用一些通用方式打通設(shè)備限制。比如我們可以嘗試發(fā)送 微信訂閱號(hào) 推送系統(tǒng)通知，這樣既能夠保證用戶日常的使用習(xí)慣，同時(shí)進(jìn)行多設(shè)備間的聯(lián)動(dòng)。

再舉一個(gè)例子，比如在日歷模塊，其實(shí)就可以通過(guò)日歷本身的 CalDAV 帳戶，來(lái)實(shí)現(xiàn)多設(shè)備間的日歷聯(lián)動(dòng)，這樣就能夠保證 桌面端不是一個(gè)孤島~

通知分類

通知本身就是高觸發(fā)的一個(gè)場(chǎng)景，就類似于手機(jī)的短信一樣，會(huì)存在大量的冗余信息。因此我們?cè)偃ピO(shè)計(jì)通知的時(shí)候，考慮到不同的通知類型一定要采取不同的處理辦法。

而想要在工作當(dāng)中做好這件事，必須先將系統(tǒng)當(dāng)中所有的通知信息進(jìn)行整理，從而將其進(jìn)行分類，分類規(guī)則大體遵循：用戶之間互動(dòng)＞用戶系統(tǒng)互動(dòng)＞系統(tǒng)系統(tǒng)互動(dòng)。

因此作為 B 端設(shè)計(jì)師，組件之間的差異一定要重視起來(lái)。

五、結(jié)尾

消息通知就像是我們用戶與系統(tǒng)、用戶與用戶之間的一個(gè)橋梁，而各種消息通知能夠讓我們用戶知道操作是否正確。也正是很多設(shè)計(jì)系統(tǒng)講的原則：操作之后有反饋，你的反饋內(nèi)容是什么，就會(huì)直接決定我是否敢于去操作。