弹窗交互的分类

我们每天所说的弹出窗口是一个非常笼统的概念。我们习惯性地称所有的对话框、浮层和提示条为弹出窗口。事实上，弹出窗口可以分为两种类型：模态弹出框和非模态弹出框。在 UI 在设计中，当它迫使用户与之交互时，我们称之为“模式”，也就是说，无论是模式还是非模式，弹出窗口都是让用户回应，需要用户与之交互的窗口。然而，由于交互方式的不同，两者之间的差异仍然非常明显。

70＋UI弹窗套件分享https://js.design/community?category=detail&type=resource&id=63588ff407b57b49921816cb&source=csdn&plan=btt5281

模态框（Modal Dialog）

它的出现会中断用户操作，用户必须完成对话框中的任务(或在主动关闭对话框之前)才能继续主窗口操作的弹出框。例如，JD.COMnutUI 3x移动组件库中的UI弹出组件：当模态弹出框出现时，用户不能忽略弹出窗口，单击任何位置或滚动页面。模态弹出窗口可能会打断用户的使用过程，分散用户的注意力，迫使用户处理模态窗口，然后返回原操作。

非模态弹窗

非模态弹出窗口通常被设计用来告诉用户信息内容，它的出现不会影响用户的操作，用户不能回应，通常有时间限制，一段时间会自动消失。例如，WeUI 微信小程序组件库中的非模态UI弹出窗口，属于轻量级弹出窗口反馈形式，经常以小弹出框的形式出现，会引起部分用户的注意，但不需要用户操作，持续1-2秒自动消失，可以出现在屏幕的任何位置，但建议同一产品尽可能使用相同的位置，让用户有统一的认知，成为一种习惯。今天的非模态对话框 Web 应用程序(如 WordPress 和 Divi）它们很常见，但人们很少注意到它们，因为它们保持在后台，不会打扰用户。

一般来说，非模态弹出窗口通常是用来告诉用户信息内容的，而模态弹出窗口除了告诉用户信息内容外，还需要用户进行功能操作。我们可以简单地理解两者的区别：非模态弹出窗口就像一个好朋友，他总是可以在困难的情况下提供帮助，但维护成本不高或要求不高，模态弹出窗口是另一个烦人的朋友，情绪需要立即吸引别人的注意，并强迫别人放下手头的一切来处理他们。

如何添加弹窗交互？

模态弹出窗口和非模态弹出窗口都有不同的优缺点。通常，我们会根据业务需求和场景要求，设计各种形式的弹出窗口，然后对弹出窗口交互进行分类，然后在场景中使用，即从实际业务、用户使用方式和用户体验，使用什么样的UI弹出窗口更符合设计目的。例如，在营销场景中，当提到弹出窗口时，用户往往讨厌模式对话框，而广告商非常喜欢它们，因为它们非常有效地吸引了用户的注意。

但用户并不总是讨厌被“打断”。在某些情况下，如果文件保存时没有模态对话框，用户很容易因为忘记保存文件而感到懊恼。此外，由于安全原因，更适合通知用户立即更改密码，并提醒用户应用程序或网站刚刚推出新产品或新功能，使用非模态弹出窗口。

一般来说，弹窗设计有以下原则：

尽量减少干扰。由于弹窗交互会中断操作，为了避免引起用户反感，设计师最好尽量少使用弹窗。

视觉一致性。考虑到用户体验，在某些界面中可能会有很多弹出窗口设计，但如果每个界面的弹出窗口不同，很容易给人一种混乱的感觉，甚至让用户不知所措。因此，弹出窗口的设计应尽可能保持视觉一致性，即时设计资源广场内置腾讯、阿里巴巴、字节、今日头条、蚂蚁设计等优秀设计规范，设计师可直接参考和使用。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=explore&source=csdn&plan=btt5281

用于与用户进行简短而直接的对话。弹出窗口应使用用户的语言（熟悉的单词、短语和概念），而不是系统中独特的专有术语。如果模式框需要用户进行复杂的研究或访问其他信息源（模式框可能会阻止这些信息），那么它就不是交互的正确UI元素。

选择合适的弹出窗口设计类型。在模态框和非模态框中选择合适的弹出窗口类型非常重要。模态框比非模态框更容易打断用户的心流。因此，如果不涉及危险操作，我们应该尽量选择更轻的非模态框。

尽量追求极简主义。不要试图把太多的东西挤进弹出窗口，你提供的所有信息都应该是有价值的，并且与用户有关。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=explore&source=csdn&plan=btt5281

小结

弹出框在帮助用户完成任务的过程中做出了巨大贡献。在模式框和非模式框的设计过程中，我们应该遵循基本的界面设计原则，但世界上没有完美的设计规范，也没有完美的产品，因为设计的本质是为用户提供价值，设计以人为本，用户目标是最重要的，用户需求不断变化和更新，所以根据设计趋势和用户需求不断设计更新迭代，通过用户反馈不断改进产品体验，是制作优秀产品的前提。