移动端弹框关闭的七种交互方式.docx

移动端弹框关闭的七种交互方式 移动端弹框关闭的七种交互方式是移动端交互设计中的一项关键要素。本文系统地总结了移动端弹框关闭常见的七种交互方式，梳理弹框关闭的使用场景、交互用法和交互注意事项，帮助交互设计师理解并正确设计移动端弹框的关闭交互。 一、设计原则 1. 提供给用户控制权，用户可以主动关闭； 2. 弹框至少要有一种关闭交互方式； 3. 遵循 iOS 和 Android 手机设备关闭操作的用户习惯； 4. 长内容弹框要易关闭； 5. 关闭 icon“x”和取消按钮避免同时存在。 二、关闭交互弹框有两种触发方式。 一种是系统主动触发，系统等异常场景，会产生不符合用户预期的后果。必须要明确告知用户，通常以阻断式警示对话框出现，需要用户确认弹框内信息，并做出确认或取消等交互动作。 另外一种完全是由用户主动触发的。无论是移动端还是 PC 端，或者是用户主动或系统触发，弹框都必须要给用户一个出口，能够关闭弹框。而关闭弹框，不一定必须提供“关闭”按钮，也可以是通过点击弹框的选项动作按钮来关闭弹框。 三、七种弹框关闭方式 1. 点击关闭按钮 统一使用图标按钮，以 icon“x”的形式，显示在底部弹框的右上角，用户通过点击“关闭 icon”图标按钮来关闭弹框。 2. 点击遮罩层 用户点击弹框外部区域，即遮罩层，可关闭弹框。 3. 下拉关闭 用户在底部弹框区域向下滑动手指，弹框会随之向下滑动关闭。 4. 下滑关闭 用户在底部弹框区域向上滑动手指，弹框会随之向上滑动关闭。 5. 向右轻扫关闭 用户在底部弹框区域向右轻扫手指，弹框会随之关闭。 6. 物理返回按键关闭 用户点击物理返回按键，弹框会关闭。 7. 点击执行功能按钮后立即执行并关闭 用户点击弹框中的执行功能按钮后，弹框会立即执行并关闭。 四、设计注意事项 1. 弹框关闭按钮位置 关闭按钮需统一显示在弹框右上角。 2. 遮罩层不可点击场景 遮罩层不可点击的场景有模态弹框、弹框的内容区域包含表单输入框等需要用户提交数据的场景。 3. 遮罩层展示逻辑 遮罩层统一使用半透明黑色蒙层，色值和不透明度的数值由 UI 定义。 4. 模态弹框和非模态弹框的交互区别 模态弹框：用户只能操作弹框内的交互元素，弹框外部区域不可操作，需要加半透明遮罩层。 非模态弹框：用户可以并行操作弹框内和弹框外部区域的交互元素，不要加半透明遮罩层。 通过了解移动端弹框关闭的七种交互方式和设计原则，可以帮助交互设计师更好地设计移动端弹框的关闭交互，提高用户体验。