邮件设计使用场景
- 单产品发布让一个产品、一种配色和一个操作成为视觉焦点。
- 鞋履营销活动将产品轮廓与一组简短规格结合起来。
- 邮件艺术指导在准备制作邮件之前，探索窄幅阅读顺序。
发布邮件亮点
- 由配色主导的插图Ember Flare 鞋款与橙色标题共享同一强调色。
- 一个购物操作深色按钮紧跟在产品名称和发布描述之后。
- 带单位的规格重量、后跟堆叠高度、后跟到前掌落差和缓震信息均保留标签。
逐区解析产品发布邮件
1 / 4
一双运动鞋，一条纵向阅读路径
SPORT TEST 是一个示例性鞋履品牌，这封 HTML 邮件介绍了其 Ember Flare 配色的 Axis Pro 运动鞋。设计没有以产品目录或一组相互竞争的产品网格开场，而是从紧凑的页眉移动到一幅大型产品插图、发布信息、购物操作、规格网格和简短的订阅页脚。
这封邮件的最大宽度为 680 像素。奶油色背景将图像、文本和技术细节连接起来，而不是把它们处理成彼此分离的促销卡片。窄幅画布为读者提供了可预期的自上而下路径。这也意味着超大标题必须经过有意设计的换行；较短的产品名称是这一构图能够成立的原因之一。
| 区块 | 可见内容 | 在发布中的作用 |
|---|---|---|
| 页眉 | SPORT TEST，以及 Shop、Journal 和 Members 链接。 | 在产品展示之前建立品牌认知。 |
| 插图 | 一双带有 Ember Flare 和 Drop 04 印记的橙色鞋子。 | 在读者看到产品名称之前介绍配色。 |
| 发布信息 | Meet the Axis Pro、描述性文案和一个深色购物按钮。 | 将产品身份、产品主张和预期的下一步操作结合起来。 |
| 规格 | 四项带标签的数值，位于一个小型品牌页脚上方。 | 在主要促销信息之后补充技术细节。 |
让配色引领艺术指导
这双鞋是矢量插图，而不是产品照片。橙色鞋面、浅色鞋底和深色轮廓置于温暖渐变背景上。可见的 Ember Flare 印记让配色成为产品故事的一部分。在其下方，Axis Pro 以橙色斜体呈现，位于一条其他文字均为深色大写的标题中，将同一强调色延续到发布信息里。
对于围绕一个易于识别的轮廓或表面处理展开的发布活动，这种方式很有用。插图可以被简化，而不会与繁杂环境争夺注意力；周围的奶油色也能避免长邮件变成一整块橙色。代价在于产品还原度：风格化矢量图可以暗示纹理和缓震，但无法验证实体鞋款的实际外观。
产品旁边的配色名称
Ember Flare 同时出现在插图和发布文案中。这让配色与信息建立联系，而不是只把橙色当作装饰使用。包含多个变体的活动需要同样明确地标示当前选定的变体。
尺度营造产品展示效果
鞋子占据了首屏的大部分区域，而小型印记留在边缘附近。这种对比让产品轮廓成为首先被注意到的元素。较长的促销标签会削弱这种平衡；周围的文本是经过有意压缩的。
从大标题到可量化细节
发布信息写着 “Meet the Axis Pro. A sneaker that runs.” 大号窄体大写字母将一句简短的话转化为一个具有分量的视觉区块。橙色斜体产品名称将发布对象与其余陈述区分开来。随后是一段较小的文字，用于给出示例定位信息，下面则是深色的 Shop the Axis Pro 按钮。
信息中只有一个醒目的购物操作。页眉链接要小得多，因此不会看起来像其他主要操作。对于单产品公告而言，这样的安排是合理的，不过真实活动仍然需要可用的目标地址，并且需要慎重决定邮件中是否确实应该包含导航。
| 显示数值 | 辅助标签 | 标签为何重要 |
|---|---|---|
| 7.4 OZ | 重量，女款 US 8 码。 | 单位和示例鞋码让重量主张具有可解释性。 |
| 34 MM | 后跟处的最大缓震堆叠高度。 | 位置说明将堆叠高度与下一项测量区分开来。 |
| 8 MM | 后跟到前掌落差。 | 同一单位描述的是另一种关系，而不是另一项堆叠高度。 |
| Gel-02 | 后跟和前掌凝胶缓震模块。 | 这是一个组件标识符，不是与其他数值处于同一尺度上的数字。 |
邮件设计，而非已投递的营销活动
这个 OpenDesign 示例展示了一个在浏览器中渲染的 HTML 邮件概念。产品规格、品牌地址和发布文案均为示例内容。购物、订阅和导航链接使用占位目标地址；未提供结账、邮件列表、投递服务或退订流程。
在窄视口下，源文件会隐藏页眉导航，并减少内边距和标题字号。这展示的是浏览器中的响应式处理，并不代表已经验证过与电子邮件客户端的兼容性。源文件使用现代 flex 和 grid 样式。在发送真实活动之前，请准备并测试兼容电子邮件的实现，确认产品主张，并将订阅链接连接到适当的服务。
如何在 OpenDesign 中创建产品发布邮件设计
明确一个产品和一个主要操作
从产品名称、配色、受众和预期操作开始。请提供你自己已验证的规格，不要保留示例性的 Axis Pro 数值。以下提示词是建议的复刻简报，并不表示原始生成会话中的实际内容。
建议提示词为我的鞋履品牌创建一个单产品发布邮件概念。使用窄幅 680px 奶油色画布、紧凑的品牌页眉、温暖色调的 4:3 产品插图、带配色强调色的超大窄体标题、一个主要购物按钮、四项带标签的规格，以及克制的订阅页脚。只使用我提供的产品事实。在手机上减少内边距和标题字号。在我提供真实目标地址之前，将购物和订阅链接视为占位符；不要声称兼容电子邮件客户端或已连接电商功能。
优化产品展示和标题
让产品轮廓在温暖背景上保持清晰可读，然后使用实际产品名称检查标题。较长的名称可能需要调整换行方式或降低夸张的字号。保持配色强调色可见，但不要将其应用到每个文本块。
检查标签、链接和窄幅布局
检查四项规格，确保单位和限定信息完整保留。检查手机布局，替换每一个占位目标地址，并验证订阅页脚。如果设计将以邮件形式发送，请将电子邮件客户端实现和测试作为独立的制作步骤处理。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
