弹窗交互规范分析
最近总结了一下之前的设计流程,总结了一下设计规范中的弹窗规范。
当你和app交互时,app会给你视觉(界面的变动)、听觉(提示音)、触觉(震动)的反馈,聪明的产品会在恰当的时间给予恰当的反馈,不反馈、反馈不及时、反馈不对都会让用户反感你的产品,从而失去用户。而弹窗是对用户很重要的反馈。现在弹窗的形式有很多,我们需要根据需求的不同运用的合理的弹窗。所以我们要熟悉各类弹窗的特性和使用场景。
弹窗可以分为两大类:模态弹窗和非模态弹窗。
模态弹窗:打断用户当前的操作流程,强制用户操作后才能进入其他操作。
actionbar弹窗>Dialog弹窗
非模态弹窗:不会打断当前操作,可以忽略或选择性操作。

一.toast提示
Toast是安卓系统的一个控件名词,现在也应用于iOS系统中。Toast属于一种轻量级的反馈,常常以小弹框的形式出现,一般出现1到2秒会自动消失,可以出现在屏幕上中下任意位置。Toast信息给予用户及时反馈,确保用户知晓自己所处的状态,并做出相应的措施。

二.Snackbar 对话框提示
Snackbar继承了toast的所有特性,即:为小弹窗的形式,会自动消失。有三个差异化:
可以出现0到1个操作,不包含取消按钮;
点击Snackbar以外的区域,Snackbar会消失;
一般只出现在屏幕底部。

Snackbar只出现在Android平台,提示程度比toast稍重,介于Toast和Dialog之间。
Snackbar使用场景:当你删除某张照片时,可以在屏幕底部出现Snackbar,提示“照片成功删除”,并附带撤销操作,当用户点击撤销时,照片可恢复。用户不进行操作Snackbar则消失,照片删除成功。
三. Banner提示
当你需要展示一段持续提示却又不想打断用户操作时,用Dialog弹窗会打断用户操作,Toast又不够明显,Snackbar会自动消失,显然这些都不符合要求。认识下能满足该要求的Banner控件吧
Banner与Snackbar比较类似,但二者的的不同之处在于:
位置不同:Snackbar通常显示在页面底部,Banner通常显示在页面顶部。
干扰度会更强:Snackbar会自动消失,Banner则会固定展示,除非达成了使其消失的必要条件(条件可由设计师自定义)
Banner与控件Dialog(弹窗)对比,二者的不同之处在于:
视觉表现更弱:Dialog显示时会用深色遮挡背景,并居中显示在页面中央,使用户不得不将注意力全部集中于Dialog之上;Banner显示时仅占据页面顶部,形成局部的视觉干扰。
干扰度更弱:Dialog持续期间会禁止用户进行其它页面操作,而Banner持续期间则不会影响用户进行其它操作。
因此综上所述,三个提示控件的干扰度从强到弱排序可以视为:Dialog>Banner>Snackbar。

四. Tips提示栏
开发没有固定的组件,但是对设计语言来说,tips它是内嵌在页面上的,一般让用户触发关闭或进入下级页面。
应用场景:
一般用于需要用户感知到的通知信息,例如金融类的到期提醒,或者类似广告的轻度提示。

五.Dialog 对话框提示
安卓开发语言 Dialog,ios开发语言Alert。对话框来传达重要信息,需要用户主动操作或进行选择才能继续。手机端一般至多2个按钮,按钮较多会选择actionsheet,web端选项较多可使用复选框。
根据操作类型分类:
1、信息传达-确认/关闭
2、信息输入-输入提交
3、信息选择-双向按钮
设计原则:
1、确保用户能够看到提示。
2、必须用户主动操作或进行选择才能继续。
3、阻断用户最严重,需要克制使用。
应用场景:
1、重要提示信息:跟用户切身利益有关系的提示、产品本身重要的信息等
2、需要用户选中或输入信息的,如系统权限,或验证密码等
2、商业意图:广告、推荐(大家都是为了挣钱,商业意图有时候需要牺牲一些用户体验。)

Dialog有两种使用场景,第一是很强的消息提示;第二是重要的运营消息。
由于Dialog不会自行消失,必须用户操作后(点击确定或关闭)才能消失,所以会打断用户当前任务,这会增加用户的焦虑和不安感,影响用户体验,请谨慎使用。如果一定要使用Dialog形式来提示用户,可以尝试在视觉上做得更有趣,减少用户的焦虑和不安。

六.HUD提示
HUD是与Toast类似的ios系统上的效果。
HUD与Toast的区别:
1、HUD只出现在屏幕的中央,Toast应用位置广泛。
2、HUD可以包含内容比较富丰,Toast一般用文字,或者加载动效。
3、HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明,延伸颜色多。
4、HUD中内容开发接受到信息后反馈所以可以变化(如调节音量时),Toast中内容不可变化。

七.Popover 浮层(ios) / popup 浮层(安卓)
Popover是ios的,popup是安卓的,现在功能上基本相通了,所以就以Popover为例。
Popover(气泡弹出框/弹出式气泡/气泡)是由一个矩形和三角箭头组成的弹出窗口,箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。
设计原则:
1、箭头的指向很好的表达了Popover和触发控件的潜在关系,用户可以匹配对应位置
2、相比于Action Sheet,Popover的三角箭头能明确的指示当前操作的是哪个条目,不易出错。Popover显示区域较小呈现的选项有限,为了防止误操作不建议在Popover里启用滚动,如果选项很多,建议使用Action Sheet。
应用场景:
1、快捷导航
2、情境下的相关选项
3、提示引导

八.Ation bar
操作栏本质上也是收纳操作选择项,避免脱离该页面重新开启一个页面,导致操作不连续,另一个优点是更加节省界面空间。
设计原则:
1、一般由用户主动发起的任务。
2、收纳内容不易过多,如果较多需要限定内容滑动范围。
应用场景:
操作列表 Actionsheet(Alert sheet)
以简洁的功能描述性文字展示功能按钮,敏感的功能操作一般用红色字体标出,主要应用在操作选择、删除、拍照等。

操作视图 Actionview(Alert view)
以图标和文字结合的形式展示功能,典型案例:分享、购买、支付,现在延伸的场景比较多。

注意:Alert view不要随便用,是强提醒。
九.引导浮层
设计原则:
因为对用户干扰比较大,且很多用户在不敢兴趣的请款下不会去进行操作,所以现在用单纯的气泡弹窗不加遮罩的情况较多。
应用场景:
比如我们上新功能,局部的按钮、功能模块搬家,一些复杂且容易被遗漏的一些操作,会使用这中浮层。

设计总结:
人机交互最重要的一条原则之一:反馈。
1.设计师需要明确设计目标和会对用户造成的影响来选择提醒方式。
2.能展示在主体信息的就不要用额外的提醒方式,能用弱提醒的就不用强提醒。
3.弹窗运用需要克制,好的产品是给用户带来沉浸式的体验,避免过多干扰和阻断。
参考摘录:
《全面解析弹窗提醒交互设计》作者:上仙修行
《APP 反馈的三种形式:toast、snackbar、dialog》作者:邹志楠















































































