电子邮件设计技巧和需要注意的常见错误

已发表: 2019-08-14

众所周知,人们倾向于首先关注视觉元素,这往往使他们更喜欢形式而不是内容。 电子邮件营销也不例外。 电子邮件的结构、插图、文本格式、调色板和移动优化通常决定用户是否会阅读完您的电子邮件并完成所需的操作。

电子邮件设计不仅会影响读者的看法,还会影响发件人的声誉。 邮箱提供商经常将布局和设计错误的电子邮件标记为垃圾邮件,这就是您应该关心电子邮件模板设计的一个很好的理由。

在本文中,我们将为您提供一些有关如何使您的电子邮件具有视觉吸引力和整体效果的电子邮件设计技巧。 我们还将讨论最常见的设计错误,并展示来自不同品牌的精心设计的电子邮件示例。

内容
  1. 电子邮件模板设计技巧
  2. 响应式电子邮件设计技巧
  3. 关于如何在电子邮件模板设计中使用文本的提示
  4. 在电子邮件模板设计中使用颜色的提示
  5. 电子邮件标题设计技巧
  6. 电子邮件页脚设计技巧
  7. 关于如何在电子邮件设计中使用图像的提示
  8. CTA 设计技巧
  9. 电子邮件设计技巧清单

电子邮件模板设计技巧

模板是每封电子邮件的基础。 它定义了您未来电子邮件的布局和视觉外观,影响您的营销活动的整体结果。

在您的电子邮件模板设计中,您应该遵循用于公司网站、社交媒体和其他平台的相同视觉指南。 让我们来看看一些常见的电子邮件设计错误和电子邮件设计技巧,您在创建模板时最好考虑一下。

要避免的错误

1. 不要太频繁地更改电子邮件模板设计。 如果用户每次都收到不同的电子邮件,他们将更难记住和认出您。

2. 不要用图片代替文字,因为

  • 图像可能无法显示;
  • 每次要更改文本时,您都必须手动更改模板;
  • 如果需要,任何放置在图像上的促销代码将无法复制和粘贴;
  • 邮箱提供商可能会将仅包含图像的电子邮件标记为垃圾邮件。

3.如果过于大胆和明亮,请不要使用公司颜色作为电子邮件的主要颜色。

4.不要使用明亮或复杂的背景作为文本。

5. 如果您有这样的机会,请不要犹豫,依靠专业电子邮件设计师的帮助。 设计不当的电子邮件可能会破坏公司的声誉,或者只是被邮箱提供商标记为垃圾邮件。 同时,专业设计师将能够创建持久的电子邮件模板设计,让您的订阅者保持兴趣和参与度。

要遵循的最佳实践

1. 始终根据公司的视觉指南设计电子邮件模板。 对您的数字外观采取整体方法将提高品牌知名度并提高客户忠诚度。

2. 如果您决定进行 A/B 测试,请测试单独的元素而不是整个电子邮件。 通过这种方式,您将确定哪些细节或多或少有效,您的公司风格是否能被观众识别。

3. 为不同类型的电子邮件创建单独的模板,并以类似的企业风格设计它们。 这将帮助您的订阅者不仅将您的电子邮件与任何其他品牌的电子邮件区分开来,还可以根据类型将它们区分开来。

4. 将最重要的信息和 CTA 放在第一个滚动条上,并确保整个电子邮件看起来平衡。 如果您的标题和描述设计得井井有条,号召性用语按钮引人注目,图像质量高,那么收件人将在整封电子邮件中顺利引导至号召性用语。

5. 尝试将您的电子邮件设置为 600 像素宽,以便它们可以在任何电子邮件客户端中正确显示。

6. 替代文本块和图像。 这不仅对可读性很重要,而且对提高电子邮件的可传递性也很重要,特别是如果您不久前开始发送电子邮件。 一般情况下,我们建议您遵循 80:20 或 60:40 的文本图像比例。

7. 请记住,对于明亮的背景,最好使用对比鲜明的暗淡占位符。

