這幾天整理總結(jié)了彈窗設(shè)計的一些小知識，和大家分享一下，希望能對你有幫助！

彈窗控件在設(shè)計體系中是非常細節(jié)且復(fù)雜的，因為覆蓋的設(shè)計場景非常多。那在實際 APP 設(shè)計中需要如何去注意使用它呢？

PC 端彈窗設(shè)計：

彈窗作用和定義

首先就從彈窗是如何發(fā)揮自己的作用開始講解吧！ 彈窗：是指當用戶在頁面操作后，系統(tǒng)會給予反饋、提示、引導(dǎo)用戶的一種設(shè)計控件。在操作中，系統(tǒng)需要針對用戶不同的操作場景給予合理的信息反饋，提示用戶當前操作的一個結(jié)果是怎么樣了，或是強制用戶去做一些操作決定自己下一步是需要干嘛！

彈窗分類

其次根據(jù)是否強制用戶的操作的場景，可以將彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種；

1. 模態(tài)彈窗

強交互形式，打斷用戶當前操作行為，傳遞給用戶引導(dǎo)信息，用戶必須進行操作回應(yīng)，才能進行后續(xù)流程。 模態(tài)彈窗的主要類型為：包含：Dialog/Alerts（警告框、對話框）；Action Sheet（動作菜單/動作面板/行動列表）、Action View（視圖菜單）；Popover/Popup/Filter/Tips（氣泡、彈出菜單、篩選、引導(dǎo)框）

Dialog/Alerts（警告框、對話框）

這種彈窗樣式在安卓系統(tǒng)中將它成為警示框，英文為“Dialog”，蘋果系統(tǒng)中將它成為對話框，英文為“Alerts”，這種彈窗樣式，引導(dǎo)用戶對于重要信息的操作，強制性比較高。如下是蘋果的 Alerts（對話框）實例

設(shè)計注意

Alert 位置置于屏幕中心，告知用戶特定的任務(wù)和重要信息，并請求用戶進行操作反饋。使用場合廣泛，易獲取用戶注意力，干擾度/警示性最高。此類的設(shè)計樣式需要克制，不濫用盡可能少用，Alert 通常用于緊急不可逆場景的操作提示，需要用戶確認該信息。標題不超過 2 行，描述內(nèi)容不超過 3 行；按鈕最多豎排 3 個，橫排 2 個，建議使用文字按鈕；一般用戶最可能點擊的按鈕（主操作）放在右側(cè)，取消按鈕始終放在左側(cè)。

應(yīng)用場景

運營活動、版本升級、功能操作提示（確認、退出、刪除、清空）、權(quán)限獲取等，如下圖：

Action Sheet（動作欄）、Action View（視圖菜單）

Action Sheet（動作菜單/動作面板/行動列表）是當用戶操作后觸發(fā)的一種特定的模態(tài)彈框；呈現(xiàn)一組與當前情境相關(guān)的兩個或多個選項。Action View 是 iOS 10 系統(tǒng)規(guī)范中在 Action Sheet 基礎(chǔ)上延伸的新的彈窗樣式，屬于 iOS 規(guī)范。

設(shè)計注意

Action Sheet 是支持連續(xù)彈出的，例如第一個 Action Sheet 中選擇刪除，第二個 Action Sheet 中確認刪除。此外，如果刪除后的對系統(tǒng)或用戶影響比較大，應(yīng)該使用 Alert。警示強度 Alert>Action Sheet

應(yīng)用場景

一般用于功能的延伸，提供用戶更多的功能選擇。如點擊分享，會出現(xiàn)多個目標的選擇。如下圖

安卓對應(yīng)的蘋果設(shè)計樣式有兩種，第一個叫做 Modal Bottom Sheet（模態(tài)底部菜單），因為安卓系統(tǒng)的自帶物理返回鍵的特性，所以菜單欄上沒有取消按鈕。（圖中的淘寶案例比較特殊，在原生 app 中增加取消按鈕），所以設(shè)計經(jīng)常也會在基礎(chǔ)規(guī)范上根據(jù)業(yè)務(wù)場景去變化。第二個是 Simple dialogs（簡易對話框），從屏幕中央彈出，沒有取消按鈕，通過點擊空白區(qū)域關(guān)閉。微博、android 版使用了這個控件。如下為小米 miui 系統(tǒng)的頁面截圖：

