精通UI弹窗设计的5个规范和技巧！

作为UI设计师，当你在工作中遇到提示和反馈时，你会在设计中不假思索地使用弹出窗口吗？你能合理地说出为什么使用这个控制器吗？

弹出窗口是链接产品交互和用户操作的常用方式，可以处理用户「即时任务」，它也可以作为当前操作反馈或状态的提示通知用户，但你真的足够了解它吗？让我们带你去探索弹出窗口！

弹出窗口的定义和分类

弹出窗口是一个浮动层，旨在激发用户的反应，需要用户与之互动。它可以告知用户关键信息，要求用户做出决定，或涉及多个操作。

根据iOS和MD规范，弹出窗口可分为模态弹出窗口和非模态弹出窗口。一般来说，非模态弹出窗口用于告诉用户信息内容。除了告诉用户信息内容外，模态弹出窗口还需要用户进行功能操作。

①模态弹窗

用于强提醒，可以获得用户的视觉焦点。例如，“点击收到礼物”、“版本更新”等弹出窗口具有一定的强制性和干扰性，需要用户点击或关闭。常用于对话框、表单弹出窗口、项目选择弹出窗口、复杂信息显示等。

功能：用于传达重要信息，告知用户当前情况，通常伴随用户操作。

场景：一般用于携带非常重要的附加操作或警示信息，如退出、删除、清空等。

设计规范：拆卸控件设计组件。在IOS规范中，警告框中包含的元素：标题（必须选择）、内容（可选）（可选）、操作按钮(必选)。

注：此类弹出窗口需要保留关闭按钮，不能隐藏。

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

②非模态弹窗

与模态弹出窗口相反，它的优点是更温和，不会打扰用户。缺点是显示时间短，不适合显示重要信息，携带常见的系统弹出窗口。常用于系统通知、全球提示、警告提示、气泡卡、文本提示等。

功能:toast是Android的控制器，现在也用于iOS系统。HUD是苹果控制器，在很多Android系统中也有类似的应用。它是一种轻量级弹出窗口反馈形式，经常以小弹出框的形式出现，持续1-2秒自动消失。占用屏幕空间小，不会打断用户操作，使用简单，适用范围广。

场景：一般用于提示不那么重要的反馈信息，如刷新后的成功状态。

设计规范：在Android规范中，toast只能出现在屏幕底部，只能放文字，不能放图标，短时间内就会消失。但现在，许多应用程序不限制位置，toast出现在顶部，不干扰用户使用产品。但为了让用户养成习惯，最好统一使用位置。

弹窗设计的基本原则

当您正确设计和使用弹出窗口时，它们将是非常有效的用户界面元素，它们可以帮助用户快速和方便地实现目标。然而，当使用错误时，弹出窗口会困扰你的用户。学习如何设计弹出窗口将帮助您避免使用时可能给用户带来的麻烦。即时设计分享了弹出窗口设计的五个基本原则：

①减少干扰

因为弹出窗口会中断操作，所以尽量少用弹出窗口。突然出现的弹出窗口会迫使用户停止目前正在进行的任务，并专注于弹出窗口中的内容。当你需要用户互动才能继续时，或者当犯错误的成本会很高时，使用弹出窗口是最合适、最合理的。然而，当用户没有做任何操作时，突然打开弹出窗口是一个非常糟糕的设计。

②用户容易理解的弹窗文案

弹出窗口应该使用用户的语言（用户熟悉的单词、短语和概念），而不是一些独特的系统名词。尽量不要给用户提供可能混淆的选项，而是使用具有清晰意义的选项。在弹出窗口中使用清晰意义的问题和选项。用户操作完成后，应提示用户操作已完成。

③强调极简主义原则

弹出窗口应保持干净和简单（遵循KISS原则），从弹出窗口中删除不必要的、不能帮助用户完成任务的元素或内容，以达到简化的目的。一般来说，弹出窗口不应提供超过两个选项，并尽量避免在弹出窗口中放置多个步骤。

④选择合适的弹窗类型

弹出窗口大致分为两类。第一类是吸引用户注意力的模态弹出窗口，只有在强制用户与之互动后才能继续。第二类是非模态弹出窗口，允许用户通过点击或触摸来关闭。设计师应根据内容选择合适的弹出窗口类型。

⑤保持视觉一致性

当打开弹出窗口时，后面的页面必须稍微暗一点。它有两个功能，第一个是将用户的注意力转移到浮动层上，第二个是让用户知道后面的页面不再可用。在大多数情况下，用户可以通过点击或触摸来关闭弹出窗口（除了模式弹出窗口）。应避免在弹出窗口中启动附加的小弹出窗口（即弹出窗口中的弹出窗口）。

在弹出窗口设计中，我们还需要从一些优秀的弹出窗口设计案例中学习。强烈建议您打开即时设计。即时设计社区资源中有大量优秀的弹出窗口设计案例，可免费下载使用。快速打开即时设计打开弹出窗口设计！

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

总结：应用程序中的弹出窗口是一个重要的、容易被设计师忽视的控制器。除了上述弹出窗口的设计原则外，还需要注意弹出频率、节点、客户群的选择等。一般来说，只有与用户密切相关的弹出窗口才能激发用户的行为动机，带来更好的商业价值。