在此总结一下弹窗的类型和适用场景(以移动端为例),作为行业新人与大家共勉,有什么遗漏、错误之处还请大家指正,如有侵权(暂时确定没有)请联系删除,转载请注明原作者及文章出处。
弹窗是在用户当前所处页面出现的提示、引导操作的内容,其包含模态与非模态两种类型,如图。
一、模态弹窗
用户必须先与当前弹窗进行交互,之后才能进行其它操作,这种弹窗就是模态的。其类型如下:
1、Alerts & Dialog
简介:对话框是用于向用户征求意见的一种弹窗,用户必须进行授权、关闭等操作后才能进行下一步操作。
用法:常用于防止误操作、请求授权、应用出错等场景。
位置:一般在屏幕中部
类型:
(1)普通对话框
这种对话框在谷歌material design规范中被划分为Alert,一般包括标题(可没有)、提示信息和操作按钮(一般是两个选择),如下图。
(2)列表型对话框
对话框有多个选项(一般为列表形式),只要选择一项,弹窗关闭,如下图。
我举的这个例子,可能大家一看就有疑问了,规范不让放关闭之类的按钮啊。但是咱们分析一下,关闭并没有增加用户理解成本,同样都是用户选择其中一项则弹窗关闭。所以,规范只是用来参考的,不要照搬。
(3)多选对话框
这种对话框一般存在一次递进式选择,用户从列表中选择一项或多项,然后再选择处理方式,如下图。
什么时候消失:
# 点击弹窗以外的区域(很多时候并不这样做,反而对话框会闪烁提示)
# 点击取消/关闭等按钮
# 点击系统返回按钮等(ios不支持)
注意:对话框直接打断用户流程,需要谨慎使用。
2、Popover/Popup
简介:我们常称为浮出框、浮层、气泡,常用于展示无法直接显示的选项(如溢出菜单)、对操作项的解释等等。
位置:操作、解释的内容旁边,位置多变
类型:
(1)快捷导航/溢出菜单(Overflow menu)
当前页面无法展示众多的菜单选项,常见的做法就是通过点击加号、更多等方式向用户展示全部选项,如图。
(2)气泡提示(tooltips)
一般是带有箭头,指向对应的内容,包括基本画布和文案。
(3)其它
在不同场景,Popover的表现形式多样,如长按文字对其进行操作。
3、Action bar/ Action sheets/ Action views
简介:操作栏一般从屏幕底部弹出,有一个或多个操作项,点击非弹窗区域或者“取消/关闭…”则消失,安卓和ios都适用。
位置:屏幕底部
类型:列表、宫格
示例:
二、非模态弹窗
主要是反馈、提示用户当前操作的结果或状态,一段时间后自动消失,用户可以直接进行其它的操作。其类型如下:
1、toast
作用:用于消息提示/状态,安卓和IOS都有用到。
位置:多出现于屏幕中间,2~4S左右消失,也有放在屏幕顶部和屏幕下方的。
内容:文字+半透明画布,需要时也使用图标。
注意:toast也会影响用户查看其它内容,需谨慎使用。
示例: 以下是常见toast的展示形式,出现在屏幕中间的容易影响查看,需根据实际场景合理选择。
2、Snackbars
作用:同toast,也有归为toast之说。
位置:一般置于屏幕底部(顶部使用也比较多),2~6S左右消失。
内容:提示文字+画布,可使用操作按钮(文字,且颜色不同于提示文字),不使用图标。
示例: Snackbars相比于一般toast,对用户查看当前页面的影响稍小,以下是相关示例。
3、HUD(透明指示层)
作用:用于ios平台,作用和toast一样。
位置:多出现于屏幕中间、底部(底部常见于pc),2~4S左右消失或随着持续操作而一直显示(如调节音量)。
内容:图标(可选)+文字(可选)+半透明画布,内部状态可随着操作改变。
示例:
三、总结
本次只分享弹窗额基本类型和用法,模态弹窗要注意内容易理解,非模态作为优先级较低的提示,尽量不要做聚焦展示。弹窗在具体使用中根据具体情况进行定义,实际使用时还会遇到更多问题,后面有时间我会再整理。对交互规范感兴趣的朋友可参阅部分设计规范网站,如:
1、谷歌material design(https://material.io/)
2、苹果Human Interface GuidelinesGuidelines (https://developer.apple.com/design/)
3、蚂蚁金服(https://ant.design/index-cn)蚂蚁金服移动组件(https://mobile.ant.design/index-cn)
注:本文来自微信公众号:阿谈谈设计,转载请注明出处,更多内容请前往查看。