编者按：弹出窗口不仅仅是一个弹出广告。它是一把双刃剑。如果用得好，用户可以更加关注。如果用得不好，用户可能会不快，甚至会击退潜在用户。那么，如何设计弹？本文作者详细分析了弹出窗口。让我们看看。
说到弹出窗口，很多人对弹出窗口的印象还停留在弹出广告上: 为了盈利，广告商为了提高点击率，当时的广告就像枪林弹雨，用户无处可藏，然后恼羞成怒，甚至想砸电脑。
2010年，广告弹窗被《时代》杂志评为最糟糕的发明之一。
我们现在熟悉的淘宝，为了在电子商务领域生存，不得不使用大量的流氓广告。虽然这确实让用户生气，但不得不说，淘宝经常刷脸，让大家更熟悉。
弹出窗口是一把双刃剑，使用得当确实让用户更加关注，如果使用不当，可能会使用户不快，甚至击退潜在用户。你在设计弹窗时遇到过以下困惑吗？
什么时候选择弹出窗口，什么时候使用页面？弹出窗口的标题是怎来的？最多可以叠几个弹窗？可以说，弹出窗口的设计可以极大地反映设计师的基本技能是否扎实。虽然设计一个小弹出窗口似乎很容易，但面对不同的用户场景和业务背景，弹出窗口背后的思维从未停止过。今天，让我们全面了解弹出窗口。
01 弹窗的定义在正式了解弹窗之前，我们不妨想象以下场景： 你在家做事，但这时电话铃响了， 你要放下手中的东西接电话， 但如果在智能家居环境中，你可以通过人工智能自动接听电话，而你手中的东西还在继续。
如果把前者比作跳转页面，那么后者就是弹出窗口，它可以吸引你当前的注意力，而不离开当前的场景。
目前设计界对弹窗的定义多种多样， 从外观布局从上面看，弹出窗口是页面上层弹出的容器，它承载着文本、按钮、选项、标签或表设计目的弹出窗口是用户与产品之间对话的一种方式，是用户注意力的一种引导形式，根据用户注意力的数量，可以具体定义为Dialogue、Actionbar、Popover、Toast、Snackbar等等特定形式。
从广义上讲，弹出窗口并不像它的定义那样死亡。有时弹出窗口不一定有容器。例如，追逐戏剧时常见的弹幕也是一种新型弹出窗口； 比如新手引导也是弹窗。
02 弹窗的组成
屏蔽弹窗主体(容器、标题、内容、动作按钮)关闭入口(不必要/没有模态弹窗)
1. 遮罩
当页面上出现多个弹出窗口时，这意味着多个遮罩层。此时如何确定遮罩层的颜色？
当页面上出现多个弹出窗口时，这意味着多个遮罩层。此时如何确定遮罩层的颜色？根据主要规范，不建议弹出窗折叠弹出窗口超过三个。当弹出窗口大于或等于3个时，盖子的颜色将不再改变。这里再补充一点， 当弹出窗口数量过多时，用户很容易迷失方向
位置错层的方法。2. 弹窗主体弹窗主体可拆解为
标题、内容、动作按钮
。弹出窗口的标题和内容的写作规则在后面有详细的描述，这里就不赘述了。
弹出窗口的动作按钮一般不超过3个：1个按钮: 那一定是可以关闭弹窗的操作，比如信息公告弹窗的我知道。
这是最常见的情况。一个是推进任务进程一是取消。
3个按钮:这种情况比较少见，比如多了解，但是会让用户离开弹窗，导致弹窗任务未完成，不建议使用。 如果需要向用户显示更多内容，可以嵌入信息扩展，点击图标在弹出窗口下方显示更多信息，以便在不离开弹出窗口的情况下了解更多信息。
至于弹出窗口按钮的位置，有两种常见的放置规则：等分居中摆放和一侧摆放(右侧居多)，
不同的平台有不同的摆法，下一个例子说明:1）Material design中右对齐
2）IOS中等分居摆放
从根本上说，模态和非模态的关闭方式是非常不同的。对于模态弹窗，其关闭方式只有在选择后才会消失， 包括取消选项。
对于模态弹窗，其关闭方式只有在选择后才会消失， 包括取消选项。 关闭模态弹窗的方法有很多，总结有四种方法:
1)关闭按钮(叉)
通常位于右上角，只要保持一致，几个标准就把关闭按钮放在左上角。2)取消按钮
通常与确认或其他推进任务完成的动作按钮放在一起，成对出现。3)ESC键
敲击ESC还可以退出非模态弹窗。 Esc键是英文单词escape的缩写， 在1960年由IBM由程序员创建，其功能是撤销、退出。尽管现在绝大多数人使用鼠标进行交互，但出于无障碍设计(包容性设计)的需要， 通过键盘完成交互至关重要，所以ESC按钮也是必要的。
而且这种快捷键的优化可以大大提高用户的使用效率，降低用户的运营成本。特别是在B端产品中，调用键盘进行操作优化是用户不可忽视的酷点。点击遮罩区域
屏蔽区域是弹出窗口背后的内容区域。通常，为了使用户更加关注，会添加一层深色屏蔽。当用户点击屏蔽区域时，非模态弹出窗口会自动消失。但是，为了避免用户误触，如果弹出窗口是表单和其他需要用户输入的内容，则应自动保存。
对于取消和关闭按钮，我想在这里更清楚地解释一下：让我们举一个生活中常见的例子。假设你有一个孩子喜欢问10万个为什么，你在津津有味地追逐戏剧。结果，他跑过来问你问题。在他张开嘴之前，你捂住耳朵，不听。这相当于弹出窗口右上角的关闭按钮（叉），但关闭按钮仅存在于非模态弹出窗口中，用户可以在不做任何选择的情况下关闭弹出窗口，而模态弹出窗口要求用户做出选择，不要给用户逃避的机会，因此模态弹出窗口没有关闭按钮。
然后孩子问你是鸡蛋还是鸡蛋，你不知道如何解释这个问题，只能告诉孩子，我不知道如何回答这个问题，这相当于弹出窗口
取消”按钮。然后孩子问你是鸡蛋还是鸡蛋，你不知道如何解释这个问题，只能告诉孩子，我不知道如何回答这个问题，这相当于弹出窗口取消”按钮。虽然取消按钮和关闭按钮(叉叉)最终会导致弹窗关闭，但逻辑上是不同的。
1. 模态&；非模态
弹窗可分为模态弹窗和非模态弹窗
两种类型， 这两个概念来自开发人员的术语。再来看非模态弹窗
，非模态弹出窗口允许用户处理其他任务，而不打断当前页面。例如，设计师最熟悉它PS，您可以同时调用多个弹出窗口来更改图像参数，因为艺术创作是一个多线过程，艺术家可以改变他们想到的参数。模式和非模式只是一个相对普遍的概念，不同的规范可能对某种类似的弹出窗口有完全不同或轻微的差异。接下来，我将分别遵循它 Microsoft-Fluent UI、Google- Material Design、IOS 在规范中，详细介绍一些有代表性的弹窗类型。
2. 典型弹窗
1）Actionsheet
类型:模态弹窗
参考规范:IOS Design
简介:Action sheet两个或两个以上与当前语境相关的动作，不要显示太多的动作选项，也不要在动作列表中使用滚动条。
关键点:动作按钮: 选择危险 (如清空、删除)放在上面， 底部放置取消按钮。
关键点:
动作按钮: 选择危险 (如清空、删除)放在上面， 将取消按钮放在底部。避免使用过多的动作按钮，使用取消按钮。Action Sheet列表产生滚动条。视觉上需要突出破坏性操作。2）Modal
类型:模态弹窗
参考规范:Microsoft-fluent UI
简介:Modals它也是一种模式弹出窗口，它需要人们将注意力从当前页面转移到弹出窗口，并需要用户的互动。和Dialog不同的是， Modal 更适合长文本内容，如隐私条款、知情同意书等，或要求用户更改页面设置等复杂操作行为。
3）Dialog
类型:模态弹窗参考规范:Microsoft-fluent UI简介:
Dialog它是一种模式弹出窗口，它需要人们将注意力从当前页面转移到弹出窗口，并需要用户的互动。它基本上用于相对简单的场景，如确认信息、删除文档和做出选择。分类:
Alert Dialogue: 用户在关闭弹出窗口之前，必须做出选择，因为紧急信息、详细显示或动作中断用户。Simple Dialogue: 无需动作按钮即可生效的列表选项。Confirmation Dialogue: 用户需要确认当前的选择，如果用户后悔，可以在这一步进行修改。
Full-screen Dialogue使用场景:
阻止程序运行的错误需要向用户显示完成特定任务的关键信息， 如果需要决定和声明最高程度抓住用户的注意力
关键点:在当前强制输入区域完成之前，保存按钮处于置灰状态。一些简单的弹窗允许出现在全屏弹窗的上层。如果长度不确定或更长，过两行。如果长度不确定或更长，将其放置在内容区而不是标题区。尽量减少使用Dialogue，因为它们毫无征兆地出现，会打断用户的过程。大部分弹窗内容应尽量避免使用滚动条
， 如果必须使用(如选择时间日期)，保持标题和底部的动作按钮区域固定，覆盖区域的背景不动。4）Drawer
类型:
模态弹窗参考规范:Material Design
简介:Drawer它是一种容器， 它的性质与生活中的抽屉非常相似， 通常用于放置一些与特定窗口相关的信息或选项。默认情况下， Drawer是隐藏的， 它通常通过按钮或菜单触发， 从父级界面的一侧滑出，因此它不能单独存在于父级界面之外。
关键点:避免使用drawer，现在流行的软件很少使用drawer而且不提倡使用。如果你想展示补充内容，不妨试试panel、popover、sidebars、split views。5）P op
电脑知识
