```
### 主视觉图片最佳实践
主视觉图片奠定整封邮件的视觉基调：
**规格：**
- 宽度：600px（移动端自动缩小）
- 高度：200 到 400px
- 文件体积：200KB 以内
- 文字叠加：不要把关键文字放进图片里
**主视觉模板：**
```
主视觉图片
（场景图或商品图）
叠加文字写在 HTML 里，
不要嵌进图片
```
### 背景图片
背景图片能增加视觉层次，但支持范围有限：
**支持情况：**
| 客户端 | 背景图片支持 |
| --- | --- |
| Apple Mail | 完全支持 |
| iOS Mail | 完全支持 |
| Gmail | 完全支持 |
| Outlook（Windows） | 不支持 |
| Yahoo Mail | 完全支持 |
**始终为 Outlook 用户准备纯色兜底背景。**
### 商品图片规范
面向电商的商品邮件：
- 所有商品保持一致的尺寸
- 使用白色或中性背景
- 条件允许时提供多角度图
- 商品图宽度至少 300px
- 直接链接到商品页
## 第四部分：移动端邮件设计
移动端占比因名单和行业而异，但任何现代邮件项目都需要移动端安全的设计。先看自己的邮件客户端报表，再把移动端质检定为发送前的必做环节。
### 移动端设计原则
**移动优先的做法：**
1. 先为最小屏幕设计
2. 内容纵向堆叠
3. 放大点按区域
4. 简化导航
5. 在真机上测试
### 响应式设计技巧
**移动端媒体查询：**
```css
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}
```
### 适合触控的设计
**最小点按区域：**
| 元素 | 最小尺寸 |
| --- | --- |
| 按钮 | 44 x 44 像素 |
| 链接 | 高度 44px |
| 链接间距 | 相隔 10px |
**CTA 按钮模板：**
```
立即选购
高度至少 44px
```
### 移动端排版
**移动端字号调整：**
- 正文：不低于 16px（避免 iOS 自动放大）
- 大标题：24 到 28px
- 行高：比桌面端增加 10%
- 段落间距：为拇指滚动留出更多空间
### 移动端图片注意事项
- 使用弹性宽度（max-width: 100%）
- 减少移动端的图片数量
- 考虑隐藏装饰性图片
- 条件允许时加载更小的图片版本
### 移动端测试清单
- 在 iOS Mail 测试
- 在 Gmail app（iOS 与 Android）测试
- 在 Outlook app 测试
- 确认蜂窝网络下图片能加载
- 检查加载时间在 3 秒以内
- 确认点按区域足够大
- 测试深色模式渲染
## 第五部分：邮件中的色彩
色彩传递情绪、引导注意力、强化品牌识别。用好色彩能提升邮件表现。
### 邮件中的色彩心理
| 颜色 | 联想 | 最适合 |
| --- | --- | --- |
| 蓝色 | 信任、冷静 | B2B、金融、科技 |
| 绿色 | 成长、健康 | 环保、健康、成功 |
| 红色 | 紧迫、能量 | 促销、CTA、提醒 |
| 橙色 | 友好、行动 | CTA、重点强调 |
| 紫色 | 高端、创意 | 奢侈品、美妆 |
| 黄色 | 乐观、注意 | 警示、重点强调 |
### 色彩对比度要求
**WCAG 2.1 AA 标准：**
- 普通文字：对比度至少 4.5:1
- 大号文字（18px 及以上）：至少 3:1
- 界面元素：至少 3:1
**使用对比度检测工具**验证无障碍达标情况：
| 配色组合 | 对比度 | 是否通过 |
| --- | --- | --- |
| 白底黑字 | 21:1 | 通过 |
| 蓝底白字（#0066CC） | 4.8:1 | 通过 |
| 白底灰字（#777） | 4.48:1 | 临界 |
| 白底浅灰字（#AAA） | 2.32:1 | 不通过 |
### 深色模式考量
深色模式的表现因操作系统、应用和邮件客户端而异。两种模式都要设计：
**深色模式策略：**
1. **透明图片：** 使用透明背景的 PNG
2. **颜色反转：** 测试颜色反转后的效果
3. **Logo 版本：** 准备浅色和深色两版 logo
4. **描边定义：** 加上细微描边，防止元素融进背景
**深色模式 meta 标签：**
```html
```
### CTA 按钮配色
CTA 需要从周围内容中跳出来：
**配色建议：**
- 如果品牌主色仍能满足对比度要求，就用品牌主色。
- 如果品牌色做按钮对比度不足，改用对比强烈的强调色。
- 促销类高刺激配色要结合退订与投诉数据做检验。
- 不要只靠颜色区分，CTA 的文案本身也要清楚。
**按钮设计规格：**
```
按钮文案（全大写） 背景：品牌色
文字：白色或高对比深色
内边距：15px 30px
圆角：4 到 8px
```
## 第六部分：邮件的无障碍设计
无障碍设计让每个人都能读到并使用你的内容，无论其能力如何。这既是伦理问题也是实务问题，无障碍做得好的邮件对所有用户都更好用。
### 无障碍基础
**核心原则（WCAG 2.1）：**
1. **可感知** 所有用户都能感知到内容
2. **可操作** 界面可以被导航和使用
3. **可理解** 内容与操作都清晰明确
4. **健壮** 内容在各类辅助技术中都能工作
### 屏幕阅读器兼容
屏幕阅读器会把邮件内容读给视障用户：
**最佳实践：**
- 使用语义化 HTML（h1、h2、p、ul）
- 给布局表格加上 role=“presentation”
- 在 html 标签上设置 lang 属性
- 提供有意义的链接文字（不要写“点击这里”）
- 复杂元素使用 aria-label
**示例：**
```html
夏季促销本季最大力度折扣，立即选购。 前往促销专区 |