使用拖放功能设计邮件

概述

OneSignal 拖放邮件生成器让您可以直观地设计响应式邮件,完全按照它们在收件人收件箱中显示的样子呈现——无需编写完整的 HTML。您可以使用三个核心组件构建邮件:

设置 – 应用于整个邮件的全局样式和布局
行 – 控制结构和响应性的水平布局容器
内容 – 单个区块,如文本、图像、按钮和 HTML

以下部分将介绍每个组件以及构建邮件的推荐顺序。

如果您想要以下功能,请使用拖放邮件生成器:

无需管理完整 HTML 即可直观地设计邮件(HTML 区块可用)
跨活动重复使用行或模板
允许非技术团队成员安全地编辑内容

如果您需要完整的 HTML 控制、各处的自定义字体或高级深色模式逻辑,请改用 HTML 编辑器。

设置

设置定义了邮件的基础布局和样式。除非明确覆盖,否则这些值会级联到行和内容区块。

Global settings panel in the Drag and Drop Editor

设计设置	描述
内容区域宽度	邮件的宽度(像素)。推荐: `600px`。
内容区域对齐	将内容向左或居中对齐。
背景颜色	内容区域后面的颜色。
内容区域背景颜色	内容区域内的颜色。
默认字体	应用于所有文本,除非被覆盖。自定义字体需要 HTML。
链接颜色	所有链接的默认颜色。
语言	设置 HTML `lang` 属性以提高可访问性。默认为英语。

推荐默认值: 在设置中配置尽可能多的样式,以确保一致性并减少每个区块的覆盖。

行

行定义邮件的水平布局。每行可以包含一个或多个列,每列可以包含内容区块。将行拖放到编辑器中以构建您的结构。

使用行来控制布局和间距。避免依赖单个内容区块进行主要布局决策。

保存的行

保存的行让您可以跨邮件和模板重复使用页眉、页脚或重复部分。点击行上的保存图标来保存它。

从行 > 保存的行访问保存的行。

保存的行类别:

空白 – 空白行模板
我保存的行 – 您或您的团队创建的行
示例行 – OneSignal 示例

行属性

点击行的外边缘来编辑行级设置。

如果您在悬停时看到内容而不是行,说明您选择了内容区块。点击外容器边缘,直到标签显示行。

行属性	描述
背景	行后面的颜色或图像。推荐: 在设置中设置背景颜色以保持一致性。
边框	边框颜色、宽度和样式。
布局	在移动或桌面端显示或隐藏行。
列	添加、删除或调整列大小并调整列内边距。
删除/复制	选择行并使用删除或复制图标来移除或复制它。

避免在行中使用背景图像。邮件客户端支持不一致。如果行仅包含图像,请改用图像区块。

内容

内容区块是收件人看到的实际元素——文本、图像、按钮、分隔符和 HTML。将内容区块拖到行列中。它会自动适应列宽。

内容区块决策规则:

使用文本区块处理大部分文本。
使用图像区块处理视觉元素或自定义字体。
仅在需要高级样式或行为时使用HTML 区块。

自定义字体

拖放编辑器默认支持系统字体。要使用自定义字体,必须使用 HTML 区块。

HTML block

<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  欢迎！
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  感谢您的订阅。
</p>

许多邮件客户端(包括 Gmail 和 Windows 版 Outlook)不加载网络字体。正文文本使用系统字体,仅标题使用自定义字体。始终包含回退字体,或使用图像来保证字体效果。

图像和视频

您可以将图像直接上传到 OneSignal 仪表板,让您的团队可以重复使用。编辑器支持裁剪、过滤和其他效果。您也可以通过 URL 引用外部托管的图像和视频——确保每个 URL 可公开访问。

邮件推荐图像尺寸

宽高比

页眉/横幅图像: 3:1 或 4:1 (例如 600×200 或 600×150)
主图像: 16:9 或 2:1 (例如 600×338 或 600×300)
方形图像: 1:1 (例如 300×300) — 适用于产品网格
缩略图: 1:1 或 4:3
最大宽度: 600–700px 是标准(大多数邮件客户端)
为视网膜显示设计 2x (例如 1200px 宽,显示为 600px)

文件大小

保持单个图像在 100–200 KB 以下
总邮件大小(包括图像)在 1 MB 以下
图像越小,加载速度越快,可投递性越好

文件格式

JPG — 最适合照片
PNG — 最适合图形、标志和带透明度的图像
GIF — 用于简单动画(保持文件大小小)
WebP — 在邮件中尚未广泛支持；避免使用

一般技巧

始终包含 alt 文本以提高可访问性,以及在图像无法加载时使用
使用内联 CSS 进行样式设置(许多客户端会剥离 <style> 标签)
避免背景图像(客户端支持不一致)
跨客户端测试 — Gmail、Outlook 和 Apple Mail 的渲染方式各不相同
Outlook 经常忽略图像尺寸,因此在 HTML 中设置 width 和 height 属性

