天天看点

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

在日常工作中,经常涉及到许多弹窗的使用和设计,如何运用好弹窗,才能有效引导用户操作及时反馈信息,是在工作中需要经常思考分析的问题。今天小吉在这里稍作梳理和总结,如有表述不当的地方,欢迎大家一起讨论。 弹窗基本可分为两大类:模态弹窗和非模态弹窗;其中模态弹窗有3种类型:Dialog/Alerts(对话框)、Action sheet(动作菜单/控制面板/行动列表)、Popover(气泡式弹框);非模态弹窗包括:Toast/HUD(小提示)、Snackbar(快捷提示)。 1、模态弹窗 1.1、Dialog/Alerts(对话框):强提示,需要用户操作后才能进行下去。 使用场景:一般用于提示相对重要的,影响较大,有价值,引导性强的信息,如在用户使用过程中,出现删除、未保存、退出等可能产生负面的、潜在风险行为时,或对业务/产品/功能相对重要的,影响较大引导性提示,只提供1~3种操作。

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:警示性强,功能操作简单;

缺点:操作选择性较少,干扰性强,位于屏幕中间点击操作较不便利。

1.2、Action sheet(动作菜单/控制面板/行动列表):强提示,功能操作性强;常于页面底部弹出,展示形式多样,如图文垂直列表、宫格列表、滚屏列表,交互形式以点击或向下划动退出,可上下滑动调整任意弹窗高度;对于多分支任务的,可多个Action sheet依次叠层弹出。

使用场景1:与Dialog/Alerts(对话框)相似,用户在使用过程中,出现删除、未保存退出等可能产生潜在风险的行为时弹出提示;

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

使用场景2:用于功能选择框,向用户展示多个功能操作;

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

使用场景3:用于分支任务操作框;

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:使用形式多样,操作便利,任务层级分明;

缺点:干扰性较强。

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

使用场景:多用于低频功能选择框、提示引导说明或情境下的相关功能选择框;

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:轻巧便捷,不会占用过多版面;

缺点:功能隐秘性较强,不容易被关注,操作较不便捷,展示信息功能不宜过多。

2、非模态弹窗:

2.1、Toast(吐司):属于Android控件,也应用于iOS应用设计。轻量级的反馈,不可交互,展示形式为文本,多为黑色半透明效果。

使用场景:一般用于页面状态反馈,无需用户点击,几秒后自动消失。

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:干扰性低,提升用户感知度;

缺点:交互性弱,一般出现时间短,不宜承载内容过多、信息较重要的提示,不可用于动态信息反馈。

2.2、HUD:属于iOS控件,轻量级的反馈,不可交互,展示形式为文本、图标及动态的,可变更的内容信息,毛玻璃透明块状效果,出现在屏幕中间。

使用场景:一般用于加载、成功/失败、音量控制等操作反馈。

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:干扰性低,提升用户感知度,减轻用户焦虑,可用于动态信息反馈;

缺点:交互性弱,一般出现时间短,不宜承载内容过多、信息较重要的提示。

2.3、Snackbar(快捷提示):轻提示,可交互,Snackbar源于Android里的控件,但现在也通用于iOS设计。

使用场景1:短暂停留后,或滑动页面后就会消失。一般用于内容推广、操作引导、用户消息等。展示形式为图文、按钮,多出现于页面底部或顶部。

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:干扰性低,比Toast/HUD停留时间较长,交互性较强,用户自主操控感较高,可承载内容较丰富;

缺点:一般出现时间短,不宜承载内容过多、信息较重要的提示。

2.4、Tips(小提示):轻提示,可交互,不会自动消失,展示形式多为图标、文字、按钮,一般出现于屏幕顶部或底部。

使用场景:多用于登录提醒、网络异常、应用状态、内容推广提示等辅助操作提示,不妨碍用户继续操作、浏览。

提醒 顶部弹窗_关于移动端弹窗类型及应用解析

优点:干扰性低,交互性较强,用户自主操控感高、引导性较强;

缺点:对用户警示性低,不宜承载过多内容和重要的信息。

       总结以上弹窗的应用场景,大致可分为提示引导类场景、功能操作类场景。提示弹窗也是人机交互中模仿人与人之间互动实时反馈的情景,操作的及时反馈有助于提升用户感知度、人机交互的友好度 、 易用性,以及减轻用户在操作、等待过程中的焦虑和迷茫等负面情绪。 而功能操作类的弹窗,则在交互上,使用起来更加便捷,层级更加清晰分明。        功能弹窗类型丰富多样,还有新手引导弹窗、功能操作浮层等,在这里没有全面整理到位,也希望整理这些内容对各位小伙伴有帮助。 参考资料: http://www.woshipm.com/pd/2997173.html https://www.sohu.com/a/190380698_114819