一、弹窗定义
1.弹窗的作用
需要用户回应或给与用户相关信息提示等与之交互的窗口
2.app弹窗分类
| 模态弹窗 | 非模态弹窗 |
|---|---|
| Alerts/Dialog | Toast/HUD |
| Actionbar/Action Sheets/Activity Views | Snackbar |
| Popover/Popup | - |
3.模态窗口
会打断用户的操作行为，强制用户进行操作，否则不能进行其他操作
4.非模态窗口
不影响用户操作，通常有时间限制，出现一段时间后自动消失
二、弹窗分类
1.Alerts/Dialog：警告框与对话框
作用：告知用户当前发生的状况，让用户主动作出回应
适用场景：重要性较高的操作，如退出、删除、清空
出现位置：屏幕中央
iOS规范中(Alerts)：警告框包含元素如下：标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选，一个或多个)
2.Actionbar(Sheets、Activity Views ，为iOS特有的交互设计)：操作栏、操作列表、活动视图
作用：提供一系列在当前情景下可以完成当前任务的操作，而且这样的形式不会永久占用页面的UI空间
适用场景：如iOS的分享功能、系统相册功能
出现位置：屏幕下方
特性：用户触发，包含两个及两个以上按钮。一般都设计有一个默认的取消按钮，放在最下位置与其他按钮做一定的区分
3.Popover/Popup：浮出框/浮层弹框
作用：可以在当前页面进行更多的操作行为，显示/隐藏页面中的折叠信息
适用场景：首页位置呈现一些常用操作的快捷入口，如微信的➕图标按钮展开
出现位置：一般出现在首页位置，当用户点击某个控件或某个区域时浮出的半透明的或者不透明的弹窗窗口
4.Toast/HUD:提示框，HUD只用于iOS
作用：提示信息给与用户及时的反馈，确保用户知晓当前状态
适用场景：轻量级的弹框反馈形式，持续1-2s自动消失
出现位置：可以出现在屏幕任意位置，显示在屏幕所有层的最上方，建议同一款产品尽量使用相同的位置，让用户形成统一认知，iOS用户习惯于顶部感知反馈信息，Android多出现在屏幕底部
特性：只有文字且精简，段时间后会主动消失，不能对Toast进行交互
HUD与Toast的区别：
- HUD只出现在屏幕中央，Toast主要在底部
- HUD可以包含icon,Toast只能纯文字
- HUD一般为毛玻璃透明，Toast一般为灰黑或者黑色半透明
- HUD内容可以变化，Toast中内容不可变
HUD如iOS的音量调节键
5.Snackbar：底部弹框
作用：可以理解为加强版的Toast
适用场景：较多适用于撤销操作
出现位置：显示在屏幕所有层的最上方
特性：可以通过用户进行其他操作而消失
网友评论