邮件设计最佳实践：打造高参与度邮件

字体建议:

• 标题:更粗、更大的字体 (24-32px)
• 正文:干净、可读的字体 (14-16px)
• 最多限制为 2 个字体系列
• 确保指定备用字体

字体大小

推荐大小:

• 标题: 22-32px
• 副标题: 18-22px
• 正文: 14-16px
• 小字: 12-14px (最小可读)
• CTA: 14-18px

移动端考虑:

• 移动端正文最小 14px
• 链接的更大触摸目标
• 在实际设备上测试可读性

行长度和间距

最佳行长度:每行 50-75 个字符。太宽 = 难以跟踪;太窄 = 阅读不连贯。

行高: 字体大小的 1.4-1.6 倍。显著提高可读性。

段落间距:在段落之间添加空间。密集的文本块让人感觉压抑。

文本样式

谨慎使用:

• 粗体用于强调(不要过度使用)
• 斜体用于引用或微妙强调
• 大写仅用于非常短的短语
• 下划线保留给链接

避免:

• 正文中的多种颜色
• 过度加粗
• 全大写段落
• 正文使用花哨或装饰字体

邮件设计中的颜色

战略性使用颜色可改善美观和功能。

色彩心理学

蓝色:信任、可靠性、专业性 绿色:成长、健康、成功、金钱 红色:紧迫性、兴奋、激情 橙色:活力、热情、温暖 紫色:创造力、奢华、智慧 黄色:乐观、注意力、警告

构建调色板

主色:您的主要品牌颜色。用于关键元素。

辅助色:互补色用于多样性。

强调色:高对比度颜色用于 CTA 和重要元素。

中性色:灰色和白色用于背景和文本。

限制颜色:2-3 种主要颜色加中性色。太多颜色造成混乱。

颜色对比

可访问性要求:文本与背景之间必须有足够对比度。

WCAG 指南:

• 普通文本: 最小 4.5:1 对比度
• 大文本: 最小 3:1 对比度
• 使用对比度检查工具

常见错误:

• 白色上的浅灰色文本(难以阅读)
• 深色背景上的深色文本
• 彩色背景上的彩色文本
• 低对比度 CTA 按钮

品牌一致性

匹配您的品牌:邮件颜色应与您的网站和品牌指南保持一致。

识别度:一致的颜色帮助订阅者立即识别您的邮件。

专业外观:连贯的配色方案看起来更精致。

邮件中的图片

图片增强邮件,但需要小心处理。

图片最佳实践

文件大小:每张图片保持在 200KB 以下。大图片加载缓慢且可能被阻止。

格式选择:

• JPEG: 照片、复杂图像
• PNG: 图形、logo、需要透明度
• GIF: 简单动画、有限颜色
• SVG: 邮件中不广泛支持

尺寸:

• 宽度: 全宽最大 600px
• 视网膜屏: 考虑 2x 分辨率以清晰显示
• 响应式: 使用百分比宽度

Alt 文本

当图片无法加载时显示 Alt 文本(在邮件中很常见)。

编写有效的 Alt 文本:

• 描述图片内容
• 包含图片中的关键信息
• 保持在 100 个字符以下
• 没有图片也要有意义
• 如果图片可点击,包含 CTA 文本

示例:

• 好:"50% 折扣促销 - 立即购买按钮"
• 差:"image1.jpg"
• 差:"" (空)

图文比例

为什么重要:图片密集的邮件可能触发垃圾邮件过滤器,并在图片被阻止时失效。

建议:

• 目标 60% 文本, 40% 图片
• 永远不要发送纯图片邮件
• 确保没有图片时信息清晰
• 在 HTML 中包含关键文本,而不仅仅是图片

背景图片

谨慎使用:

• 并非所有邮件客户端都支持
• Outlook 支持有限
• 始终有备用背景色
• 使用 VML 以兼容 Outlook

CTA 按钮设计

CTA 是最重要的设计元素。

按钮基础

大小:足够大以便轻松点击(最小 44x44px 触摸目标)。

颜色:高对比度,从周围环境中突出。

形状:矩形加略微圆角通常表现良好。

文本:面向行动、具体、适当时使用第一人称。

按钮最佳实践

可见性:

• 位置突出
• 周围有留白
• 使用对比色
• 不要埋在折叠下方

设计元素:

• 投影增加深度
• 边框定义边缘
• 填充提供呼吸空间
• 图标可增加视觉兴趣

移动端友好:

• 移动端全宽
• 大触摸目标
• 与其他可点击元素间隔

