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

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

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

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

針對上述種種問題，筆者通過系統(tǒng)梳理移動端彈框關(guān)閉的交互，以解決以上問題。

一、設(shè)計原則

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

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

二、關(guān)閉交互

彈框有兩種觸發(fā)方式。

B端产品经理的能力模型与学习提升

B端产品经理面临的第一大挑战，是如何正确的分析诊断业务问题。 这也是最难的部分，产品设计知识对这部分工作基本没有帮助，如果想做好业务分析诊断，必须具备扎实 ...

查看详情 >

一種是系統(tǒng)主動觸發(fā)，系統(tǒng)等異常場景，會產(chǎn)生不符合用戶預(yù)期的后果。必須要明確告知用戶，通常以阻斷式警示對話框出現(xiàn)，需要用戶確認(rèn)彈框內(nèi)信息，并做出確認(rèn)或取消等交互動作。另外一種完全是由用戶主動觸發(fā)的。

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

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

1. 點擊關(guān)閉按鈕

統(tǒng)一使用圖標(biāo)按鈕，以icon“x”的形式，顯示在底部彈框的右上角，用戶通過點擊“關(guān)閉icon”圖標(biāo)按鈕來關(guān)閉彈框。

1）使用場景

當(dāng)彈框中包含內(nèi)容和功能操作時，應(yīng)提供一個關(guān)閉icon“x”的圖標(biāo)按鈕，以讓用戶能夠主動關(guān)閉彈框并進行相應(yīng)的操作。

2）何時不需要關(guān)閉按鈕icon“x”？

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

3）關(guān)閉按鈕位置

關(guān)閉按鈕需統(tǒng)一顯示在彈框右上角。遵循iOS和Android系統(tǒng)規(guī)范、用戶使用習(xí)慣、閱讀習(xí)慣「Z字型」、避免誤操作「關(guān)閉之前需要先確認(rèn)信息和操作項」。

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

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

2. 點擊遮罩層

用戶點擊彈框外部區(qū)域，即遮罩層，可關(guān)閉彈框。

1）遮罩層不可點擊場景

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

2）遮罩層展示邏輯

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

根據(jù) Material Design 準(zhǔn)則，Google 建議將最最小點擊區(qū)域的高度設(shè)置為大約 48 個設(shè)備像素（dp）。

3）遮罩層的覆蓋范圍

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

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

以上提到模態(tài)彈框和非模態(tài)彈框兩種彈框模式，要想更清晰理解兩種模式彈框的關(guān)閉交互方式，需要理解兩者之間的交互區(qū)別。?????????????

4）模態(tài)彈框和非模態(tài)彈框的交互區(qū)別

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

3. 下拉關(guān)閉

用戶在底部彈框區(qū)域向下滑動手指，彈框會隨之向下移動，當(dāng)?shù)竭_當(dāng)前彈框高度的1/2位置后，會觸發(fā)關(guān)閉交互，用戶繼續(xù)向下滑動松手則關(guān)閉彈框。

1）交互邏輯

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

2）使用場景

長內(nèi)容類型彈框，需使用下拉關(guān)閉交互手勢，關(guān)閉彈框。

3）不可用下拉手勢關(guān)閉彈框的場景

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

4. 下滑關(guān)閉

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

使用場景：

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

5. 向右輕掃關(guān)閉

用戶從彈框區(qū)域左邊緣向右輕掃，即快速向右滑動后松手，則觸發(fā)關(guān)閉彈框操作，關(guān)閉彈框。

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

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

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

2）特殊場景

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

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

對于安卓設(shè)備，用戶可以使用設(shè)備上的物理返回按鈕來關(guān)閉彈框。當(dāng)用戶按下返回按鈕時，可關(guān)閉彈框。

1）交互用法

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

7. 點擊執(zhí)行功能按鈕后立即執(zhí)行并關(guān)閉彈框

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

為什么點擊執(zhí)行功能按鈕需要關(guān)閉彈框？因為彈框是否關(guān)閉，和用戶目標(biāo)有關(guān)。用戶主動觸發(fā)某操作喚起彈框，首先是有用戶目標(biāo)的，其次，用戶通過點擊彈框內(nèi)某功能按鈕，執(zhí)行任務(wù)來實現(xiàn)用戶目標(biāo)。

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

三、寫在最后

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