作为一名UI设计师，弹出窗口是链接产品交互和用户操作的常用方法，它不仅可以处理用户的问题「即时任务」，也可以作为提示通知用户的当前操作反馈或状态，但是你真的对它有足够的了解吗？接下来将带你去探索弹出窗口吧！
一、弹出窗口的定义和分类
弹出窗口是一个浮层，用户需要与之互动，以引起用户的反应。它可以通知用户关键信息，要求用户做出决定，或者涉及多个操作。根据iOS和MD规范，弹出窗口可以分为模态弹出窗口和非模态弹出窗口。一般来说，非模态弹出窗口用于告诉用户信息内容。除了告诉用户信息内容，模态弹出窗口还需要用户操作功能。
①模态弹窗
用来强烈提醒，可以获得用户的视觉焦点。例如“点击收到礼物”、“版本更新”等弹出窗口具有一定的强制性和干扰性，需要用户点击或关闭。常用于对话框、表格弹出窗口、项目选择弹出窗口、复杂信息展示等。这种弹窗需要保留关闭按钮，不能隐藏。
功能：用于传达重要信息，告知用户当前的情况，通常伴随着用户需要操作。
场景：通常用于承载非常重要的附加操作或警告信息，如退出、删除、清空等。
设计规范：拆卸控件设计组件。在IOS规范中，警告框中包含的元素：标题(必选)、内容(可选)、操作按钮(必选)。
②非模态弹窗
与模式弹出窗口相反，它的优点是更温和，不会打扰用户。缺点是显示时间短，不适合显示重要信息，承载常见的系统弹出窗口。常用于系统通知、全局提示、警告提示、气泡卡、文字提示等。
功能:toast是Android的控件，现在也用于iOS系统。HUD是苹果控件，类似于许多Android系统。它是一种轻量级弹出窗口反馈形式，通常以小弹出框架的形式出现，持续1-2秒后自动消失。屏幕占用空间小，不会打断用户操作，使用方便，适用范围广。
场景：一般用来提示没有那么重要的反馈信息，比如刷新后的成功状态。
设计规范:在Android的规范中，toast只能出现在屏幕底部，只能放文字，不能放图标，短时间内会消失。但是现在很多应用都没有限制出现的位置，toast出现在顶部，不干扰用户使用产品。但是为了让用户养成习惯，最好统一使用位置。
二、弹窗设计的基本原则
当你正确设计和使用弹出窗口时，它们将是非常有效的用户界面元素，可以帮助用户快速方便地实现目标。然而，当使用不当时，弹出窗口会困扰你的用户。学习如何设计弹出窗口将有助于您避免使用过程中可能带来的麻烦。即时设计分享了弹出窗口设计的五个基本原则:
①减少干扰
因为弹出窗口会中断操作，所以尽量少用弹出窗口。突如其来的弹出窗口会迫使用户停止目前正在进行的任务，并专注于弹出窗口的内容。当你需要用户互动才能继续的时候，或者当你犯了一个错误，成本会很高的时候，使用弹出窗口是最合适最合理的。然而，当用户不做任何操作时，突然打开弹出窗口是一个非常糟糕的设计。
②弹窗文案，用户容易理解
弹出窗口应该使用用户的语言(用户熟悉的单词、短语和概念)，而不是一些系统特有的专有名词。尽量不要给用户提供可能混淆的选项，而是使用文字清晰的选项。弹出窗口中使用语义清晰的问题和选项。用户操作完成后，应提醒用户操作已经完成。
③强调极简主义原则
弹出窗口应保持清洁和简单(遵循KISS原则)，从弹出窗口中去除不必要的、不能帮助用户完成任务的元素或内容，以达到简化的目的。一般来说，弹出窗口不应该提供两个以上的选项，尽量避免在弹出窗口放置多个步骤。
④选用合适的弹窗类型
弹出窗口大致分为两类。第一类是模态弹出窗口，吸引用户的注意力，只有强制用户与之互动后才能继续。第二类是非模态弹出窗口，允许用户通过点击或触摸周围地区来关闭。设计师应根据内容选择合适的弹出窗口类型。
⑤保持视觉一致性
打开弹出窗口时，后面的页面必须稍微暗一点。它有两个功能。首先，它将用户的注意力转移到浮动层。其次，它让用户知道后面的页面不再可用。在大多数情况下，用户可以通过点击或触摸关闭弹出窗口(除了模式弹出窗口)。应避免在弹出窗口中启动附加弹出窗口(即弹出窗口中的弹出窗口)。
在弹出窗口设计中，我们还需要学习一些优秀的弹出窗口设计案例。强烈建议您打开即时设计。即时设计社区资源中有大量优秀的弹出窗口设计案例，可以免费下载使用。打开即时设计，快速打开你的弹出窗口设计。
https://js.design/community?category=explore&source=csdn&plan=yb6071总结:APP中的弹出窗口是一个重要且容易被设计师忽视的控件。除了上面总结的弹出窗口设计原则，还需要注意弹出的频率、节点、客户群体的选择等。一般来说，只有与用户有很强的相关性，让用户理解的弹出窗口，才能激发用户的行为动机，带来更好的商业价值。
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
