说起弹窗，很多人对弹窗的印象还是“弹窗广告”：网站想赚钱，广告商想提高点击率。当时的广告如枪林弹雨，用户无处可躲，这让他们愤怒不已。我什至想砸碎我的电脑。

2010 年，弹出广告被《时代》杂志评为最糟糕的发明之一。

我们今天所熟悉的淘宝，在电商领域不得不靠大量的“流氓广告”来生存。虽然这确实让用户愤怒了，但不得不说，淘宝也因为频繁刷脸而让大家更加熟悉了。 。

弹出窗口是一把双刃剑。如果使用得当，它们确实可以让用户更加专注。然而，如果使用不当，它们可能会让用户不高兴，甚至排斥潜在用户。您在设计弹窗时是否遇到过以下困惑？

可以说，弹窗设计的好坏，很大程度上体现了一个设计师扎实的基本功。看似设计一个小小的弹窗非常容易，但面对不同的用户场景和业务背景，弹窗设计起来就会困难重重。弹窗背后的思考从未停止，今天就让我们全面了解一下弹窗。

01 弹窗定义

在正式理解弹窗之前，我们不妨想象一下这样的场景：你正在家里做某事，但这时候电话响了，你不得不放下手中的事情去接电话。但如果你处于智能家居环境中，你可以人工智能自动接听电话，而你正在做的事情仍在继续。

如果把前者比作一个跳转页面，那么后者就是一个弹窗，可以在不离开当前场景的情况下吸引你当前的注意力。

目前，设计界对弹出窗口有多种定义。从外观和布局的角度来看，弹出窗口是在页面上层弹出的容器。容器带有文本、按钮、选项、标签或表格等；从设计目的来看，弹出窗口是用户与产品对话的一种方式，是引导用户注意力的一种形式。根据它们吸引用户注意力的程度，可以将它们具体定义为特定形式，例如、、、、等。

从广义上讲，弹出窗口并不像其定义那么严格。有时候弹窗不一定有容器，比如看电视剧时常见的弹幕，这也是一种新型的弹窗；另一个例子是新手指南。 ，这也是一个弹出窗口。不过，我们这里讨论的是狭义上标准中常见的弹窗，那些非典型的弹窗不在今天讨论的范围之内。

02 弹窗的构成

弹出窗口的基本组件可以分为：

1. 面膜

为了让用户更加关注弹窗，我们会在弹窗容器下方的页面上方添加一层遮罩。通常这种面具是半透明的黑色。遮罩颜色越深，用户越能专注于当前页面；面罩 罩盖颜色越浅，用户跳出感越小，产品更加人性化。

当页面出现多个弹窗时，就意味着有多个遮罩层。此时如何确定mask层的颜色呢？

根据主要标准，不建议堆叠超过三个弹出窗口。当弹出窗口大于或等于3个时，遮罩的颜色将不再改变。这里还要补充的一件事是，当弹出窗口太多时，一个又一个的弹出窗口，用户很容易迷失方向。这时候就可以采用错位仓位的方法。

2. 弹出窗体

弹出窗口的主体可以分为标题、内容和操作按钮。

弹窗标题和内容的书写规则稍后会详细介绍，这里不再赘述。

弹出窗口一般不超过3个操作按钮：

1按钮：必须是可以关闭弹窗的操作，例如信息公告弹窗中的“我明白”。

2 个按钮：这是最常见的情况。一种是推进任务进程的操作，另一种是取消操作。

3个按钮：这种情况比较少见，比如“了解更多”，但是这样会导致用户离开弹窗，导致弹窗任务不完整，所以不建议使用。如果有更多内容需要向用户展示，您可以嵌入信息扩展，点击弹窗下方的图标即可显示更多信息，这样您无需离开弹窗即可了解更多信息。

对于弹出按钮的放置，常见的放置规则有两种：中间等距放置和一侧放置（多为右侧）。不同的平台有不同的放置方式。以下是一些示例：

1) 中右对齐

2）IOS放在中间。

3）在规范中，手机上的按钮是等距居中的，但在电脑上则是右对齐的。

3、关闭弹窗入口

模态和非模态的关闭方法本质上是有很大不同的。

对于模式弹出窗口，它们的关闭方式是，只有在选择选项（包括“取消”选项）后，弹出窗口才会消失。关闭非模式弹出窗口的方法有很多种。总结起来有四种方式：

1) 关闭按钮（十字）

一般在右上角，少数规格把关闭按钮放在左上角，只要一致即可。

2) 取消按钮

通常与“确认”或其他操作按钮放置在一起以促进任务完成，成对出现。

3)ESC键

您还可以通过按 ESC 键退出非模式弹出窗口。 Esc键是英文单词的缩写。它是由一位IBM程序员于1960年创建的。它的功能是“撤消”和“退出”。

