消息提醒,除了彈窗還有什么?

1 評論 12863 瀏覽 162 收藏 10 分鐘

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

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

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

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

一、概念簡述

消息通知:通知是產品中極其重要的一部分,它能快速將內容的狀態及變化通過不同的方式傳達給用戶,以便用戶在收到信息后根據所傳遞的內容及時做出應對策略。

提醒:顧名思義,提醒方式,是指用戶需要提醒的時候,出現的一些提醒機制,且盡可能的減少對用戶的打擾。

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

結合工作中常見的消息通知設計,分類如下:

三、模態彈窗

用戶在完成任務的過程中,界面會出現彈窗打斷用戶的操作行為,用戶必須通過主動點擊才可以進行下一步操作。

模態彈窗與非模態的視覺區分:模態一般有黑色半透明蒙版,強調彈窗的內容,優點是可以很好的獲取用戶的視覺焦點。缺點是會打斷用戶當前的操作流程。

1. 彈窗/對話框提示

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

對話框要遵循以下原則:

  • 聚焦:對話框使用戶聚焦在提醒內容上,確保信息被看到、任務被處理;
  • 直接:直接傳達信息,幫助用戶處理任務;
  • 有幫助:對話框的出現是為了響應用戶的操作,帶有上下文的信息;

2. 操作欄/底部彈窗

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

四、非模態彈窗

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

1. Toast

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

2. 快捷提示

用于內容推廣、操作引導、用戶消息??旖萏崾究筛鶕枰x擇自動消失邏輯、或添加關閉按鈕,也可以在用戶滑動頁面的過程中設計收起態或通過調整透明度來消除對頁面內容的遮擋。通過這些內容在首屏得以曝光,并為用戶提供快捷入口。

3. 進度條提示

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

4. 小紅點(徽標)

徽標的形式不僅只有小紅點,也有紅圈里加數字,表示新消息數量。也有直接小紅圈+文字,來更好的傳達信息

5. 空狀態提示

由于網絡環境原因、設備原因、數據正常且為空、數據異常等等造成內容為空時,給到用戶的反饋提示,主要作用為以下幾點:

  1. 解釋說明:告訴用戶當前頁面的信息狀態出現了什么問題
  2. 安撫用戶情緒:緩解用戶焦慮、挫敗、疑惑等負面情緒
  3. 引導用戶操作:告訴用戶解決方案并引導用戶進行操作
  4. 強化品牌:傳達品牌定位、格調和氣氛,與用戶建立情感連接

6. 文字輪播提示

用于宣傳類banner輪播,通知類滾動提示,點擊后跳轉到消息詳情或消息列表。用于信息數量較多,但用戶不需要一一了解的動態信息。

7. 校驗提示

校驗觸發條件的不同和報錯方式的不同,可以組成三種:

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

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

針對不同的需求類型和提醒目的,如何選擇最合適的提醒呢?大家可對照下表再結合自己的經驗來判斷:

六、結語

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

作者:WOWdesign,研究設計價值最大化,涉及用戶體驗、品牌體驗、空間體驗。

本文由人人都是產品經理合作媒體 @WOWdesign 授權發布,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 受教了

    來自山東 回復