案例超多！3大類APP彈窗提示體例總結(jié)
在做 APP 的時候會發(fā)現(xiàn)一個題目，各種各樣的彈窗提示，什么時候用什么樣的提示體例，今天做一下歸納總結(jié)。
一、概念簡述
顧名思義，提示體例，是指用戶必要提示的時候，在 APP 出現(xiàn)的一些提示機制。
一樣平常采用彈窗的情勢進行提醒，它的功能意義是：
對用戶當前操作進行信息提示并對其作出增補，或停止用戶當前操作并對其作出反饋。
閣主從現(xiàn)實案例中，怎樣使用的角度，去進行了一些整頓，如下圖：
閣主將從以下相干提示信息的元素分別對輕、中、重度提示體例去進行闡述。
二、移動場景中提示體例——輕度提示
1. 應用場景
用戶可以預料的變更信息，提示出現(xiàn)時間及時，操作后立刻反饋。
如：發(fā)送成功或者失敗、添加珍藏、開啟省流量模式……
2. 設(shè)計原則
- 避免對當前義務產(chǎn)生任何干擾，讓感愛好的用戶能夠發(fā)現(xiàn)提醒。
- 主動消散，無需任何操作。
3. 體例
提醒框Toast、HUD。
4. 內(nèi)容結(jié)構(gòu)
筆墨信息、圖片。
5. 在網(wǎng)頁中的位置
可以出如今網(wǎng)頁的任何位置，可設(shè)置成在網(wǎng)頁頂部、中部或者在底部出現(xiàn)（但一樣平常都是出如今網(wǎng)頁的中軸線上），詳細的表現(xiàn)位置根據(jù)網(wǎng)頁的團體設(shè)計進行設(shè)置。這種 Toast 在安卓 App 上十分常見。
6. 伴隨狀況
一樣平常無伴隨狀況。
7. iOS 和 Android 的區(qū)別
兩者沒有顯明的區(qū)別。
Toast 案例展示如下圖：
HUD 案例展示如下圖：
三、移動場景中提示體例——中度提示
1. 應用場景
用戶可能必要了解、感愛好的變更信息，如：摯友新聞、網(wǎng)絡錯誤、賬號升級……
2. 設(shè)計原則
- 在盡量不打斷當前義務的前提下，確保用戶可以看到提醒。
- 不主動消散，但用戶不必要做選擇，可以選擇忽視。
3. 體例
提醒對話框Snackbar、提醒欄、浮層。
4. 內(nèi)容結(jié)構(gòu)
筆墨信息、按鈕、圖片、可能有關(guān)閉。
5. 在網(wǎng)頁中的位置
Snackbar 出如今網(wǎng)頁底部，提醒欄可以在網(wǎng)頁上部也可在底部，浮層可能出如今畫面各處。
6. 伴隨狀況
可能會伴隨著聲音。
7. iOS 和Android 的區(qū)別
兩者沒有顯明的區(qū)別。
提醒對話框Snackbar
Snackbar 跟 Toas 一樣是偶然間限定的，即使用戶不進行回應，彈窗出現(xiàn)一段時間后也會主動消散。
Snackbar 彈出一個小信息，作為提示或新聞反饋來用，一樣平常用來表現(xiàn)操作效果，另外可以提供一個功能按鈕給用戶選擇使用。
例如你刪除了某張圖片，App彈窗告訴你刪除成功，并提供一個「撤銷刪除」功能按鈕給你進行對應的功能操作。案例如下圖：
提醒欄
提醒欄與提醒對話框的區(qū)別在于，它是內(nèi)嵌在網(wǎng)頁上的。案例如下圖：
浮層
案例如下圖：
四、移動場景中提示體例——重度提示
1. 應用場景
不可逆、涉及金錢或不建議的變更信息，如：永世刪除、購買、取消關(guān)注……
2. 設(shè)計原則
- 確保用戶能夠看到提醒，哪怕打斷當前義務。
- 必須用戶自動操作或進行選擇才能繼承。
3. 體例
對話框Dialog、功能框Actionbar。
4. 內(nèi)容結(jié)構(gòu)
題目、內(nèi)容描述（可能有圖片）、選擇項。
5. 在網(wǎng)頁中的位置
對話框一樣平常出如今網(wǎng)頁中心、功能框一樣平常出如今網(wǎng)頁底端。
6. 伴隨狀況
可能會有聲音。
7. iOS 和 Android 的區(qū)別
情勢上接近。
對話框Dialog （iOS叫Alerts）
分為信息下發(fā)類和信息提交類。
使用 Dialog，功能按鈕最好只有兩個，讓用戶選擇「是」或「非」的功能操作。
也常被設(shè)計成只有一個「確認」按鈕，目的是讓用戶閱讀內(nèi)容后點擊關(guān)閉彈窗（這種樣式的 Dialog，信息內(nèi)容必須特別很是有需要性以至于必要打斷用戶的操作進行信息內(nèi)容閱讀確認，否則請用 Toast 進行非模態(tài)彈窗提醒）。
瑕玷：
若 Dialog 對話框出現(xiàn)三個或以上的功能按鈕，將會增長用戶的功能選擇負擔，所以必要使用多個功能按鈕選擇的時候請考慮使用 Actionbar。案例如下圖：
對話框Dialog——信息下發(fā)類
案例如下圖：
對話框Dialog——信息提交類
案例如下圖：
功能框Actionbar——操作欄（iOS叫Action Sheets）
Actionbar 一樣平常被設(shè)計用來向用戶展示多個功能按鈕選擇，比 Dialog 擁有更多的功能按鈕，提供應用戶更多的功能選擇，Acionbar 一樣平常都設(shè)計有一個默認的「取消」功能按鈕，點擊該按鈕后關(guān)閉彈窗，用戶點擊彈窗以外的區(qū)域時相稱于進行了點擊「取消」功能按鈕的默認回應。
在 iOS 中，Actionbar 的樣式比較常見的是筆墨列表框，它出如今網(wǎng)頁底部，以簡潔的功能描述性筆墨展示功能按鈕，敏感的功能操作一樣平常用紅色字體標出（也可以設(shè)計其它顏色以凸起某個功能按鈕）。案例如下圖：
功能框Actionbar——操作菜單（iOS叫Activity Views）
當功能按鈕數(shù)量許多的時候，筆墨列表的情勢不適合表現(xiàn)，此時可以用圖形加筆墨描述排列的情勢來進行展示。這種樣式下采用菜單的樣式比較合適。案例如下圖：
選擇列表框
削減了功能流程中的網(wǎng)頁跳轉(zhuǎn)，但是假如選項許多而且描述筆墨較多的時候，照舊設(shè)計成選項詳情頁更好些。案例如下圖：
五、市面上的優(yōu)化方案
能在界面中展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框。
這時候我們有3種的解決方案：
- 通過一個新的界面展示。但是我們可以可以看出，詮釋信息并不多，不必要通過一個新的網(wǎng)頁來展示。
- 使用對話框或者浮層，在這里我們不能使用 toast，由于 toast 時間太短，用戶根本讀不完。
- 在當前界面展示。
總結(jié)來說：盡量在當前網(wǎng)頁展示，不做多余體例提示。
直接在當前網(wǎng)頁展示信息的。案例如下圖：
用多態(tài)按鈕表狀況的，案例如下圖：
六、總結(jié)：總體原則
不管是模態(tài)彈窗照舊非模態(tài)彈窗，它的出現(xiàn)多多少少會影響到用戶當前的體驗，所以我們使用彈窗要脅制，先要對必要展示的信息做一個優(yōu)先級的排布，根據(jù)需求的強弱選擇合適的提示體例。只有低頻而又合理的使用，用戶才會當回事。避免過度使用。
作者簡介：Sophia的玲瓏閣，成功從平面轉(zhuǎn)行至UI再轉(zhuǎn)行至好互的設(shè)計師妹紙。
職場設(shè)計技能，更多教程爭先看，請關(guān)注作者的微信公眾號：「Sophia的玲瓏閣」
圖片素材作者：BrandBox
本文地址：http://m.pkvc.cn/tutorial/di4116.html
