下面进入正题
弹窗可以分为模态弹窗和非模态弹窗,这两种最主要的区别是:前者需要用户与弹窗进行交互才能让弹窗消失,而后者会自动消失、用户无需与弹窗交互也可继续在app上进行操作。
1.模态弹窗,有3种:
1.1. 对话框/警告框-Alert/Dialog
1.1.1. 一般出现在屏幕中间,用户视线聚焦于弹窗,对界面的主要内容造成遮挡
1.1.2. 一般为1~2个按钮
1.1.3. 样式多样:
标题+按钮(如删除确认的弹窗)
标题+描述信息+按钮
标题+输入框+按钮(如输入邀请码的弹窗)
标题+描述信息+输入框+按钮
图片+按钮(如营销活动的弹窗)
1.2.动作列表/动作面板/行动菜单-Actionbar/Actionsheet/Actionview
1.2.1. 按钮一般多于2个、一般出现于界面下方(与Alert/Dialog的区别)
1.2.2.样式主要为两种
列表式
?选项较少可使用
?常见于文字形式表现选项
宫格式
?选项较多可使用
?常见于图标形式展现选项
?选项很多时,建议分组,一行为一组,可在屏幕右边缘露出部分图标,暗示可以横向滑动查看更多选项。
1.3.浮层弹窗/浮出框-Popover/Popup
1.3.1.一般出现在按钮旁边,故此种弹窗可出现在界面任意位置(与Actionbar的主要区别)
1.3.2. 按钮数可多可少
以上即是模态弹窗,Ta的特点:强制用户交互;
优点:进行重要的操作时获取用户聚焦;
缺点:打断用户的操作行为,若不与弹窗做交互则其余功能无法使用。
2. 非模态弹窗,有2种:
2.1.提示框Toast/Hud
2.1.1.Toast是安卓系统的一个控件名词,现也应用于iOS系统之中
2.1.2.iOS里有一个相类似于toast的是hud(如音量调节)
2.1.3.用以轻量级提示/展示文案,无交互,一般显示1~2秒自动消失,不能手动让其消失
2.1.4.出现的位置可以在顶部/中间/底部,app内的toast尽量使用相同位置
2.1.5.现实中的toast可以加icon、背景色可以自定义
2.2.底部弹窗Snackbar
2.2.1.Android特有的交互形式,有些时候也有应用在iOS系统中
2.2.2.由文案和按钮组成
2.2.3.一般出现在界面下方
2.2.4.会自动消失,也可以人为操作使其消失
2.2.5.是一个非模态弹窗,可以视为带有按钮的toast
2.2.6.多见于撤销操作,也有关注后提示并带有按钮”打开关注页“操作的等等
以上即为非模态弹窗,Ta的特点:不强制用户交互;
优点:轻量级,不打扰用户使用其他功能;
缺点:对有风险、不可逆的操作起不到聚焦作用;
感谢阅读,将持续发布产品经理相关文章~
#产品经理#产品设计#交互设计#用户体验#产品体验#app控件#产品分析#产品小白#交互#产品经理#