【产品】APP常见弹窗总结：弹窗不再用错

本文对APP中常见弹窗的分类、特点与应用场景进行了总结~

在使用APP过程中，经常看到各种各样的弹窗提示。那么这些弹窗提示有哪些类型？每种类型特点及对应的应用场景是什么？本文结合经验、网络资料，对此进行了简单总结分析，欢迎交流指正~~在产品设计时要在合适的时机选用合适的弹窗类型，以保证产品使用流畅及良好的用户体验。

开门见山，弹窗分类如下图所示：

APP弹窗分类

弹窗分为两大类：模态弹窗与非模态弹窗，两者的区别在于是否打断用户操作，用户是否必须回应才能进行下一步操作。模态弹窗作为强提示，会打断用户操作，非模态弹窗作为轻提示，对用户影响比较小。

接下来，分别对这两类、六种弹窗进行说明。

一、 模态弹窗

1. 对话框：Dialog/Alerts

特点：通常包含标题、内容、选择按钮（按钮<=2个），有些对话框可以进行内容输入。一般出现在页面中间位置。用户必须对此弹窗操作后，才能进行其他操作。安卓叫Dialog，iOS叫Alerts。

应用场景：常用于重要信息通知；需要二次确认的操作，如：删除操作的二次确认。

对话框

2. 功能框：Actionbar/Action Sheets

特点：包含多个选项按钮、取消按钮，形式包括文字、图标+文字等，警示性内容可使用红色字体。出现在页面底部。用户可以选择某个按钮，可以点击弹窗外区域或取消按钮以关闭功能框。安卓叫Actionbar，iOS叫Action Sheets/Activity Views。

应用场景：常用于有多个选项按钮供用户选择的情况。

功能框1

功能框2

3. 浮出层：Popover

特点：点击某个控件或某个区域后，出现在页面之上的半透明临时视图。用户可以选择某个按钮，可以再次点击触发浮层的控件或点击浮出层以外区域来关闭浮出层弹窗。一般出现在页面顶部。Popover浮出层是iOS控件。

应用场景：将APP高频功能放入首页浮出层菜单，或将隐藏的一些功能入口放入浮出层菜单。

浮出层

二、 非模态弹窗

1. 提示框：Toast/HUD

特点：信息传递或操作反馈，停留一定时间自动消失，用户无需操作。形式包括文字、图标+文字等。一般出现在页面中轴线的中部/顶部/底部位置。Toast是安卓叫法，iOS类似控件叫HUD透明指示层。

应用场景：用户操作结果提示或低层级信息提示，如：已保存、刷新成功等。

toast提示框

2. 提示对话框：Snackbar

特点：信息反馈+一个操作按钮，同时停留一定时间自动消失。出现在页面底部。提示对话框Snackbar为安卓特有控件，但iOS也有用到。

应用场景：向用户提供信息反馈，同时还可以引导用户进行操作，如：提示信息删除后，给出“撤销删除”的选项；收藏文章成功后，给出“添加标签”选项。

提示对话框

3. 提示栏：Tips

特点：嵌入页面内的提示信息。通常位于页面顶部。

应用场景：需要给出明显提示，但又不影响用户操作。

提示栏