电子简报

电子报设计：打造高互动邮件版式的最佳实践

通过版式最佳实践、排版技巧和视觉策略掌握电子报设计。创建外观专业且能带动互动的电子邮件电子报。

Set Noa
Set Noa
更新于
0 访问 · 7天
newsletter design
电子报设计：打造高互动邮件版式的最佳实践?

电子报设计应优先考虑可读性、移动端自适应和视觉一致性。本指南涵盖版式策略、排版、色彩运用、图片优化以及用于创建订阅者乐于阅读的电子报的设计工具。

了解更多

电子报设计是一种无形的架构，决定了订阅者究竟是阅读你的内容，还是直接删除。设计良好的电子报能自然地引导视线从标题流向内容、再到行动号召。而设计糟糕的电子报，无论内容多有价值，都会制造视觉混乱，将读者拒之门外。

好消息是：高效的电子报设计不需要专业设计师。只要理解几条核心原则并保持一致，任何人都能做到。本指南涵盖版式策略、排版规则以及让电子报引人入胜、易于阅读的视觉技巧。

四个正在运行的模板

这一节以下的所有内容都是关于版式的主张，而关于版式的主张很廉价。所以这里放四份正在运行的邮件通讯。

每一份都待在具有真实宽度的框里，展示自己的 HTML。把宽度拖到 375 px，看看哪些列会堆叠、哪些拒绝堆叠。这些面板跟随你阅读本页时所用的主题：在深色模式下你看到的是每个模板本身的深色区块，而不是它的近似物。源码就在每块面板下面。

Tajo 模板

四种正在运行的版式

下面每一块面板都是模板真实的邮件 HTML，放在具有真实宽度的框里。把宽度拖到 375 px，看看这些列如何上下堆叠。

跟随您当前的主题——在顶部切换即可看到另一种。

阅读 The Letter 的 HTML 5 KB，无需构建 
<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">你存在记事应用里的那句引言，比你的内容日历干的活还多。</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Meridian Press 报头：同心的蓝色圆弧被一道斜带横穿" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'PingFang SC','Microsoft YaHei',sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Meridian Press · 第 47 期</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:'Songti SC','SimSun',serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">归档本身就是产品</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">三周前我去找一篇 2019 年写的文字，没找到。站上没有，导出文件里没有，平台自带的搜索里也没有。一千二百期，唯一还能用的索引是我的记忆。</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">关于做了六年邮件通讯，没人会告诉你的正是这一段。发出去很容易。留下来不容易。</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:'Songti SC','SimSun',serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">你发布的一切都是存入。几乎没有人去搭建取出的那一端。</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:'Songti SC','SimSun',serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">所以这一周我把旧刊重新做成了真正的归档：带标签、全文检索和永久地址。花了九天。订阅数纹丝不动。站内停留时间翻了三倍。</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">全部都在下面，包括没跑通的那些部分。</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'PingFang SC','Microsoft YaHei',sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">读完整期 &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'PingFang SC','Microsoft YaHei',sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">每周四手写。回信吧，我会读。</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">退订</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">在浏览器中查看</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

这些模板是我们自己的。我们为这篇文章设计了它们，连图形也是，由一个与本页同在一个代码仓库里的确定性几何脚本生成——没有图库照片，也没有别人模板库的截图。这个区别比听上去更重：一份用别人的邮件来给自己配图的邮件设计指南，等于要你只凭它一句话就相信它。

四个模板不是四种风格，而是对四种不同任务给出的四个答案：

  • The Letter 面向全部价值都在文字上的写作者。一张图片、88 px 边距、用文字链接代替按钮。私人信件里的按钮读起来像广告。
  • The Digest 面向会被扫读的汇总。编号的行、每个标题前的阅读时长，以及底部唯一一个行动号召，而不是六个。
  • The Storefront 面向一次发布。它是唯一一种以图片开场才算正确的版式，即便如此也做成了图片可以失效的样子。
  • The Brief 面向数字。三项指标凌驾于其余一切之上，柱状图由表格单元格而非 PNG 构成。

