移动端弹框什么时候需要设计关闭按钮？弹框关闭时的交互设计，又需注意哪些方面？关于这些问题，或许不少人都会感到疑惑。在这篇文章里，作者就总结梳理了移动端弹框关闭的七种交互方式，或许会帮助屏幕前的你更好地理解移动端弹框关闭交互。

本文系统地总结了移动端弹框关闭常见的7种交互方式，梳理弹框关闭的使用场景、交互用法和交互注意事项，帮助交互设计师理解并正确设计移动端弹框的关闭交互。

在日常设计工作中，设计师可能会面临以下设计问题：

针对上述种种问题，笔者通过系统梳理移动端弹框关闭的交互，以解决以上问题。

移动端弹框关闭设计，笔者建议遵循以下底层设计原则，以用户为中心设计。

弹框有两种触发方式。

一种是系统主动触发，系统等异常场景，会产生不符合用户预期的后果。必须要明确告知用户，通常以阻断式警示对话框出现，需要用户确认弹框内信息，并做出确认或取消等交互动作。另外一种完全是由用户主动触发的。

无论是移动端还是PC端，或者是用户主动或系统触发，弹框都必须要给用户一个出口，能够关闭弹框。而关闭弹框，不一定必须提供“关闭”按钮，也可以是通过点击弹框的选项动作按钮来关闭弹框。

常见以下7种弹框关闭方式，具体为：点击关闭按钮、点击遮罩层、下拉关闭、下滑关闭、向右轻扫关闭、物理返回按键关闭、点击执行功能按钮后立即执行并关闭。

统一使用图标按钮，以icon“x”的形式，显示在底部弹框的右上角，用户通过点击“关闭icon”图标按钮来关闭弹框。

1）使用场景

当弹框中包含内容和功能操作时，应提供一个关闭icon“x”的图标按钮，以让用户能够主动关闭弹框并进行相应的操作。

2）何时不需要关闭按钮icon“x”？

3）关闭按钮位置

关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。

4）关闭按钮icon“x”何时需要展示在左上角？

用户点击弹框外部区域，即遮罩层，可关闭弹框。

1）遮罩层不可点击场景

2）遮罩层展示逻辑

根据 Material Design 准则，Google 建议将最最小点击区域的高度设置为大约 48 个设备像素（dp）。

3）遮罩层的覆盖范围

遮罩层需覆盖标题栏，需遵循iOS、Android、微信小程序平台规范。其中微信小程序端，遮罩层覆盖标题栏，但不可覆盖标题栏右侧胶囊按钮。

若是内嵌H5页面，因客观条件限制，则弹框之下的遮罩层无需覆盖标题栏。

以上提到模态弹框和非模态弹框两种弹框模式，要想更清晰理解两种模式弹框的关闭交互方式，需要理解两者之间的交互区别。

4）模态弹框和非模态弹框的交互区别

用户在底部弹框区域向下滑动手指，弹框会随之向下移动，当到达当前弹框高度的1/2位置后，会触发关闭交互，用户继续向下滑动松手则关闭弹框。

1）交互逻辑

2）使用场景

长内容类型弹框，需使用下拉关闭交互手势，关闭弹框。

3）不可用下拉手势关闭弹框的场景

用户在屏幕上向下滑动（包括左下或右下滑动方向）至任意位置后松手释放，可关闭弹框；当用户手指下滑未松手，继续向上滑动到任意位置后松手释放，则可取消关闭弹框。

使用场景：

仅图片大图模式场景使用。用户向下滑动屏幕，图片随之向下移动，松手后触发关闭图片查看器，关闭图片弹框。

用户从弹框区域左边缘向右轻扫，即快速向右滑动后松手，则触发关闭弹框操作，关闭弹框。

1）不可从界面左边缘向右轻扫场景

除以上场景外，均需要支持弹框左边缘向右轻扫手势关闭弹框，包括Android、iOS、小程序。

2）特殊场景

对于安卓设备，用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时，可关闭弹框。

1）交互用法

点击弹框中的功能按钮，通常需要立即执行并关闭弹框。一定是先执行再关闭弹框，而不是先关闭弹框再执行。用户执行某功能按钮后，遵循即时响应原则，系统必须要反馈用户在执行用户操作。

为什么点击执行功能按钮需要关闭弹框？因为弹框是否关闭，和用户目标有关。用户主动触发某操作唤起弹框，首先是有用户目标的，其次，用户通过点击弹框内某功能按钮，执行任务来实现用户目标。

此外，也存在点击执行功能按钮立即执行不关闭弹框的场景，比如开关选择器，但本质还是围绕当前用户目标来进行决策是否关闭弹框。

本文主要阐述七种移动端弹框关闭的交互方式和交互用法，包括：点击关闭按钮、点击遮罩层、下拉关闭、下滑关闭、向右轻扫关闭、物理返回按键关闭、点击执行功能按钮后立即执行并关闭。

专栏作家

诚俊，微信公众号：UX设计研究所。人人都是产品经理专栏作家，金山软件交互设计副总监，曾任职腾讯、京东、苏宁、同程旅行。关注电商、直播、O2O、云计算、企业数字化、协同办公等领域，擅长产品体验和增长设计。

本文原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。