8. 除非您可以依靠设计师的帮助,否则您可以使用拖放电子邮件编辑器自行设计电子邮件模板。

现在让我们看一些演示这些最佳实践的示例。

我们从 Behance 中获取了前两个示例。 这两个模板,一个用于欢迎电子邮件,另一个用于每周“新灵感”电子邮件,遵循相似的设计原则,但看起来有点不同。 欢迎邮件有一个大而清晰的标题、高质量的图片、破碎的网格布局和易于阅读的字体。 文本和图像块交替出现,这使电子邮件更易于阅读。

email template design
Behance 欢迎电子邮件模板设计

至于每周电子邮件,它总体上更短,更强调图像,在最顶部有一个大胆的 CTA 按钮。

weekly email template design
来自 Behance 的每周电子邮件

这是 Downshiftology 的另一个优秀电子邮件模板示例。 该公司可以吹嘘用结构良好的网格发送简约的电子邮件。 它们通常以标题和介绍开头,然后是一些高质量的食物照片和食谱的超链接。 合理的对齐方式和浅色使电子邮件易于浏览和阅读。

email template design
Downshiftology 精心设计的电子邮件

响应式电子邮件设计技巧

在考虑电子邮件的布局和模板时,请始终记住它们在不同设备(包括移动设备)上的外观。 以下是响应式电子邮件设计要避免的一些错误和要遵循的提示。

要避免的错误

1. 避免同时使用多个超链接,因为这可能会导致它们变得混乱。 收件人可能会意外点击与他们想要点击的链接太近的错误链接。

2. 不要让你的 CTA 按钮太小。 放大以单击按钮会使收件人非常沮丧。

3. 不要在电子邮件正文中使用小于 14 像素的字体,在电子邮件标题中使用小于 20 像素的字体,因为这会使您的电子邮件在小屏幕上难以阅读。

要遵循的最佳实践

1. 遵守响应邮件的规则。 例如,如果您的电子邮件模板由几列组成,并且您希望它们适应移动屏幕,请插入一个特殊代码并在表格中构建您的电子邮件。

2. 如果您不想弄乱代码,请使用 SendPulse 中现成的自适应电子邮件模板或在我们的拖放构建器中创建您自己的模板。 它们已经针对桌面和移动设备进行了调整; 此外,您始终可以预览两台设备的电子邮件模板。

看看优衣库的以下电子邮件,它在桌面和移动设备上都有很好的展示。 以下是桌面用户看到的内容:

responsive email template
优衣库电子邮件的桌面版本

其移动版的布局略有不同:

responsive email design
优衣库电子邮件的移动版本

关于如何在电子邮件模板设计中使用文本的提示

如果看起来没有吸引力或难以阅读,即使是最吸引人的副本也不会引起注意。 相比之下,用户几乎不会忽视具有整洁布局、短段落、醒目的标题和最重要信息的适当突出显示的电子邮件。

要避免的错误

1. 不要在一封电子邮件中混用太多字体、样式、颜色和字体大小,因为它们会使邮件看起来很草率。

2. 避免使用太小或太淡的字体——在这两种情况下,您的电子邮件可能会变得难以阅读。

3. 不要创建没有段落、标题和突出显示的关键点的基于文本的电子邮件。 即使您的文本实际上很有趣,它也很可能会让您的读者感到厌烦。

要遵循的最佳实践

1. 为标题和正文选择一种或两种主要字体,而不是更多。

2. 使用大多数电子邮件客户端(如 Gmail、Yahoo、Outlook 等)都能正确呈现的基本字体。 如果某项服务无法识别您的字体,它会将其替换为其他一些字体,这可能会严重影响整个电子邮件模板设计。 最安全的字体被认为是 Arial、Lucida Grande、Tahoma、Trebuchet、Verdana、Georgia、Palatino、Times New Roman、Courier New、Courier 和 Impact。

3. 随意在横幅和图像上使用您自己的公司字体。 但是,请确保横幅上的字体和电子邮件中的字体搭配得很好。

