设计引人注目的弹出窗口的 5 个易于实施的技巧（附 24 个示例）

弹出窗口和其他现场消息通常出现在您必须与客户交流的最优质的“零售空间”上：您的网站。 它们出现在对您的产品最感兴趣的人面前——这就是他们点击的原因，对吧？ 这意味着他们最愿意接受您提供的任何优惠。

尽管如此，许多营销人员展示的弹出窗口非常基本、缺乏想象力，甚至非常丑陋。

为什么？

因为弹出窗口很强大，而且它们会产生结果……即使你没有花很多精力来设计它们。 习惯于点击率低于 1% 的营销人员通常对弹出式窗口 3-5% 的转化率感到满意。 看起来“足够好”。

实际上，这些营销人员正坐在金矿上——他们只是还没有意识到这一点。 通过一些简单的调整，他们可以将弹出窗口的转化率提高一倍或三倍。 通过更多的工作（比如个性化关键部分的消息），他们可以创建具有30-50% 转换率的弹出窗口。

这会对他们的业务产生多大影响？

弹出窗口的设计非常强大，将精心设计的漂亮弹出窗口组合在一起可能是您作为营销人员的最高投资回报率活动。 现在只需投入几分钟的时间，您就可以拥有一项资产，可以在未来数月或数年内为您带来收益！

与其花费数小时对 Facebook 广告进行微优化以提高 5% 的点击率，我建议您将其中的一小部分时间花在优化您的现场消息上。

让我们看看如何充分利用弹出窗口的设计！

首先：为什么弹出窗口的设计很重要？ 这不只是一个简单的信息，内容胜过设计吗？

虽然弹出窗口的信息和价值主张非常重要，但出色的设计确实可以提高任何信息的有效性。 弹出窗口通常会突然出现，它们只有几秒钟的时间来给访问者留下深刻印象。 在我们这个需要关注的世界中，给网站访问者留下深刻印象并非易事。

拥有像下面这样一个漂亮、独特的弹出窗口可以获得高达 50% 的转化率！ 同时，以无聊的纯文本方式提供相同的优惠（常规的 10% 折扣）将很幸运能够实现 10% 的转化率。 那是400％的差异！

即使是大品牌有时也会出错。

看看 Mailchimp 的这个弹出窗口。 它的转化率很可能低于 2%——这意味着 98% 的访问者受到了不必要的干扰（因此感到恼火）。

既然我们知道了弹出式设计的重要性，并且我们已经看到了一个您不想复制的糟糕弹出式设计的示例，那么让我们继续讨论好东西：如何设计引人注目的弹出式和一些出色的灵感示例。

与一些在线营销神话相反，没有一种单一的颜色组合优于所有其他颜色组合。

然而，在选择颜色时有两个重要因素：

• 您应该能够在最重要的元素上创建对比（并因此专注）
• 您的颜色选择应与您的品牌相匹配，并创造一致、流畅的体验。

我们将在接下来的部分中更详细地讨论这两个技巧。

但作为基本规则，您可以选择白色背景并使用您品牌的主色作为标题和 CTA 按钮颜色。 这是一个非常经典的、低风险的解决方案。

看看 Enro 的这个例子：

如果您更喜欢使用您的品牌颜色作为背景， Mented Cosmetics提供了一个很好的示例。 它不仅与他们的品牌颜色相匹配，还进一步强调了他们的公司价值观：

您还可以使用深色背景的倒置调色板。 在这些情况下，字体应该主要是白色或浅灰色。 使用更饱和的颜色会降低消息的可读性。

“少即是多”——这句话对于弹出窗口来说太正确了。

由于您吸引注意力和引起兴趣的时间非常有限，因此您的信息和设计需要超级简单。

尝试对弹出窗口中的每个单词和元素保持无情，并确保每个单词和元素都是绝对必要的。

当您认为它足够简单时，请尝试更简单，直到只剩下一个主要价值主张和 CTA 为止。

您可能想知道：这是否意味着我们应该将自己限制为像下面这样的黑白文本弹出窗口？

答案是响亮的NO！

大多数人在决定是继续阅读还是简单地关闭弹出窗口之前，只会阅读您弹出内容中的几句话。 这意味着您的信息设计（颜色、图像、美学等）将至少对您的信息有效性产生与您的标题相同的影响。

当然，如果您的信息的本质集中在特定产品上，那么（例如在类别登录页面上）您需要使信息的其余部分尽可能简单，以便将重点放在产品上。

看看下面 Burberry 是如何做到的：他们使用简单、超级简单的信息和完美的对比，并专注于三个最近浏览的产品。