虽然如今绝大多数人都使用鼠标进行交互，但由于无障碍设计（包容性设计）的需要，通过键盘进行交互是必不可少的，因此ESC按钮也是必要的。

而且，此类快捷键的优化可以大大提高用户效率，降低用户操作成本。

尤其是在B端产品中，调用键盘来优化操作是一个不容忽视的人性化点。

4）点击遮罩区域

遮罩区域是弹窗后面的内容区域。通常，会添加深色遮罩以使用户更加集中。当用户点击遮罩区域时，非模态弹窗会自动消失。但是，为了避免用户误触，如果弹出的窗口是表单或者其他需要用户输入的内容，则必须自动保存该内容。

关于“取消”和“关闭”按钮，我想在这里详细阐述一下：举一个生活中常见的例子。假设你有一个喜欢问十万个为什么的孩子。你正在津津有味地看电视剧，他却逃跑了。他来问你一个问题。在他开口之前，你捂住耳朵不听。这相当于弹出窗口右上角的关闭按钮（十字），但关闭按钮只存在于非模态弹出窗口中。 ，用户不需要做任何选择就可以关闭弹窗，而模态弹窗则需要用户做出一定的选择，并且不给用户逃脱的机会，所以模态弹窗不会有一个关闭按钮。

然后孩子问你是鸡和蛋还是鸡蛋生鸡。你不知道如何解释这个问题。你只能告诉孩子，我不知道如何回答这个问题。这相当于弹出窗口的“取消”按钮。 。

虽然“取消”按钮和关闭按钮（十字）最终都会导致弹出窗口关闭，但它们在逻辑上是不同的。

03 弹窗类型 1. 模态&非模态

弹出窗口可以分为两种类型：模式弹出窗口和非模式弹出窗口。这两个概念来自开发人员术语。

当模态弹窗打开时，其所属页面的进程会被中断。用户必须等到模式弹出窗口被处理后才能返回到他们所在的页面。

例如，您正要删除一个重要文件，系统弹出弹窗询问您是否确认要删除？这时你必须给出明确的指示并选择删除或不删除，然后才能离开当前界面。我们可以简单地将模态弹窗理解为用户必须做出的选择。

我们来看看非模态弹出窗口。非模式弹出窗口允许用户在不中断当前页面的情况下处理其他任务。例如，在设计师最熟悉的PS中，可以同时调用多个弹出窗口。改变画面参数，因为艺术创作是一个多线的过程，艺术家可以改变他想到的任何参数。

模态和非模态只是一个比较笼统的概念，不同的规范对于类似类型的弹窗可能有完全不同或略有不同的名称。接下来我会参考-UI、-、和IOS规范。下面我们就拿出一些比较有代表性的弹窗类型来详细说一下。

2. 典型的弹出窗口

1）

类型：模态弹出窗口

参考规范：IOS

简介：一次显示两个或多个与当前上下文相关的操作，除非必要，否则不要显示太多操作选项，并避免在操作列表中使用滚动条。

要点：

2）

类型：模态弹出窗口

参考规格：- UI

简介：它也是一个模态弹窗，需要人们将注意力从当前页面短暂转移到弹窗上，需要用户交互。不同的是，它更适合长文本内容，例如隐私条款、知情同意书等，或者要求用户执行更改页面设置等更复杂的操作。

3）

类型：模态弹出窗口

参考规格：- UI

简介：它是一个模态弹窗，需要人们将注意力从当前页面短暂转移到弹窗上，并需要用户交互。基本上用在比较简单的场景，比如确认信息、删除文档、做出选择等。

分类：

使用场景：

要点：

4）

类型：模态弹出窗口

参考规格：

简介：它是一个容器，其性质很像生活中的抽屉，通常用来放置一些与特定窗口相关的信息或选项。默认情况下，它是隐藏的。它通常由按钮或菜单触发，并从父界面侧面滑出，因此不能独立于父界面而存在。

要点：避免使用它。现在流行的软件已经很少用了，不推荐使用。如果你想显示补充内容，不妨试试,,,。

5）

类型：模态、非模态

参考规范：IOS

摘要：当您点击某个区域时，该区域会短暂显示在其他内容之上。通常，一个区域包含一个指向它弹出位置的箭头。当您单击屏幕的其他区域或屏幕上的按钮时，无模式的将消失。模态模式只能通过单击它或其他按钮来取消。

它更适合大屏幕设备，可以容纳很多元素，包括导航栏、工具栏、选项卡栏、表格、图片、地图、传统视图等。可见时，无法与当前页面进行其他交互，直到消失。

要点：

6）&；

类型：非模态

参考规格：

简介：我在这里将“和”放在一起讨论，因为它们非常相似但又不同。