4. 使用标题和短段落将您的文本分成几个部分。 结构良好的文本总是更容易阅读。

5. 使您的字体不小于 14px。

一个好的文本布局的例子是来自 DesignLab 的一封电子邮件。 它有一个粗体居中的标题,由三个短段落组成,后面是突出的 CTA,以橙色突出显示。

email template design example
来自 DesignLab 的电子邮件

在电子邮件模板设计中使用颜色的提示

颜色是一种强大的工具,可以营造电子邮件的氛围并增强您的信息。 但是,选择错误的颜色可能会使您的电子邮件变得乏味、分散注意力或混乱。

要避免的错误

1. 不要用一堆颜色淹没你的读者。 过多的红色、黄色作为文本的背景,或者相互不匹配的颜色组合可能会破坏您试图给人的印象,因为它们很可能会分散用户对主要思想的注意力。

2. 避免过多的渐变。 如果使用不专业,它们会使您的电子邮件看起来马虎或降低文本的可见性。

要遵循的最佳实践

1. 仅使用大胆和明亮的颜色来强调单独的元素或单词,同时为您的背景选择更平静的颜色。

2. 在选择颜色主题时考虑观众的喜好。 例如,Kissmetrics 报告称,男性更喜欢对比色,而女性则选择柔和的调色板。 要了解您的用户最喜欢哪种颜色,请进行 A/B 测试并尝试一次更改单个或几个元素的颜色以准确测量结果。

3. 使用诸如 Adob​​e Color 之类的工具来选择在视觉上看起来平衡的完美调色板。

例如,百安居使用他们的企业橙色作为荧光笔,并为其余元素坚持更中性的色调。

color in email template design
百安居电子邮件中颜色的使用

电子邮件标题设计技巧

标题是放置在电子邮件最顶部的第一个块。 它通常包含徽标、网站部分的链接、联系方式和其他一般信息。 电子邮件标题以及发件人姓名可帮助用户识别发件人。

要避免的错误

1.不要试图在标题中放入太多信息。 是的,例如,您可以提供指向您网站的链接,但如果您还将社交媒体链接、详细联系信息和其他块放在标题中,后者会变得太大并且很可能会造成混淆。

2. 不要在标题和电子邮件的其他任何地方使用劣质图片,因为这会给人留下业余设计的印象。

要遵循的最佳实践

1.强调标题的主要信息,让其他元素小一点或不那么亮。

2. 在假期、销售季节和其他特殊活动中使用特殊主题标题来设置心情。 您还可以为不同类型的电子邮件(例如摘要或交易电子邮件)更改标题。

看看来自 TheRealReal 的电子邮件中的简约标题:

email header design
来自 TheRealReal 的电子邮件标题

电子邮件页脚设计技巧

电子邮件的最后一个但并非最不重要的块是它的页脚。 它通常包含电子邮件签名、取消订阅链接、公司联系方式和社交媒体链接。 尽管这个块似乎是最容易设计的,但公司仍然经常犯一些错误。

要避免的错误

1. 不要用太多的一般信息淹没你的页脚,这样它就不会看起来凌乱和混乱。

2. 永远不要隐藏退订链接,让它太小或几乎不可见。 如果用户发现很难退订,他们很可能会点击“垃圾邮件”,这对您的发件人声誉来说总是个坏消息。

要遵循的最佳实践

1. 只包含那些对用户真正重要的页脚链接; 尝试将相似的内容块分组以提高可读性。

2. 对你的观众诚实,让你的退订链接清晰可见。

3. 在您的页脚添加一个创造性的电子邮件签名,以友好的注释完成您的电子邮件,让收件人期待下次收到您的来信。

您可能会在下面看到来自 LinkedIn 的电子邮件的页脚,它完全遵循了上述提示。 它包含电子邮件签名、清晰的退订按钮和公司的联系方式,但没有提供任何不必要的信息。

email footer design
来自 LinkedIn 的电子邮件的页脚

