当我们与应用产生主动或被动交互时 ， 页面上层弹出的弹窗可以用来传递信息、状态反馈、引导用户等操作 。弹窗是用户与产品间对话的一种方式 ， 不同类型的弹窗作用不同 ， 但最终都是为了满足跟用户之间的友好交流 。下面我们一起来了解学习一下弹窗都有哪些体系分类 。
文章插图
模态弹窗
· 模态弹窗是指用户在操作的流程中 ， 界面中会出现弹窗打断用户的操作行为 ， 用户必须通过主动点击才可以进行下一步操作 。
· 模态弹窗通常能够较好的获取用户的视觉焦点 ， 并通过信息内容、按钮主次层级来引导用户完成他们的需求 。
· 模态弹窗的样式会根据用户、产品侧重点的不同而有所不同 ， 常见的模态弹窗有对话框、动作栏、浮层...等 。
对话框Dialog/Alert
· 对话框的作用主要是打断用户后并提供选项操作 ， 通常会配备1~3个操作按钮 ， 而且会把用户最想要操作的按钮或产品最想要用户操作的按钮突出显示 。
· 对话框类型的弹窗主要分为主动、被动两种触发类型 ， 主动弹窗一般用于信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗主要有版本更新、消息通知、系统功能授权等 。
动作栏Actionbar
· 动作栏是通过用户主动操作后弹出的内容信息 ， 基本都是从底部弹出 ， 动作栏的尺寸没有限制范围 ， 小区域、半屏、全屏都是常有的 。
· 动作栏能够承载的信息内容较多 ， 在用户主动操作并反馈的情况下 ， 比跳转到新的页面更有安全感 。
浮层Popover/Popup
· 浮层是指用户操作之后会在附近出现一个带有视觉引导性质的弹窗 ， 最常见的浮层就是下拉菜单/弹窗等 ， 浮动于顶层窗口并指向触发操作的位置 。
· 因为部分浮层底部没有设置不透明度的蒙层 ， 所以为了与页面信息更好的区分 ， 通常会给浮层容器加上投影 ， 避免与底部信息混淆 。
非模态弹窗
· 相比较模态弹窗而言 ， 非模态弹窗点击后会以一种非阻碍的的方式呈现 ， 不会打断用户的当前操作 。
· 非模态弹窗主要是为了让用户即时反馈 ， 并且对当前的交互后状态有清晰的认知 。
· 非模态弹窗不强制用户操作 ， 根据反馈信息的重要程度及意愿 ， 可以自动消失也可以被用户主动去掉 。
提示框Toast/Hud
· 提示框可能出现在任何位置 ， 主要用于反馈用户操作成功、警告、错误等当前状态信息 。
· 相同等级的模块统一位置和风格即可 ， 无需用户有任何操作 ， 出现2s左右自动消失 。
· Toast只有纯文字提示 ， 例如格式错误、刷新成功等；Hud会使用文字+图标样式 ， 例如添加到购物车、关注成功等 。
提示对话框Snackbar
· 提示对话框以前只是安卓系统的弹窗控件 ， 后在iOS、Web前端都会使用到 ， 可以看作是toast的加强版 。
· 提示对话框一般只出现在屏幕底部 ， 在屏幕中停留的时间比toast长 ， 可以自动消失或者用户主动去掉 。
通知Notice
· 通知就是我们平时收到的消息通知、系统推送等 ， 在设备未锁屏的情况下 ， 通常从顶部弹出 ， 停留几秒后自动消失 ， 锁屏后 ， 不同设备弹出·的位置也有所不同 。
推荐阅读
- 产品弹窗的应用 弹窗的使用场景有哪些？
- UI设计中的按钮设计 按钮的风格有哪些？
- UI设计中的按钮设计 按钮的类型有哪些？
- UI设计的按钮设计 按钮有什么作用？
- 整理图库的原理mece法则 设计师如何整理资源库？
- 品牌系统的构成是什么？有哪些表现形式？
- 如何打造品牌感知系统？人们对品牌的宏观认知
- 如何解决前端图片不适配的问题？为什么会这样？
- 砘组词_砘的组词有哪些
- 队组词_队的组词有哪些