首页 » 博客 » HTML 电子邮件按钮终极指南(第 2 部分)

HTML 电子邮件按钮终极指南(第 2 部分)

本指南将探讨营销专家关于电子邮件按钮的最佳实践,并发现 Stripo 按钮实验的详细信息。然后,您将了解电子邮件设计优化技巧和吸引人的按钮示例,以赢得人们的青睐。在指南结束时,您将了解如何创建实用且有效的电子邮件按钮。

前一部分揭开了面纱,探讨了不同类型的电子邮件按钮、可访问性、移动优化以及测试的按钮颜色和文本——使该元素发挥作用的一切。 

今天,我将分享 Stripo 专家的建议,讨论最佳设计实践,并回顾鼓舞人心的电子邮件按钮示例。您将是第一批了解我们的团队如何通过微小的更改将按钮结果提高 47.62% 的人。让我们深入了解一下。

HTML 电子邮件按钮的最佳实践

有效的 HTML 按钮是持续A/B 测试 whatsapp 号码数据 和改进的结果。Stripo 的电子邮件营销团队已完成多项测试,以确定哪些按钮效果最好以及原因。让我们来看看结果。

选择适当的措辞和文本长度

电子邮件按钮最多包含 3 个单词(包括动作动词)时,效果最佳。在某些电子邮件客户端或设备中,较长的文本可能会跨行,从而使按钮失去视觉效果。

动作驱动且精确的 HTML 按钮从横 到来引发了博彩业的重大革 幅或标题中脱颖而出。此外,考虑到读者可能阅读的文本量,较长的按钮文本可能会让人感到不知所措。 

Stripo 的实验

我们的营销团队测试了各种按钮文本并找到了表现最佳的文本,这是一个我们将要讨论的实验:

Stripo 团队将教育材料部分的措辞从“立即尝试”更改为“阅读更多”后,按钮结果增加了 47.62%。

这一微小调整改善了背景并让接收 巴西商业名录 者了解对他们的期望——这些因素共同改善了结果并证明了词汇选择的重要性。

按电子邮件按钮角色划分

当电子邮件包含多个按钮时,区分主要按钮和次要按钮至关重要。如何区分?确保主要按钮通过颜色、大小或更吸引人的设计在视觉上脱颖而出。次要按钮可以通过带有箭头的超链接文本添加。

Stripo 的电子邮件营销专家。

按钮角色之间没有适当的划分会浪费营销努力,并消除优先操作和次要操作之间的区别。这种方法最好的地方在于它的简单性,这一点在下面的例子中可以很好地体现出来。

(来源:Substack 电子邮件)

Substack 使用相同的字体和按钮大小,甚至将主要和次要按钮放在一起。不过,“获取应用”会立即吸引注意力,而“开始写作”则会在稍后引起注意。

注意电子邮件按钮周围环境

多色背景有一个明显的缺点:它们通常会分散人们对电子邮件按钮的注意力,并使视觉效果变得压倒一切。尝试使用对比鲜明的背景图像或坚持使用一种色调,这样按钮就不会混杂在一起。

除了周围环境之外,不建议在横幅上添加基于图像的按钮。为什么?如果消息加载不畅,按钮将消失,收件人将无事可做。

考虑电子邮件按钮的加载时间

按钮虽小,但作用却很大。然而,图片按钮会减慢加载速度,降低电子邮件的有效性。由于平均屏幕注意力持续时间只有47秒,所以几分钟的空白电子邮件可能会让发件人失去客户。

除了基于图像的按钮之外,按钮的交互性也会影响加载时间和可访问性。激进而华丽的动画可能会引发光敏性癫痫患者的癫痫发作。

你可能还会喜欢

针对暗黑模式进行优化

不考虑电子邮件按钮在暗色模式下的视觉效果可能会严重影响阅读体验。除了背景颜色变化外,按钮还可能失去对比度并成为可访问性问题。让我们测试一下我收到的几个电子邮件按钮。

第一点是按钮在灯光模式下的视觉效果。根据Accessible Colors,对比度为13.59,绰绰有余。按钮明亮且易读,所以不会出错,对吧?

可惜的是,暗色模式下的对比度约为1.48(满分 4.5)。此外,在小屏幕上打开时,文本可能会与按钮背景颜色混合在一起。

有时,按钮会与它所在的背景融为一体。按钮所在的背景图像与按钮颜色之间的对比度仅为1.45。图像周围的绿色边框使按钮融入背景,降低了其可见度

灯光模式快速修复了该问题并恢复了按钮对比度,现在为 11.36

(来源:Brevo 的电子邮件)

调整前景

最近的 Litmus 报告显示,13 亿封电子邮件中,几乎8%是在 Outlook 中打开的。这可能不是领先的电子邮件客户端,但它仍然占据了市场份额的很大一部分,而且视觉变化非常显著。让我们测试一个按钮,看看它会变成什么样子:

  • 第一种变体:这是电子邮件应该看起来的样子:按钮是圆形的,易于点击;
  • 第二种情况:右侧的选项是按钮在 Outlook 中的呈现方式:没有圆角、尺寸减小、字体难以阅读。

如果您使用 Stripo 创建电子邮件模板,则只需在按钮部分打开切换按钮即可确保设计在 Outlook 中的安全。  

滚动至顶部