这是一种轻量级的反馈。它比酒吧提示更轻。它通常以小弹出框的形式出现。通常出现1~2秒后自动消失。但为了保持一致性，同一产品尽量使用相同的位置。与bar的不同之处在于，它经常用作系统提示消息，不包含操作按钮，可以出现在屏幕上的任何位置，并且仅在中可用。

该栏用于通知用户程序正在进行或即将进行的进程。也就是说，栏的内容必须与用户当前的操作相关，而弹出的内容与当前的操作无关。这只是一个系统提示，比如“您收到一条消息”之类的东西。

该栏还会短暂出现在屏幕底部，消失时不会中断用户体验，并且不需要任何用户操作。它继承了所有基本属性，但不同的是：

这里值得注意的一点是，在 中不再推荐使用 bar，而是更推荐使用 bar，但它仍然在 应用程序中广泛使用。

让我们把注意力集中在酒吧上。

使用场景：希望在显示信息的同时尽量减少干扰用户注意力。

要点：

7）

类型：非模态

参考规格：

简介：当通过鼠标悬停、焦点或触摸激活时，它会识别相应的元素，并在该元素附近显示简短的描述性副本，通常是对该元素功能的解释，在短暂的停顿一段时间后，它会自行消失。

要点：

8）

类型：非模态

参考规格：

简介：在不使用软件时提供有关该软件的简短、偶尔的信息。该信息可以是来自其他用户的通信消息或提供任务提醒的形式。

如何获得用户关注：

9) 酒吧

类型：非模态

参考规范：UI 8.65.1

简介：显示有关软件或文件的错误、警告和重要信息。例如，如果文档上传失败，就会出现错误栏。

要点：

10)&;

类型：非模态

参考规范：UI 8.65.1

简介：为了吸引用户的注意力并增加用户使用它们的机会，它们将在鼠标悬停或选择时显示。

要点：

04 弹窗的设计原则 1.什么时候使用弹窗

弹出窗口作为一种容器，在选择时常常会与抽屉、页面进行比较。那么当给定一份内容时，我们应该如何选择使用哪种类型的容器呢？

首先我们来明确一下这三个容器的定义。

接下来，当我们给出一个需求时，我们首先要对需求进行分析，从以下几个方面来判断：

1）信息承载能力

既然是容器，就必须有容量。这里用信息承载能力可能更合适。信息承载能力包括图片、视频、文本、表格等各种形式的信息，当信息量非常大、非常密集时，是非常烦人的。这时候自然不建议使用弹窗。一般来说，信息承载量的大小有这样的规律：页面>抽屉>弹出窗口。

然而，信息承载能力只是需要考虑的第一步。这是一个比较宏观的方面，并不是决定性的因素。

2）页面独立性

独立性可以理解为是否与上一页或当前页面密切相关。页面的独立性最高。当你不断地打开新页面时，你常常记不住上一页的内容。这是因为这些页面的内容相对独立，相关性不大。

而且从定义中我们不难看出，弹出窗口和抽屉的独立性较差。弹窗的前提是不离开当前页面的内容，甚至弹窗主体也不能覆盖当前页面的重要内容；抽屉是基于父页面建立的，它补充了父页面的内容。

大多数弹窗都与用户当前正在执行的操作内容相关。例如，在表单录入场景中，选择时间时会弹出时间弹窗，选择地址时会弹出地址簿弹窗。

抽屉式比较适合内容较深、逻辑严密、摘要简短，但又不必一直展示的内容，例如购物网站的目录导航、收藏夹等。

页面之间的逻辑性不强甚至不合逻辑，比如跳转到莫名其妙的广告页面。

3）页面切换成本

当用户因为某种业务需求，需要在页面A和B之间频繁切换时，此时我们就必须考虑切换成本。

抽屉设有固定位置触发按钮，当需要频繁操作时，用户可以快速找到并弹出抽屉，降低学习成本。

弹出窗口很快就返回页面。如果是非模态弹窗，可能会自行消失，点击遮罩区域或者点击关闭按钮即可消失。对于模态弹窗来说，只要用户进行了明确的操作后，弹窗就会消失，自然会回到当前页面。

页面切换成本最高。一般情况下，需要点击返回按钮才能返回上一页。此时页面加载需要一定的时间。用户需要快速识别一个全新的页面，需要一定的适应时间，因此页面切换成本最高。

2. 弹窗文案怎么写

1）用户体验规则

2) 标题

标题是用户首先注意到的。用户看一眼标题就能快速了解这个弹窗的作用，因此标题的重要性不言而喻。

3）内容

4）如何优化按钮文案

操作清晰且可预测。减少中性词的使用，避免用户停下来思考，让用户在看到文字的那一刻就能明白按下按钮会发生什么。

优先采用“动词+名词”的形式。如果不能这样表达，那就考虑“确认”、“取消”、“关闭”等中性词。