电子邮件模板与设计全面解析

Ted Goas 是 Stack Overflow 的首席产品设计师，致力于为全球超过五千万开发者打造更高效的工作流程。作为一名设计师兼前端开发者，他不仅参与网站与应用的设计开发，还专注于 HTML 邮件的创作。此外，Ted 还是开源项目 Cerberus 的创始人，这一平台帮助更多人设计出优秀的电子邮件。

《Zoho Campaigns 专家访谈录》旨在让热衷邮件营销的从业者与行业专家深入交流，分享最佳实践和宝贵经验，构建起一个互助成长的邮件营销社区。

今天，我们请来了 Ted 做客首期播客，探讨关于邮件设计、开发的技巧与心得，并带来了实用的建议。

Aishwarya：
设计与开发是电子邮件营销活动中不可或缺的核心环节，同时也是最耗时的部分。那么，如果我们能在几分钟内告诉你设计成功邮件的正确方法和策略，会是怎样的体验？欢迎大家收听《Zoho Campaigns 专家访谈录》，我是本期主持人 Aishwarya。今天与我对话的是 Stack Overflow 的首席产品设计师 Ted Goas。Ted 还创办了一个简化邮件设计与创作流程的线上社区平台，为用户提供自适应邮件模板。

Ted，你好！很高兴和你交流。

Ted：
你好，很高兴认识你！

Aishwarya：
我们先从你最喜欢的一句话谈起吧：“设计，就是把复杂和混乱变得通俗易懂、可被人使用。” 你为什么会坚持这样一个设计理念呢？

Ted：
我是产品设计师，深知设计师与开发者往往喜欢追逐新潮的技术和“炫酷”的模式，我自己也是。但有些最新的技术或者花哨的设计，其实并不总能为用户带来真实的价值，甚至可能让用户迷失在复杂的界面中。
工作中我常提醒自己，我不是最终用户。即便我觉得某些东西很直观，也不代表普通用户能看懂、会用。
很多设计师喜欢不断创新交互模式，但我认为世界其实并不需要那么多全新的交互方式，而是需要一切都能简单易用。因此，我始终努力让自己的作品变得更亲民、易于理解。

Aishwarya：
说得真好！最复杂的问题，往往有最简单的解决方案。我们注意到你还主导了 Cerberus 项目，能给大家简单介绍一下它的由来和作用吗？

Ted：
当然！几年前我就想回馈一下设计与邮件社区，因为这些年我从中得到了很多。当时我经常参与 HTML 邮件的制作，却发现市面上资料匮乏，邮件在各个客户端的兼容细节很难找到详细教程。
所以我根据自己的经验，整理出了一套较为完整的自适应邮件模板，涵盖了常用的邮件结构，甚至能兼容 Gmail、Outlook 等难搞的邮箱客户端。既然已经做了这些，我就干脆把它开源上传到 GitHub，任何人都能使用、学习。
后来，这些模板成了我自己工作和各类个人项目的基础。更让我高兴的是，行业里的很多同行也开始使用 Cerberus，甚至提出自己的问题、反馈 bug，我们在交流中共同进步，形成了良性互动。现在 Cerberus 也成为 Stack Overflow 邮件设计系统的基石之一。

Aishwarya：
很棒的想法，Ted！为社区做贡献，是邮件营销行业互帮互助、共同成长的重要力量。开源理念也很伟大，衷心祝贺你的项目取得成功。

那你觉得邮件设计中有没有什么看似简单、实则最考验耐心和功力的地方？

Ted：
我同时做网页和邮件开发，所以体会很深。网页布局这些年因 CSS 技术进步变得非常简单，比如 box model、媒体查询、flexbox、grid 等主流浏览器都支持；但在邮件客户端这里，几乎这些 CSS 特性都用不了。
为了让邮件在各种客户端里布局一致，我们还得用表格排版，用 min/max 宽度模拟自适应，在不同位置巧妙地加 padding，甚至用 MSO 条件标签专门应对 Outlook。
在网页上，同样需求可能只需要几行 CSS，但在邮件里，需要大量冗长、巧妙的代码才能实现相同的布局。大家看起来只是一个简单的两栏邮件，实际上背后全是细致的技巧和苦活。

Aishwarya：
确实如此。多花些精力在布局设计上，往往能让邮件营销效果大不一样。希望听众们都能从你的经验里获益。

在你看来，邮件营销人在设计模板时最容易忽略的地方是什么？

Ted：
要说经常被忽略的，我觉得是“文案把关”。据我最近听过的一个讲座统计，成年人平均一分钟能读 250-300 字，正常一封邮件的阅读时长大约是 11 秒，也就大约 50 个字。但 50 个字真的很难准确表达清楚要点。
所以，精简优化文案很重要。除此之外，发件人名和主题行、预览文本也很容易被忽略。预览文本往往到最后才写，订阅和退订信息的位置与处理方式常被忽略。其实这些细节都直接影响用户是否点开、是否信任我们的邮件。所以建议大家不要忽视这些地方。

