iPhone7如何隐藏关闭应用移动终端的七种交互方式？

什么时候需要为移动终端边框设计关闭按钮？弹框闭合时的交互设计需要注意哪些方面？也许很多人会对这些问题感到不解。在本文中，笔者总结整理了七种移动终端弹匣关闭的交互方式，或许可以帮助你更好的理解屏幕前移动终端弹匣关闭的交互。

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

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

移动终端边框什么时候需要关闭按钮？什么时候不需要关闭按钮？界面中间的确认取消警告框右上角是否需要添加“关闭”图标按钮？手势关闭子弹盒需要注意什么？iOS和Android关闭弹匣有什么区别？单击弹出框中的任务按钮。弹出框是否关闭？

为了解决以上问题，笔者通过系统梳理了关闭移动终端边框的交互。

一、设计原则

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

为用户提供控制权，用户可以主动关机；项目符号框必须至少有一个关闭交互模式；遵循iOS和Android手机设备关机操作的用户习惯；长内容项目符号盒应该易于关闭；关闭图标“X”和取消按钮以避免共存。第二，密切互动

有两种方法可以触发子弹盒。

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

无论是移动端还是PC端，或者是用户主动或者系统触发，弹匣都必须给用户一个出口，并且能够关闭弹匣。要关闭项目符号框，您不必提供“关闭”按钮，但您可以通过单击项目符号框的选项操作按钮来关闭项目符号框。

常见的关闭子弹框的方式有七种，分别是:点击关闭按钮，点击蒙版图层，下拉关闭，下滑关闭，向右滑动关闭，物理返回按钮关闭，点击执行功能按钮后立即执行关闭。

1.单击关闭按钮。

图标按钮以图标“X”的形式显示在底部弹跳框的右上角，用户可以通过点击图标按钮“关闭图标”来关闭弹跳框。

1)使用场景

当子弹盒包含内容和功能操作时，应提供关闭图标“X”的图标按钮，以便用户可以主动关闭子弹盒并执行相应的操作。

2)什么时候不需要关闭图标“x”？

对于操作弹出框，用户需要确认或选择操作项，关闭按钮不需要显示。而应该统一使用文本主按钮，以文本“取消”按钮的形式显示在弹出框面板的底部，用户可以通过点击“取消”按钮关闭弹出框。比如用户删除或提交时，弹出的确认框通常只需要“确定”和“取消”按钮，不显示关闭按钮。全局提示toast(自动关机)。功能录入式弹出框，为了保持界面简洁，不需要“关闭图标”，比如智能文档模式下方的浮动工具栏。警告或通知类型的弹出窗口，不要关闭图标。

3)关闭按钮位置

关闭按钮应该统一显示在项目符号框的右上角。遵循iOS和Android系统规范，用户习惯，阅读习惯“Z”，避免误操作“关闭前请确认信息和操作项目”。

4)关闭按钮图标“X”什么时候需要显示在左上角？

页面级别:当页面级别超过3级时，关闭按钮“X”可以放在“返回”按钮右侧的左上角，以便于用户快速返回第一级页面，而不用原路返回。多语言和国际用户习惯:特定的语言和文化习惯，从右到左的阅读顺序，遵循用户阅读习惯。如台湾省和日本。2.点击遮罩层

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

1)遮罩层不能点击场景。

莫代尔墨盒，即“封锁”，必须由用户确认。例如，删除需要用户确认的警告项目符号框。弹出框的内容区域，包括表单输入框，要求用户提交数据。为了防止用户输入的数据因误操作而丢失，不能点击掩膜层。有前置限制，用户需要完成一定的操作或者满足一定的条件才能关闭子弹盒。例如，在用户隐私协议的场景中，用户必须主动检查同意协议选项。

2)掩膜层显示逻辑。

无掩蔽层的非模态弹性框架；带掩膜层的莫代尔弹性框架；蒙版层统一使用半透明黑色蒙版，颜色值和不透明度值由UI定义。掩膜层的可视高度遵循48dp*48dp高度的移动终端最小点击面积的交互热区，保证用户可以点击。

根据材料设计标准，谷歌建议将最小点击区域的高度设置为48个设备像素(dp)左右。

3)掩模层的覆盖

如果嵌入了H5页面，由于客观条件限制，框架下的蒙版层不需要覆盖标题栏。

上面提到的模态和非模态项目符号框架模式需要了解它们之间的交互差异，以便更清楚地了解两种模式的关闭交互。

