弹窗交互规范分析

用户头像
南京/设计爱好者/6年前/1583浏览
弹窗交互规范分析

最近总结了一下之前的设计流程,总结了一下设计规范中的弹窗规范。

当你和app交互时,app会给你视觉(界面的变动)、听觉(提示音)、触觉(震动)的反馈,聪明的产品会在恰当的时间给予恰当的反馈,不反馈、反馈不及时、反馈不对都会让用户反感你的产品,从而失去用户。而弹窗是对用户很重要的反馈。现在弹窗的形式有很多,我们需要根据需求的不同运用的合理的弹窗。所以我们要熟悉各类弹窗的特性和使用场景。


弹窗可以分为两大类:模态弹窗和非模态弹窗。

模态弹窗:打断用户当前的操作流程,强制用户操作后才能进入其他操作。

actionbar弹窗>Dialog弹窗

非模态弹窗:不会打断当前操作,可以忽略或选择性操作。




一.toast提示

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



二.Snackbar 对话框提示

Snackbar继承了toast的所有特性,即:为小弹窗的形式,会自动消失。有三个差异化:

  1. 可以出现0到1个操作,不包含取消按钮;

  2. 点击Snackbar以外的区域,Snackbar会消失;

  3. 一般只出现在屏幕底部。


undefined

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它是内嵌在页面上的,一般让用户触发关闭或进入下级页面。

应用场景:

一般用于需要用户感知到的通知信息,例如金融类的到期提醒,或者类似广告的轻度提示。

undefined



五.Dialog 对话框提示


安卓开发语言 Dialog,ios开发语言Alert。对话框来传达重要信息,需要用户主动操作或进行选择才能继续。手机端一般至多2个按钮,按钮较多会选择actionsheet,web端选项较多可使用复选框。


根据操作类型分类:

1、信息传达-确认/关闭

2、信息输入-输入提交

3、信息选择-双向按钮


设计原则:

1、确保用户能够看到提示。

2、必须用户主动操作或进行选择才能继续。

3、阻断用户最严重,需要克制使用。


应用场景:

1、重要提示信息:跟用户切身利益有关系的提示、产品本身重要的信息等

2、需要用户选中或输入信息的,如系统权限,或验证密码等

2、商业意图:广告、推荐(大家都是为了挣钱,商业意图有时候需要牺牲一些用户体验。)

undefined



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)

以简洁的功能描述性文字展示功能按钮,敏感的功能操作一般用红色字体标出,主要应用在操作选择、删除、拍照等。

undefined

操作视图 Actionview(Alert view)

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

undefined

注意:Alert view不要随便用,是强提醒。



九.引导浮层

设计原则:

因为对用户干扰比较大,且很多用户在不敢兴趣的请款下不会去进行操作,所以现在用单纯的气泡弹窗不加遮罩的情况较多。


应用场景:

比如我们上新功能,局部的按钮、功能模块搬家,一些复杂且容易被遗漏的一些操作,会使用这中浮层。



设计总结:

人机交互最重要的一条原则之一:反馈。

1.设计师需要明确设计目标和会对用户造成的影响来选择提醒方式。

2.能展示在主体信息的就不要用额外的提醒方式,能用弱提醒的就不用强提醒。

3.弹窗运用需要克制,好的产品是给用户带来沉浸式的体验,避免过多干扰和阻断。




参考摘录:

《全面解析弹窗提醒交互设计》作者:上仙修行 

APP 反馈的三种形式:toast、snackbar、dialog》作者:邹志楠




8
举报
|
36
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】游戏/娱乐icon
新能源APP应用UIKit
柠檬黄主题UI作品集模版
【新年UI图标】美食icon
高级表盘系列UI源文件
矢量立体简约UI蓝白图标
钱包ui模板
高级感金属拟物 UI设计组件库
Security Camera UI kit
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】影音icon
UI通用设计素材1
UI_3D图标炮仗<新春促销>
【新年UI图标】家具icon
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
UI应用平面图标
UI_3D图标火箭炮<新春促销>
【新年UI图标】30个图标
UI界面 组件
盲盒APP UI设计
我的钱包-UI界面设计-app
你可能喜欢
相关收藏夹
大家都在看
登录注册