案例超多！3大類APP彈窗提示體例總結(jié)

在做 APP 的時(shí)候會(huì)發(fā)現(xiàn)一個(gè)題目，各種各樣的彈窗提示，什么時(shí)候用什么樣的提示體例，今天做一下歸納總結(jié)。

一、概念簡(jiǎn)述

顧名思義，提示體例，是指用戶必要提示的時(shí)候，在 APP 出現(xiàn)的一些提示機(jī)制。

一樣平常采用彈窗的情勢(shì)進(jìn)行提醒，它的功能意義是：

對(duì)用戶當(dāng)前操作進(jìn)行信息提示并對(duì)其作出增補(bǔ)，或停止用戶當(dāng)前操作并對(duì)其作出反饋。

閣主從現(xiàn)實(shí)案例中，怎樣使用的角度，去進(jìn)行了一些整頓，如下圖：

閣主將從以下相干提示信息的元素分別對(duì)輕、中、重度提示體例去進(jìn)行闡述。

二、移動(dòng)場(chǎng)景中提示體例——輕度提示

1. 應(yīng)用場(chǎng)景

用戶可以預(yù)料的變更信息，提示出現(xiàn)時(shí)間及時(shí)，操作后立刻反饋。

如：發(fā)送成功或者失敗、添加珍藏、開啟省流量模式……

2. 設(shè)計(jì)原則

• 避免對(duì)當(dāng)前義務(wù)產(chǎn)生任何干擾，讓感愛好的用戶能夠發(fā)現(xiàn)提醒。
• 主動(dòng)消散，無需任何操作。

3. 體例

提醒框Toast、HUD。

4. 內(nèi)容結(jié)構(gòu)

筆墨信息、圖片。

5. 在網(wǎng)頁中的位置

可以出如今網(wǎng)頁的任何位置，可設(shè)置成在網(wǎng)頁頂部、中部或者在底部出現(xiàn)（但一樣平常都是出如今網(wǎng)頁的中軸線上），詳細(xì)的表現(xiàn)位置根據(jù)網(wǎng)頁的團(tuán)體設(shè)計(jì)進(jìn)行設(shè)置。這種 Toast 在安卓 App 上十分常見。

6. 伴隨狀況

一樣平常無伴隨狀況。

7. iOS 和 Android 的區(qū)別

兩者沒有顯明的區(qū)別。

Toast 案例展示如下圖：

HUD 案例展示如下圖：

三、移動(dòng)場(chǎng)景中提示體例——中度提示

1. 應(yīng)用場(chǎng)景

用戶可能必要了解、感愛好的變更信息，如：摯友新聞、網(wǎng)絡(luò)錯(cuò)誤、賬號(hào)升級(jí)……

2. 設(shè)計(jì)原則

• 在盡量不打斷當(dāng)前義務(wù)的前提下，確保用戶可以看到提醒。
• 不主動(dòng)消散，但用戶不必要做選擇，可以選擇忽視。

3. 體例

提醒對(duì)話框Snackbar、提醒欄、浮層。

4. 內(nèi)容結(jié)構(gòu)

筆墨信息、按鈕、圖片、可能有關(guān)閉。

5. 在網(wǎng)頁中的位置

Snackbar 出如今網(wǎng)頁底部，提醒欄可以在網(wǎng)頁上部也可在底部，浮層可能出如今畫面各處。

6. 伴隨狀況

可能會(huì)伴隨著聲音。

7. iOS 和Android 的區(qū)別

兩者沒有顯明的區(qū)別。

提醒對(duì)話框Snackbar

Snackbar 跟 Toas 一樣是偶然間限定的，即使用戶不進(jìn)行回應(yīng)，彈窗出現(xiàn)一段時(shí)間后也會(huì)主動(dòng)消散。

Snackbar 彈出一個(gè)小信息，作為提示或新聞反饋來用，一樣平常用來表現(xiàn)操作效果，另外可以提供一個(gè)功能按鈕給用戶選擇使用。

例如你刪除了某張圖片，App彈窗告訴你刪除成功，并提供一個(gè)「撤銷刪除」功能按鈕給你進(jìn)行對(duì)應(yīng)的功能操作。案例如下圖：

提醒欄

提醒欄與提醒對(duì)話框的區(qū)別在于，它是內(nèi)嵌在網(wǎng)頁上的。案例如下圖：

浮層

案例如下圖：

四、移動(dòng)場(chǎng)景中提示體例——重度提示

1. 應(yīng)用場(chǎng)景

不可逆、涉及金錢或不建議的變更信息，如：永世刪除、購(gòu)買、取消關(guān)注……

2. 設(shè)計(jì)原則

• 確保用戶能夠看到提醒，哪怕打斷當(dāng)前義務(wù)。
• 必須用戶自動(dòng)操作或進(jìn)行選擇才能繼承。

3. 體例

對(duì)話框Dialog、功能框Actionbar。

4. 內(nèi)容結(jié)構(gòu)

