在產(chǎn)品設(shè)計中，作為系統(tǒng)與用戶之間交流的窗口，消息提醒是非常重要的功能。在不同的產(chǎn)品形態(tài)下，消息通知和提醒都會有不同形式的變化。這篇文章，作者和我們分析了移動端的消息提醒如何設(shè)計，希望能對大家有所幫助。

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

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

在這篇文章中，將重點介紹移動端消息提醒如何在頁面中運用的。

一、概念簡述

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

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

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

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

三、模態(tài)彈窗

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

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

1. 彈窗/對話框提示

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

對話框要遵循以下原則：

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

2. 操作欄/底部彈窗

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

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

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

1. Toast

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

2. 快捷提示

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

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

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

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

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

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

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

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

6. 文字輪播提示

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

7. 校驗提示

校驗觸發(fā)條件的不同和報錯方式的不同，可以組成三種：

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

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

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

六、結(jié)語

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