主题行——如何进行电子邮件设计

很大一部分消费者（ 99% ）每天都会查看他们的电子邮件。 包括千禧一代在内的一些人口统计数据更喜欢来自公司的电子邮件通信，而不是其他形式的通信，例如电话或短信。 全球有超过 50 亿个活跃的电子邮件帐户，电子邮件是任何数字产品战略的重要组成部分。

虽然有数以千计的电子邮件模板设计可供营销人员使用，但电子邮件设计是网页设计师的重要专业领域。 对于那些想要与大品牌、创意公司和其他回避模板的人合作的人来说尤其如此。

设计师在设计电子邮件时应牢记几件事，从大多数电子邮件平台的限制（对最大的之一——Gmail 中的网络字体等内容的支持有限），以及消费者在打开电子邮件时的期望他们可能已经与之有业务往来的公司。

移动电子邮件设计的重要性

现在至少有一半的电子邮件是在移动设备上打开和阅读的，设计师忽视适合移动设备的电子邮件设计是不负责任的。 尤其是考虑到移动电子邮件的转化率往往明显高于台式机的转化率。

PiperJaffray 的这种移动电子邮件设计使事情变得简单而优雅。 它很容易在移动设备上阅读，链接清晰，品牌微妙。 它将用户的需求放在首位，改善了公司的整体用户体验和感知。

Dribbble 将他们的“热门镜头”电子邮件保持在重点，完全专注于内容。 这种重点使电子邮件易于在移动设备上导航。 虽然专注于内容的简单布局对于许多类型的电子邮件来说都是一个好主意，但它特别适用于移动电子邮件，这样可以更轻松地使用内容并与之交互。

专注于内容

作为最佳实践，无论是设计电子邮件还是其他数字产品，设计师都应该始终关注内容。 一些电子邮件设计通过以内容为设计的极简设计，将这种最佳实践发挥到了极致。

在处理大多数电子邮件设计时，设计师会受益于在深入设计之前先创建内容。 但是，特别是在极简设计中，更重要的是要预先知道内容是什么。

Marvel 采用极简设计将重点直接放在其内容上。 白色背景和只支持页面文字的图片，让内容真正脱颖而出。

Unsplash 的所有电子邮件都直接关注他们正在推广的图像。 图片底部的“查看收藏”按钮和淡入淡出可以增加网站的点击率，因为它让人们想要查看更多内容。

强化品牌

当访问者到达网站时，它（理想情况下）是一种身临其境的品牌体验。 一切都在网站设计师的控制之下。 但是电子邮件设计不同。 用户正在另一个应用程序中查看电子邮件，并且并非所有电子邮件应用程序都平等地呈现所有电子邮件。

因此，电子邮件设计中的品牌化对于为阅读电子邮件的用户创造正确的体验至关重要。 但是，品牌通常需要保持简单，以便在各种设备和电子邮件客户端上有效地呈现给最高比例的用户。

电子邮件顶部的简单徽标，在多个图像中使用相同的标题图像，并与品牌的其他数字产品保持尽可能多的元素一致，这对于支持和加强品牌对消费者的认知大有帮助。

Everlane 的品牌在他们的电子邮件和网站上天生就很简单。 他们的标志在这封电子邮件的顶部突出显示，强化了这个品牌。

中指项目在所有电子邮件中使用一致的标题图像，以及明亮的紫色强调色。 这使得任何订阅的人都能立即识别出他们的电子邮件，并且在网站上继续进行品牌推广。

用颜色吸引注意力

颜色对人的思维有很大的影响，能够影响情绪、感知甚至行为。 在电子邮件中有效地使用颜色可以提高点击率和转化率。 在某些测试中，按钮颜色的差异会导致转化率的差异超过 20%。

但从使用颜色中受益的不仅仅是号召性用语。 创建色彩丰富的电子邮件可能会偏离预期，并会在一个人的收件箱中创建与其他电子邮件完全不同的外观和感觉。

用鲜红色吸引注意力的销售横幅让人想起现实生活中的销售标志，这些标志通常也采用相同的颜色。 读者的眼睛立即被红色吸引。

斯堪的纳维亚家具电子商务网站 Article 采用柔和的红色和绿色配色方案，红色将注意力吸引到最重要的部分——销售号召性用语按钮。

虽然一些电子邮件设计使用颜色来吸引对内容特定部分的注意，但休斯顿动物园的这封电子邮件使用明亮的颜色来创造有趣和充满活力的设计。 明亮的橙色和粉红色的配色方案立即引人注目，并吸引了读者。

使用令人惊叹的图像

人类是视觉动物，令人惊叹的图像可以提升电子邮件并吸引读者的注意力。 图片还可以强化电子邮件的信息和公司的品牌。

电视节目似乎在“令人惊叹的图像”类别中具有优势，这封 Netflix 电子邮件使用了来自Stranger Things的充满活力但神秘的静止图像。 从用户体验的角度来看，将引人注目的图像与紧随其下方的“播放”号召性用语相结合是有意义的，因为它使读者可以轻松地立即观看宣传的节目。

令人惊叹的图像不仅限于照片。 WePresent 在电子邮件中使用的卡通或插图就像照片一样引人注目，可以帮助吸引读者进入内容。