链接

OneSignal 默认启用链接跟踪并支持多链接跟踪。

链接

配置邮件的链接跟踪、多链接跟踪和点击分析。

深度链接

通过邮件链接将收件人路由到应用中的特定页面。

取消订阅链接

所有营销邮件都必须包含取消订阅链接。没有取消订阅链接,收件箱提供商更可能将您的邮件标记为垃圾邮件。当收件人点击 OneSignal 默认取消订阅链接时,其邮件订阅将自动设置为已取消订阅。使用以下任一方式将 [unsubscribe_url] 标签添加到您的邮件中:

编辑器（特殊链接）
HTML 区块

选择您想要转换为取消订阅链接的文本。
点击工具栏中的链接图标。
选择特殊链接 > 取消订阅。

Adding the unsubscribe link using Special links in the editor

将以下内容粘贴到 HTML 区块中:

<a href="[unsubscribe_url]">Unsubscribe</a>

取消订阅链接

合规要求以及 OneSignal 如何处理取消订阅。

自定义取消订阅页面

用您自己的品牌页面替换默认取消订阅流程。

HTML 区块

当拖放内容区块无法满足您的需求时,请使用 HTML 区块:

深色模式覆盖 — 添加 prefers-color-scheme CSS。请参阅下方的深色模式样式。
自定义字体 — 声明带回退字体栈的 @font-face 规则。
高级布局 — 多列网格、条件内容或 Outlook 特定标记。

邮件不支持 JavaScript。使用内联 CSS — 许多客户端会剥离 <style> 标签、类和 ID。

个性化

使用 Liquid 模板插入订阅者专属内容,如姓名、标签或回退值。示例: {{ first_name | default: "there" }}

Using Liquid templating to personalize messages

消息个性化

可用的个性化变量及其使用方法。

使用 Liquid 语法

条件语句、过滤器、循环和高级 Liquid 模式。

深色模式

大多数邮件在深色模式下无需更改即可正常渲染。但是,包含品牌颜色、白色背景上的标志或彩色区块的邮件通常需要调整。

我是否需要深色模式样式?

如果您的邮件包含以下任何内容,请添加深色模式覆盖:

品牌彩色区块 — 饱和色在深色模式下会变得刺眼,影响可读性
白色/浅色背景上的标志或图标 — 背景可能反转而图像保持浅色,导致不可见
彩色背景上的文字 — 反转的背景可能与未反转的文字颜色冲突
行动号召按钮 — 按钮背景可能反转为意外的颜色

如果您的邮件主要是文本且样式极少,默认渲染通常是可接受的。

在编辑器中预览深色模式

使用预览模式按钮获取深色模式渲染的大致预览。此预览仅为近似值——实际渲染因收件箱提供商而异(请参阅下方的客户端行为表)。

Preview mode in the Drag and Drop Editor

Light and dark mode toggle in the Drag and Drop Editor

邮件客户端如何处理深色模式

每个邮件客户端对深色模式的处理方式不同。您无法直接控制此行为,但可以设计在所有模式下都能良好渲染的邮件。

客户端	行为	是否支持 `prefers-color-scheme` CSS?
Apple Mail (iOS/macOS)	完全颜色反转	是
Gmail (iOS/Android 应用)	部分反转 — 更改浅色背景但不更改所有颜色	否
Gmail (网页版)	无深色模式渲染	不适用
Outlook (Windows)	使用 Word 渲染引擎完全反转	否 — 忽略大多数 CSS 覆盖
Outlook (Mac/iOS)	部分反转	是
Yahoo Mail	部分反转	否
Samsung Mail	完全反转	否

需要注意的常见深色模式问题:

标志消失 — 透明 PNG 上的深色标志在深色背景上会变得不可见。添加白色或浅色轮廓,或使用带内置浅色背景的版本。
文字不可读 — 浅色背景上的深色文字在背景反转后可能仍保持深色。始终将文字颜色覆盖与背景覆盖配对使用。
品牌色冲突 — 在白色背景上效果很好的饱和品牌色在深色背景上会变得刺眼。测试去饱和或柔和的替代色。
按钮不可见 — 品牌色背景上带深色文字的 CTA 按钮在部分反转后可能失去对比度。

设计技巧:

避免纯白 (#FFFFFF) 和纯黑 (#000000)。使用近白色和深灰色以减少完全反转客户端的影响。
谨慎使用透明 PNG。它们与任何背景都能很好融合,但深色 logo 在透明背景上在深色模式下会变得不可见。为 logo 添加浅色轮廓,或使用带有内置背景的版本。
对于包含文字的图像,为深色文字添加白色轮廓以确保可读性。对于深色背景上的白色文字,添加黑色轮廓。

使用拖放功能进行深色模式样式设置

如果只有少数元素在深色模式下渲染效果不佳,您可以将它们替换为 HTML 区块,并使用 CSS 类和 !important 声明直接覆盖样式。

在邮件顶部添加 HTML 区块

将一个 HTML 区块拖到邮件的第一行。

Adding an HTML block to the top of your email

添加深色模式 CSS

将以下内容粘贴到 HTML 区块中。prefers-color-scheme: dark 媒体查询仅在收件人的邮件客户端处于深色模式时应用样式。

HTML block

<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>

将有问题的内容替换为 HTML 区块

将在深色模式下渲染不正确的内容区块替换为使用上面定义的 CSS 类的 HTML 区块。

<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>

返回预览模式以验证深色模式样式是否正确应用。

保存您的工作

将您的邮件设计保存为模板以供将来使用。

常见问题

如何添加自定义取消订阅链接?

将默认的 [unsubscribe_url] 替换为您自己的 URL。当收件人取消订阅时,您有责任更新 OneSignal 中的邮件订阅状态。有关设置详情,请参阅创建自定义取消订阅页面。

为什么我的邮件在 Outlook 中看起来不同?

Windows 版 Outlook 使用 Microsoft Word 渲染引擎,不支持现代 CSS。常见问题包括忽略 max-width、折叠的背景图像和缺失的网络字体。请专门在 Outlook 中测试,并在图像上使用带明确 width 和 height 属性的内联 CSS。

邮件的最大大小是多少?

保持总邮件大小(HTML + 图像)在 1 MB 以下。HTML 超过 102 KB 的邮件会被 Gmail 截断,将折叠以下的内容隐藏在”查看完整邮件”链接后面。优化图像并删除未使用的代码以保持在此阈值以下。

我可以在多个活动中重复使用邮件的某些部分吗?

可以。点击行上的保存图标将任意行保存为保存的行。保存的行显示在行 > 我保存的行下,可以拖入任何邮件。如需完整邮件重用,请将整个设计保存为模板。

如何在发送前预览我的邮件?

使用顶部工具栏中的预览按钮查看您的邮件在桌面和移动端的渲染效果。要发送实时测试,请点击发送测试邮件并输入收件人地址。测试邮件将发送到收件箱,以便您在实际邮件客户端中验证渲染、链接和个性化效果。

邮件中可以使用表情符号吗?

可以,但在不同邮件客户端中渲染效果不同。Windows 版 Outlook 最不一致——表情符号可能显示为黑白轮廓或方框。如果表情符号是主题行或 CTA 文字的一部分,请在发送前跨客户端测试。

如何导入现有的 HTML 邮件模板?

您可以通过三种方式将现有 HTML 模板导入 OneSignal:

使用邮件模板转发将邮件转发给 OneSignal
使用创建模板 API 以编程方式上传 HTML
将您的 HTML 直接复制粘贴到 HTML 编辑器

邮件概述

使用 OneSignal 发送邮件的端到端指南。

使用 HTML 设计邮件

完整 HTML 控制、深色模式覆盖和高级样式。

邮件模板

跨活动保存和重用邮件设计。

取消订阅链接

添加默认或自定义取消订阅链接以确保合规。

消息个性化

使用标签、Liquid 语法和动态内容个性化邮件。

AB 测试

测试主题行、内容和发送时间以优化互动效果。

开始使用和设置

消息渠道

旅程

受众和自定义事件

分析和集成

隐私和安全

​概述

​推荐构建流程

​设置

​行

​保存的行

​行属性

​内容

​自定义字体

​图像和视频

​邮件推荐图像尺寸

​链接

链接

深度链接

​取消订阅链接

取消订阅链接

自定义取消订阅页面

​HTML 区块

​个性化

消息个性化

使用 Liquid 语法

​深色模式

​我是否需要深色模式样式?

​在编辑器中预览深色模式

​邮件客户端如何处理深色模式

​使用拖放功能进行深色模式样式设置

​保存您的工作

​常见问题

​如何添加自定义取消订阅链接?

​为什么我的邮件在 Outlook 中看起来不同?

​邮件的最大大小是多少?

​我可以在多个活动中重复使用邮件的某些部分吗?

​如何在发送前预览我的邮件?

​邮件中可以使用表情符号吗?

​如何导入现有的 HTML 邮件模板?

​相关页面

邮件概述

使用 HTML 设计邮件

邮件模板

取消订阅链接

消息个性化

AB 测试

概述

推荐构建流程

设置

行

保存的行

行属性

内容

自定义字体

图像和视频

邮件推荐图像尺寸

链接

取消订阅链接

HTML 区块

个性化

深色模式

我是否需要深色模式样式?

在编辑器中预览深色模式

邮件客户端如何处理深色模式

使用拖放功能进行深色模式样式设置

保存您的工作

常见问题

如何添加自定义取消订阅链接?

为什么我的邮件在 Outlook 中看起来不同?

邮件的最大大小是多少?

我可以在多个活动中重复使用邮件的某些部分吗?

如何在发送前预览我的邮件?

邮件中可以使用表情符号吗?

如何导入现有的 HTML 邮件模板?

相关页面