題目、內(nèi)容描述（可能有圖片）、選擇項(xiàng)。

5. 在網(wǎng)頁中的位置

對(duì)話框一樣平常出如今網(wǎng)頁中心、功能框一樣平常出如今網(wǎng)頁底端。

6. 伴隨狀況

可能會(huì)有聲音。

7. iOS 和 Android 的區(qū)別

情勢(shì)上接近。

對(duì)話框Dialog （iOS叫Alerts）

分為信息下發(fā)類和信息提交類。

使用 Dialog，功能按鈕最好只有兩個(gè)，讓用戶選擇「是」或「非」的功能操作。

也常被設(shè)計(jì)成只有一個(gè)「確認(rèn)」按鈕，目的是讓用戶閱讀內(nèi)容后點(diǎn)擊關(guān)閉彈窗（這種樣式的 Dialog，信息內(nèi)容必須特別很是有需要性以至于必要打斷用戶的操作進(jìn)行信息內(nèi)容閱讀確認(rèn)，否則請(qǐng)用 Toast 進(jìn)行非模態(tài)彈窗提醒）。

瑕玷：

若 Dialog 對(duì)話框出現(xiàn)三個(gè)或以上的功能按鈕，將會(huì)增長(zhǎng)用戶的功能選擇負(fù)擔(dān)，所以必要使用多個(gè)功能按鈕選擇的時(shí)候請(qǐng)考慮使用 Actionbar。案例如下圖：

對(duì)話框Dialog——信息下發(fā)類

案例如下圖：

對(duì)話框Dialog——信息提交類

案例如下圖：

功能框Actionbar——操作欄（iOS叫Action Sheets）

Actionbar 一樣平常被設(shè)計(jì)用來向用戶展示多個(gè)功能按鈕選擇，比 Dialog 擁有更多的功能按鈕，提供應(yīng)用戶更多的功能選擇，Acionbar 一樣平常都設(shè)計(jì)有一個(gè)默認(rèn)的「取消」功能按鈕，點(diǎn)擊該按鈕后關(guān)閉彈窗，用戶點(diǎn)擊彈窗以外的區(qū)域時(shí)相稱于進(jìn)行了點(diǎn)擊「取消」功能按鈕的默認(rèn)回應(yīng)。

在 iOS 中，Actionbar 的樣式比較常見的是筆墨列表框，它出如今網(wǎng)頁底部，以簡(jiǎn)潔的功能描述性筆墨展示功能按鈕，敏感的功能操作一樣平常用紅色字體標(biāo)出（也可以設(shè)計(jì)其它顏色以凸起某個(gè)功能按鈕）。案例如下圖：

功能框Actionbar——操作菜單（iOS叫Activity Views）

當(dāng)功能按鈕數(shù)量許多的時(shí)候，筆墨列表的情勢(shì)不適合表現(xiàn)，此時(shí)可以用圖形加筆墨描述排列的情勢(shì)來進(jìn)行展示。這種樣式下采用菜單的樣式比較合適。案例如下圖：

選擇列表框

削減了功能流程中的網(wǎng)頁跳轉(zhuǎn)，但是假如選項(xiàng)許多而且描述筆墨較多的時(shí)候，照舊設(shè)計(jì)成選項(xiàng)詳情頁更好些。案例如下圖：

五、市面上的優(yōu)化方案

能在界面中展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框。

這時(shí)候我們有3種的解決方案：

• 通過一個(gè)新的界面展示。但是我們可以可以看出，詮釋信息并不多，不必要通過一個(gè)新的網(wǎng)頁來展示。
• 使用對(duì)話框或者浮層，在這里我們不能使用 toast，由于 toast 時(shí)間太短，用戶根本讀不完。
• 在當(dāng)前界面展示。

總結(jié)來說：盡量在當(dāng)前網(wǎng)頁展示，不做多余體例提示。

直接在當(dāng)前網(wǎng)頁展示信息的。案例如下圖：

用多態(tài)按鈕表狀況的，案例如下圖：

六、總結(jié)：總體原則

不管是模態(tài)彈窗照舊非模態(tài)彈窗，它的出現(xiàn)多多少少會(huì)影響到用戶當(dāng)前的體驗(yàn)，所以我們使用彈窗要脅制，先要對(duì)必要展示的信息做一個(gè)優(yōu)先級(jí)的排布，根據(jù)需求的強(qiáng)弱選擇合適的提示體例。只有低頻而又合理的使用，用戶才會(huì)當(dāng)回事。避免過度使用。

作者簡(jiǎn)介：Sophia的玲瓏閣，成功從平面轉(zhuǎn)行至UI再轉(zhuǎn)行至好互的設(shè)計(jì)師妹紙。

職場(chǎng)設(shè)計(jì)技能，更多教程爭(zhēng)先看，請(qǐng)關(guān)注作者的微信公眾號(hào)：「Sophia的玲瓏閣」

圖片素材作者：BrandBox