4)模态和非模态弹性框架之间的交互差异。

模态子弹盒:用户只能操作子弹盒中的交互元素，子弹盒的外部区域是不可操作的，所以需要添加一个半透明的遮罩层。例如底部操作的子弹盒。非模态项目符号框架:用户可以并行操作项目符号框架内外的交互元素，无需添加半透明的遮罩层。比如苹果地图App。3.拉下以关闭

当用户在底部框架区域向下滑动手指时，框架将向下移动。当它达到当前帧高度的1/2时，关闭交互将被触发。如果用户继续向下滑动并松手，框架将关闭。

1)交互逻辑

支持下拉封闭的项目符号框，标题区域要统一显示横条图标，样式由UI定义；交互热区:底部弹性框架的整个区域；手势方向:手指只能向下移动；下拉触发器关闭帧阈值:当前底部帧高度的1/2。

2)使用场景

对于长内容类型弹出窗口，您需要使用下拉菜单关闭交互式手势并关闭弹出窗口。

3)不要使用下拉手势关闭子弹盒的场景。

莫代尔墨盒，即“封锁”，必须由用户确认。例如，删除需要用户确认的警告项目符号框。弹出框的内容区域，包括表单输入框，要求用户提交数据。为了防止用户输入的数据因误操作而丢失，不能关闭弹出框。有前置限制，用户需要完成一定的操作或者满足一定的条件才能关闭子弹盒。例如，在用户隐私协议的场景中，用户必须主动检查同意协议选项。4.滑下

用户在屏幕上向下滑动(包括左下方或右下方的滑动方向)到任意位置，然后松开手关闭弹性框；当用户手指向下滑动不松手，继续向上滑动到任意位置再松手，就可以取消子弹盒的关闭。

使用场景:

仅用于大图模式场景。当用户向下滑动屏幕时，图片下移，放开后关闭图片查看器，关闭相框。

5.向右滑动关闭

用户从框架区域的左边缘向右滑动，即快速向右滑动然后放开，触发关闭框架的操作，关闭框架。

1)不要从界面的左边缘向右滑动场景。

莫代尔墨盒，即“封锁”，必须由用户确认。例如，删除需要用户确认的警告项目符号框。弹出框的内容区域，包括表单输入框，要求用户提交数据。为了防止用户输入的数据因误操作而丢失，不支持向右滑动关闭弹出框。有前置限制，用户需要完成一定的操作或者满足一定的条件才能关闭子弹盒。例如，在用户隐私协议的场景中，用户必须主动检查同意协议选项。

除了以上场景，还需要支持向右滑动边框左边缘的手势关闭边框，包括安卓、iOS、小程序。

2)特殊场景

当同时存在向右滑动页面和向右滑动边框的手势时，在边框区域向右滑动，先关闭边框，再沿屏幕左边缘再次向右滑动，返回上级页面。键盘扩展场景，iOS端不支持左边缘向右滑动折叠键盘，遵循iOS平台规范。6.物理返回键(安卓端)

对于Android设备，用户可以使用设备上的物理后退按钮来关闭弹出框。当用户按下返回按钮时，弹跳盒可以关闭。

1)交互式使用

点击物理按钮，需要一步步后退，不允许跳回。模态框架，遮罩层覆盖物理返回按钮，不支持向左边缘向右滑动关闭框架。安卓手机将系统导航模式切换到全屏手势时，没有实体返回键。7.单击执行功能按钮，立即执行并关闭项目符号框。

单击框中的功能按钮通常需要立即执行并关闭框。必须先执行再关闭，而不是先关闭再执行。用户执行一个功能按钮后，系统必须根据立即响应的原则反馈用户正在执行用户操作。

为什么我点击执行功能按钮需要关闭弹出框？因为盒子合不合，关系到用户的目标。用户主动触发一个操作来唤起一个弹出框。首先，有一个用户目标。其次，用户点击弹出框中的一个功能按钮，执行一个任务，实现用户目标。

除此之外，还有一些场景是你点击执行功能按钮，在不关闭弹匣的情况下，立即执行弹匣，比如切换选择器，但本质是围绕当前用户的目标来决定是否关闭弹匣。

第三，写在最后

主要阐述了关闭移动终端弹匣的七种交互方式和用法，包括:点击关闭按钮、点击蒙版图层、下拉关闭、下滑关闭、向右滑动关闭、关闭物理返回按钮、点击执行功能按钮后立即执行关闭。

专栏作家

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

题图来自Unsplash，基于CC0协议。

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