防弹按钮

在任何地方都能工作的 HTML 按钮,包括 Outlook。

技巧:使用在所有客户端中都能呈现为按钮的 HTML/CSS,为 Outlook 提供 VML 备用。

好处:

• 在所有客户端中看起来像按钮
• 即使图片关闭也可点击
• 外观一致
• 比图片按钮更可靠

移动优先的邮件设计

超过 40% 的邮件在移动设备上打开。

移动设计原则

单列:多列布局在小屏幕上会崩溃。

大文本:最小 14px 正文,更大的标题。

触摸友好:按钮和链接至少 44x44px 并带间距。

可扫描:短段落,清晰层次。

快速加载:优化图片,最小化代码。

响应式 vs. 可缩放

响应式设计:使用媒体查询根据屏幕大小改变布局。

可缩放设计:无需媒体查询即可跨尺寸工作的单一设计。

混合:广泛兼容性的组合方法。

建议:从移动优先的可缩放单列设计开始,在支持的地方添加响应式增强。

在移动端测试

必须测试:

• 实际设备(不仅仅是模拟器)
• 多种屏幕尺寸
• 纵向和横向
• 图片开启和关闭
• 不同的邮件应用

邮件结构和模板

一致的结构提高识别度和效率。

标准邮件结构

预标题:显示在收件箱预览中的隐藏文本。

标题:Logo, 导航链接(可选)。

主视觉区:主要视觉/标题区域。

正文:主要内容。

CTA:主要行动号召。

次要内容:附加优惠、链接(可选)。

页脚:退订、地址、社交链接。

模板类型

促销模板:

• 强烈的主视觉图片
• 清晰的优惠标题
• 辅助文案
• 突出的 CTA
• 简单结构

新闻通讯模板:

• 多个内容部分
• 目录(可选)
• 清晰的部分划分
• 多个 CTA
• 更复杂的结构

交易模板:

• 干净、简单的布局
• 关键信息突出
• 清晰的下一步
• 最少营销
• 专注的结构

创建可重用模板

好处:

• 一致的品牌
• 更快的制作
• 更少的错误
• 更容易测试
• 可扩展的流程

建立一致的模板可以改进您的 邮件营销策略。

标准化的模板元素:

• 页眉/页脚设计
• 调色板
• 排版
• 按钮样式
• 间距系统

深色模式考虑

许多用户在深色模式下查看邮件。

深色模式如何工作

两种类型:

1. 完全颜色反转:亮变暗,暗变亮
2. 部分反转:仅改变浅色背景

邮件客户端差异:不同客户端处理深色模式的方式不同。没有单一方法适用于所有地方。

深色模式设计技巧

在深色模式下测试:在浅色和深色模式下预览邮件。

透明背景:如果 logo 在深色背景上看起来不好,请避免。

Logo 版本:提供在浅色和深色背景上都能工作的 logo。

颜色选择:确保颜色在两种模式下都可见和可读。

避免纯黑/白:略微偏离黑色和白色在两种模式下都更温和。

边框图片:为与白色背景融合的图片添加微妙边框。

邮件设计中的可访问性

让每个人都能使用邮件。

可访问性基础

颜色对比:文本可读性的足够对比度。

字体大小:最小可读大小 (14px 正文)。

Alt 文本:所有图片的描述性文本。

语义结构:正确的 HTML 层次结构。

链接文本:描述性链接文本(不是"点击这里")。

屏幕阅读器考虑

阅读顺序:线性阅读时内容应有意义。

表格结构:谨慎使用表格布局;添加 role="presentation"。

标题层次:使用正确的 h1, h2, h3 结构。

跳过链接:允许跳转到主要内容。

动画和动效

减少动效:一些用户对动画敏感。

GIF 考虑:限制动画循环,避免闪烁。

基本内容:不要仅在动画中放置关键信息。

邮件客户端兼容性

不同的邮件客户端渲染 HTML 的方式不同。

主要邮件客户端

桌面端:

• Outlook (渲染最具挑战性)
• Apple Mail (良好的现代支持)
• Thunderbird (良好支持)

网页邮箱:

• Gmail (剥离一些 CSS)
• Yahoo Mail (各异)
• Outlook.com (改进中)

移动端:

• iOS Mail (出色支持)
• Gmail App (因版本而异)
• Samsung Mail (良好支持)

常见渲染问题

Outlook 挑战:

• 不支持 CSS 背景图片
• 有限的 CSS 支持
• 不同的渲染引擎
• 某些功能需要 VML

