即使是最好、最有创意、最有趣、最昂贵的广告也不过是中断而已。观众没有要求他们，往往不想看到他们。但弹出式广告——顾名思义——以特别具有侵入性而闻名。就像恐怖片里的跳跃恐慌一样， 它们是一个面对面的惊喜。这就是为什么特殊的弹出式设计很重要：它可以使弹出窗口不仅可以容忍，而且有说服力。

尽管弹出窗口可能会加重网站访问者，但它们一直存在，这是有充分理由的：根据相扑的研究，他们的对话率平均为9%。这使得设计良好的弹出窗口不仅对于减轻用户的挫折感至关重要，而且对于业务成功也至关重要。考虑到这一点，让我们通过一些关于如何创建转换的弹出式设计的最佳实践。

权衡弹出式设计样式的选项

最基本和常见的弹出窗口是出现在屏幕中心的方形窗口。这里的优点是，这是不可能错过的。当然，这只是因为它直接跨越了用户的视野。虽然传统弹出窗口没有什么特别的问题，但当有许多其他（可能更有效）选项需要考虑时，它通常被用作默认选项。

弹出窗口可以出现在屏幕上的任意位置，每个位置都会对信息的性质产生影响。标准的前中心方法往往表示一些足够重要的事情，你愿意中断用户的浏览。它通常用于即时购买或支付内容墙（如在线新闻）。

相反，弹出窗口可以从屏幕顶部或底部滑入，允许用户在弹出窗口存在时继续与网站交互。使用这种方法，访问者可以选择何时要与弹出窗口进行交用，如果弹出窗口覆盖足够的页面以分散注意力，则鼓励他们尽早进行。此方法通常用于不太紧迫的操作，例如让访问者输入其电子邮件地址。

最后，弹出窗口也可以显示在页面的侧面或角落。鉴于此方法是多么不显眼，它通常用于可选内容，如教学技巧。

另一个有时被忽视的设计考虑是动画——弹出窗口如何到达屏幕上，可以对它的接收方式产生巨大的影响。例如，褪色比突然叠加软得多，不和谐。同时，一个字面上的流行和反弹动画，感觉有趣和友好。更高的努力方法——比如让弹出窗口的不同元素通过独立、独特的动画出现——让弹出窗口感觉不像广告，而更像是网站值得创意的功能。

 

保持弹出窗口与品牌保持一致

仿佛作为一个弹出窗口不够吸引注意力，弹出窗口（和立即转换的欲望）往往创造尽可能多的钟声和口哨的诱惑。这可能导致设计过度突出呼叫到行动 （CTA），有时与字面箭头，或大胆的几行副本或过度使用红色，所有以确保用户不会错过销售宣传。

像这样的策略往往让人想起90年代的互联网，当时早期的弹出式广告大声喧哗，以冲突的颜色和闪烁的文字为荣。事实上，他们太差了，以至于弹出窗口的原始创造者已经向全世界道歉了。此外，品牌并不孤单，使用弹出窗口-骗子经常使用无处不在的弹出窗口与危言耸听，吸引注意力的设计，以欺骗用户下载恶意软件。

出于这些原因，设计师应该随时让弹出窗口符合网站品牌的其余部分，即使这导致一个更柔和的风格。使用视觉层次结构来优先处理信息和引人注目的图像，以吸引观众的注意。这不仅会导致一个更清洁的设计，它将建立弹出窗口的信誉，使之被视为一个机会，而不是一个把戏。总之，那些觉得自己需要使用花招、品牌外技术来吸引注意力的设计表明，他们对弹出式产品的价值缺乏信心。

匹配品牌使弹出窗口感觉不像中断，更像是网站的一部分。

尽管它大部分是灰色的，但这个弹出式广告通过匹配产品品牌来呈现一个干净、复杂的构图。

有效使用颜色和形状语言

弹出窗口的广告副本（只要它写得很好）应该做说服用户执行操作的工作。但文字并不是弹出窗口必须传达的唯一工具：视觉设计元素（如颜色和形状）可以在情感层面上接触到观众。

如果你想减少弹出窗口可能诱发的刺激，像蓝色或绿色或某种形式的柔和平静的颜色可以做到这一点。同时，纯白色可以引起干净整洁的感觉，尤其是当元素之间结合足够的空间时。在形状方面，弹出窗口（就像任何计算机窗口一样）默认是矩形或正方形的。将此形状更改为更圆润的形状，使设计看起来平易近人和友好，因为缺乏锐利的边缘。

圆形传达友好和平易近人。

绿色和黄色等柔和的颜色会产生镇静效果。

无论你决定选择什么形状或颜色，重要的是要知道，无论你是否打算，你的选择都在与观众交谈。