它们共有的部分才值得照抄。一栏 600 px。正文最少 16 px。一种强调色，其余全用墨色。每张图片都带替代文本，每种版式在图片被屏蔽时仍然讲得通。声明好的配色方案，加上写明的深色区块——因为深色客户端的默认行为，是让一个从没见过你品牌的算法来给你的邮件反色。

其中一个我们第一版就做错了，而恰恰是它值得点名。The Digest 起初在手机上让文章行上下堆叠，这正是每一份响应式邮件指南都会建议的做法。一堆叠，三张 112 px 的缩略图就变成三张高 335 px 的整宽装饰图，六条汇总也就成了一段长滚动。那一行如今是这组里唯一不堆叠的双栏版式。关于堆叠的规则说的是内容列。缩略图不是内容列。

在 Brevo 里搭一个出来

上面四个模板，没有一个需要开发者来拼装。下面每张截图都是同一个模板放在 Brevo 的拖放画布上，并选中了其中一个区块。

先从主按钮开始，因为它是设置项最多的区块：

Brevo

画布上的 The Storefront

Brevo 的拖放式邮件编辑器，画布上是 The Storefront 模板，主按钮处于选中状态，右侧面板显示其标签、链接、颜色、圆角与内边距设置
左栏是你拖进来的区块，右栏是选中区块的一切。画布上是一封 600 px 的邮件放在 680 px 的客户端里——手机版式没出现正是因为这个：正好 600 px 时模板自身的断点就会生效，切换开关明明写着“桌面”，你编辑的却是手机版。

左栏的每个区块都对应上面模板里的某样东西。结构用文字、图片、按钮、分隔线和间距。店铺行用商品。编辑器没有建模的一切用 HTML——The Brief 的图表正是这么搭出来的：

Brevo

一张里面没有任何图片的图表

Brevo 邮件编辑器，画布上是 The Brief 模板，柱状图处于选中状态，右侧面板显示它由表格单元格构成、不含图片
导出为 PNG 的图表，会把自己的数字丢给图片屏蔽、丢给深色模式的反色、丢给每一个屏幕阅读器。带一个彩色单元格和一个文字标签的四行表格一个也不会丢，而且没有任何体积。

排版也是同样的路子。选中一个文字区块，面板就给你字体、字号、行高和内边距——这正是 The Letter 需要的全部工具：

Brevo

引言就是旁边带一条线的文字区块

Brevo 邮件编辑器，画布上是 The Letter 模板并选中其引言：Georgia 19px、行高 30px、斜体，带 3px 左侧线
没有什么特殊组件。一个文字区块、一条强调色的 3 px 左侧线，加 20 px 内边距。在一份好的邮件通讯里，那些看着像定制设计的东西，大多是改了两个属性的标准区块。

图片也有自己的面板，替代文本排在最上面，而不是设置清单的末尾：

Brevo

替代文本是一个字段，不是事后补的念头

Brevo 邮件编辑器，画布上是 The Digest 并选中一张文章缩略图，显示其替代文本、112px 显示尺寸、480px 源文件与 17 KB 体积
显示尺寸 112 px，源文件 480 px——正是这 2 倍的比例让缩略图在高分屏上保持清晰。替代文本排在第一位，因为它才是大多数订阅者真正会收到的那部分图片。

对使用 Tajo 的企业来说，同样的板块可以动态填充：由订阅者行为驱动的商品推荐和个性化内容，会渲染进你在这里排好的区块，而不必每次发送都手工挑选。

电子报设计基础

设计服务于内容

电子报设计最重要的原则：设计应当让内容更易于消化，而非更难。每一个设计决策都应该回答这个问题：这样做能帮助读者更快找到并吸收他们所需的信息吗？

好的电子报设计的特征：

  • 读者可以在 10-15 秒内浏览完整个电子报
  • 最重要的内容一眼可见
  • 每个版块有清晰的开头和结尾
  • 行动号召突出，但不令人反感
  • 电子报看起来经过精心设计，而非随意拼凑

