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

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

一、彈窗定義及分類

彈窗的定義：彈窗是一種模式窗口，它出現(xiàn)在應(yīng)用程序內(nèi)容界面z軸最上方，用于提供關(guān)鍵信息或要求做出決定。彈窗具備兩個特點及作用：一個是聚焦用戶視線，再一個是給予用戶重要提示。

常見彈窗示例

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

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

模態(tài)彈窗：會打斷用戶的正常操作，要求用戶必須對其進行回應(yīng)，否則不能繼續(xù)其它操作。

非模態(tài)彈窗：則不會影響用戶的操作，用戶可以不對其進行回應(yīng)，繼續(xù)當前的操作。

模態(tài)彈窗與非模態(tài)彈窗差異

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

模態(tài)彈窗與非模態(tài)彈窗示例

對話框（Dialog）：對話框是一種模態(tài)彈窗，需要得到用戶的實時反饋，是連接產(chǎn)品與用戶的主要功能形式之一，通?？梢园缪菀龑А⒃儐?、確認、警示等一些列功能角色，但由于其阻斷感強，且操作不可忽略，所以在產(chǎn)品設(shè)計中需謹慎使用。

對話框特點及示例

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

操作欄特點及示例

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

提示框特點及示例

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

提示對話框特點及示例

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

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

四類彈窗不同維度對比

二、設(shè)計規(guī)范

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

1. 對話框

（1）元素及設(shè)計規(guī)范

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

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

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

對話框要素組成

1）標題：

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

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

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

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

2）輔助內(nèi)容：

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

• 輔助內(nèi)容視覺優(yōu)先級弱于主標題；
• 信息內(nèi)容同樣需要簡潔明練，同時要與主題關(guān)聯(lián)順承；c、輔助內(nèi)容可以是文案也可以包含簡單的交互行為，如選單、橫滑等。

3）行動按鈕：

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

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

按鈕的層次結(jié)構(gòu)與優(yōu)先級表達按鈕的視覺優(yōu)先級層次有三種，由高到低分別是高度強調(diào)、中度強調(diào)、低度強調(diào)，分別對應(yīng)三類按鈕，即填充按鈕，視覺優(yōu)先級以及引導點擊性最強，其次是輪廓按鈕，最次級是純文本按鈕。

按鈕層次結(jié)構(gòu)及優(yōu)先級

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

按鈕優(yōu)先級搭配使用建議

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

相關(guān)的研究論據(jù)：

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

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

4）關(guān)閉控件

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

a、對話框常用的關(guān)閉形式：

• “關(guān)閉”按鈕，可以在彈窗內(nèi)部/外部；
• “返回”按鈕，一般在彈窗內(nèi)部；
• 輕拍蒙層，即點擊彈窗周圍任意位置；

b、系統(tǒng)警報類型對話框會在設(shè)備或應(yīng)用要求用戶當即決策才能進行后續(xù)運行的時候出現(xiàn)，此時用戶需要優(yōu)先執(zhí)行當前操作，或者使用物理按鈕后撤；

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

5）海拔

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

6）蒙層

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

（2）對話框類型

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

對話框功能類型

1）警報對話框

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

警報對話框

2）簡單對話框

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

簡單對話框

3）確認對話框

確認對話框要求用戶在關(guān)閉對話框之前確認選擇。

確認對話框

4）全屏對話框

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

全屏對話框

2. 功能對話框

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

Actionbar功能框注意點

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

Actionbar功能框注意點

3. 提示條

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

Snackbar提示條組成要素

Toast提示條注意點

Toast提示條案例

4. 提示對話框

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

Snackbar提示對話框的要素組成

Snackbar提示對話框注意點

Snackbar與Toast特點對比

三、彈窗設(shè)計實踐

彈窗設(shè)計的思路可以系統(tǒng)化總結(jié)為以下四個步驟：

1. 設(shè)計目標分析：明確設(shè)計目標，平衡業(yè)務(wù)&用戶，確認彈窗出現(xiàn)的目標價值；
2. 確定出現(xiàn)時機/位置：梳理用戶體驗路徑，判斷彈窗出現(xiàn)的時機位置；
3. 選擇彈窗類型：明確提示/引導等功能的產(chǎn)品定位及優(yōu)先級，選擇合適的彈窗類型；
4. 確定彈窗信息：確認彈窗中各信息元素內(nèi)容、布局、優(yōu)先級表達。

彈窗設(shè)計思路

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

設(shè)計目標分析

確認時機位置

選擇合適的彈窗

確認彈窗信息