Gmail 挑战:

• 剥离 <style> 块(使用内联 CSS)
• 移除带数字的类
• 有限的 CSS 支持

兼容性编码

内联 CSS:最可靠的方法。

表格布局:对于 Outlook 仍然必要。

网络安全字体:使用备用字体。

广泛测试:使用邮件测试工具。

测试和质量保证

永远不要不经测试就发送。

测试清单

内容:

• [ ] 拼写和语法
• [ ] 链接正常工作
• [ ] 个性化渲染
• [ ] 日期和详情准确

设计:

• [ ] 图片正常加载
• [ ] Alt 文本到位
• [ ] 颜色正确
• [ ] 字体正确渲染
• [ ] 移动端布局工作

技术:

• [ ] 链接正确跟踪
• [ ] 退订工作
• [ ] 在浏览器中查看工作
• [ ] 预标题正确显示

测试工具

邮件预览服务: Litmus, Email on Acid

• 跨邮件客户端预览
• 捕捉渲染问题
• 检查垃圾邮件分数
• 可访问性检查

手动测试:

• 发送测试邮件给自己
• 在多个设备上查看
• 检查不同的邮件客户端
• 禁用图片测试

常见设计错误

避免这些常见错误。

错误 1: 纯图片邮件

问题:图片被阻止时什么都不显示。 修复:平衡图片与 HTML 文本。

错误 2: 微小文本

问题:在移动端不可读。 修复:最小 14px 正文。

错误 3: 埋藏的 CTA

问题:用户找不到操作。 修复:突出位置加对比度。

错误 4: 无移动端考虑

问题:手机上布局崩溃。 修复:移动优先设计方法。

错误 5: 缺少 Alt 文本

问题:图片未加载时没有上下文。 修复:所有图片的描述性 alt 文本。

错误 6: 对比度差

问题:文本难以阅读。 修复:满足 WCAG 对比度要求。

设计与可送达性

设计选择可能影响收件箱位置。

垃圾邮件过滤器考虑

图片密集的邮件:可能触发垃圾邮件过滤器。

损坏的 HTML:可能发出垃圾邮件信号。

缺少文本:纯图片邮件看起来可疑。

过多链接:太多链接引发警报。

干净的设计,干净的代码

专业外观:垃圾邮件过滤器从用户行为中学习。设计良好的邮件收到的投诉更少。

干净的 HTML:验证代码,避免错误。

正确结构:遵循邮件 HTML 最佳实践。

列表质量关联

即使完美的设计,如果邮件无法到达收件箱也会失败。验证您的列表以确保您精心设计的邮件到达真实订阅者。

快速参考

设计清单

布局:

• [ ] 单列(或正确响应式)
• [ ] 清晰的视觉层次
• [ ] 充足的留白
• [ ] 移动端友好结构

排版:

• [ ] 可读的字体大小 (14px+ 正文)
• [ ] 适当的行高
• [ ] 有限的字体系列
• [ ] 足够的对比度

图片:

• [ ] 优化的文件大小
• [ ] 描述性 alt 文本
• [ ] 良好的文本与图片比例
• [ ] 图片关闭时工作

CTA:

• [ ] 突出位置
• [ ] 高对比度
• [ ] 触摸友好大小
• [ ] 清晰的操作文本

测试:

• [ ] 多个邮件客户端
• [ ] 移动设备
• [ ] 深色模式
• [ ] 图片禁用

结论

优秀的邮件设计服务于您的信息和订阅者。通过遵循视觉层次原则、针对移动端优化、确保可访问性和全面测试,您可以创建人们想要阅读和采取行动的邮件。

记住这些关键原则:

• 移动优先:首先为最小屏幕设计
• 简单获胜:清晰胜过聪明
• 层次重要:引导视线到重要内容
• 测试一切:在设计中看起来不错的可能在邮件客户端中崩溃
• 包含可访问性:为所有用户设计

永远无法到达收件箱的精美邮件不会产生结果。将优秀设计与验证过的邮件列表相结合以实现最大影响。阅读更多关于 邮件送达率 和 营销最佳实践。

准备好确保您精心设计的邮件到达真实订阅者了吗?从 BillionVerify 开始验证您的列表并最大化您的邮件设计工作的 ROI。

使用 Instantly 或 Smartlead 的团队，在每次活动前通过 BillionVerify 清洗列表，可显著提升送达率。

在选择验证服务商前，对比 BillionVerify 与 ZeroBounce 在准确率和速度方面的差异。