White Label 品牌素材最佳实践指南

White Label Lite 分别提供浅色徽标、深色徽标、网站图标、主色和强调色字段。本指南帮助您准备清晰的品牌素材包，使用表单接受的文件，并在客户看到之前测试效果。

上传徽标

共有两项徽标上传：用于浅色背景的浅色徽标和用于深色背景的深色徽标。如果两者都有，请全部上传，然后使用 Branding 预览检查每个徽标在对应主题中是否清晰可读。

支持的文件类型：

• **PNG：**最适合透明效果，建议在大多数场景使用。
• **JPG / JPEG：**适用于纯色背景徽标，不支持透明效果。
• **SVG：**目前不支持，因为我们正在研究如何安全呈现嵌入式脚本。

**最大文件大小：**每次上传 1 MB。如果文件更大，请通过 TinyPNG 或 pngquant 压缩。常见徽标通常可压缩至 50 KB 以下，而不会出现肉眼可见的质量损失。

**建议源文件尺寸：**请使用清晰且分辨率较高的源文件，不要使用很小的图标。正方形或接近正方形的徽标是稳妥起点；较宽的文字标志也可以，但要确保在预览中仍可辨认。

背景：

• 强烈建议使用透明 PNG。控制面板背景和品牌事务邮件的页眉色带可能并非纯白色，徽标上带有生硬边缘的彩色背景会显得不协调。
• 如果徽标是字母组合或图标，透明效果可让它在任何背景上自然呈现。
• 如果徽标自带固定彩色背景，请使其与控制面板所选的主色或强调色一致。

网站图标

网站图标有独立上传字段，不会从徽标自动生成。请使用简单的正方形图标，格式为 PNG、JPG 或 ICO，最大 1 MB。在浏览器标签页尺寸下，字母组合或符号通常比完整文字标志效果更好。

网站图标应保持正方形。完整文字标志请使用浅色和深色徽标字段，不要使用网站图标字段。

选择颜色

两个颜色字段分别是：

• **主色：**用于按钮、链接和活动状态的主要颜色。
• **强调色：**用于突出显示的辅助颜色。

请输入十六进制颜色值，例如 #3b82f6。保存前使用实时预览查看效果。

选择主色

主色是访客最常看到的颜色。请注意三点：

• **在浅色和深色背景上测试。**控制面板支持两种主题。在白色上醒目的颜色可能会消失在深色背景中。
• **保持状态颜色易于识别。**避免主品牌色与警告、成功或破坏性操作的颜色过于相似。清晰的蓝色、紫色、蓝绿色、炭灰色或其他独特品牌色通常更易阅读。
• **中等饱和度的纯色优于接近白色或黑色的颜色。**可以这样测试：该颜色作为按钮时，在白色背景上是否足够醒目？如果答案是“几乎看不出”，说明它太浅了。

选择强调色

强调色用于辅助主色，应当：

• 与主色有明显区别，不要使用两个近似蓝色
• 补充主色，而不是与它竞争
• 放在主色旁边时依然清晰

一种有效搭配是：主色采用深沉、饱和的品牌色，强调色采用更浅的互补色。例如主色为 #2563eb (indigo-600)，强调色为 #10b981 (emerald-500)。

对比度与无障碍体验

界面可能在主色上显示浅色文字。请选择能让按钮标签保持可读的色调。很浅的粉彩色在色样中可能很漂亮，但用在真正的按钮上会失去对比度。

可以使用 WebAIM 对比度检查器检查文字与背景组合。最终仍应通过预览确认，因为周围的界面也会影响颜色观感。

通常有效的颜色包括深蓝、深紫、炭灰、深蓝绿和深栗色。经常失效的颜色包括浅粉彩、中灰、中黄和霓虹色。

显示名称

显示名称会出现在品牌控制面板、Webmail 和支持的邮件界面中。以下三种命名方式效果良好：

• **“您的品牌 Email”：**明确表示这是邮件服务。专业，适合销售邮件服务的经销商。
• **“您的品牌”：**只使用品牌名称。更加简洁，适合邮件属于更大产品套件的情况。
• **“您的品牌 Dashboard”：**强调使用界面。如果有多个品牌产品并希望清晰区分，此方式很实用。

名称应简短到一眼就能识别。请在窄屏和两种主题中检查预览，而不是只依赖字符数规则。

显示名称会出现在：

• 控制面板和 Webmail 导航
• 品牌登录页和浏览器标题
• 支持的事务邮件界面

保存前检查

点击 Save changes 前，请确认每个文件小于 1 MB，浅色和深色徽标在对应预览中清晰可读，网站图标是简单的正方形图标，主色具有足够对比度，且显示名称用作发件人名称时自然得体。

保存后，在浏览器隐私窗口中打开有效的品牌主机。这样可避免把缓存的图片或网站图标误认为当前版本。

简单的素材准备流程

1. 从原始徽标文件开始，不要使用截图或从网站复制的文件。
2. 分别导出适用于浅色背景和深色背景的版本。
3. 使用标志中最容易识别的部分制作单独的正方形网站图标。
4. 在 Branding 中添加品牌名称和颜色，然后比较邮件与 Webmail 预览。
5. 保存，在手机和桌面浏览器上测试有效主机，并将源文件存放在团队今后可更新的位置。

日后更新

以后可更新品牌素材，而无需替换现有品牌主机的 DNS 记录。每次视觉变更后都要重新检查有效主机。

如果上传了错误素材或选择了难以阅读的颜色，请在 Branding 中更正并再次保存。验证替换效果时，请考虑浏览器的正常缓存。

使用 API 和 MCP 自动化

如果集成拥有所需权限，REST API 或 MCP 可以管理品牌设置和素材。同样适用上述文件类型和 1 MB 限制。请使用控制面板和预览完成最终视觉检查。

支持的操作请参阅 White Label Branding API 和 MCP 指南。

常见情况

“徽标在侧栏中看起来正常，但在手机上很模糊。” 上传更清晰、分辨率更高的源文件，保存后在手机上测试有效品牌主机。不要只依赖桌面浏览器预览。

“主色在控制面板中效果不错，但按钮文字难以阅读。” 选择更深或更饱和的色调，然后在预览和有效主机上检查。

“徽标的彩色背景与控制面板不匹配。” 如果徽标允许，请导出透明 PNG 版本。将浅色和深色版本放在各自预期背景上比较。

“邮件和控制面板可以使用不同徽标吗？” 请使用 Branding 提供的浅色和深色徽标变体。在承诺具体外观前，测试支持的邮件预览和客户使用的有效界面。

“深色模式怎么办？” 控制面板支持浅色和深色主题，并可分别上传徽标。浅色徽标显示在浅色背景上，深色徽标显示在深色背景上，因此可以在浅色背景使用深色图案，在深色背景使用白色或浅色徽标，两者都能清晰阅读。

“可以单独上传网站图标吗？” 可以。网站图标有独立上传字段（PNG、JPG 或 ICO，最大 1 MB），不会从徽标生成。请为浏览器标签页上传简单、独特的图标。

后续步骤

• 设置 White Label Lite：激活和 DNS 设置。
• 哪些内容仍保留 TrekMail 品牌：客户可能仍会看到哪些 TrekMail 元素。
• White Label Lite 价格常见问题：账单和币种问题。
• White Label Branding API 和 MCP 指南：通过 REST 或 MCP 上传徽标和设置品牌。