移動端彈框什么時候需要設計關閉按鈕？彈框關閉時的交互設計，又需注意哪些方面？關于這些問題，或許不少人都會感到疑惑。在這篇文章里，作者就總結梳理了移動端彈框關閉的七種交互方式，或許會幫助屏幕前的你更好地理解移動端彈框關閉交互。

本文系統地總結了移動端彈框關閉常見的7種交互方式，梳理彈框關閉的使用場景、交互用法和交互注意事項，幫助交互設計師理解并正確設計移動端彈框的關閉交互。

在日常設計工作中，設計師可能會面臨以下設計問題：

• 移動端彈框什么時候需要關閉按鈕？什么時候不需要關閉按鈕？
• 界面中間的確認取消警示彈框，是否需要在右上角添加“關閉”icon按鈕？
• 手勢關閉彈框需要注意什么？
• iOS和安卓兩端關閉彈框有什么區別？
• 點擊彈框中的任務按鈕，彈框是關閉還是不收起？

針對上述種種問題，筆者通過系統梳理移動端彈框關閉的交互，以解決以上問題。

一、設計原則

移動端彈框關閉設計，筆者建議遵循以下底層設計原則，以用戶為中心設計。

1. 提供給用戶控制權，用戶可以主動關閉；
2. 彈框至少要有一種關閉交互方式；
3. 遵循iOS和Android手機設備關閉操作的用戶習慣；
4. 長內容彈框要易關閉；
5. 關閉icon“x”和取消按鈕避免同時存在。

二、關閉交互

彈框有兩種觸發方式。

一種是系統主動觸發，系統等異常場景，會產生不符合用戶預期的后果。必須要明確告知用戶，通常以阻斷式警示對話框出現，需要用戶確認彈框內信息，并做出確認或取消等交互動作。另外一種完全是由用戶主動觸發的。

無論是移動端還是PC端，或者是用戶主動或系統觸發，彈框都必須要給用戶一個出口，能夠關閉彈框。而關閉彈框，不一定必須提供“關閉”按鈕，也可以是通過點擊彈框的選項動作按鈕來關閉彈框。

常見以下7種彈框關閉方式，具體為：點擊關閉按鈕、點擊遮罩層、下拉關閉、下滑關閉、向右輕掃關閉、物理返回按鍵關閉、點擊執行功能按鈕后立即執行并關閉。

1. 點擊關閉按鈕

統一使用圖標按鈕，以icon“x”的形式，顯示在底部彈框的右上角，用戶通過點擊“關閉icon”圖標按鈕來關閉彈框。

1）使用場景

當彈框中包含內容和功能操作時，應提供一個關閉icon“x”的圖標按鈕，以讓用戶能夠主動關閉彈框并進行相應的操作。

2）何時不需要關閉按鈕icon“x”？

• 操作型彈框，需要用戶確認或選擇操作項，不需要顯示關閉按鈕，需統一使用文字主按鈕，以文本“取消”的按鈕形式，顯示在彈框面板底部，用戶通過點擊“取消”按鈕來關閉彈框。例如當用戶進行刪除或提交操作時，彈出的確認框通常只需要“確定”和“取消”按鈕，而不需要顯示關閉按鈕。
• 全局提示toast（自動關閉）。
• 功能入口類型彈框，為了保持界面簡潔，不需要“關閉icon”，如智能文檔編輯模式的底部懸浮工具欄。
• 警示或通知類型的彈框，不要關閉icon。

3）關閉按鈕位置

關閉按鈕需統一顯示在彈框右上角。遵循iOS和Android系統規范、用戶使用習慣、閱讀習慣「Z字型」、避免誤操作「關閉之前需要先確認信息和操作項」。

4）關閉按鈕icon“x”何時需要展示在左上角？

• 頁面級：當頁面層級超過3級時，為了便于用戶能快速回到一級頁面，無需原路返回，可以將關閉按鈕“x” 置于左上角，位于「返回」按鈕右側。
• 多語言和國際化用戶習慣：特定語言和文化習慣，從右向左閱讀順序，遵循用戶閱讀習慣。例如臺灣、日本等。

2. 點擊遮罩層

用戶點擊彈框外部區域，即遮罩層，可關閉彈框。

1）遮罩層不可點擊場景

• 模態彈框，即“阻斷式”，必須要用戶確認彈框內操作。例如刪除等需要用戶確認的警示彈框。
• 彈框的內容區域，包含表單輸入框等需要用戶提交數據，為了防止誤操作導致用戶輸入的數據丟失，遮罩層不可點擊。
• 有前置限制條件，需要用戶完成特定操作或滿足特定條件才可關閉彈框。例如用戶隱私協議場景，必須要用戶主動勾選同意協議選項。

2）遮罩層展示邏輯

• 非模態彈框，不加遮罩層；模態彈框，加遮罩層；
• 遮罩層統一使用半透明黑色蒙層，色值和不透明度的數值由UI定義；
• 遮罩層可視高度，遵循移動端最小點擊區域48dp*48dp高度的交互熱區，保證用戶可點擊。

根據 Material Design 準則，Google 建議將最最小點擊區域的高度設置為大約 48 個設備像素（dp）。

3）遮罩層的覆蓋范圍

