引言

隨著互聯網應用的不斷發展，彈窗組件已經成為了界面設計中不可或缺的一部分。彈窗組件可以幫助我們更好地展示信息，提供更多的交互方式，以及增強用戶體驗。但是，設計一個好的彈窗組件并不是一件容易的事情。需要考慮的因素很多，比如彈窗的類型、場景、功能、樣式等等。同時，彈窗是一把雙刃劍，用的好能使用戶行為更加聚焦從而提效，如果使用的不恰當，可能會使用戶產生負面情緒甚至擊退潛在用戶。因此，本文將為大家系統剖析彈窗組件，介紹常用的幾種彈窗組件設計的指導原則以及使用場景、技巧，幫助大家更高效正確的設計出易用的彈窗，提升產品的用戶體驗。

彈窗組件是產品中重要的核心組件之一，是一種瞬態的交互式視圖，它會在“合適”的時間彈出到頁面的最頂層，并借由用戶的一次點擊完成關閉。文章將從彈窗的定義及分類，彈窗的設計規范，彈窗的設計實踐三個部分進行講解。

內容概覽

Part 1：彈窗定義及分類

彈窗的定義：彈窗是一種模式窗口，它出現在應用程序內容界面 z 軸最上方，用于提供關鍵信息或要求做出決定。

彈窗具備兩個特點及作用：一個是聚焦用戶視線，再一個是給予用戶重要提示。

常見彈窗示例

彈窗的分類：從彈窗的交互特點上來看，可分為模態彈窗和非模態彈窗兩種。模態是 UI 控件或視圖的一種狀態，用戶只能對處于模態的控件或視圖進行響應，不能操作其他非模態的控件或視圖。兩者的主要區別在于是否打斷當前進程，以及需不需要用戶對其進行回應。

模態彈窗：會打斷用戶的正常操作，要求用戶必須對其進行回應，否則不能繼續其它操作。

非模態彈窗：則不會影響用戶的操作，用戶可以不對其進行回應，繼續當前的操作。

模態彈窗與非模態彈窗差異

常見的模態彈窗主要有：對話框（Dialog）、操作欄（Actionbar），以及選擇視窗（Modal view）、模態氣泡（Popovers）；常見的非模態彈窗主要有：提示框（Toast），提示對話框（Snackbar）。

模態彈窗與非模態彈窗示例

對話框（Dialog）：對話框是一種模態彈窗，需要得到用戶的實時反饋，是連接產品與用戶的主要功能形式之一，通常可以扮演引導、詢問、確認、警示等一些列功能角色，但由于其阻斷感強，且操作不可忽略，所以在產品設計中需謹慎使用。

對話框特點及示例

操作欄（Actionbar）：操作欄是對話框的一種延伸，也是模態彈窗，用戶必須進行操作，彈窗才會消失，和對話框的區別是操作欄擁有更多的功能按鈕，其重點在操作。

操作欄特點及示例

提示框（Toast）：一般出現在頁面的中下方，顯示幾秒然后自動消失，其阻斷感弱，一般用來顯示操作結果，或者提示提醒。

提示框特點及示例

提示對話框（Snackbar）：提示對話框是一種兼容提示與操作的消息控件。其和 Toast 類似，在不操作的情況下幾秒后自動消失，同時滑動頁面等也可忽略消息，容器中一般放置輕量的行動按鈕。

提示對話框特點及示例

綜上，以上四類彈窗從橫向打擾度、縱向業務助力性角度，對比可以得到如下二維線性對比圖。當有運營活動、推廣等業務屬性較強的信息需要展示時，可以對價值進行評估判斷是否選用強制性較強且打擾度較高的對話框進行，若權衡業務價值后發現不需要對話框這樣過度打擾用戶的方式，可以嘗試能否選用 snack bar 或其他彈窗解決；

從橫向即時性、縱向重要性角度，同樣對比可以得到如下二維線性對比圖。toast 多用于即時性較強的狀態或結果的反饋，snack bar 多用于推送等非即時性提示，而對話框則用于即使性強且重要性很高需要用戶第一時間完成操作或決策的場景。

四類彈窗不同維度對比

Part 2：設計規范

接下來讓我們看下以上四類代表性彈窗各自的設計規范以及注意點。