Aishwarya：
很赞。同意你的观点。让邮件被“读”而不只是“送达”下去，每个细节都值得用心打磨。

你曾提到 Stack Overflow 邮件发送量从小到大，最终每批次涉及 400 万用户、70 种类型。你在这个过程中的最大体会是什么？

Ted：
我最大的体会就是：在规模很大的时候，必须建立邮件设计系统。
三年前我加入 Stack Overflow 时，邮件是分散在各个团队的，没有专门的邮件组，大家各自设计、各自发布。于是就出现了：

• 设计风格不统一，有时甚至偏离品牌。
• 重复造轮子，团队间缺乏交流，明明本月做过类似邮件，下个月别的组又重新写一遍。
• 缺乏专业邮箱开发经验，容易出错。
  这种“邮件自由生长”会导致效率低下、难以维护、测试困难。后来我们统一设计系统，把常用模块标准化，大家在此基础上创作，就能规范设计，提高效率，降低错误率，对团队协作和企业品牌一致性都有显著提升。

Aishwarya：
真是受教了。设计系统就像我们根据实际情况总结、优化并沉淀下来的一套“模式库”。

Ted：
没错。除了按钮、图片、Logo 这类基础组件，更重要的是如何、何时使用它们的准则和文档，有助于团队内部达成共识。

Aishwarya：
有了这些规范，团队就知道用什么颜色、版式、字体，风格统一了，用户体验也会提升。

Ted：
你举的例子很好。

Aishwarya：
我知道你为邮件设计过不少系统。但不同公司、行业需求差异大，是不是每家都得自己从头搭建邮件设计系统？还是有一些通用的基础？

Ted：
有一些共通点，比如按钮、图片、文字肯定各家都需要，但最终适合每个团队的设计系统确实需要自己打造。
这里可以借用设计系统专家 Marco Suarez 的定义：设计系统就是一组可复用、有明确标准的组件，可以拼接、组合，创建出各种应用。更进一步，设计系统还包括如何、何时用这些组件的细则。每个团队需要根据自己用户、业务目标和需求做出定制。

当然，一开始可以参考同行、做些竞品研究；但最终，这套系统必须服务于本组织的实际业务。我们自己就是先出了 1.0 版本，只有基础按钮、两种字体、自动适配移动端的响应式容器。用了一段时间，大家开始提出“有标签吗”、“logo 怎么加”……我们根据实际反馈持续完善，这样的系统才真正落地、好用。

Aishwarya：
非常赞同。每个品牌独特，测试和优化才会产生真正契合自己的最佳实践。

Ted：
正是如此。

Aishwarya：
能不能给不是很懂技术和设计的邮件营销人一些建议，让他们设计邮件时也能做出好效果？

Ted：
当然！首先，要清楚你的受众是谁、喜欢怎样的邮件阅读方式，是图文并重还是文字为主？比如 Stack Overflow 的用户主要是程序员，习惯阅读文字较多、图片很少的邮件。
其次，永远不要忘了多平台测试（QA）。即使在网页端看起来完美无缺，也未必在邮箱客户端还能这么呈现。即便有设计系统，也不能替代详细的测试环节。
最后，适时请专业设计师把关。市场人员可以大胆尝试，但最终发布前一次专业审核，确保所有内容、品牌元素都得体，这一点很关键。

Aishwarya：
好建议，值得所有邮件营销人记下来。只有每个环节都细致把控，才能得到用户真正的互动与反馈。

Ted：
正是如此。

Aishwarya：
关于最后一个问题，邮件设计如何测试，才能确保在各类邮箱和浏览器中都能完美展示？

Ted：
首先，建议每次先有一份邮件策划简报（email brief），定义好内容、主题、预览文本等，让团队步调一致，避免重要信息被遗漏。
第二，如果团队有设计系统，无论是为网页还是邮件，尽量利用，这样能保证品牌风格统一，也容易做技术兼容性检查。如果没有设计系统，那就请专业设计师参与指导。
第三，自动化的邮件客户端测试和无障碍功能测试不可或缺。用专业工具如 Litmus、Email on Acid，可以批量测试各类客户端的展示效果，也能检查读屏软件、智能语音助手上的兼容情况。这样，不论用户通过哪种方式查看邮件，都能获得良好体验。

Aishwarya：
很实用的建议。最近，越来越多的人用语音助手收邮件，所以邮件内容的可读性也要适应这个新趋势。

Ted：
完全同意！

Aishwarya：
感谢 Ted 的分享。你的邮件设计理念和经验，相信会让许多邮件营销人受益匪浅。

Ted：
非常感谢邀请，希望大家有所收获！

Aishwarya：
今天的内容相信能为正在做企业邮件营销的朋友们带来不少思考。下期《Zoho Campaigns 专家访谈录》，我们还会带来更多精彩内容。感谢大家收听，我们下期再见！