最近在改版的APP问题较多，其中之一就是各种弹窗的使用问题，如iOS端的Alert与Action Sheet的不当使用。利用这次机会做一个总结以加深理解，梳理自己的弹窗知识体系，欢迎斧正。
APP弹窗总览
需要回应类弹窗：用来传达需要用户特别注意的重要信息（如付费下载），在用户点击弹窗按钮或弹窗外部区域后关闭。 无需回应类弹窗：则主要用来告知用户一些轻量级信息（如消息已发送），它不需要用户特别注意，也不需要用户对弹窗进行回应，一般会在2秒左右自行消失。
接下来一一介绍。
1.1 Alert（警报）
1.1.1 定义
Alert用来传达与应用程序或设备状态有关的重要信息，并经常请求反馈。Alert由标题，可选消息，一个或多个按钮以及用于收集输入的可选文本字段组成。除了这些可配置的元素外，警报的外观是静态的，不能定制。
只在传达重要信息时使用Alert，确保人们认真对待他们。iOS的原生应用上很少使用Alert，即使删除邮件、日历事件等高危操作都只调用了Action Sheet。而一些我们常见的主流APP连退出登录、清除缓存等用户主动发起的操作都要突兀地弹出Alert，破坏了用户体验。
这种由用户主动发起的操作，使用ActionSheet更合适
1.1.2 设计原则
标题：标题尽量简短，控制在一行以内，不要使用结尾标点符号。
消息：可选，尽量提供简短的完整句子，且避免解释按钮的功能。使用友好的语气，避免使用诸如“你“、”我”这样的文案，有时它们会被理解为侮辱或高傲。
按钮：一般来说，使用双键警报来提供两种选择之间的简单选择。操作过多时请考虑使用 Action Sheet。人们最可能点击的按钮应该在右侧，取消按钮应始终位于左侧。尽可能使用与警报标题和消息直接相关的动词和动词短语，例如查看全部，回复或忽略。避免使用“是”和“否”。
1.2 Action Sheet（动作面板）
1.2.1 定义
动作面板是响应控件或操作而出现的特定警报类型，并呈现与当前上下文相关的一组两个或多个选择。使用动作面板让人们发起任务，或者在执行潜在的破坏性操作之前请求确认。在较小的屏幕上(如iPhone)，动作面板从屏幕底部向上滑动。在较大的屏幕上(如iPad)，动作面板立即弹出。
1.2.2 设计原则
动作面板底部始终提供取消按钮，以提高用户放弃任务时的信心。
用红色凸显执行破坏性或危险操作的按钮，并将其显示在动作面板的顶部。
精简选项，避免在动作面板中启用滚动。
1.3 Activity View（活动视图）
1.3.1 定义
活动是一项任务，如复制，收藏或查找，这在当前上下文中很有用。启动后，活动可以立即执行任务，或在继续之前询问更多信息。活动由活动视图管理，活动视图显示为一个表或弹窗，具体取决于设备和方向。使用活动为用户提供访问您的应用可以执行的自定义服务或任务。
1.3.2 设计原则
简洁描述活动的标题，如果太长会被截断。
确保活动适合当前的情况。系统自带的活动虽不可以重新排序，但可以排除。例如，为了防止人们打印图像，可以排除“打印”活动。
1.4 Popover（气泡弹出窗）
1.4.1 定义
Popover是一个临时视图，当点击某个控件或某个区域时，它会出现在屏幕上的其他内容上方。通常，Popover包含指向其出现位置的箭头。
Popover在大屏幕上使用最合适，可以包含导航栏、工具栏等各种元素，苹果官方建议只保留在iPad应用程序中使用 （查看详情）。如果在小屏幕如iPhone上使用时，应尽量减少屏幕空间的占用，并控制操作项数量以防止滚动，一般点击弹窗外部区域可将其关闭。
2.1 Dialog（对话框）
2.1.1 定义
对话会告知用户有关特定任务的信息，并可能包含重要信息，需要做出决定或涉及多项任务。对话框包含文本和UI控件。他们保持专注直到被解除或采取了必要的行动。谨慎使用对话，因为它们是中断性的。
Simple menus(简易菜单)、Simple dialogs(简易对话框)也是比较常见的对话框类型，他们都可以用来显示列表项目的选项，但前者对用户当前的上下文影响较小，所以是首选。而简易对话框的特点是可以提供列表项的其他详细信息或操作（如头像、图标），如下图所示。
2.2 Modal Bottom Sheet（模态底部面板）
2.2.1 定义
模态底部面板是菜单或简单对话框的替代方案，并且可以显示来自其他应用程序的深层链接内容。它们出现在其他用户界面元素上方，必须被解除才能与底层内容交互。当模态底部面板滑入屏幕时，屏幕的其余部分会变暗，从而将焦点对准底部面板。
2.2.2 用法及注意事项
显示菜单项时，完全展开的模态底部面板与应用栏底部保持最小8dp的距离。
高度应由其包含的内容量决定，最初不要重叠应用栏，并允许用户点击/滑动即可解除。
3.1 HUD（透明指示层） / 3.2 Toast
HUD和Toast都是轻提示，用来承载一些无需用户特别注意的信息，比如已发送、网络状态不好请稍后再试等，无需用户回应，一般2秒左右会自行消失。通常情况下，HUD位于屏幕中间，Toast位于屏幕下方。严格来说Toast是Andorid系统里的叫法，iOS系统里类似功能的控件叫HUD，但通常情况下会用Toast来统一称呼这种轻提示。
iOS系统原装HUD
微信iOS和Android端的轻提示
3.3 Snackbar
Snackbar是Material Design设计语言中特有的一个控件，它包含与所执行的操作直接相关的单行文本。一次只能显示一个Snackbar，它可以包含一个文本操作，但不能有图标。
Snackbar在Android系统上的应用
总结：以上介绍了移动端比较常用的弹窗类型，在实际应用中我们要根据产品目标、用户目标以及场景做权衡选择。
个人认为可以从 情境、回应、平台 三个维度来选择：
1）当前上下文情境：比如iOS端比较容易混淆的Alert和ActionSheet，用户主动发起的操作，弹窗应该使用Action Sheet来提供与此操作相关的选项让用户选择，控件上方半透明区域可以清晰地看到下方界面，与上文情境连接更紧密，不会造成用户使用流程的中段；而设备或应用发起的则建议使用Alert，比如异常错误警报，此时需要用户的注意力暂时离开当前的使用流程，以关注这条重要提示或警报。
2）是否需要回应：根据信息的重要程度来选择弹窗类型。比如同是错误提示，有的只要用户知道一下即可(Toast)，有的比较重要需要用户点击确认一下(Alert)。
3）平台差异化设计：依据各平台的设计规范与使用习惯，使用对应的控件。比如snackbar是Android平台特有的控件，使用得当可以提高用户的操作效率和体验。
弹窗总览图
Agen 2018.03.14
参考资料：
https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/
https://material.io/guidelines/
https://www.zhihu.com/question/35141228/answer/61369322
https://www.jianshu.com/p/1ec4dca92e71
网友评论