差的电子报设计的特征：

  • 读者难以快速找到主要内容
  • 多种设计风格相互竞争，分散注意力
  • 在任何设备上文字都难以阅读
  • 版式在手机上无法正常显示
  • 大段密集的文字，没有视觉停顿

视觉层次原则

视觉层次控制着读者处理信息的顺序。在电子报中，可通过以下方式建立层次感：

层次级别元素设计处理
主要主标题最大字体、加粗、置顶
次要版块标题中等字体、对比色
三级正文内容标准字体、可读字号
辅助元信息（日期、作者）较小字体、较浅颜色
行动CTA 按钮/链接对比色、按钮样式

版式策略

单栏版式

单栏版式是电子报的黄金标准，是大多数发布者的推荐选择。

优势：

  • 在所有设备和屏幕尺寸上完美渲染
  • 从上到下形成自然的阅读流
  • 简化设计决策
  • 减少跨邮件客户端的渲染问题
  • 与手机端阅读方式一致（垂直滚动）

**适合：**以文字为主的电子报、个人电子报、教育内容、长篇分析

结构：

  1. 页眉（Logo、期号、日期）
  2. 引言或个人寄语
  3. 主要内容版块
  4. 次要内容版块（用分隔线隔开）
  5. 行动号召或互动提示
  6. 页脚

卡片式版式

将内容组织成独立的视觉卡片，每张卡片有自己的边框、背景或阴影。

优势：

  • 内容分隔清晰
  • 适合精选内容和链接汇总
  • 每张卡片可有独立图片和 CTA
  • 视觉吸引力强，又不会让人目不暇接

**适合：**内容汇总、精选链接、产品展示、多主题电子报

卡片设计技巧：

  • 使用一致的卡片尺寸和间距
  • 每行最多 2 张卡片（移动端叠放为 1 列）
  • 加入细微边框或背景色以界定卡片范围
  • 保持每张卡片内部的一致内边距

混合版式

将主要内容列与较窄的侧边栏结合，用于展示补充内容。

优势：

  • 在不增加邮件长度的前提下容纳更多内容
  • 适合同时包含主要和次要内容的电子报
  • 与传统出版物的格式相似，读者熟悉

局限性：

  • 必须在移动端折叠为单列
  • 构建和维护更为复杂
  • 若组织不当，容易显得杂乱

**适合：**企业通讯、媒体风格刊物、内容量大的格式

电子报排版

排版是任何文字密集型邮件中影响最大的设计元素。字体选对了，其他一切便水到渠成。

字体选择

邮件客户端对字体的支持有限，建议优先使用网页安全字体：

字体风格适合场景
Arial简洁现代无衬线通用场景、商务
Helvetica精致无衬线高端品牌
Georgia优雅衬线编辑类、长篇内容
Times New Roman经典衬线传统、正式
Verdana宽体易读无衬线小号文字、移动端
Trebuchet MS现代无衬线创意类、休闲风格

**网络字体：**你可以指定网络字体（如 Open Sans 或 Lato）并设置网页安全字体作为备用。它们可在 Apple Mail、iOS Mail 和部分 Android 客户端中渲染，但在 Outlook 和旧版 Gmail 中会回退到安全字体。

字号规范

元素最小字号推荐字号
正文文字14px16px
版块标题20px22-24px
主标题24px28-32px
说明文字/元信息12px13-14px
CTA 按钮文字14px16px
预览文字12px14px

行距与可读性

  • **行高：**正文文字为 1.4-1.6（16px 字号时约 24-26px）
  • **段落间距：**段落之间 16-24px
  • **行宽：**每行 50-75 个字符（防止视觉疲劳）
  • **字间距：**正文使用默认值，小号文字可适当增加

文字格式

  • **加粗：**用于关键短语和强调，不要整段加粗
  • **斜体：**谨慎使用，适合引用、标题或轻微强调
  • **下划线：**专门用于链接（非链接文字加下划线会让读者困惑）
  • **全大写：**仅用于短标签或按钮，绝不用于正文
  • **颜色：**链接使用一种强调色，正文保持深灰（#333）或近黑色

配色策略

构建电子报调色板

