消息通知和提醒作為系統(tǒng)與用戶之間交流的窗口，在不同事件下用戶都能感知與操作場景和緊急程度匹配的結(jié)果反饋或消息提示，做到合理有效的信息傳達(dá)。

一個(gè)能讓用戶快速上手的 APP，除了設(shè)計(jì)符合產(chǎn)品邏輯、符合用戶操作習(xí)慣、足夠簡潔之外，層次分明不失趣味性的消息提醒設(shè)計(jì)，也是非常重要的。

在這篇文章中，將重點(diǎn)介紹移動(dòng)端消息提醒如何在頁面中運(yùn)用的。

一、概念簡述

消息通知：通知是產(chǎn)品中極其重要的一部分，它能快速將內(nèi)容的狀態(tài)及變化通過不同的方式傳達(dá)給用戶，以便用戶在收到信息后根據(jù)所傳遞的內(nèi)容及時(shí)做出應(yīng)對策略。

提醒：顧名思義，提醒方式，是指用戶需要提醒的時(shí)候，出現(xiàn)的一些提醒機(jī)制，且盡可能的減少對用戶的打擾。

二、消息提醒的方式都有哪些？

結(jié)合工作中常見的消息通知設(shè)計(jì)，分類如下：

三、模態(tài)彈窗

用戶在完成任務(wù)的過程中，界面會(huì)出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過主動(dòng)點(diǎn)擊才可以進(jìn)行下一步操作。

模態(tài)彈窗與非模態(tài)的視覺區(qū)分：模態(tài)一般有黑色半透明蒙版，強(qiáng)調(diào)彈窗的內(nèi)容，優(yōu)點(diǎn)是可以很好的獲取用戶的視覺焦點(diǎn)。缺點(diǎn)是會(huì)打斷用戶當(dāng)前的操作流程。

1. 彈窗/對話框提示

對話框用于提供關(guān)鍵信息或要求用戶作出決定，信息或要求的優(yōu)先級很高，必須及時(shí)處理。主要在打斷用戶后并提供選項(xiàng)操作，對用戶的干擾較大，通常會(huì)配備 1~3 個(gè)操作按鈕，而且會(huì)把用戶最期待的或產(chǎn)品最期待用戶操作的按鈕突出顯示。對話框包含：廣告彈窗、活動(dòng)推廣彈窗、新手指引、改版/新功能指引、確認(rèn)提示彈窗、升級提示彈窗、APP 授權(quán)彈窗（定位、通話、通訊錄等）

對話框要遵循以下原則：

1. 聚焦：對話框使用戶聚焦在提醒內(nèi)容上，確保信息被看到、任務(wù)被處理；
2. 直接：直接傳達(dá)信息，幫助用戶處理任務(wù)；
3. 有幫助：對話框的出現(xiàn)是為了響應(yīng)用戶的操作，帶有上下文的信息；

2. 操作欄/底部彈窗

底部彈窗與對話框的特點(diǎn)是一樣的（打斷式、干擾大），主要的區(qū)別在位置上，操作欄/底部彈窗在視覺重心上稍弱；操作層面來講更便捷，尤其是對大屏單手操作而言；底部彈窗可以承載更多的簡單操作，如時(shí)間選擇器、打星評價(jià)、快捷操作等。

四、非模態(tài)彈窗

相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會(huì)打斷用戶的當(dāng)前操作，主要是給予用戶即時(shí)反饋，讓用戶清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強(qiáng)制用戶操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時(shí)間內(nèi)自動(dòng)消失，也可等待用戶操作后消失，常見的有以下幾種：

1. Toast

放在 Toast 中的文字要簡短、精煉。Toast 出現(xiàn)后，過幾秒自動(dòng)消失，用于無需用戶反饋且可通過用戶重復(fù)點(diǎn)擊出現(xiàn)的消息類型。

2. 快捷提示

用于內(nèi)容推廣、操作引導(dǎo)、用戶消息?？旖萏崾究筛鶕?jù)需要選擇自動(dòng)消失邏輯、或添加關(guān)閉按鈕，也可以在用戶滑動(dòng)頁面的過程中設(shè)計(jì)收起態(tài)或通過調(diào)整透明度來消除對頁面內(nèi)容的遮擋。通過這些內(nèi)容在首屏得以曝光，并為用戶提供快捷入口。

3. 進(jìn)度條提示

進(jìn)度條是一種用于表示任務(wù)完成進(jìn)度的圖形界面元素，它可以幫助用戶更好地理解任務(wù)的進(jìn)度和剩余時(shí)間。提供用戶一個(gè)直觀的反饋，讓用戶能夠更好地掌握任務(wù)的進(jìn)度，從而提高用戶體驗(yàn)，常見于文件上傳、下載、處理進(jìn)度，也可以用于顯示游戲進(jìn)度、任務(wù)完成進(jìn)度、問卷填寫進(jìn)度等。

4. 小紅點(diǎn)（徽標(biāo)）

徽標(biāo)的形式不僅只有小紅點(diǎn)，也有紅圈里加數(shù)字，表示新消息數(shù)量。也有直接小紅圈+文字，來更好的傳達(dá)信息

5. 空狀態(tài)提示

由于網(wǎng)絡(luò)環(huán)境原因、設(shè)備原因、數(shù)據(jù)正常且為空、數(shù)據(jù)異常等等造成內(nèi)容為空時(shí)，給到用戶的反饋提示，主要作用為以下幾點(diǎn)：

1. 解釋說明：告訴用戶當(dāng)前頁面的信息狀態(tài)出現(xiàn)了什么問題
2. 安撫用戶情緒：緩解用戶焦慮、挫敗、疑惑等負(fù)面情緒
3. 引導(dǎo)用戶操作：告訴用戶解決方案并引導(dǎo)用戶進(jìn)行操作
4. 強(qiáng)化品牌：傳達(dá)品牌定位、格調(diào)和氣氛，與用戶建立情感連接

6. 文字輪播提示

用于宣傳類 banner 輪播，通知類滾動(dòng)提示，點(diǎn)擊后跳轉(zhuǎn)到消息詳情或消息列表。用于信息數(shù)量較多，但用戶不需要一一了解的動(dòng)態(tài)信息。

7. 校驗(yàn)提示

校驗(yàn)觸發(fā)條件的不同和報(bào)錯(cuò)方式的不同，可以組成三種：

1. 輸入校驗(yàn)即時(shí)報(bào)錯(cuò)：實(shí)時(shí)驗(yàn)證，顯示錯(cuò)誤提示，影響較小。
2. 失去焦點(diǎn)即時(shí)報(bào)錯(cuò)：減少后臺(tái)數(shù)據(jù)傳送壓力，避免頻繁錯(cuò)誤提示。
3. 操作保存/提交/下一步時(shí)全部報(bào)錯(cuò)：減少用戶反饋時(shí)間。

五、如何選擇合適的消息提醒？

針對不同的需求類型和提醒目的，如何選擇最合適的提醒呢？大家可對照下表再結(jié)合自己的經(jīng)驗(yàn)來判斷：

六、結(jié)語

消息通知設(shè)計(jì)用于在必要時(shí)向用戶反饋操作結(jié)果或傳達(dá)消息，在不同事件下，用戶都能感知與操作場景和緊急程度匹配的結(jié)果反饋或消息提示，做到合理有效的信息傳達(dá)。

作者：WOWDesign