Popover/Popup/Filter/Tips（氣泡、彈出菜單、篩選、引導(dǎo)框）

浮層也屬于彈窗的一種，主要樣式可以細分為 Popover/Popup/Filter/Tips（氣泡、彈出菜單、篩選、引導(dǎo)框）等四種樣式。這里通過參考了支付寶 APP 的控件分類。案例中新增“Filter/Tips”這兩個形式。

Popover（氣泡）設(shè)計注意：

popover 很少強制用戶進行操作，是否設(shè)置遮罩取決于控件的重要屬性。

應(yīng)用場景

一般用于快捷功能的展開和收起。如下圖：

Popup（彈出菜單）

支付寶 APP 規(guī)范： https://opendocs.alipay.com/mini/component-ext/popup

Filter（篩選）

應(yīng)用場景

一般用于篩選區(qū)域，針對不同維度關(guān)鍵詞進行快捷搜索。如下圖：

Tips（引導(dǎo)框）

Tips 相對于 popover，用戶操作強制比較高，是否設(shè)置遮罩同樣取決于設(shè)計場景的重要性。

應(yīng)用場景

一般多用于 app 啟動之后的功能引導(dǎo)。如下圖：

2. 非模態(tài)彈窗

弱交互形式，不打斷用戶當前操作行為，在頁面會給用戶一些提示，用戶可以忽略或者選擇性操作。非模態(tài)彈窗的主要類型為：包含：Toast / HUD（提示框）；Snackbar（底部彈窗）；Topbar（頂部彈窗）

Toast / HUD（提示框）

這個控件 Toast 起源于 Material Design，隨著 Toast 的廣泛應(yīng)用，它的定義也變得越來越模糊，隨著系統(tǒng)更多新場景的出現(xiàn)，控件定義也在不斷變化，類似半透明具有提示型的控件設(shè)計都可定義為 Toast。目前 iOS 系統(tǒng)中也有很多頁面場景使用這種輕量化的 Toast 樣式。HUD 是 iOS 系統(tǒng)獨有（iOS 的音量調(diào)節(jié)），無法被第三方應(yīng)用調(diào)用。

設(shè)計注意

Toast 泛化后，它出現(xiàn)的位置也非常多：如在頂部、內(nèi)容區(qū)上方、導(dǎo)航下方，頁面中間。出現(xiàn)位置穩(wěn)定，更容易引起用戶注意，toast 出現(xiàn)的時間比較短，所以提示的文字信息盡量保持通俗易懂，有助于快速理解的提示的內(nèi)容。設(shè)計形式上可以是：文字、文字+圖標、動效等。

應(yīng)用場景

常用于加載刷新中、已完成、失敗等結(jié)果提示。

Snackbar（底部彈窗）

這個控件起源于 Material Design。Snackbar 出現(xiàn)時，用戶仍然可以在屏幕上操作，但控件停留時間會有限制，固定時間會自動消失；若控件中帶有點擊事件按鈕，也可以進行其他操作：如跳轉(zhuǎn)頁面、上滑退出。

應(yīng)用場景

多用于撤銷操作和功能引導(dǎo)、支持用戶操作主動滑動關(guān)閉。如下圖

Topbar（頂部彈窗）

Topbar 是根據(jù)已有的 app 的設(shè)計樣式總結(jié)的，有點類似 Snackbar，但是提示的程度比較弱，一般用于低頻的功能操作引導(dǎo)。

應(yīng)用場景

常用于系統(tǒng)消息的提示。如下圖

總結(jié)

以上就是我和大家分享的關(guān)于彈窗的所有內(nèi)容，彈窗控件在整個產(chǎn)品設(shè)計流程中會直接或間接的影響用戶操作體驗，而且隨著業(yè)務(wù)場景越來越豐富，會有更多的彈窗設(shè)計樣式，所以合理的把控使用就顯得很重要，另外也能夠幫助自己對設(shè)計有更細致的理解和思考！