这封最致命的捕获电子邮件，宣传探索频道纪录片系列，显示了一个令人惊叹的标题图像，它融合到它下面的内容中。 这是一种有用的技术，可以鼓励观众继续阅读。

尝试非常规布局

许多电子邮件设计都有一个非常标准的格式：顶部的标题，单列内容，顶部和底部附近的行动号召。 但是没有规定说设计师必须遵循这种特定的模式。

非常规的布局是吸引读者注意力并让他们想要阅读内容的好方法。 有多种方法可以创建不寻常的设计。 一种流行的方法是使用图像来创建不一定与许多电子邮件平台兼容的电子邮件布局。

非传统的布局不一定需要脱离墙壁。 这一款来自 Mailchimp，采用两列设计，其中一列由色块占据。 使它令人难忘的是它在视觉上具有吸引力和出乎意料。

使用图像可以实现更多意想不到的电子邮件布局，例如 KLM 的这种布局。 设计师只需要记住，一些电子邮件客户端仍然会阻止图像自动加载，因此有必要使用仍然能够传达信息要点的后备文本。

使用字体

大多数流行的电子邮件客户端都支持网络字体，但不幸的是，并非所有客户端都支持——Gmail 是最显着的例外（尽管 Gmail 确实支持 Roboto 和 Google Sans 作为 Gmail 界面的一部分）。 但是，只要设计师记住大量电子邮件客户端将使用备用字体，他们仍然可以使用网络字体。

当然，使用网络字体的替代方法是使用包含字体的图像。 这就是许多电子邮件设计师选择做的事情，尤其是在备用字体可能看起来不合适的标题中。

这份 FabFitFun 时事通讯使用有趣的脚本字体来吸引人们对内容的关注，同时将其与高度易读的无衬线字体配对。 在电子邮件设计中尝试字体组合是一个好主意，甚至可以在更改网站字体或在其他品牌材料中使用它们之前用作试运行。

Sickbubble 在他们的电子邮件设计中使用了多种字体，这可能很棘手。 但是在这种情况下，因为他们将每个部分分开，所以它起作用了。 标题中的显示字体具有非常前卫的感觉，而主体文本是易于阅读的无衬线字体。 产品促销部分中的手写字体有效，因为它偏离了电子邮件的正文。

玩转动画

动画为电子邮件增添了额外的视觉趣味，并立即吸引了读者的眼球。 动画 GIF 是向电子邮件添加动作的流行选择，并且受到大多数电子邮件客户端的支持。

设计师在嵌入任何动画时应确保牢记文件大小，因为有很多人在移动设备上阅读电子邮件。 他们还应该确保动画支持内容，而不仅仅是填充。

使用动画 GIF 来驱动要点或更好地说明以有趣的方式呈现的内容是电子邮件设计的绝佳补充，就像 Product Hunt 的这个电子邮件示例一样。

Hustle 在他们的电子邮件中使用动画 GIF 来说明信息的重点，并为原本极简的电子邮件设计增加视觉趣味。

行动呼吁

号召性用语可以说是公司发送的几乎所有电子邮件中最重要的部分。 大多数电子邮件都会发送到提示操作，无论该操作是阅读文章、购买产品还是执行某些其他行为。

设计师可以密切关注其号召性用语的设计，并对它们进行 A/B 测试，以确保它们针对性能进行了优化。

正如 Litmus 在这里所做的那样，在号召性用语中使用明亮的颜色，使其从其他内容中脱颖而出。 设计师应该考虑尝试不同的颜色，通过在发送电子邮件活动时使用 A/B 测试来查看哪些颜色最适合他们的受众。

在号召性用语中使用与电子邮件的其余内容完全不同的颜色使其脱颖而出。 因为 Campaign Monitor 电子邮件中的柠檬绿是构成背景的紫色的分裂补色，所以它在不冲突的情况下脱颖而出。

注意电子邮件设计最佳实践

虽然电子邮件设计中有足够的创意和实验空间，但设计师还需要牢记媒体的最佳实践和限制。

电子邮件设计中最重要的步骤之一是在发送电子邮件之前在各种电子邮件平台中对其进行测试。 虽然它们之间可能存在细微差异，并且总是有人会使用不太常见的平台以不同的方式呈现设计，但确保电子邮件能够为大多数用户接受是明智的。

设计人员可以使用多种电子邮件测试服务来查看他们的电子邮件在各种电子邮件平台上的外观。 Litmus 是最受欢迎的选项之一，但 Mailgun、Acid 上的电子邮件、Mailtrap 和 Preview My Email 等其他选项也值得一试，看看哪一个最能满足每个项目的需求。

除此之外，由于移动设备上打开的电子邮件数量众多，因此请记住图像大小和带宽使用情况至关重要。 出于同样的原因，响应式设计实际上是必不可少的。

最好的电子邮件设计将易于人们在任何设备上阅读，并且——最重要的是——将提示他们点击电子邮件中的行动号召（或以其他方式执行请求的任何操作）。 遵循这些电子邮件设计最佳实践让网页设计师在创建有效执行此操作的电子邮件方面具有优势。

• • •

进一步阅读 Toptal 设计博客：

• 体验就是一切——终极用户体验指南
• 所有的趋势都值得吗？ 设计师犯的 5 个最常见的 UX 错误
• UI 与 UX——探索核心差异 [信息图]
• 移动用户体验设计原则和最佳实践
• 移动可用性基本指南