关于弹窗的交互应用

716 阅读6分钟

一、提醒交互概念

提醒交互是指:需要给用户提醒信息时,界面中出现的一些提醒机制,已达到告知用户信息或者让用户强制做出选择的目的。 弹窗是为了让用户回应,需要用户与之交互的窗口,根据是否需要强制用户交互分为:模态弹窗和非模态弹窗。模态弹窗会打断用户的当前操作流程,用户不在弹框上操作的话,无法进入下一个操作。优点是可以很好的获取的用户的视觉焦点,缺点也显而易见,打断了用户的当前操作流程,引起用户的反感。

undefined

二、弹窗体系的分类

在弹窗分类的时候,我们先要明确自己分类的目标,是快速选择出适合我们当时情景下的提醒交互。所以我们按照提醒程度来区分比较合适,按照ios和安卓来分就没有必要。但是值得一提的是,我们日常用的英文名称都是从这两个系统自带的开发语言来命名的。

三、弹窗提醒交互的应用案例

(1)、Toast提示

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

设计原则:

1、同个产品会模块尽量使用同一位置,让用户产生统一认知

2、Toast提示可以用图片加文字的形式,不适合承载过多的文字和重要信息。

3、一般是灰黑或黑色半透明,但是为了视觉美观统一现出现提示更弱化的白色底和彩色底。

应用场景:

1、正在加载等过程状态

2、轻度提醒的结果状态

undefined

优化方案:

有些过程提醒的Toast提示可以优化成另一种形式

1、多态按钮

如果按钮被按下后需要与服务器交互后才能真正响应操作,那么等待难以避免。这种情况下可以给按钮增加多个状态,让用户知道App已经接受到他的操作。典型的例子是支付宝的确认付款按钮,支付前、支付中和付款成功三个状态。

undefined

2、动效代替过程

现在动效的应用越来越越连贯和大胆,适当的动效可以省略一些过程提醒。例如电商App加入购物车,商品飞入购物车中,有趣流畅。

但是京东部分页面的加入购物车既做了动效,又加了Toast提示,我觉得是比较多余的,此时toast提示可以去掉。

undefined

(2)、HUD提示

HUD是与Toast类似的ios系统上的效果。

HUD与Toast的区别:

1、HUD只出现在屏幕的中央,Toast应用位置广泛。

2、HUD可以包含内容比较富丰,Toast一般用文字,或者加载动效。

3、HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明,延伸颜色多。

4、HUD中内容开发接受到信息后反馈所以可以变化(如调节音量时),Toast中内容不可变化。

image.png

(3)、Snackbar 对话框提示

nackbar 是 Android 5.0 新特性——Material Design 中的一个控件。Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失;可以在屏幕上滑动关闭;

出现时不会阻碍用户在屏幕上的输入。

Snackbar与Toast的区别:

1、Snackbar可以滑动退出,也可以处理用户交互(点击)事件

2、Snackbar一般设置时间会比Toast长。

设计原则:

1、屏幕上同时最多只能显示一个Snackbar,需要多个时,则先将当前显示的Snackbar隐藏后再显示新的Snackbar。

2、可以在Snackbar中添加一个按钮,处理用户点击事件。

应用场景:

用户可能需要了解、感兴趣的变更信息,如:安装完成、任务删除、好友消息、网络错误、账号升级等

undefined

(4)、 Tips提示栏

开发没有固定的组件,但是对设计语言来说,tips它是内嵌在页面上的,一般让用户触发关闭或进入下级页面。

 应用场景:

一般用于需要用户感知到的通知信息,例如活动声明,或者类似广告的轻度提示。

image.png

(5)、Popover 浮层(ios) / popup 浮层(安卓)

Popover是ios的,popup是安卓的,主要分析iOS

Popover 浮层

Popover(气泡弹出框/弹出式气泡/气泡)是由一个矩形和三角箭头组成的弹出窗口,箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。

undefined

设计原则:

1、箭头的指向很好的表达了Popover和触发控件的潜在关系,用户可以匹配对应位置

2、相比于Action Sheet,Popover的三角箭头能明确的指示当前操作的是哪个条目,不易出错。Popover显示区域较小呈现的选项有限,为了防止误操作不建议在Popover里启用滚动,如果选项很多,建议使用Action Sheet。

应用场景:

1、快捷导航

2、情境下的相关选项

3、提示引导

undefined

(6)强引导浮层

这个浮层的应用是属于模态提示,会指引用户进行各种复杂或者初次进入APP的指引操作

设计原则:

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

应用场景:

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

undefined

设计总结:

1.我们需要明确设计目标和会对用户造成的影响来选择提醒方式,过度提示可能会大大增加用户的厌恶感。

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

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