关于弹窗设计的学习

前段时间有做一个比较新的 APP ,由于功能比较简单,而且自己也想偷偷懒,就不想画太多界面,所以有些地方都选择做了弹窗设计,最后下来发现,弹窗的地方太多了,体验感非常不好。后面有自己去了解了一下,弹窗有自己的体系,并不是随便用的。
我们常见的弹窗形式主要有对话框、提示框。在需求的沟通过程中,经常会提到说某个地方需要加个弹窗提示用户。实际上这个弹窗承载的仅仅是提示说明文字内容还是需要引导用户进行下一步操作呢?

弹窗体系:模态与非模态

模态弹窗:是指在用户任务中,终止了用户的上一步行为。也就是说,这个模态弹窗必须要用户操作才可以进行下一步动作,所以在产品设计中,我们通常会用模态弹窗引导用户去做我们需要他做的操作。
常见的模态弹窗有这几种:对话框、动作栏、浮层。

对话框:对话框主要是给用户提供选项、相关的操作,也可以展现图片、头像、步骤图、其他输入项等。


image.png

动作栏:常见的动作栏一般会出现屏幕下方,比如选择某个内容时候,出现的选择。


image.png

浮层:弹出窗口,浮动与顶层窗口,气泡。


image.png

image.png

非模态弹窗:是指不强制用户操作,作用相当于内容信息提示,它的出现不打扰用户的当前操作,并且有时间限制,在一定时间里自动消失。比如:某某功能已更新哦~,这种提示是不需要用户点击操作的,让用户看到即可。

常见有这几种非模态弹窗:toast/hud、snackbar、notice。

toast/hud:iOS 是习惯于中间感知反馈信息,一般提示完 3s 左右消失,而 Android 是出现在屏幕顶部或者下部,不会遮挡主题内容,toast 只有文字,而 hub 是可以带有图标的。

snackbar:可以理解为加强版的 Toast
notice:系统消息、消息推送,也是不干扰用户行为,有消失时间。

那么问题来了,什么情境下使用什么样的弹窗呢?
1、重要打断用户操作:在一些重要操作,避免用户误操作。这类设计需谨慎,得通过研究确认方可选择是否必要出现。
对话框相对动作栏更为重要,因为视觉在中心,更能引起用户重视。
-对于十分重要需求打断用户上一步任务的,建议采用对话框的弹窗;
-对于不少特别重要信息露出又要终止用户上一步动作的情况,用动作栏弹窗。

2、定制化广告弹窗:强制用户看到且要展示与众不同特色,视觉上要突出的时候,可使用广告弹窗。
如功能更新、升级、优惠券提醒。

3、给予一些提示:提示用户状态、信息、反馈,确保用户知晓现在所处状态,并可以做出相应的措施,可使用非模态弹窗。

4、用户操作反馈:出现在用户操作完之后的反馈。如加载中、保存成功、已删除、已刷新等。

可以不使用弹窗的反馈例子:完成页。

比如已支付成功、下载完毕、签到成功,这一类是 告诉你上一个动作结束了,下一步不需要进行引导了,这种反馈大多数不采用弹窗形式展示。

需要注意的事项

1、层级关系
弹框是内容和导航的补充,用于通知、操作菜单、成功或加载状态的 toast,是写在蒙版上面的一层内容。

2、适配方式
另外需要了解下这几种弹窗在开发中的实现形式
①一种是开发直接用系统的接口,缺点是不可定制,形式美观度不够好
②另外一种是开发用代码单独写出一个模态弹框系统,这套系统与整体设计语言具有一致性,可以复用在各个任务中,可以定制化设计。
确定是需要考虑不同机型的适配情况,不同机型的边界。

-此文转载,如侵删。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。