HTML 预览

六层预览,比一张桌面截图更可靠

发布于 2026 年 8 月。先核对列表与事实,再检查布局、链接、图片和纯文本回退,避免视觉通过掩盖功能错误。

第一层:收件列表

主题、发件人和预标题决定用户是否打开邮件。检查主题是否被环境前缀挤压、发件名是否可信,以及预标题是否泄露模板占位或重复正文第一句。

测试主题加入唯一编号,确认列表里打开的是当前版本。若真实邮件已经到达,演示占位不应继续混在列表中。

第二层:信头与品牌

关闭图片或假设远端图片失败,品牌与邮件类型仍应可辨认。标志应有替代信息,背景和正文不能只靠图片形成对比。

信头高度在窄屏不能占去大半阅读区。品牌名称、通知类型与发件域名应彼此一致,不要用视觉标识掩盖可疑来源。

第三层:正文顺序

先读标题、关键事实、行动和补充说明,顺序应当自然。验证码、金额、日期或设备位置等重要值不能埋在装饰性模块中。

用 390px 左右的阅读区观察换行,确认表格、长 URL、订单号不会撑破容器。正文即使放大文字,也应保持逻辑顺序。

第四层:行动按钮

按钮文案说明点击结果,而不是泛写“点击这里”。复制真实 href,核对域名、协议、环境和必要参数,不以按钮外观推断链接正确。

主次行动要清楚,按钮禁用或链接过期时应有可恢复反馈。邮件里不应伪造系统按钮或诱导用户提交秘密。

第五层:图片和长内容

图片需要最大宽度约束和有意义的替代文本。装饰图片可以留空替代值,但承载订单、验证码或步骤的信息不能只存在于图片。

长单词、追踪链接和连续编号允许换行,不能把整页撑横。大附件与远端媒体还要按产品容量规则单独验证。

第六层:纯文本回退

纯文本版本应包含主题事实、主要行动的完整 URL、支持信息与必要法律说明。它不是把 HTML 标签剥掉后的乱码。

按阅读顺序检查空行、列表和链接位置。即使客户端不显示 HTML,用户仍应能理解发生了什么并完成关键操作。

形成可复现结论

记录模板版本、发送任务、地址、到达时间、客户端宽度和实际链接。每次修复只改变必要变量,再发送带新编号的样本。

通过标准应同时覆盖事实一致、可读、可操作与回退完整。桌面截图好看只是其中一项,不应替代完整结论。

打开隔离预览

使用临时收件箱接收新版本,并在真实正文框中检查布局。