1 前言

前段时间整理移动组件，发现最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚，不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景……

因此，打算从头整理移动弹窗的基础知识，以iOS弹窗体系为切入点，从定义出发，对移动弹窗进行分类，然后分别分析每一类弹窗的应用场景，以及在使用过程中需要注意的点。

2 名词解释

• 弹窗：

弹框是人机交互中常见的方式，常常出现于询问、警示以及完成某个插入任务。

弹框能使用户有效聚焦于当前最紧急的信息，也可以在不用离开当前页面的前提下，完成一些轻量的任务。

• 移动弹窗：

运用在移动端的弹窗，包括了手机、平板、手表等移动端设备。本文整理学习的对象，主要是针对【iPhone】。

• 模态：

模态（Modality）是一种视图，在当前的iOS 11人机交互指南（Human Interface Guidelines）中有如下定义：

模态视图提供了专注模式，用户只有在完成当前的任务或关闭一个信息或视图之后，才能去做其它事情。

当屏幕上出现一个模态视图时，用户必须做出决策，点击按钮或是退出模态化体验。

一个模态视图可以占据整个屏幕、整个父视图（比如浮出层）或者屏幕的一部分。典型的模态视图一般都含有“完成”和“取消”按钮。

Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view.

When a modal view appears onscreen, the user must make a choice by tapping a button or otherwise exiting the modal experience.

A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view.

早在iOS 7的HIG中，模态是归属于【临时视图（Temporary View）】类目下，且在定义上更加直白地指出：

模态视图是完成一系列任务的有效视图。他出现在所有元素的顶部，且会阻塞所有底部元素的操作。

Modals are a useful view for tasks that require multiple commands or inputs by the user. They appear on top of everything else, and, while open, block interaction with any other interactive elements underneath.

因此，可以这样理解：

模态视图，就是在原始视图上，叠加一层蒙版，用以隔离原始视图中的所有操作。然后在蒙版上展示一层新视图，让用户更专注于完成新视图中的任务。 

• 模态弹窗：

运用模态视图的弹窗。

• 非模态弹窗：

没有运用模态视图的弹窗。

3 移动弹窗的分类

根据是否运用模态视图，我把iOS的弹窗类型进行如下分类：

4 模态弹窗

4.1 对话框（Alerts，System Rating and Review Prompts）

4.1.1 定义 ——所有有定义皆出自iOS 11的HIG，下同

对话框（Alerts），是我们最为常见的【弹窗】类型。

iOS 11的HIG中有如下定义：

对话框承载与当前状态有关的重要信息，常需要用户进行响应。对话框由标题、信息内容（可选）、一个或多个按钮、文本输入框（可选）四部分组成。除了上述可选元素以外，对话框的外观是固定的不可修改的。

Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

4.1.2 常见的使用方式

常用于信息提示、操作二次确认、邀请评分、授权等场景。

截屏来源：百度网盘，微信，蜗牛睡眠，Worktile

除了定义中提到的【文本输入框】之外，iOS还提供了默认打分的组件【System Rating and Review Prompts】：

图片来源：苹果开发者官网

4.1.3 使用过程中需要注意的点

• 标题：简短，能说明问题的标题。
• 信息内容：根据需要可不填写。
• 按钮：

• 一般数量控制在3个以内，若需要更多的按钮，建议使用【操作列表】。
• 可使用加粗、颜色等方式，引导用户作出选择。
• 文案要具体精准，让用户明白选择之后会发生什么。避免使用“是（yes）”、“否（No）”等语意不明的词。
• 符合用户预期的按钮放在右侧，【取消（Cancel）】按钮固定在左侧。
• 当有破坏性的操作时（如删除），一方面要突出显示具有潜在破坏性的操作按钮，另一方面要确保有【取消（Cancel）】按钮，保证用户能够安全地取消破坏性操作。
• 支持Home键关闭弹窗。（等同于【取消（Cancel）】）

• 扩展组件：特殊情况下，可使用定义的扩展组件。例如文本输入框、打分组件等。
• 操作方式：由于必须要获取用户明确的响应，因此只有选择按钮才能关闭弹窗。（点击蒙版无法关闭弹窗）