您的现场消息不会出现在真空中，而是作为您网站的一部分，即使它们出现在叠加层中。 因此，您的弹出窗口与您的品牌主题无缝融合非常重要。

这意味着您应该选择与您网站上使用的元素相似的元素（字体、图像等）。

ClickUp 是一个很好的例子，展示了如何创建简单而有效的弹出窗口，它与品牌风格指南完美匹配：

您可以像 Ramp 一样使用品牌字体和徽标轻松地保持您的弹出窗口在品牌上：

即使你在推广其他品牌的 B2C 世界，你也可以从两个品牌中提取元素，就像丝芙兰在这个与 Gucci 相关的弹出窗口中所做的那样：

是的，您的弹出窗口必须与您的品牌主题相融合，这一点很重要。 但是，它们脱颖而出并吸引观众的眼球也很重要。

如果您有很多内容（例如，您的报价中包含的项目符号列表），请确保您的价值主张在标题副本中清晰。

此外，请确保 CTA 颜色从弹出窗口的其余部分中脱颖而出，并且按钮大且清晰。 标题和 CTA 通常是弹出窗口中最重要的两个元素，因此请确保它们具有足够的对比度。

例如，您可以为 CTA 按钮选择明亮的对比色。 这将使它更加引人注目，您的访问者将更有可能点击它。

如果您的弹出窗口大部分是黑色的，您可以考虑使用橙色或亮粉色作为号召性用语按钮。

使用不同的字体大小是将观众的注意力集中在弹出窗口的本质上的最简单方法。 即使您在同一个弹出窗口中有多种类型的文本，您也可以使用字体大小、颜色和其他增强对比度的技术来强调您的消息的主要价值，就像 Komily 所做的那样：

如果您有一个黑暗的网站，您通常需要通过调整灯箱颜色来引入一些对比（您知道，弹出窗口周围的灰色、半透明区域）。

例如，如果您的弹出窗口颜色较深，您可以在显示时使用较浅的叠加层。

或者您可以使用全屏版本的弹出窗口，覆盖 100% 的屏幕——这样可以确保您的弹出窗口可见，如下例所示：

如果您有多个按钮，您可以使用不同的按钮颜色来强调主 CTA，以微妙的方式向用户指示哪个选项更适合他们：

另一种策略涉及插入视觉元素，如指向行动号召按钮的箭头。 您可以使用明亮的手绘定向对象来指出您的号召性用语，如下面的弹出窗口所示：

通过弹出式设计强调您的报价的另一种方法是使用不寻常的模板形状。 这些打破了人们在网络上看到的通用矩形弹出窗口的模式，它之所以引起人们的兴趣仅仅是因为它们是独一无二的。

注意不要把重点放在太多的元素上。 如果您有如下所示的调查弹出窗口，请确保您的按钮使用次要的、不那么激进的按钮样式：

正如谚语所说，“一张照片胜过千言万语”。 这对于弹出窗口来说当然是正确的！

事实上，人脑处理图像的速度比文本快 60,000 倍，并且 90% 的信息传输到大脑是视觉的。

这就是为什么一些出色的视觉效果可以极大地提高您的现场消息传递的有效性。 目标是选择正确的视觉效果来放大书面信息，就像这个弹出窗口一样：

您需要为弹出窗口找到高质量的图像。 最好使用产品的真实照片，而不是像 BlendJet 那样的库存图片：

最好的方法是浏览您的产品/品牌图片并选择与您的信息一致的相关图片，例如 The Oodie 弹出窗口：

如果您正在进行季节性销售，最好根据季节更新您的消息。 具有相关性和及时性会让人感觉这些优惠是有时间限制的，从而增加了对错过的恐惧（因此，转换）：

即使您没有提供任何具体内容，仅更新您的消息以匹配当前季节仍然可以显着提高转化率，就像这条消息一样：

如果您的产品在照片中看起来有趣或有用，人们将更有可能购买它们并注册您的电子邮件或短信列表以换取折扣。

如果您想鼓励访客索取免费赠品，您可以使用文字和图片将您的信息与观众的心联系起来，就像 Castlery 所做的那样：

我希望您发现我的弹出式设计最佳实践和示例列表很有用！

出色的弹出式设计的重要性经常被忽视。 但是希望，既然您已经看到了智能设计可以产生的影响，那么您将永远不会再回到无聊、嗡嗡声的弹出窗口了！ 花一些时间来设计令人惊叹的品牌弹出窗口将对转化率产生巨大影响，并使您的投资回报率飙升。

弹窗新手？ 在这里开始使用我们的即用型模板之一！