耍好控件|全面解析弹窗交互设计

@胡桃子:弹窗一个让设计师和用户又爱又恨的控件,产品需要弹窗传递信息,用户需要弹窗接受反馈,如果没有推敲,胡乱添加弹窗会让用户心情沮丧。我们在日常的设计工作中,应该如何正确处理弹窗的使用?什么样的弹窗是合理的?什么样的弹窗会让用户没了耐心?

弹窗的分类

相信有很多设计师不知道弹窗的具体分类,把所有的弹出的窗口统称为“弹窗”,对使用的方法也很模糊。

纵观 iOS人机交互规范和Material Design,我们可以将弹框分为两大类:模态框和非模态框。

gvnrc3xftqt.jpg插图

弹窗体系

模态框:Modal Dialog。指代需要中断用户当前的操作,用户必须完成对话框内任务(或主动关闭后)才能够继续主面板操作的弹框。

“非模态”就是和“模态”对立的概念,指不需要中断用户操作的弹框。

n3hop2q2wpl.jpg插图(1)

提醒程度分类

在弹窗分类的时候,我们先要明确自己分类的目标,是快速选择出适合我们当时情景下的提醒交互。

所以我们按照提醒程度来区分比较合适,按照ios和安卓来分就没有必要。但是值得一提的是,我们日常用的英文名称都是从这两个系统自带的开发语言来命名的。

从开发角度上,ue知道系统自带的提示,会大大提高开发效率,当然现在很多形式都在两个系统中通用,最终选择需要根据实际情况而定。

jlimm55tysk.jpg插图(2)

非模态弹窗-轻度案例

1.Toast提示

Toast是安卓系统的一个控件名词,现在也应用于iOS系统中。

Toast属于一种轻量级的反馈,常常以小弹框的形式出现,可以出现在屏幕上中下任意位置。

出现的时长最佳是 2 – 3.5 秒(即所谓的短吐司与长吐司),在这个时间段内不容易干扰用户的同时,也有助于用户阅读完完整的提示信息。

设计原则:

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

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

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

应用场景:

a.正在加载等过程状态

b. 轻度提醒的结果状态

4kzvo4y5hsx.jpg插图(3)

优化方案:

为了减少toast弹窗对用户的干扰,有些地方的toast提示可以优化成另外一种展现形式。

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

tq0i4ngblnp.jpg插图(4)

b. 动效代替过程。现在动效的应用越来越越连贯和大胆,适当的动效可以省略一些过程提醒。例如电商App加入购物车,商品飞入购物车中,有趣流畅。但是京东部分页面的加入购物车既做了动效,又加了Toast提示,我觉得是比较多余的,此时toast提示可以去掉。

y0xmxqpoxgl.jpg插图(5)

2.HUD提示

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

HUD与Toast的区别:

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

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

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

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

44k0ef1ozjs.jpg插图(6)

非模态弹窗-中度案例

1.Snackbar 对话框提示

nackbar 是 Android 5.0 新特性——Material Design 中的一个控件。SnakeBars是既支持用户操作,又会自动消失的控件,一般出现在屏幕底部。

Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失;可以在屏幕上滑动关闭;出现时不会阻碍用户在屏幕上的输入。

Snackbar与Toast的区别:

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

2、Snackbar一般设置时间会比Toast长,MD规定SnakeBars的显示时间应该在4 – 10秒

fk1421tix4j.jpg插图(7)

设计原则:

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

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

应用场景:

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

fpnn2pvk4yw.jpg插图(8)

2.Tips提示栏

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

应用场景:

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

vmdsalbebkm.jpg插图(9)

3.Popover浮层(ios)/dialog浮层、popup浮层(安卓)

Popover是ios的,popup是安卓的,现在功能上基本是相通的,所以我就解析下Popover。

Popover 浮层

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

pmi2le0vauj.jpg插图(10)

dialog浮层查看的展现形式,查看链接:https://www.jianshu.com/p/4712652fb313

设计原则:

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

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

应用场景:

a.快捷导航

b.情境下的相关选项

c.提示引导

uxqtxkzxznp.jpg插图(11)

模态弹窗-强度案例

1.强引导浮层

这个浮层的应用,已经是模态提示了,此刻该对话框中的内容获取了焦点,想要操作对话框以外的功能。

设计原则:

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

应用场景:

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

ogjiztehu3k.jpg插图(12)

2. 动作栏

这里说的动作栏一般是从页面底部出现,也有人称底部动作栏,Action Sheet 是iOS规范下的控件,近些年来也在慢慢被安卓化。

设计原则:

a.突出破坏性选项,对于用户执行破坏性或危险性操作的按钮,应当使用红色高亮显示,并且放置于在 Action Sheet 的顶部

b.“取消”按钮应始终存在于动作面板的底部

c.避免出现纵向滚动

zxoykfvoyhr.jpg插图(13)

应用场景:

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

arvpjcutkxl.jpg插图(14)

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

wrjjipfsnhz.jpg插图(15)

3. 对话框

对话框也就是我们熟知的弹窗,安卓开发语言 Dialog,ios开发语言Alert。

对话框来传达重要信息,需要用户主动操作或进行选择才能继续,也是最容易打断用户心流的弹框,因为它直接出现在屏幕中心。

所以双平台都明确提醒设计者要尽量克制对话框的使用频次。正是因为对话框非常容易获取用户注意力,所以一般用于承载非常重要的附加操作或警示信息。

根据操作类型分类:

a.信息传达-确认/关闭

b.信息输入-输入提交

c.信息选择-双向按钮

设计原则:

a. 确保用户能够看到提示。

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

c. 阻断用户最严重,需要克制使用。

d.设计师要提醒开发人员配置引导用户操作的高亮选项

jt0iisxrjj1.jpg插图(16)

应用场景:

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

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

c. 商业意图:广告、推荐

4emp50bpo0n.jpg插图(17)

写在最后

模态框与非模态框都有各自的优势与不足:恰当地使用模态框可以辅助用户一步一步完成操作,但频繁使用可能会让用户的操作流程被打扰。

如果只从用户心流的角度切入,非模态框应该更加友好,但并不能承载操作,且有时又容易被用户忽略。

所以如何找到合适、正确的弹框,是需要设计师根据具体场景进行推敲的。

希望这篇文章,对你有所帮助。

原文地址:胡诌青年(公众号)作者:胡桃子sla4cluzezs.jpg插图(18)

人已赞赏
UI设计

【交互设计】新人转化落地页

2020-10-9 16:28:25

UI设计

产品改进没方向?不妨从用户反馈找找灵感(一)

2020-10-10 20:04:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索