4.2 操作列表（Action Sheets，Action Views）

 

4.2.1 定义

操作列表（Action Sheets）是一种特殊的对话框，是对操作动作的响应，显示当前操作场景下相关联的多个选项。用于让用户开始任务，或者在执行潜在的破坏性操作前，进行二次确认。

An action sheet is a specific style of alert that appears in response to a control or action, and presents a set of two or more choices related to the current context. Use an action sheet to let people initiate tasks, or to request confirmation before performing a potentially destructive operation.

操作视图（Action Views）是在特定语境下的app快捷任务的展示面板。用户点击面板上的任务，可以直接执行相应的任务，或者更进一步的操作。

An activity is a task, such as Copy, Favorite, or Find, that’s useful in the current context. Once initiated, an activity can perform a task immediately, or ask for more information before proceeding.

4.2.2 常见的使用方式

操作列表（Action Sheets），常被用于单选操作，以及删除操作的二次确认。(单一操作)

截屏来源：哔哩哔哩，teambition，照片，微信（未使用原生弹窗）

操作视图（Action Views），常被用于分享操作。

截屏来源：Safari，钉钉，微信，UC

4.2.3 使用过程中需要注意的点

• 确保有一个【取消（Cancel）】的按钮。
• 突出显示具有潜在破坏性的操作按钮。
• 尽量避免列表的滚动，如选项过多，则需要留出视觉线索。
• 对于【操作视图（Action Views）】，需要明确的应用图标和操作名称，用于清晰地描述任务。

4.3 浮出层（Popover，Edit Menus，Home Screen Quick Action Menus）

4.3.1 定义

浮出层（Popovers）是一种暂时性的视图，他出现在用户点击区域的顶层。典型的浮出层包括一个箭头，指向浮出层出现的位置。浮出层可以是模态的，也可以是非模态的。

A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal.

编辑菜单（Edit Menus），用户可以在文本、网页、图片等地方，使用长按、双击的手势唤起。他包含了一些相关联的编辑操作，比如复制、粘贴等。

People can touch and hold or double-tap an element in a text field, a text view, a web view, or an image view to select content and reveal edit options, such as Copy and Paste.

主屏快捷操作菜单（Home Screen Quick Actions），是通过3D Touch唤起的app指定的快捷操作菜单。只需比“长按”更重一些的按压，就能看到高频操作菜单。

Home screen quick actions are a convenient way to perform useful, app-specific actions right from the Home screen, using 3D Touch. Apply a little pressure to an app icon with your finger—more than you use for tap and hold—to see a list of available quick actions.

4.3.2 常见的使用方式

严格意义上的浮出层（Popovers），能够包含【导航栏、工具栏、标签栏、表格、收藏、图片、地图】等各种元素，所以由于展示空间的问题，只能使用在iPad端，在手机端称之为全屏模态视图（Full-Screen Modal Views）。

但是，浮出层（Popovers）的明确指向性和便捷性，依旧非常适合用于手机端的菜单选择，因此很多app都自己设计了小型的浮出层：

截屏来源：微信，钉钉，手机淘宝，支付宝

编辑菜单（Edit Menus），常用于对文本和聊天记录的编辑。

截屏来源：微信，钉钉，备忘录，UC

主屏快捷操作菜单（Home Screen Quick Actions），是iOS独有的交互形式，只在主屏中使用，用于快速执行应用的常用任务。

图片来源：苹果开发者官网

4.3.3 使用过程中需要注意的点

• 显示符合上下文情景的操作选项，并用通用的文案描述。
• 尽可能地减少选项数量，只显示最有意义的操作。
• 使用标准手势唤起菜单。
• 根据唤起的位置，自动调整菜单的位置。
• 对于【编辑菜单】：

• 自动选择相关联的词组。
• 不要加入【编辑】按钮。
• 支持【撤销/重做】操作。

4.4 模态视图（Modal View）

 

4.4.1 定义

模态视图（Modal View）可以占据整个屏幕、整个父视图（比如浮出层）或者屏幕的一部分。典型的模态视图一般都含有“完成”和“取消”按钮。