1. 對話框

① 元素及設計規范

首先來看對話框，對話框是一種模態窗口。在解決模態之前，將禁用對 UI 其余部分的訪問。所有模態表面在設計上都是中斷的——它們的目的是讓用戶專注于所有出現在其表面之上的內容。

對于對話框的設計，有三點核心設計原則，分別是：專注聚焦、直接的、有幫助。專注：即將用戶注意力集中，以確保他們的內容得到解決；直接的：對話應該直接傳達信息并致力于完成任務，因此他必須是簡單直接的；有幫助：對話框應出現以響應用戶任務或操作，并帶有相關或上下文信息，簡潔有效。

一個完整的對話框一般由以下 5 個部分組成，其中，標題、行動按鈕是兩個基礎必備元素，輔助內容、關閉控件、粗布蒙層是非必要元素。

對話框要素組成

1）標題：

標題是對話框向用戶傳達其目的、作用的核心手段，使用時需與行動按鈕配合呼應。有以下幾個注意點：

1. 標題需要盡可能簡短、清晰，可以是陳述或問題；
2. 避免使用道歉（“抱歉打擾了”）、警告（“警告！”）或含糊不清（“你確定嗎？”）等文案；
3. 盡量在屬性對話框中使用名詞，在功能對話框的標題中使用動詞；

屬性對話框：向用戶呈現或讓用戶改變所選對象的屬性或者設置，主要具備說明、呈現的作用；

功能對話框：為用戶提供功能操作的彈窗，需要詢問用戶的決策來執行下一步操作。

2）輔助內容：

輔助內容的作用是輔助表達對話框的目的或為用戶提供操作面板。有以下幾個注意點：

1. 輔助內容視覺優先級弱于主標題；
2. 信息內容同樣需要簡潔明練，同時要與主題關聯順承；
3. 輔助內容可以是文案也可以包含簡單的交互行為，如選單、橫滑等。

3）行動按鈕：

行動按鈕是對話框執行操作或解決問題的核心交互元件，是用戶決策的關鍵出口，有以下幾個注意點：

1. 按鈕中文案簡短易懂，一般保持在 1~4 個字符之間；
2. 按鈕的視覺優先級較高，突出明顯且易于點擊操作；
3. 按鈕文案盡量為用戶的直接操作行為，而不是間接的邏輯判斷。

按鈕的層次結構與優先級表達

按鈕的視覺優先級層次有三種，由高到低分別是高度強調、中度強調、低度強調，分別對應三類按鈕，即填充按鈕，視覺優先級以及引導點擊性最強，其次是輪廓按鈕，最次級是純文本按鈕。

按鈕層次結構及優先級

一個彈窗一次可以在布局中顯示多個按鈕，因此高強調按鈕可以與執行次要功能的中強調按鈕和低強調按鈕配合使用。

按鈕優先級搭配使用建議

按鈕的召喚行為

彈窗中左右功能按鈕的次序排布，用戶的慣性認知為：左后退，右行進。

相關的研究論據：

通常，我們在產品中會為了達成某種指標，需要在界面上引導用戶去完成我們希望其完成的操作。且這類操作是可以達成某種目的的，我們把這類操作稱為「召喚行為」，該按鈕成為召喚按鈕，又稱 CTA（Call To Action），即從元素的角度引導用戶完成任務，提升產品轉化率。

還需要配合不同彈窗類型的標題文案/說明文案意向以及使用場景，來進行召喚按鈕的設計，總結如下。

4）關閉控件：

對話框必須保證具備一條以上可以快速撤退的出口（警報對話框除外），并且明顯、穩固可靠，便于用戶在特殊場景快速撤離，需要注意：

對話框常用的關閉形式：

1. “關閉”按鈕，可以在彈窗內部/外部；
2. “返回”按鈕，一般在彈窗內部；
3. 輕拍蒙層，即點擊彈窗周圍任意位置；

系統警報類型對話框會在設備或應用要求用戶當即決策才能進行后續運行的時候出現，此時用戶需要優先執行當前操作，或者使用物理按鈕后撤；

其他常見對話框中，即便行動按鈕中包含類似“取消”、“關閉”等選項時，也需要額外設置關閉按鈕，便于用戶在無需耗費認知&決策成本下，可以快速后撤；