关于如何在电子邮件设计中使用图像的提示

视觉效果在电子邮件设计中发挥着重要作用:明智地选择图像可以让您的订阅者立刻站稳脚跟,并确保他们与电子邮件的互动直到结束。

要避免的错误

1. 不要创建只包含图片的电子邮件,因为 43% 的用户在他们的电子邮件客户端中关闭了图片; 但是,请注意,即使图像不可见,您的电子邮件内容也应保持清晰。

2. 不要让图片比推荐的大。 例如,如果建议您使用 300px 宽的图片,则不要使用 1200px 宽的图片。

要遵循的最佳实践

1. 在将图像添加到您的电子邮件之前对其进行优化。 带有大量图片的电子邮件将需要更长的时间来加载,尤其是在手机上。 最有可能的是,用户不会等待图像加载,而会简单地关闭电子邮件。 要优化图片,请使用 Squoosh 或 TinyPNG 等工具。

2. 为您的图片添加替代文字,以便用户了解图片的全部内容,以防它们无法自动加载。

3. 将您的图标放大 2 倍,以便在配备 Retina 屏幕的 iPhone 和 Macbook 设备上看起来更美观。 例如,如果您需要使用 70×20 图标,请将 140×40 版本上传到服务器,然后使用以下属性调整电子邮件中图标的大小: width="70"

笔记! 使用此方法时,您只更改图像的大小,而不更改其重量。 这就是为什么您应该首先优化图像,然后将它们上传到服务器。

4. 使图像可点击。 如果您查看电子邮件的点击地图,您会经常看到人们点击图片。 利用这一优势引导人们访问您的网站或社交媒体。

5. 使用自己拍摄或在图片库网站上找到的高质量图片。

继续看示例,您可能会看到 TheSill 记得添加替代文本,以阐明图像上描绘的花朵类型。

images in email design
来自 TheSill 的电子邮件中的替换文字

与此同时,《纽约时报》杂志使用高质量的图片和独特的插图来照亮他们充满文字的电子邮件。

images in email template design
《纽约时报》杂志电子邮件中的图片

CTA 设计技巧

电子邮件中的号召性用语是一个链接或按钮,用于从用户那里获得某种响应——注册、购买或与经理联系。 明确的号召性用语及其正确的位置将帮助您提高点击率,而 CTA 中的错误会使您的订阅者执行所需操作的能力复杂化,从而使您的电子邮件变得毫无用处。

要避免的错误

1. 不要在电子邮件末尾甚至在第一个滚动条后面隐藏一个号召性用语按钮。

2. 不要让用户猜测他们需要做什么——而是给他们一个明确的电话。

3. 如果您使用超链接而不是 CTA 按钮,请不要隐藏它们。 他们不应该迷失在电子邮件的其他元素中。 它们也不应该太小或不饱和。

要遵循的最佳实践

1. 将主要 CTA 放在第一个滚动条上。 如果您的电子邮件很长,您可以在整个电子邮件中重复 CTA 几次。

2. 确保您的主题行和您的 CTA 致力于同一主题。

3. 使您的 CTA 按钮明亮可见。 它应该与电子邮件的背景、文本和其他元素形成对比。

例如,在他们的一封电子邮件中,LinkedIn 不仅重复了两次他们的 CTA,而且还使其大胆和对比。

email cta design
LinkedIn 电子邮件中的号召性用语

在 Neil Patel 的另一个示例中,您可能会看到电子邮件的主题行与 CTA 文本相关:

email cta example
来自 Neil Patel 的电子邮件,其中包含相关主题行和 CTA

电子邮件设计技巧清单

为了帮助您在发送前轻松检查电子邮件,我们收集了您应该记住的所有准则,并按类别对它们进行了分组。

email design tips checklist

我们相信,掌握了所有这些技巧,您将能够构建响应式且设计良好的电子邮件,而没有 SendPulse。 该服务还将帮助您对电子邮件的不同元素进行 A/B 测试,并为您的营销活动选择最佳选项。