是什么？

说到“弹窗”，大家应该很熟悉，但我认为“弹窗”这个叫法太过狭义，这里我把他们归类于“反馈弹出”系统。

大家在上网的时候，不论你使用的是何种终端，多多少少都会有一些奇奇怪怪的弹出反馈，因为这是人机交互的重要组成部分，是交互设计中反馈的一种方式。

为什么？

1.使用人们熟悉的概念模型，会使用户很快适应一个不熟悉的产品。

2.使用开发组件，符合组件化设计趋势。

因此我们必须对市面上的弹出反馈模型足够熟悉，才能在以后设计场景中快速找出合适的弹出反馈模型。

怎么做？

所以在设计中，我们需要先了解弹出反馈有哪些类型，各终端平台又有哪些差异？设计中有哪些注意事项呢？

今天就跟大家分享下，我最近的相关总结。

常见反馈弹出类型汇总

按形态分

按使用场景分

一、移动端

1. 轻度反馈提示

轻度反馈提示常用于非重要信息反馈提示，有一定时间限制，不强制用户交互，对用户打扰程度较低。由于展示时间短，提示轻，固不宜展示重要反馈提示信息，不宜承载过多内容。

Toast/HUD 提示框

Toast是安卓系统里的一种轻量级反馈提示，能给予用户及时反馈，对用户打扰程度小。HUD是iOS系统的叫法，用法与toast类似。它们可在任何位置出现，一般出现1-3秒会自动消失。常用于刷新反馈、保存反馈。

常见应用场景

loading加载提示

轻度结果反馈

使用注意事项

位置保持统一

信息保持简洁

差异

HUD出现在屏幕中央，Toast位置广泛。

HUD内包含内容较Toast丰富。

HUD毛玻璃背景，Toast常见黑色透明背景，延伸色多。

HUD内包含内容可变化。

Tips 提示栏

Tips是一种中度反馈提示，内嵌于页面，由用户触发关闭或进入跳转。

常见应用场景

网络状态提醒

金融类到期提醒

广告

• Popver/Popup 浮层

Popver/Popup是一种轻提示，由一个带三角箭头的弹框组成，当用户点击某个内容时浮出，一种临时非模态视图，通过点击其内部按钮或其他外部区域可关闭。

使用注意事项

箭头指向保持明确

信息保持简洁

2. 中度反馈提示

中度反馈提示介于轻度和中度之间，适用于各种中等重要信息反馈提示，中等反馈内容展示。既能快速完成任务，也不太打扰用户。

•  Acitivity View 活动视图

Acitivity View 是一种中度提示反馈，位于屏幕底部，背后有黑色半透明蒙层，一般由用户主动发起。有很多种叫法，比如安卓上叫Bottom Sheets，iOS上叫Activity tanchuan和Action Sheets。这种提示方式可减少 Dialog/Alerts重度反馈弹出给用户带来的干扰。常用于分享、付款。

使用注意事项

内容不宜过多

超出内容要限定滚动区域

• Snackbar 底部弹窗

Snackbar是一种中度提示，常用于安卓系统。一般出现在屏幕底部，2秒自动消失，可交互。多用于删除反馈（可撤销恢复）。

3. 重度反馈提示

重度反馈提示是一种重量级摸态反馈提示方式，常用于重要信息反馈提示。它能够获取用户视觉焦点，吸引用户注意力。但也打断了用户操作，干扰性比较强。

• Dialog/Alerts 警告框、对话框

Dialog/Alerts 是一种重度模态反馈提示，需要用户对此弹出进行回应后才能继续其他任务。在iOS中称Alerts，在安卓中称Dialog。一般出现在屏幕中间，背后有黑色半透明蒙层，有按钮型和图片型。

常见应用场景

退出、删除提醒。

软件授权、版本升级等提醒。

广告宣传。

二、WEB端

1 提示信息

任何一个产品，即使用户界面做的再好，也离不开用户引导和信息提示。提示信息是用来告诉用户需要知道什么、采取什么样行动的内容。

• Alert 警告提示

是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

•  Notification 通知提示框

系统主动推送的重要的全局性通知信息，在系统右上角显示。

• Badge 徽标数

用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。相对重要和用户关联度更高的信息提示，使用数字精准提示；权重不高和不是用户特别关心的消息提示，使用红点做提示。

• Popover 气泡卡片

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。和 Tooltip 的区别是，Popover 可以承载更复杂的内容，比如链接或按钮等。

• Tooltip 文字提示

用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。

2.过程反馈

操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感。

• Loading 加载状态进度反馈

在操作需要一段时间（一般为超过 2 秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。若加载时间较长，应提供取消操作。

当用户不必等待较长时间的加载时使用。

在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。

• Input 录入反馈

操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。反馈文字紧跟着要说明的区块（反馈内容一般是错误说明），不自动消失（当用户进行相应的交互操作后才消失）。

• Popconfirm 气泡确认框

目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和全屏居中模态对话框相比，交互形式更轻量。

•  Dropdown 下拉菜单

向下弹出的列表。页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

•  Drawer 抽屉

屏幕边缘滑出的浮层面板。

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

1. 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。

2. 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

   
   

3 结果反馈

操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感。

•  Message 全局提示

通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。当用户不必等待较长时间的加载时使用。

• Modal 对话框

通过一个操作引发的反馈浮层位于页面中心，反馈内容可通过确认或取消按钮进行关闭，用户在反馈层出现时不可进行任何的操作，用于重要的反馈。除失败时避免显示不必要的提醒弹窗。弹窗是很强的反馈机制，只有在传递非常重要，且可操作的信息时才需要使用它。

4. Modal 模态

模态让用户聚焦到某一个任务、消息或者视图上而不能做别的事情，直到用户完成了当前任务，具有强制性。

使用注意事项：

1. 尽量少使用，模态是线性的，比较强制。建议只在某个任务特别重要，必须引起用户的注意、或者某个任务必须被完成才能继续使用应用、或者需要应用需要保存数据时，才使用模态这种设计。

2. 使用模态时需要提供一个清楚明白的退出模态的通道。需保证用户总能知道他们在一个模态中操作后的结果。

3. 保持模态里的任务简单、简短、单一。如果要在模态视图中创建带有多层级关系的任务，一定要慎重！因为用户很容易忘记它们操作的来龙去脉。

4. 只在展示很重要的提示信息时，才考虑使用警告框。最理想的情况是，警告框可以让用户采取行动。警告框比较打扰用户，所以有必要让用户觉得这种打扰是值得的。

5. 不要在一个弹出框上面使用模态视图。弹出框之上唯一可以出现的，是警告框（警告框权限真的很大啊！）

5.总结及建议

1. 没有最好的形式，只有最合适的形式。

2. 明确设计目标，根据需求选择模型。

3. 信息少也可考虑键盘提示，信息多可考虑设计为页面，以上都不适合时，再考虑采用传统弹出模型。

4. 勿多层弹出，在特殊情况时也可考虑使用关联弹出。

5. 保持克制。

注：文章内容均是个人对网上、书上已有内容进行分析整理总结。