编辑指南:弹出窗口是用户认知能力和系统反馈最常用的组件之一。如何设计弹出窗口既能让用户感觉方便智能，又方便统计数据？本文作者将以B端产品为例，从可操作性和提示性两个方面对弹出窗口进行分析，希望对你有所帮助。

我们经常谈到用户的认知能力和系统反馈，这里的反馈经常使用弹出组件，包括强提醒和弱提醒。

有时候一个复杂的场景需要拆分，我们会优化一个页面，通过弹出窗口展示一些功能；比如个人信息页面包含很多组，主界面是组的集合，每个组通过打开一个弹出窗口来维护；通过这种方式，可以简化复杂的表单，并在部分中进行维护。

交互设计可以简单理解为把复杂性转移到系统上，把简单性留给用户，让用户感觉更方便、更智能。

类似的情况还有很多。现在我从可操作性和提示性两个方面来说一下B端产品中的弹出窗口。

首先，操作弹出窗口

操作弹出窗口主要是一些表单类和配置类的接口，比如添加、导入、设置等。

有人可能会说，添加可以设计成标签页，作为独立页面存在，但这是一个弹出窗口，暂时不考虑这种情况；啰嗦，如果是tab的形式，添加提交后页面消失，值传递给父页面。

弹出窗口很常见。添加提交后，弹出窗口消失，值传递给父级，页面自动刷新。

1.简单场景

表格条目不多，或者页面不多，可以视为简单场景；一个弹出页面只需要完成一个功能，相关操作并不多，比如添加一个输入内容很少的弹出窗口。

此外，类似于批量查询、导入等操作，在弹出窗口中还需要另一个弹出窗口来执行导入模板的操作，这仍然可以归结为一个简单的场景。

总结:一个简单的场景几乎就是一个操作性的弹出窗口，表单内容少，功能单一，业务简单。

2.复杂的场景

表单中有很多需要分组的输入内容，或者有很多需要关联的操作，可以看作是复杂的场景。

要么是一个主弹出窗口，里面包含了很多再次弹出的弹出窗口。

如下图所示:

或者通过分组、TAB、分步等方式优化复杂的服务。在主题的弹出窗口中。

1)弹出标签

此处的选项卡不是指选项卡，而是在弹出窗口中按选项卡分组。过去，在设计客户关系管理系统时，采用这种方法来添加成员信息。

其实并不代表这个方法有多好，主要是因为当时弹出窗口大小需要技术上固定，而且是公式化写的，内容多，内容少。为了兼容各种情况，考虑这种TAB分组。

如下图所示:

这里有一个注意事项，就是必填字段的问题。因为字段信息隐藏在每个标签页中，所以我一目了然看不到哪些字段是必填的，以及必填字段没有输入时如何提醒。我曾经在标题右上角设计过一个小三角形。

如下图所示:

当影子存储标签或其他验证信息提示中有必填字段未填写时，可通过红色标签提醒用户。当用户切换到红色标签TAB时，可以查看弹出窗口无法提交的原因。所有问题解决后，红色标记消失，可以直接看到当前的TAB问题。

2)分组弹出窗口

所有字段信息都在弹出窗口中展开，但有些字段属于同一类型，可以用分组信息来区分；分组弹出窗口可以组织字段信息，方便用户输入信息，可以理解为提高用户的认知能力。

字段信息可以根据编号按顺序或水平排列。比如两个字段排成一行，需要根据整体界面结构进行设计；另外还要考虑系统反馈的显示方式，比如放在右侧、信息框底部、浮动层提示等。

如下图所示:

3)逐步弹出窗口

字段信息在弹出窗口中按顺序分开，称为分步弹出。这个设计有一个重点，就是第二步操作的数据需要第一步支撑；如果没有完成第二步，就不能直接从第一步走到第三步。

比如我之前设计的命题系统，一般都是先有大题再设计小题。

如下图所示:

有人可能会说，如果字段前后没有关联，就不可能使用分步弹出。一般WEB端采用分组方式，移动端可以循序渐进；但是一般不需要，用户有兴趣可以在后面添加。

比如注册一些应用后，需要选择一些初始设置，填写个人资料，但可以跳过不填。

二、提示性弹出窗口

为了让用户更好地使用产品，产品必须具有良好的反馈能力。这次主要讲系统反馈，就是提示弹出。我们给系统下达指令后，都希望系统能给我们正确的反馈，让我们知道自己做的对还是错，下一步的操作该怎么进行。