保持弹出窗口的内容清晰

由于弹出窗口本质上是中断的，用户通常下意识的反应是立即关闭它们。在最理想的情况下，很难说服访问者单击 CTA，但弹出窗口的时间特别小，无法完成他们的目标。这导致弹出式设计风格，基本上是极简主义的——清晰而明确。您希望用户执行的操作的价值应该一目了然。

在基本结构方面，建议弹出窗口包含以下内容：

• 宣布弹出窗口的要约或主题的标题
• 支持副本扩展报价的价值
• 引人注目的图像
• CTA
• 关闭按钮

在现实中，一些弹出窗口可能需要包含更多内容（例如电子邮件的输入字段），许多弹出窗口选择较少（例如丢弃支持副本或图像）。归根结底，这取决于您正在尝试完成的任务，以及您的网站访问者愿意留下来审理您的案例的可能性。请跳到#7了解有关测试的提示，以便更好地了解您的观众。

不要忽视关闭按钮

弹出式广告是为了转换（或以某种方式有用），而不是被关闭。当然，关闭能力对于弹出式设计至关重要。这是一个良好的用户体验问题，以确保用户能够执行他们需要执行的操作，即使它们是您不一定希望他们执行的操作。

在设计方面，右上角的简单 X 通常就足够了。即使这不是最原始的设计选择，它也是用户最自然的地方。许多设计师把紧闭按钮变灰了，这可能是一个有用的策略——退出的能力不应该被隐藏起来，但它也不必是弹出窗口中最突出的东西。

或者，关闭按钮有时以传统的矩形按钮形状与 CTA 一起呈现。这样做不可避免地会减损 CTA，并强调一个选择。同时，如果您更改关闭按钮上的文本以明确用户不仅退出弹出窗口，而且遗漏了某些内容（"我不想节省 15%"），则这可能是一个很好的方法。有时，这是放在CTA下面的较小类型。

归根结底，如果用户想要退出弹出窗口，设计应该允许他们这样做，因为任何对弹出窗口的额外挫折感都会转化为对品牌的挫折感。换句话说，如果你要输掉这场战斗，就要通过良好的用户体验来赢得战争。

 

为移动版本单独设计

创建弹出窗口的移动版本涉及的不仅仅是缩小设计。移动体验与桌面体验大不相同。

首先，除了较小的尺寸外，您还应考虑纵横比：手机处于纵向，而台式机处于景观中。这意味着设计（尤其是副本）必须在更高、更窄的窗口中读好。此外，访客将在很大程度上默认为使用一只手和一个拇指。这意味着窗体字段（在桌面弹出窗口中应该足够有限）对于用户来说将更加繁琐。此外，显示更接近屏幕底部的弹出窗口将更容易触手可及。

然而，移动设计并不完全与限制有关：移动网站也比桌面提供更多的输入形式，例如在不同压力下轻扫、捏捏和点击——弹出式设计可以使用它进行更意想不到的互动。

移动弹出窗口可以利用独特的交互（如轻扫）。

移动弹出窗口通常放置在屏幕底部。

所有这一切都是说，即使你已经有一个桌面版本的弹出窗口设计，你必须致力于一个单独的移动版本。如今，许多设计师在数字设计中采用移动第一的方法（其中移动版本是在大屏幕尺寸之前创建的），您没有理由不能以同样的方式处理弹出式设计。这样做可以让你开始简单，并添加细节，随着屏幕尺寸的增加（而不是西西腓任务，简化设计的详细版本）。

7.根据测试
调整弹出式设计-

虽然（像所有设计一样）有艺术参与弹出式设计，它最终归结为性能。你永远不会知道你的设计是好的，如果它的工作原理：也就是说，它正在转换客户。成功弹出窗口的平均转化率约为3%。

这就是为什么弹出式设计过程中最重要的部分是测试和分析。一旦您根据目标评估了设计绩效（为此，您可以使用过去的转换以及前面提到的平均转换率），您必须根据您的发现调整设计。一个特别流行的方法是A/B测试，其中你把两个不同版本的设计在两个不同的用户段前面，看看哪个效果更好。您可以使用 A/B 测试来更改设计的特定元素，以发现哪个配方可能导致更高的转换。

底线是，无论你的弹出窗口看起来多么伟大，或者它理论设计得多么好——重要的是你的访客的想法。

最后

弹出窗口本质上不是用户要处理的滋扰。与数字界面的许多其他元素一样，正是设计决定了体验是痛苦还是快乐。这都是一个视角问题：弹出式设计可以用广告打断观众，也可以提醒他们注意机会。

作者：Jamahl Johnson