将电子报配色控制在 3-4 种颜色内：

颜色角色用途示例
主色标题、CTA 按钮、强调品牌蓝
文字色正文、子标题深灰（#333333）
背景色邮件主体白色（#FFFFFF）或浅灰（#F5F5F5）
强调色链接、高亮、次要 CTA品牌辅助色

色彩无障碍性

  • 文字与背景之间保持最低 4.5:1 的对比度
  • 不要只靠颜色传达信息
  • 使用色盲模拟工具测试调色板
  • 确保链接与普通文字可区分（使用下划线，不仅仅依赖颜色）

深色模式考量

许多邮件客户端现在默认开启深色模式，设计时须将其纳入考虑：

  • 避免纯白（#FFFFFF）背景，改用略带色调的白色（#FAFAFA）
  • 不要使用含深色元素的透明 PNG（深色模式下会消失不见）
  • 在浅色和深色背景上分别测试 Logo
  • 添加深色模式配色方案的元标签
  • 对深色图片使用边框或轮廓，确保其在深色模式下仍然可见

电子报中的图片使用

何时使用图片

图片应当提供文字无法单独表达的价值：

  • **产品摄影：**在场景中展示产品
  • **数据可视化：**图表、图形和信息图
  • **截图：**展示工具、功能或操作流程
  • **人物照片：**与作者或团队建立个人连接
  • **插图：**强化品牌个性和语调

图片优化

规格建议
格式照片用 JPEG，图形用 PNG
宽度标准 600px，视网膜屏用 1200px
文件大小每张图片不超过 200KB
邮件总大小不含图片不超过 100KB
Alt 文字描述性文字，不超过 125 个字符
宽高比主视图 2:1，缩略图 1:1

图文比例

保持健康的图文比例，以避免触发垃圾邮件过滤器并确保可读性：

  • 推荐图文比例为 60:40（文字 60%，图片 40%）
  • 以图片为主（纯图片邮件）的邮件垃圾率更高
  • 始终用文字呈现关键信息，不要只依赖图片
  • 针对屏蔽图片的客户端进行设计：电子报在没有图片的情况下也应完整呈现

移动优先的电子报设计

移动端设计要求

超过 60% 的电子报在移动设备上打开，移动端设计是不可忽视的必须项。

移动端版式规则：

  • 内容最大宽度：600px（在所有设备上均能良好显示）
  • 最小点击区域：按钮和链接为 44x44 像素
  • 最小字号：移动端正文 16px
  • 单栏版式，可自然叠放
  • 移动端 CTA 按钮全宽显示
  • 可点击元素之间留有充足间距（避免误触）

响应式设计技巧

技巧桌面端移动端
多列版块并排显示垂直叠放
图片按内容尺寸缩放全宽显示并缩放
导航链接水平排列垂直叠放或隐藏
CTA 按钮内嵌或右对齐全宽显示
字号标准略大
内边距20-40px15-20px

测试移动端渲染

请在以下设备上测试电子报设计：

  • iPhone（Safari/Mail）
  • Android（Gmail 应用）
  • iPad
  • Gmail（网页版）
  • Outlook（桌面端和网页端）
  • Apple Mail（桌面端）

使用 Litmus 或 Email on Acid 等工具，可在 90 余种邮件客户端上自动化渲染测试。

电子报各版块设计

页眉

页眉确立品牌形象并设定读者预期：

  • **Logo：**尺寸适中，通常宽度为 150-200px
  • **期号标识：**期号、日期或版次名称
  • **在线查看链接：**供遇到渲染问题的订阅者使用
  • **保持紧凑：**页眉不应将内容推至首屏以下

版块分隔符

清晰的版块分隔线有助于读者快速浏览：

  • **水平分隔线：**简洁细线（1-2px），使用中性颜色
  • **背景颜色切换：**白色与浅灰色版块交替出现
  • **额外间距：**版块之间留有 30-40px 的内边距
  • **版块标题：**粗体、较大字号，保持一致的样式

页脚

