在做 APP 的時候會發現一個問題，各種各樣的彈窗提醒，什么時候用什么樣的提醒方式，今天做一下歸納總結。
一、概念簡述
顧名思義，提醒方式，是指用戶需要提醒的時候，在 APP 出現的一些提醒機制。
一般采用彈窗的形式進行提示，它的功能意義是：
對用戶當前操作進行信息提醒并對其作出補充，或中斷用戶當前操作并對其作出反饋。
閣主從實際案例中，怎樣使用的角度，去進行了一些整理，如下圖：
閣主將從以下相關提醒信息的元素分別對輕、中、重度提醒方式去進行闡述。
二、移動場景中提醒方式——輕度提醒
1. 應用場景
用戶可以預料的變更信息，提醒出現時間及時，操作后馬上反饋。
如：發送成功或者失敗、添加收藏、開啟省流量模式……
2. 設計原則
- 避免對當前任務產生任何干擾，讓感興趣的用戶能夠發現提示。
- 自動消失，無需任何操作。
3. 方式
提示框Toast、HUD。
4. 內容結構
文字信息、圖片。
5. 在頁面中的位置
可以出現在頁面的任何位置，可設置成在頁面頂部、中部或者在底部出現（但一般都是出現在頁面的中軸線上），具體的顯示位置根據頁面的整體設計進行設置。這種 Toast 在安卓 App 上十分常見。
6. 伴隨狀態
一般無伴隨狀態。
7. iOS 和 Android 的區別
兩者沒有明顯的區別。
Toast 案例展示如下圖：
HUD 案例展示如下圖：
三、移動場景中提醒方式——中度提醒
1. 應用場景
用戶可能需要了解、感興趣的變更信息，如：好友消息、網絡錯誤、賬號升級……
2. 設計原則
- 在盡量不打斷當前任務的前提下，確保用戶可以看到提示。
- 不自動消失，但用戶不需要做選擇，可以選擇忽視。
3. 方式
4. 內容結構
文字信息、按鈕、圖片、可能有關閉。
5. 在頁面中的位置
Snackbar 出現在頁面底部，提示欄可以在頁面上部也可在底部，浮層可能出現在畫面各處。
6. 伴隨狀態
可能會伴隨著聲音。
7. iOS 和Android 的區別
兩者沒有明顯的區別。
提示對話框Snackbar
Snackbar 跟 Toas 一樣是有時間限制的，即使用戶不進行回應，彈窗出現一段時間后也會自動消失。
Snackbar 彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結果，另外可以提供一個功能按鈕給用戶選擇使用。
例如你刪除了某張圖片，App彈窗告訴你刪除成功，并提供一個「撤銷刪除」功能按鈕給你進行對應的功能操作。案例如下圖：
提示欄
提示欄與提示對話框的區別在于，它是內嵌在頁面上的。案例如下圖：
浮層
案例如下圖：
四、移動場景中提醒方式——重度提醒
1. 應用場景
不可逆、涉及金錢或不建議的變更信息，如：永久刪除、購買、取消關注……
2. 設計原則
- 確保用戶能夠看到提示，哪怕打斷當前任務。
- 必須用戶主動操作或進行選擇才能繼續。
3. 方式
對話框Dialog、功能框Actionbar。
4. 內容結構
標題、內容描述（可能有圖片）、選擇項。
5. 在頁面中的位置
對話框一般出現在頁面中間、功能框一般出現在頁面底端。
6. 伴隨狀態
可能會有聲音。
7. iOS 和 Android 的區別
形式上接近。
對話框Dialog （iOS叫Alerts）
分為信息下發類和信息提交類。
使用 Dialog，功能按鈕最好只有兩個，讓用戶選擇「是」或「非」的功能操作。
也常被設計成只有一個「確認」按鈕，目的是讓用戶閱讀內容后點擊關閉彈窗（這種樣式的 Dialog，信息內容必須非常有必要性以至于需要打斷用戶的操作進行信息內容閱讀確認，否則請用 Toast 進行非模態彈窗提示）。
缺點：
若 Dialog 對話框出現三個或以上的功能按鈕，將會增加用戶的功能選擇負擔，所以需要使用多個功能按鈕選擇的時候請考慮使用 Actionbar。案例如下圖：
對話框Dialog——信息下發類
案例如下圖：
對話框Dialog——信息提交類
案例如下圖：
功能框Actionbar——操作欄（iOS叫Action Sheets）
Actionbar 一般被設計用來向用戶展示多個功能按鈕選擇，比 Dialog 擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar 一般都設計有一個默認的「取消」功能按鈕，點擊該按鈕后關閉彈窗，用戶點擊彈窗以外的區域時相當于進行了點擊「取消」功能按鈕的默認回應。
在 iOS 中，Actionbar 的樣式比較常見的是文字列表框，它出現在頁面底部，以簡潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標出（也可以設計其它顏色以突出某個功能按鈕）。案例如下圖：
功能框Actionbar——操作菜單（iOS叫Activity Views）
當功能按鈕數量很多的時候，文字列表的形式不適合顯示，此時可以用圖形加文字描述排列的形式來進行展示。這種樣式下采用菜單的樣式比較合適。案例如下圖：
選擇列表框
減少了功能流程中的頁面跳轉，但是如果選項很多而且描述文字較多的時候，還是設計成選項詳情頁更好些。案例如下圖：
五、市面上的優化方案
能在界面中展示就不用彈框，能用非模態彈框的就不要用模態彈框。
這時候我們有3種的解決方案：
- 通過一個新的界面展示。但是我們可以可以看出，解釋信息并不多，不需要通過一個新的頁面來展示。
- 使用對話框或者浮層，在這里我們不能使用 toast，因為 toast 時間太短，用戶根本讀不完。
- 在當前界面展示。
總結來說：盡量在當前頁面展示，不做多余方式提醒。
直接在當前頁面展示信息的。案例如下圖：
用多態按鈕表狀態的，案例如下圖：
六、總結：總體原則
不管是模態彈窗還是非模態彈窗，它的出現多多少少會影響到用戶當前的體驗，所以我們使用彈窗要克制，先要對需要展示的信息做一個優先級的排布，根據需求的強弱選擇合適的提醒方式。只有低頻而又合理的使用，用戶才會當回事。避免過度使用。
作者簡介：Sophia的玲瓏閣，成功從平面轉行至UI再轉行至交互的設計師妹紙。
職場設計技能，更多教程搶先看，請關注作者的微信公眾號：「Sophia的玲瓏閣」
圖片素材作者：BrandBox
「超全面的彈窗設計總結」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 4 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