遮罩層需覆蓋標題欄，需遵循iOS、Android、微信小程序平臺規范。其中微信小程序端，遮罩層覆蓋標題欄，但不可覆蓋標題欄右側膠囊按鈕。

若是內嵌H5頁面，因客觀條件限制，則彈框之下的遮罩層無需覆蓋標題欄。

以上提到模態彈框和非模態彈框兩種彈框模式，要想更清晰理解兩種模式彈框的關閉交互方式，需要理解兩者之間的交互區別。?????????????

4）模態彈框和非模態彈框的交互區別

• 模態彈框：用戶只能操作彈框內的交互元素，彈框外部區域不可操作，需要加半透明遮罩層。例如底部操作型彈框。
• 非模態彈框：用戶可以并行操作彈框內和彈框外部區域的交互元素，不要加半透明遮罩層。例如蘋果地圖App。

3. 下拉關閉

用戶在底部彈框區域向下滑動手指，彈框會隨之向下移動，當到達當前彈框高度的1/2位置后，會觸發關閉交互，用戶繼續向下滑動松手則關閉彈框。

1）交互邏輯

• 支持下拉關閉的彈框，頭部區域需統一展示水平條icon，樣式由UI定義；
• 交互熱區：底部彈框全部區域；
• 手勢方向：手指只能向下移動；
• 下拉觸發關閉彈框閾值：當前底部彈框高度的1/2位置。

2）使用場景

長內容類型彈框，需使用下拉關閉交互手勢，關閉彈框。

3）不可用下拉手勢關閉彈框的場景

• 模態彈框，即“阻斷式”，必須要用戶確認彈框內操作。例如刪除等需要用戶確認的警示彈框。
• 彈框的內容區域，包含表單輸入框等需要用戶提交數據，為了防止誤操作導致用戶輸入的數據丟失，不可下拉關閉彈框。
• 有前置限制條件，需要用戶完成特定操作或滿足特定條件才可關閉彈框。例如用戶隱私協議場景，必須要用戶主動勾選同意協議選項。

4. 下滑關閉

用戶在屏幕上向下滑動（包括左下或右下滑動方向）至任意位置后松手釋放，可關閉彈框；當用戶手指下滑未松手，繼續向上滑動到任意位置后松手釋放，則可取消關閉彈框。

使用場景：

僅圖片大圖模式場景使用。用戶向下滑動屏幕，圖片隨之向下移動，松手后觸發關閉圖片查看器，關閉圖片彈框。

5. 向右輕掃關閉

用戶從彈框區域左邊緣向右輕掃，即快速向右滑動后松手，則觸發關閉彈框操作，關閉彈框。

1）不可從界面左邊緣向右輕掃場景

• 模態彈框，即“阻斷式”，必須要用戶確認彈框內操作。例如刪除等需要用戶確認的警示彈框。
• 彈框的內容區域，包含表單輸入框等需要用戶提交數據，為了防止誤操作導致用戶輸入的數據丟失，不支持向右輕掃關閉彈框。
• 有前置限制條件，需要用戶完成特定操作或滿足特定條件才可關閉彈框。例如用戶隱私協議場景，必須要用戶主動勾選同意協議選項。

除以上場景外，均需要支持彈框左邊緣向右輕掃手勢關閉彈框，包括Android、iOS、小程序。

2）特殊場景

• 當同時存在頁面向右滑和彈框向右輕掃手勢時，在彈框區域向右輕掃，先關閉彈框，再次沿著屏幕左邊緣向右滑動，則返回上級頁面。
• 鍵盤展開場景，iOS端不支持左邊緣向右輕掃收起鍵盤，遵循iOS平臺規范。

6. 物理返回按鍵（Android端）

對于安卓設備，用戶可以使用設備上的物理返回按鈕來關閉彈框。當用戶按下返回按鈕時，可關閉彈框。

1）交互用法

• 點擊物理按鍵，需原路逐級返回，不允許跳級返回。
• 模態彈框，遮罩層覆蓋物理返回按鍵，不支持左邊緣向右輕掃關閉彈框。
• 安卓手機將系統導航方式切換到全面屏手勢，則不存在物理返回按鍵。

7. 點擊執行功能按鈕后立即執行并關閉彈框

點擊彈框中的功能按鈕，通常需要立即執行并關閉彈框。一定是先執行再關閉彈框，而不是先關閉彈框再執行。用戶執行某功能按鈕后，遵循即時響應原則，系統必須要反饋用戶在執行用戶操作。

為什么點擊執行功能按鈕需要關閉彈框？因為彈框是否關閉，和用戶目標有關。用戶主動觸發某操作喚起彈框，首先是有用戶目標的，其次，用戶通過點擊彈框內某功能按鈕，執行任務來實現用戶目標。

此外，也存在點擊執行功能按鈕立即執行不關閉彈框的場景，比如開關選擇器，但本質還是圍繞當前用戶目標來進行決策是否關閉彈框。

三、寫在最后

本文主要闡述七種移動端彈框關閉的交互方式和交互用法，包括：點擊關閉按鈕、點擊遮罩層、下拉關閉、下滑關閉、向右輕掃關閉、物理返回按鍵關閉、點擊執行功能按鈕后立即執行并關閉。