精心设计的页脚为阅读体验画上完整的句号：

  • 退订链接（法律要求，便于找到）
  • 社交媒体链接
  • 实体邮寄地址（CAN-SPAM 法规要求）
  • 在浏览器中查看的链接
  • 转发给朋友的选项
  • 简短的品牌标语或使命声明

电子报设计工具

平台编辑器

大多数电子报平台内置设计编辑器：

平台编辑器类型设计灵活性模板库
Brevo拖放式高40+ 模板
Mailchimp拖放式高100+ 模板
ConvertKit简化编辑器中等有限
Substack文字为主低极少

Brevo 的拖放式编辑器让专业电子报设计无需编程知识即可实现。对于使用 Tajo 的企业，你可以根据订阅者行为，动态填充电子报版块中的产品推荐和个性化内容。

设计资源

  • **Canva：**制作电子报页眉图片、社交图形和插图
  • **Unsplash/Pexels：**免费图库素材
  • **Really Good Emails：**精选优秀邮件设计的灵感库
  • **MJML：**用于自定义设计的开源邮件框架
  • **Figma：**设计自定义电子报模板，支持邮件插件导出

电子报设计检查清单

每次发送电子报前，请确认以下项目：

版式：

  • 单栏版式或具备正确响应能力的多列版式
  • 内容宽度不超过 600px
  • 从页眉到页脚有清晰的视觉层次
  • 版块之间有明确的分隔

排版：

  • 正文字号不低于 16px
  • 行高为 1.4-1.6
  • 标题清晰地呈现内容结构
  • 链接文字具有描述性（不是”点击这里”）

图片：

  • 所有图片均有 alt 文字
  • 图片已优化文件大小
  • 无图片时电子报依然可读
  • 为高分辨率显示屏提供了视网膜图片

移动端：

  • 已在 iPhone 和 Android 上测试
  • CTA 按钮在移动端全宽显示
  • 字号在小屏上易于阅读
  • 点击区域最小为 44px

无障碍性：

  • 色彩对比度达到 4.5:1
  • 内容使用正确的标题结构
  • 没有仅依靠颜色传递信息的情况
  • 与屏幕阅读器兼容

品牌一致性：

  • 颜色与品牌调色板一致
  • Logo 尺寸正确且位置合适
  • 语调和声音与品牌保持一致
  • 页脚包含所有必要的法律元素

持续优化电子报设计

电子报设计不是一次性的项目，应根据性能数据和订阅者反馈不断优化：

  • **跟踪滚动深度：**读者是否一直看到电子报的底部？
  • **监测点击热图：**哪些版块获得最多点击？推广类似内容。
  • **年度调查订阅者：**了解他们对设计的偏好
  • **A/B 测试版式：**对比卡片式与线性版式、图片位置和 CTA 样式
  • **研究竞品：**观察你所在行业中优秀电子报的设计规律

最好的电子报设计是无形的。订阅者不会注意到设计本身，他们只会注意到内容。这恰恰说明设计正在发挥其最大价值：消除阅读障碍、引导注意力、让阅读体验毫不费力。

从简单做起，保持一致，根据数据持续优化。你的电子报设计应随着受众的成长而演进，而非超前于受众。

常见问题

什么样的电子报设计算好？
好的电子报设计采用清晰的视觉层次、一致的品牌形象、易读的排版（最小 16px）、兼容移动端的单栏布局，以及对留白的策略性运用。它引导读者的视线从标题到内容再到行动号召。
电子报应该文字偏多还是图片偏多？
理想的平衡取决于你的内容类型，但大多数电子报在 60/40 的文字图片比例下表现最佳。文字优先的设计能确保图片被屏蔽时的可读性，并提升送达率。用图片来支撑内容，而非取代内容。
最好的电子报布局是什么？
单栏布局对电子报最有效，因为它能在所有设备上正常显示、易于浏览，并以线性流引导注意力。使用清晰的分隔区块和一致的格式来组织单栏内的内容。
分享这篇文章:
返回所有文章

申请抢先体验

请填写名字，以及邮箱或手机号。我们会与您联系，提供 Tajo 访问详情。

自动识别
获取Brevo