大数跨境

如何为深色模式设计电子邮件

如何为深色模式设计电子邮件 电商实践
2022-12-05
2
导读:深色模式功能在网页和移动设备上日益流行。确保电子邮件在深色模式下正确渲染,对营销成功至关重要。

深色模式是一种反向配色方案,将屏幕浅色元素变为深色,反之亦然。目前该功能已覆盖大多数操作系统、应用程序及社交媒体网站。

深色模式在移动设备上的采用率高达82%,用户几乎在所有场景(包括邮件和短信)中都会使用。

深色模式已在大多数操作系统、应用程序和社交网站上提供。

深色模式的优势

  • 改善阅读体验:深色背景有效减少蓝光与屏幕眩光。
  • 夜间表现更佳:低光环境下,黑色背景能显著减轻眼睛疲劳。
  • 节省电池电量:最多可减少63%的能源消耗。
  • 提高可访问性:相比浅色模式,深色模式对视力障碍人士更友好。
  • 有益健康:有助于缓解眼干、偏头痛及紧张性头痛,并提升睡眠质量。

需要注意的是,深色模式在强光条件下可见度较低。虽然在弱光环境表现出色,但在阳光充足的户外,阅读文本可能更具挑战性。

设计技巧

深色模式应纳入电子邮件设计与开发的核心规划。渲染不佳的邮件不仅影响体验,还可能触发垃圾邮件过滤器,降低发件人声誉。以下是适配深色模式的关键要点:

  • 优先使用PNG图像:JPG虽加载快但清晰度有限且不支持透明;PNG虽文件较大,但定义清晰、质量高,且支持透明度,这对深色模式至关重要。

在深色模式电子邮件中使用 PNG 图像有助于确保清晰度和背景透明度。

  • 增加图像内边距:非透明图像应在裁剪区域周围保留适当内边距,以保持清晰可读。

确保非透明图像有足够的内边距,以保持清晰可读。

  • 添加轮廓或投影:为深色字母添加白色边框,使其在深色模式下更易辨识。

通过在文本上添加白色边框,使字母在深色模式下更加醒目。图片:Email on Acid。

  • 使用米白色替代纯白:许多客户端会自动反转纯黑(#000000)与纯白(#FFFFFF)。建议使用米白色(#FEFFFF),这种细微变化对人眼不易察觉,但能有效避免邮件服务商的剧烈颜色调整。
  • 限制颜色数量:颜色越多,变体越复杂,潜在问题也越多。

测试资源

Twitter上的#emailgeeks社区提供了丰富的深色模式测试工具,推荐如下:

  • WebAIM Contrast Checker:无障碍对比度检查器。
  • Invert Colors:实现颜色反转与互补色测试。
  • Proofjump:模拟深色模式效果。
  • Litmus:预览及渲染各邮件客户端显示效果。

移动端开启指南

Apple iOS:

  • 进入“设置” > “显示与亮度”。
  • 选择“深色”即可开启。

Android:

  • 打开“设置” > “辅助功能”。
  • 在“色彩与动态”下开启深色主题。

深色模式已成为主流趋势,务必将其纳入设计规范。通过频繁测试并接受渲染差异,不仅能优化用户体验,还能有效提升邮件打开率与点击率。

【声明】内容源于网络
0
0
电商实践
电商实践
内容 8051
粉丝 0
电商实践 电商实践
总阅读15.4k
粉丝0
内容8.1k