下面我就从弱提醒、强提醒、二次确认三个方面来谈谈提示性弹出窗口。

1.弱提醒弹出窗口

从字面上我们可以知道，这种弹出窗口并不是很打扰用户，只是提醒和告知用户。比如用户操作某个功能后，系统会将结果反馈给用户，常见的有创建成功和删除成功。

但是这里要区分的是，用户向计算机输入指令后，计算机计算结果反馈给用户，这可以称为土司提示。

用户的一些简单的鼠标操作，如滑动、点击、悬停等。，系统立即在前台给出一些反馈；这种弹出窗口，可以理解为广义的，其实就是一些浮动层，可以称之为tips tips。

1)祝酒提示

当用户点击新建按钮时，系统弹出一个新的弹出窗口。输入必填字段并确认提交后，系统会以toast的形式提示用户新操作成功；比如“新建成功”，停止一分钟后弹出窗口会自动消失，同时新创建的弹出窗口会消失，列表会刷新并增加一条新的数据。

以上是我们常见的新增操作流程，其他操作类似，比如修改、删除。

一般这种提示会在停留几秒后自动消失，无需用户强烈确认。如果用户真的知道，系统会忽略。

如下图所示:

2)提示

当用户将鼠标悬停在输入字段右侧的问号图标上时，系统会以提示的形式通知用户该字段的输入描述。鼠标滑出问号图标的感应区域后，浮动层提示会消失，再次悬停后会重新出现。

如下图所示:

另外，在导航菜单上，如果单词太多，会以省略号的形式显示很多单词。当鼠标悬停在单词上时，也会有提示显示完整的文本信息。

正常方式还是需要精简导航菜单文本，只是用来补救不好的用户体验。

另一个可以使用的地方是TAB文字。制表符通常有固定的宽度。单词太多，省略是需要的。同样，当鼠标悬停时，您可以看到提示提示的完整文本信息。

2.强提醒弹出窗口

当系统给用户反馈，需要强制用户确认时，就是我们要说的强提醒弹出。

一些重要的注意事项，比如:系统版本太低，有些功能不支持，有些用户的动作会造成一些后果。

当有一些重要的反馈时，我们可以使用强提醒反馈，并且有必要确保用户已经知道。如果用户不响应反馈，系统不会让用户执行其他操作，所以我们称之为强提醒弹出。

通常的方法是给用户一个反馈按钮，比如OK、know等。当用户点击此按钮时，提醒弹出窗口将消失。在这里，反馈的文字和按钮可以体现情感化的设计，可以安慰用户被迫操作后失落的心情。

如下图所示:

还有一个强烈的提醒，数据需要输入。比如审批时，审批人需要确定一个时间范围，然后系统会强烈提醒用户输入结束日期。当然这只是一种设计方法；您也可以将此结束日期字段放入审批界面，并在进行审批时将其验证为必填字段。

3.第二个确认弹出窗口

一般用户的一些不可逆操作需要用户第二次确认；如果用户仍然想继续操作，系统执行操作，如果用户取消，操作关闭。

第二次确认弹出窗口主要是为了避免用户误操作造成不可挽回的损失，所以在进行一些不可逆的操作时，用户需要进行第二次确认；同时，弹出窗口的副本可以提醒用户目前正在进行一些不可逆的操作，然后在想清楚之后再做决定，给用户一个仔细思考的机会。

如下图所示:

二次确认在用于删除时更为经典，因为删除后无法完全找到数据，同样的数据只能重建；如果是上游传来的数据，系统可能需要控制权限，只有特定权限的用户才能删除。有时候为了避免数据丢失，也有软删除和硬删除。

系统删除的时候只放在回收站或者其他特定的地方，这叫软删除；当空回收站清空后，数据将不再存储，这称为硬删除。

有些系统可能没有删除功能。系统根据业务场景，满足特定条件后自动批量删除数据。

三.总结

弹出窗口可用于数据操作和反馈。如何使用它们取决于业务场景。

b端产品需要具备良好的容错、防错和智能属性。在过去，他们经常设计一些蹩脚的体验，以适应系统的局限性；而正是因为局限性，交互设计师的价值才能得到充分发挥。

我们需要平衡业务价值和用户价值，同时还要考虑系统的技术局限性，最终形成更好的用户体验方案。后来我们通过用户反馈迭代产品，不断提升产品的体验。