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

在日常工作中，经常涉及到许多弹窗的使用和设计，如何运用好弹窗，才能有效引导用户操作及时反馈信息，是在工作中需要经常思考分析的问题。今天小吉在这里稍作梳理和总结，如有表述不当的地方，欢迎大家一起讨论。 弹窗基本可分为两大类：模态弹窗和非模态弹窗；其中模态弹窗有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