超多案例！APP 彈窗設計知識點全面總結

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

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

PC 端彈窗設計：

彈窗作用和定義

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

彈窗分類

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

1. 模態彈窗

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

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

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

設計注意

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

應用場景

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

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

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

設計注意

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

應用場景

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

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

Popover/Popup/Filter/Tips（氣泡、彈出菜單、篩選、引導框）

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

Popover（氣泡）設計注意：

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

應用場景

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

Popup（彈出菜單）

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

Filter（篩選）

應用場景

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

Tips（引導框）

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

應用場景

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

2. 非模態彈窗

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

Toast / HUD（提示框）

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

設計注意

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

應用場景

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

Snackbar（底部彈窗）

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

應用場景

多用于撤銷操作和功能引導、支持用戶操作主動滑動關閉。如下圖

Topbar（頂部彈窗）

Topbar 是根據已有的 app 的設計樣式總結的，有點類似 Snackbar，但是提示的程度比較弱，一般用于低頻的功能操作引導。

應用場景

常用于系統消息的提示。如下圖

總結

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