作者:考拉在站酷

弹窗是页面交互的重要控件,文章总结了弹窗定义、种类、原则,并结合案例从交互的角度加以整理。

文章主要内容

· 认识弹窗

· 弹窗的分类

· 弹窗设计原则

· 弹窗设计走查表

1认识弹窗

1.1定义

弹窗作为页面的重要控件,用以中断用户的当前操作并对其进行补充或对其作出反馈。即通过弹窗可阻断危险操作、反馈信息给用户、需要用户交互且引导用户操作。

1.2优点

比页面更轻量

弹窗相对页面来说更加轻量,可以承载页面部分信息或功能,尤其是页面内涉及多层级的任务操作,通过弹窗可以让用户不离开当前页面的情况下完成任务操作。如下图携程订单页面,页面承载了大量的信息和操作,如果让用户点击后进入新页面则增加了费力度,因此通过弹窗来承载部分功能操作,再如微信中通过弹窗来集合功能。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

一个绝佳的反馈方式

交互行为需要反馈,用户在页面操作浏览过程中,不管是主观操作还是系统都需要反馈来告知用户,没有反馈,交互行为便不完整。通过弹窗可以实现通知提醒、信息纯滴、任务操作的功能。

1.3应用场景

弹窗种类多样决定其能够应用于多种场景,如页面新手引导、选择器、任务页面、通知提醒、广告运营等等。不同的场景决定了弹窗的种类和交互方式。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

2弹窗分类

2.1模态弹窗

模态弹窗是用户可交互的,且需要用户进行回应;模态弹窗在页面中层级较高,容易吸引用户;模态弹窗包括对对话框(Dialog)、警示框(Alter)、浮层(Popover/Popup)、操作栏(Actionbar)。

2.1.1对话框

定义属于MD控件,用于提示用户做一些决定,或者是完成某个任务时需要的一些提示信息,用户可以进行交互,并起着提示、决定的作用。

    场景:对话框主要可以分为提示类和操作类,具体包括系统提示、页面提示、运营广告、任务操作

    提示

通过强干扰通知用户设备相关问题如备份、打开通知等问题,这些潜在问题可能会对用户造成一定负面的影响,因此必须通过对话框的形式让用户明确知道并进行选择。其次,现在各类应用中运营推广位也都通过强关注的对话框来呈现,吸引用户的注意,以此带来转化。

  操作

操作类在移动端中主要出现在信息设置模块,并只支持少量信息的填写,信息过多则页面形式承载。但在web端尤其是后台操作系统中,经常出现操作性对话框。交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条
交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

2.1.2警示框

定义:属于iOS控件,与对话框类似,主要应用于警示提醒。警示框用于全局展示通知提醒信息,特别是在web端,用来承载较为复杂的通知内容,警示框需要用户进行交互,带有关闭操作,多为系统主动推送。如电量提示、删除操作等。如下图所示:

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

图片来源网络

2.1.3浮层

定义:指用户点执行某个操作后后浮出一个带半透明遮罩的功能区域,用户可进行交互。可出现在页面的任意区域。浮层类似于下拉菜单,相比下拉菜单更加轻量,更容易吸引用户的注意。通过浮层承载部分功能,无需离开当前页面,且使得页面更加简洁,不会造成用户认知负担。浮层概括来说可以当作功能快捷入口、折叠菜单、引导浮层。

    功能入口

一个操作页面有限,页面无法全部展示各大功能,隐藏在其他页面则太深。因此,可以通过浮层来作为各大功能的入口,即将功能入口集合在一个浮层中,用户触发后弹出浮层。这类浮层由遮罩(可有可无)+气泡+icon+文本按钮构成。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

    折叠菜单

属于浮出层的衍生应用,和上个场景一样,节约屏幕空间,显露出一部分,并将剩余信息折叠起来,不影响用户理解功能,又解决了屏幕空间,若用户有需求,即可展开探索更多的信息,同样也会用箭头等指向出处。特别是购物类应用中筛选操作,都通过下拉或侧拉浮层来进行筛选。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

    功能引导

主要应用在页面新手引导场景中,通过气泡浮层进行功能提示,降低用户的理解成本。功能引导的浮层可以通过视觉化进行设计,降低弹窗带来的打断用户操作的负面影响。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条

2.1.4操作栏

定义:操作栏与浮层功能类似,一般出现在页面底部,被设计用来向用户展示多个功能按钮供用户选择操作。点击取消或空白处关闭操作栏。iOS和MD样式上存在区别,如下图:

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条图片来源网络
交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条图片来源网络

2.2非模态弹窗

非模态弹窗与模态相反,是一种轻量级的反馈提示,用户可以不用作出反馈操作。目前各大应用的安卓和iOS非模态弹窗基本可以复用,没有过多差别。

2.2.1snackbars

定义:属于安卓控件,一种轻量级的反馈机制,常以小弹框的形式出现在页面底部,可包含操作按钮。一般情况,用户点击snackbar内功能按钮,执行操作,弹窗消失,或一定时间内自动消失。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条 图片来源网络

2.2.2toast和HUD

定义:属于安卓控件,一种信息提示框,以反馈提醒用户。toast可出现在页面的任意位置,伴随这遮罩底层和文字提示构成。toast一般设置为一定时间内自动消失(根据场景需要),或者用户滑动后消失。

交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条
交互控件之弹窗 | UI设计中弹窗设计详解与设计思考-UI头条图片来源网络

3.弹窗设计原则

减少干扰,克制使用
弹窗的使用会打断用户进行当前的操作,影响用户的心流体验,因此尽量减少使用弹窗,避免用户产生反感。

合适的弹窗
弹窗有模态和非模态等类型,不同类型应用在不同场景中,如弱提示不需要用户做回应的使用toast,2s自动关闭

减少错误
当用户的操作行为会产生很高的犯错误成本时需要利用弹窗进行确认,如删除、下载等操作。

用户可控性
弹窗的出现必须是用户能够接受的场景中出现,且符合用户预期。如【上传图片】按钮,用户点击之前能够预想点击后会触发新的操作行为,这个时候出弹窗用户是能够接受,且操作是流畅的。

使用用户的语言(方式)
弹窗的文案需要站在用户的角度去设计,清晰明了的表述。特别是确认取消弹窗,弹窗内容描述需要指明操作,不可出现模棱两可的说明,且选项需要符合用户当下的操作场景,用户能够通过选项知道操作后的后果。如确定删除?“是”与“否”不如“删除”与“取消”

极简原则
页面中弹窗尽量减少出现的频次;弹窗内容(提示、选项)应当简化,多内容适合页面承载

4 弹窗的走查表

弹窗语意是否清晰明确?

弹窗文案用户是否能快速理解?

操作弹窗结束后是否有反馈?

弹窗任务是否简洁?

弹窗种类是否合适?

弹窗背景是否锁定?

避免弹窗上再弹弹窗

5 参考文章

文章内容为个人经验之上参考了多篇文章,在此表示感谢!

https://www.uisdc.com/popup-design-principles

https://www.uisdc.com/tencent-100-popup-box

http://www.woshipm.com/pd/1607094.html

原文链接:https://www.zcool.com.cn/article/ZODU1OTQ4.html

版权归原作者所有,转载请联系作者。如有侵权,请联系我们!