5）海拔：

通常對話框以 24dp 的高度（z 軸）顯示并且可以顯示陰影，可以依據不同場景通過調節陰影的彌散程度來控制（OS 2.0 規范了投影的彌散范圍）。它們出現在其他內容之上，通常在它們下方有一個覆蓋所有應用程序內容的蒙層。

5）蒙層：

蒙層是一種臨時處理，可應用于頁面內容表面，目的是使表面上的內容不那么突出。為了表示應用程序的其余部分無法訪問，并將注意力集中在對話框上，對話框后面的表面被蒙層覆蓋。

② 對話框類型

對話框在的內容部分可以內嵌功能組件，可以是文案、選項、下拉框等，從功能特點上，主要分為警報

對話框功能類型

1）警報對話框

警報對話框會用緊急信息、細節或操作來打斷用戶。迫使用戶當前處理系統的緊急問題

警報對話框

2）簡單對話框

簡單對話框顯示選擇后立即生效的項目列表

簡單對話框

3）確認對話框

確認對話框要求用戶在關閉對話框之前確認選擇

確認對話框

4）全屏對話框

全屏對話框填滿整個屏幕，包含需要一系列任務才能完成的操作

全屏對話框

2. 功能對話框

Actionbar 功能框可以看成是 Dialog 對話框的一種延伸設計，兩者都是模態彈窗，用戶必須進行回應，否則彈窗不會消失，用戶無法繼續其它操作。Actoinbar 比 Dialog 擁有更多的功能按鈕，提供給用戶更多的功能選擇。

Actionbar 功能框注意點

注意點：

1. 敏感的功能操作一般用紅色字體標出（也可以設計其它顏色以突出某個功能按鈕）。
2. 當功能按鈕數量很多的時候，純文本列表的形式閱讀效率較低，此時可以用圖形加文字描述排列的形式來進行展示。這種樣式下需要注意彈窗內各功能按鈕的 UI 設計和排列布局。

Actionbar 功能框注意點

3. 提示條

Toast 提示條是一種非模態彈窗，它彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結果，或者應用狀態的改變。

Snackbar 提示條組成要素

Toast 提示條注意點

Toast 提示條案例

4. 提示對話框

Snackbar 它也是一種非模態彈窗，同時擁有 Toast 和 Dialog 的特點，既不會打斷用戶正常的操作流程，可以告訴用戶信息內容，還可以與用戶進行簡單的對話交互（用戶可以點擊行動按鈕進行回應）。

Snackbar 提示對話框的要素組成

Snackbar 提示對話框注意點

Snackbar 與 Toast 特點對比

PART3：彈窗設計實踐

彈窗設計的思路可以系統化總結為以下四個步驟：

Step1-設計目標分析：明確設計目標，平衡業務&用戶，確認彈窗出現的目標價值；

Step2-確定出現時機/位置：梳理用戶體驗路徑，判斷彈窗出現的時機位置；

Step3-選擇彈窗類型：明確提示/引導等功能的產品定位及優先級，選擇合適的彈窗類型；

Step4-確定彈窗信息：確認彈窗中各信息元素內容、布局、優先級表達。

彈窗設計思路

下面通過一個實際需求案例來進行彈窗的設計應用。需求的背景，是業務側希望在聯運用戶支付的過程中，提升未開通小額免密用戶的小額免密開通率，低額度小額免密用戶的額度升檔率。

設計目標分析

確認時機位置

選擇合適的彈窗

確認彈窗信息

以上就是本期彈窗組件設計分享的全部內容，希望對大家后續的設計工作有所幫助，也歡迎隨時交流學習，共同為提升產品用戶體驗努力。

相關資料：

1. Material Design https://material.io/components/dialogs
2. 《About Face4:交互設計精髓》
3. 《人人都是產品經理——彈窗體系》 http://www.woshipm.com/pd/429007.html
4. 《簡書—彈窗交互組件》 https://blog.csdn.net/she_jw/article/details/103086325
5. 《Origin OS2.0》
6. 《行動按鈕的召喚行為及優先級表達》設計修煉手冊文章

歡迎關注作者微信公眾號：「VMIC UED」