A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view.

这里分析的模态视图（Modal View），区别于对话框（Alerts），占据了更大范围的屏幕，内部包含更多的操作。

4.4.2 常见的使用方式

根据占据屏幕的方式及范围，可以分为【全屏、半屏、中央】三种类型，其中【全屏、半屏】常包含复杂表单。

全屏，常见于“新建后发送、选择后下载”等信息量较大的单一链路的场景。

截屏来源：网易邮箱，钉钉，微信，腾讯视频

半屏，常见于“侧边导航、选择器”等场景。

截屏来源：滴滴，大众点评，手机淘宝，支付宝

中央，可视为对话框（Alerts）的变形，有更强的视觉表现与更多的操作，常见于“运营宣传、用户引导”等场景。

截屏来源：百度糯米，滴滴，美团，teambition

4.4.3 使用过程中需要注意的点

• 确保模态视图中的任务是简练严谨的，让用户能够聚焦高效地完成任务。
• 提供明显且安全的退出模态视图的方式。
• 对于【全屏/半屏】：

• 未点击【保存/确认/完成】等明确的按钮之前，所有的修改都不会生效。
• 模态视图多从边缘进入。
• 点击蒙版即可关闭模态视图。

5 非模态弹窗

 

5.1 透明指示层（UI Progress HUD）

 

苹果官网上具体的定义没有找到，与安卓独有的Toast非常相似，网上各种文章都称iOS的为HUD（head up display）。

HUD有三个独有的特点：

1. 位置固定显示于页面中央，
2. 独有的半透明毛玻璃效果，
3. 展示的信息是可变的。

因此，HUD常用于表示轻量的反馈。

由于苹果官方目前暂未开放相应的接口，严格意义上标准的HUD只可见于原生系统的音量提示。因此，很多app都自己设计透明指示层，用于加载提示等场景。

截屏来源：iOS音量键，支付宝，钉钉，哔哩哔哩

既然提到了Toast，那就不得不再提一下，安卓特有的另一种交互弹窗：Snackbar。详细的分析可见 @龙爪槐守望者 的文章，写得非常清晰：《「这个控件叫什么」系列之TOAST（吐司提示）的曾经、现在与未来》

文中写道：

Snackbar可以理解为是加强版的Toast。样式和规则与Toast非常相似，主要有两点不同：1.Snackbar支持主动滑动关闭。2.Snackbar可以附带一个操作（也可以不带）。

图片来源：Material Design 官网

5.2 通知（Notifications）

5.2.1 定义

无论手机是锁屏状态还是使用状态，app应用都能通过通知，第一时间传递给用户重要信息。每条通知应该包括 应用名称、小图标与信息内容。

Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use. Each notification includes the app name, a small app icon, and a message.

5.2.2 常见的操作方式

可以通过点击、滑动等方式打开或者移除通知。

在解锁的状态下，通过3D Touch、向下滑动等操作，可以展开扩展视图，执行一些快捷操作。

图片来源：苹果开发者官网

5.2.3 使用过程中需要注意的点

• 提供精炼有价值的信息。
• 注意通知发送的频率和时机。
• 考虑3D Touch重按之后的展示细节内容，以及相关的操作按钮。

6 参考文献

1. 认识移动端弹框
2. Human Interface Guidelines（iOS 10，2017.06），https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
3. The iOS Design Guidelines（iOS 7，2015.9.28），http://ivomynttinen.com/blog/ios-design-guidelines
4. 几种弹窗设计模式（iOS端)，http://www.jianshu.com/p/63eb8fad9329
5. 实用干货！UI设计师需要了解的 APP弹窗体系
6. 「这个控件叫什么」系列之TOAST（吐司提示）的曾经、现在与未来

注1：本文是基于iOS 11的人机交互指南（Human Interface Guidelines）、网上大神们的文章、个人经验总结梳理而成，还望大家不吝赐教，提出宝贵的意见或建议。

注2：若内容涉及侵权，请联系管理员，我们将第一时间删除相关内容。