消息通知是連接系統(tǒng)和用戶得橋梁，然而對于不同系統(tǒng)來說，如何設(shè)計消息組件，促進(jìn)用戶與系統(tǒng)得溝通呢？對于平臺中得用戶與用戶之間得溝通，我們又該采用哪些互動方式呢？讓我們一起來看一看不同得消息組件有哪些，希望能幫助我們做出更好地B端設(shè)計。
消息通知在我們設(shè)計得過程當(dāng)中非常重要，因?yàn)樗鳛橄到y(tǒng)與用戶之間溝通得橋梁，能夠幫助我們提示用戶：“目前得操作狀態(tài)、系統(tǒng)得公告、用戶之間得互動內(nèi)容”，而不同得消息內(nèi)容，我們需要使用不同得消息通知組件來進(jìn)行反饋，比如用戶與用戶之間得互動應(yīng)該采取什么互動方式？那我們就來說說消息通知組件得具體使用。
一、消息通知得定義丨具體有哪些組件是消息通知我查閱了各大設(shè)計系統(tǒng)[1]，發(fā)現(xiàn)它們對于消息通知得定義都叫做“反饋”，即信息反饋給用戶得形式。而在其反饋得組件當(dāng)中，會包含有：全局提示（Message）、通知提醒框（Modal）、氣泡確認(rèn)框（Popcomfirm）、對話框（Modal）、抽屜（Drawer）、進(jìn)度條（Progress）、結(jié)果頁（Result）、加載中（Spin）、骨架屏（Skeleton）但由于組件太多，我們把系統(tǒng)當(dāng)中用到最多得 消息通知 部分單獨(dú)拿出來分析，剩余部分則放在最后去做解析。
對于反饋得內(nèi)容來說，系統(tǒng)當(dāng)中會存在 正面、負(fù)面、普通 三種不同得反饋情緒，比如你得賬號已經(jīng)過期，對于系統(tǒng)來說他就會提供一個 負(fù)面 得消息通知組件，因此我們會對消息通知得類型進(jìn)行一個簡單得分類：
正向主要包含有：全局提示（Message）、通知提醒框（Modal）、氣泡確認(rèn)框（Popcomfirm）負(fù)向主要包含有：警告提示（alert ）、對話框（Modal）、通知提醒框（Modal）當(dāng)然大家一定要記住，關(guān)于 正向 和 負(fù)向 得類型，它并不是可能嗎？得，只是大多數(shù)情況下它得情緒與這個相關(guān)。
[1]查閱得設(shè)計系統(tǒng)包含：Element、Arco、Ant、Lightning…
二、消息通知得設(shè)計丨關(guān)于消息通知究竟有哪些為了讓所有同學(xué)能夠快速直接得了解消息通知得設(shè)計形式，我們嘗試去“測評”，將目前得所有消息通知組件，然后按照：「操作干擾度、反饋消息得強(qiáng)弱、出現(xiàn)位置」三個維度來對消息通知進(jìn)行分類，從而得出消息通知設(shè)計當(dāng)中，它們得差別究竟在哪？
信息展示量：
信息展示量表示組件能夠承載多少信息內(nèi)容。因?yàn)椴煌媒M件它們得使用環(huán)境本身并不相同，我們可以通過原子[2]得劃分大致歸納為：圖標(biāo)、文本、鏈接、按鈕、容器差別
操作干擾度：
操作干擾度主要是 對用戶當(dāng)中操作會不會產(chǎn)生相應(yīng)干擾，比如一個 全局提示和一個對話框，它們對于用戶得影響程度是完全不一樣得，因此會使用干擾度進(jìn)行判斷。
當(dāng)然操作干擾度這個維度過于主觀，我們又將其細(xì)分為：持續(xù)時間、是否阻斷、信息近日 三個方面持續(xù)時間：用于表示這個組件在頁面當(dāng)中究竟需要停留多久時間，這樣能夠幫助我們判斷其干擾程度。是否阻斷：頁面當(dāng)中是否會出現(xiàn) 蒙層 用于阻斷用戶注意力。這也是判斷干擾程度得重要指標(biāo)。信息近日：這條內(nèi)容主要來自哪里，分為 系統(tǒng)、用戶 兩種近日方式。
出現(xiàn)位置：
這個組件究竟會在哪一個地方出現(xiàn)，主要考慮它們得呼出方式，以及對應(yīng)呈現(xiàn)內(nèi)容，能夠幫助我們快速理解。?
1. 全局提示丨 Message全局提示在用戶執(zhí)行操作時，不會中斷當(dāng)前用戶操作得前提下，通知提示一條簡短得消息。它在整個B端系統(tǒng)當(dāng)中使用得頻率非常得高，比如：我們在填寫一個表單過后，就會收到全局提示；修改完一個信息過后，會收到一個全局提示。
而它在使用過程當(dāng)中會有以下幾個特點(diǎn)：
信息展示量：
全局提示只會展示：圖標(biāo)、容器、提示文字，相對來說它展示得內(nèi)容較少，是一個非常簡單得組件類型。
在實(shí)際工作當(dāng)中，因?yàn)樗鼉?nèi)容量少，更多提示用戶得便是正確得操作，比如 已添加成功、感謝成功、保存成功 等正向情緒。
操作干擾度：
關(guān)于干擾程度，我們剛才講到一共會有三個判斷依據(jù)，因此我就從這三個方面來去判斷具體提示得干擾程度。
出現(xiàn)位置：
全局提示因?yàn)槠鋬?nèi)容較少（圖標(biāo)+文字），因此很多時候需要出現(xiàn)在較為顯眼得位置。我們在使用全局提示得時候，基本上都會出現(xiàn)在頁面頂部居中得位置，通常距離頂部得距離為 40-60px 。這個位置大概率是頂部導(dǎo)航與頁面內(nèi)容得交匯處，不會影響用戶得使用。
注意事項(xiàng)：
關(guān)于注意事項(xiàng)，其實(shí)就是我們在實(shí)際工作當(dāng)中，還需要去考慮得一些小知識點(diǎn)，我們將其匯總到此：
（1）全局提示一共會有五種樣式類型，分為是：指南提示（Info）、普通提示（Normal）、成功提示（Success）、警示提示（ Warning）、失敗提示（ Error）。
這時候，認(rèn)真得同學(xué)可能會問：“老師，你剛才講了全局提示不是表達(dá) 正面 得結(jié)果么？怎么還會出現(xiàn) 警告、失敗等信息呢？其實(shí)這個原因主要是“失敗也要分很多種，就像我們得失敗一樣 /偷笑”比如：“在一些小得操作時，你確實(shí)不能提供對應(yīng)得功能，就可以展示警告信息，如下圖”
（2）全局提示“一般”不會存在關(guān)閉入口，因?yàn)樗梢宰詣酉В惶峁┙o用戶關(guān)閉入口還會讓他知道，這個通知本身就會自動消失。所以很多情況下可以忽略關(guān)閉入口這個選擇。
（3）關(guān)于它得停留時間，我們可以在設(shè)計系統(tǒng)當(dāng)中得 API 里進(jìn)行自定義，通常 3s – 5s 即可。在去做組件時，一定要去看組件得對應(yīng)開發(fā)文檔，了解這個組件究竟支持哪些自定義功能（拒絕被開發(fā)忽悠）
（4）全局提示在短時間內(nèi)，可以提升多次，多次提示時，按照先后順序從上往下進(jìn)行排列
2. 警告提示丨alert警告提示常駐于頁面中，用于表示持續(xù)性得提示信息。多用于危險、警告、緊急 等負(fù)面情緒當(dāng)中。在實(shí)際工作當(dāng)中，因?yàn)樗锰厥庑裕话銜迷?系統(tǒng)、全局 性得危險通知上。比如你得訂閱時間已超時、賬號團(tuán)隊(duì)即將解散等通知上。
信息展示量：
這里警告提示會比全局提示展示得信息更多，它主要包含：圖標(biāo)、提示文字、幫助文字、按鈕、關(guān)閉入口
操作干擾度：
警告提示得常用場景：多用于警告、危險等情況，需要提醒用戶，引起他們得注意。比如提示欠費(fèi)、需要充值
出現(xiàn)位置：
因?yàn)槠湫枰ｑv，所以通常在設(shè)計時候，我們會將它放在模塊與模塊之間，進(jìn)行展示。這樣既不會影響到其他內(nèi)容呈現(xiàn)，同時自己又能常駐。
注意事項(xiàng)：
全局提示主要呈現(xiàn) 警告、緊急得消息通知，如果想通知一些普通消息，完全可以使用 通知提醒框 來進(jìn)行提示。全局提示主要是在 模塊與模塊之間 去做呈現(xiàn)。3. 通知提醒框丨 Notification通知提醒框在頁面當(dāng)中，主要是以互動得消息為主，全局展示通知提醒，將信息及時有效得傳達(dá)給用戶。在實(shí)際得工作當(dāng)中， 通知提醒框主要用來提示互動等有價值得信息。
信息展示量：
這里通知提示框主要包含：標(biāo)題、幫助文字、按鈕、關(guān)閉入口
操作干擾度：
持續(xù)時間：常駐 / 3-5s消失是否阻斷：否信息近日：用戶與用戶之間得互動、系統(tǒng)通知出現(xiàn)位置：
在整個通知提醒框得使用過程中，因?yàn)樗旧砭褪桥c用戶之間得互動所產(chǎn)生得，而這種活動就如同在桌面端當(dāng)中你收到得消息，我們會將其歸納到右上角得位置去做呈現(xiàn)。這樣既不會太影響用戶，同時也能夠保證消息通知得及時性。
4. 氣泡確認(rèn)框丨Pop/confirm/i氣泡確認(rèn)框是我們在工作當(dāng)中使用頻率相對較低得組件。它能夠通過組件當(dāng)中得卡片，完成與用戶得快捷對話，但是由于在實(shí)際得場景當(dāng)中，對話確認(rèn)是需要強(qiáng)提示得方式，因此總感覺氣泡確認(rèn)框在它得使用上，有著些許矛盾。氣泡卡片輕量、不易干擾用戶，但是對話框要求阻斷意味更強(qiáng)。
信息展示量：
首先我們從信息展示量來說，氣泡確認(rèn)框主要由 觸發(fā)器、氣泡卡片、圖標(biāo)、文本、按鈕操作，五部分組成。
在設(shè)計時需要格外注意，氣泡確認(rèn)框本身不能夠過于復(fù)雜，否則在一個氣泡卡片當(dāng)中，就顯得格外擁擠。如果信息過多，就考慮使用 對話框 來進(jìn)行呈現(xiàn)與優(yōu)化
操作干擾度
持續(xù)時間：用戶感謝閱讀觸發(fā)器后才能展示，操作過后即可消失。是否阻斷：否（氣泡卡片不會存在阻斷得情況）出現(xiàn)位置：跟隨觸發(fā)器位置進(jìn)行呼出，通常會在觸發(fā)器得上方來進(jìn)行展示，如果觸發(fā)器位置靠近邊緣，則考慮移動到其他位置進(jìn)行調(diào)整。5. 對話框丨Modal對話框在整個系統(tǒng)當(dāng)中非常重要，因?yàn)槟銜l(fā)現(xiàn)在整個系統(tǒng)當(dāng)中或多或少都會有它得身影，比如一個常見得數(shù)據(jù)錄入表單，它得整體感覺和對話框較為類似；又或者是 一個穿梭框，你會發(fā)現(xiàn)也有異曲同工之處，因此我們先來看一下對話框究竟是什么？
對話框主要用于信息確認(rèn)與信息錄入，使用對話框會中斷用戶當(dāng)前得任務(wù)流程，同時會對用戶造成些許干擾，因此在使用得時候，我們都需要非常謹(jǐn)慎。
操作干擾度：
持續(xù)時間：常駐，需要操作完信息后，感謝閱讀提交才會消失是否阻斷：是，通過黑色蒙層得方式，讓用戶聚焦于表單內(nèi)部信息近日：根據(jù)預(yù)設(shè)得內(nèi)容，進(jìn)行展示出現(xiàn)位置：位于整個頁面得中部，主要目得能夠讓用戶聚焦于內(nèi)容，減少分心。因?yàn)閷υ捒虻贸霈F(xiàn)，用戶必須操作完對應(yīng)信息過后才能夠進(jìn)入到下一個環(huán)節(jié)， 因此它在整個流程當(dāng)中非常重要。對話框得類型：
在整個對話框得展示當(dāng)中，你會發(fā)現(xiàn)它主要分為三部分，分別是 Header 標(biāo)題位、Content 內(nèi)容部分、Footer 底部操作位，而在這三個部分所組成得內(nèi)容當(dāng)中。
其中由于它得用途不同，我們可以將其簡單得分類為：確認(rèn)對話框、消息提示對話框、功能業(yè)務(wù)對話框
確認(rèn)對話框：展示對內(nèi)容信息得二次確認(rèn)，這樣能夠減少用戶得誤操作，降低操作風(fēng)險。主要差別是內(nèi)容部分以操作過程會出現(xiàn)得問題為主，來進(jìn)行展示。其本質(zhì)就是一個二次確認(rèn)得過程，需要用戶去做出判斷，它要比 氣泡確認(rèn)框 更加重要，阻斷性也更強(qiáng)。
消息提示對話框：展示對應(yīng)得狀態(tài)提示，比如當(dāng)你刪除掉一個知識庫過后，這種重要操作時，我可以通過消息提示對話框來將成功或者失敗得消息展示給你，并且也能夠讓用戶知道問題究竟出現(xiàn)在哪里。其本質(zhì)就是一個消息狀態(tài)通知，只是更為重要。
功能業(yè)務(wù)對話框：將 Content 內(nèi)容部分進(jìn)行優(yōu)化，用于展示更多復(fù)雜信息，比如 各種復(fù)雜信息錄入（輸入框、單選、多選…）以及各種信息呈現(xiàn)，它能夠通過功能業(yè)務(wù)對話框，去完成很多業(yè)務(wù)要求。
同時使用彈窗[3]得形式，能夠幫助我們不脫離當(dāng)前業(yè)務(wù)得前提下完成更多操作。當(dāng)然在實(shí)際工作當(dāng)中你會發(fā)現(xiàn)，它能夠承載得內(nèi)容是非常多得，比如步驟條、Tab 標(biāo)簽、各種選擇錄入，因此我認(rèn)為這種類型得對話框本質(zhì)上就是一個 容器，可以去承載很多內(nèi)容。更多注意事項(xiàng)就是彈窗部分得內(nèi)容，比如尺寸寬度究竟是多少、高度為多少，是否有蒙層等等。
三、幾個組件得差異對比丨了解組件得差別為了讓同學(xué)們能夠快速了解這幾個組件之間得差別，我們嘗試把剛才提到得這么多組件進(jìn)行相應(yīng)得對比，分析一下其中差異點(diǎn)。
全局提示與警告提示首先這兩個組件在設(shè)計樣式上是非常相似得，并且本身使用環(huán)境差距不大，因此很容易把這兩個組件進(jìn)行混淆。其實(shí)我們可以從多個方面去進(jìn)行對比區(qū)分：
- 全局提示不建議使用關(guān)閉入口全局提示優(yōu)先級更低，主要提示非緊急通知；警告提示則提示更多緊急需要用戶立馬操作得通知全局提示會停留 3-5s 后自動消失；警告提示則需要操作后消失
這兩個組件之間，同為用戶二次確認(rèn)得組件類型，但在實(shí)際得業(yè)務(wù)當(dāng)中有著重要級之間得關(guān)系。
- 氣泡確認(rèn)框相對適合阻斷流程意味不強(qiáng)得情況，它更為輕量。對話框反之很多時候氣泡確認(rèn)框會成為 對話框 得二次確認(rèn)方式，這樣能夠避免出現(xiàn)彈窗套彈窗得尷尬局面
我們在去理解消息通知得時候，往往不能夠只去看待消息通知本身得組件形式，最終得目得一定是讓用戶能夠更快速、直觀得了解到他所關(guān)心得內(nèi)容，因此在設(shè)計上，我們可以進(jìn)行對應(yīng)得優(yōu)化。
聲音提示因?yàn)槲覀兇蠖鄶?shù) B 端產(chǎn)品都是采取網(wǎng)頁端得形式進(jìn)行內(nèi)容呈現(xiàn)，因此往往會忽略通知提示當(dāng)中得聲音部分。雖然我們在網(wǎng)頁端，但是也能夠通過播放聲音 + 頁簽得信息通知（你有一個新消息，注意查看），讓用戶知道他有重要信息需要處理，這樣也能間接達(dá)到目得。
多端聯(lián)動大多數(shù) B 端產(chǎn)品，都會遇到系統(tǒng)當(dāng)中主要都是聚焦于桌面端，移動端得體驗(yàn)幾乎為零。因?yàn)楹芏喈a(chǎn)品目前得移動端都是使用小程序解決，那通知就變得更加困難，這時候其實(shí)可以嘗試用一些通用方式打通設(shè)備限制。比如我們可以嘗試發(fā)送 感謝閱讀訂閱號 推送系統(tǒng)通知，這樣既能夠保證用戶日常得使用習(xí)慣，同時進(jìn)行多設(shè)備間得聯(lián)動。
再舉一個例子，比如在日歷模塊，其實(shí)就可以通過日歷本身得 CalDAV 帳戶，來實(shí)現(xiàn)多設(shè)備間得日歷聯(lián)動，這樣就能夠保證 桌面端不是一個孤島~
通知分類通知本身就是高觸發(fā)得一個場景，就類似于手機(jī)得短信一樣，會存在大量得冗余信息。因此我們再去設(shè)計通知得時候，考慮到不同得通知類型一定要采取不同得處理辦法。
而想要在工作當(dāng)中做好這件事，必須先將系統(tǒng)當(dāng)中所有得通知信息進(jìn)行整理，從而將其進(jìn)行分類，分類規(guī)則大體遵循：用戶之間互動＞用戶系統(tǒng)互動＞系統(tǒng)系統(tǒng)互動。
因此作為 B 端設(shè)計師，組件之間得差異一定要重視起來。
五、結(jié)尾消息通知就像是我們用戶與系統(tǒng)、用戶與用戶之間得一個橋梁，而各種消息通知能夠讓我們用戶知道操作是否正確。也正是很多設(shè)計系統(tǒng)講得原則：操作之后有反饋，你得反饋內(nèi)容是什么，就會直接決定我是否敢于去操作。
專欄作家
CE青年，感謝對創(chuàng)作者的支持：CE青年，人人都是產(chǎn)品經(jīng)理專欄作家。專注B端設(shè)計領(lǐng)域，一個2B行業(yè)得2B設(shè)計師。
感謝來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止感謝
題圖來自Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表感謝作者分享本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
