准确的电话号码和 WhatsApp 号码提供商。 如果您想要电子邮件营销活动列表或短信营销活动,那么您可以联系我们的团队。 @xhie1

电子邮件中带有深色主题的案例

邮件服务正在更改电子邮件代码,以使设计适应深色主题。他们的算法如何工作尚不清楚。你只能观察实践中发生的情况并得出结论。

我们不断为 Google、Yandex、Mail、Yahoo、Outlook 365 工作(并调整电子邮件),并在这些电子邮件服务中确定了一些调整模式。

在本文中,我们将展示使用深色主题的示例以及最终如何创建在深色和浅色主题中精美显示的电子邮件的解决方案。

字母元素-透明背景上

当足以为所有元素制作透明背景时,这是一个简单的选择。
当元素的背景为白色(左)时会发生什么。如果你让它透明会发生什么(右)
如果透明背景上的图 图书馆商店 片在深色主题中难以阅读,请将颜色保留为部分。
在底部图标的左侧,仅可见一个信封。我们制作了白色背衬 – 现在两者都可见(右)
对于详细的图片和图标,有时无法避免空白。
在左图中,图标在没有背景的情况下清晰易读。在该示例中,中间有许多细线;如果没有背衬,它们将不可见。右图中的细节太多——如果你把盘子拿掉,它们就会看起来分散,完整性就会丧失
背景是在半透明背景上制作的:它在浅色主题中不可见(它变成白色),但在深色主题中可见。
图书馆商店
订阅 telegram 频道+1 电子邮件创意 – 仅限简洁材料

文本、标题和徽标中的突出显示和描边

背光是突出显示深色图像的好方法:图标、图片、徽标和品牌文本字体。
在左侧,徽标在深色背景中消失。右侧 – 徽标突出显示并开始播放
并不总是需要背光。如果徽标是浅色(或彩色)版本,您可以使用它而不突出显示它。
左侧,徽标的浅色版本在没有背光的情况下看起来很棒。在右侧的示例中,徽标使用两种颜色 – 在这种情况下,值得查看不同的选项(带背光和不带背光)以选择最佳颜色
有时,深色主题中的图标也需要轮廓。如果在浅色主题中,图标位于彩色板上,请为它们提供浅色背景。否则,在经典主题中,笔画会很明显。
在左侧,一些图标元素很难看到。我们在右侧添加了一笔,现在一切都清晰可见
与图片一起打印的品牌文本必须有轮廓或突出显示
左侧是白色背景上的图片和标题。右侧是透明背光背景上的图片和文

许多公司使用品牌字体。但大多数邮件程序不会渲染它们,而是用安全的网络字体替换它们,因此,这封信看起来与设计布局完全不同,并且可能会“散开”。

为了防止这种情况发生,我们用带有图片的 这些应用程序不仅仅是销售产品的平台 品牌文本剪切文本,但对于深色主题,我们需要使用轻描边。笔画的问题在于,有时它在经典主题中也可见。

解决方案:选择类似的标准字体而不是专有字体。这将使您不必在笔画上浪费时间,也不会冒轻主题设计的风险,因为文本会自动适应

左边是一个带有公司字体(深色)的示例,它需要突出显示,但它在信件的常规主题行中是可见的。在右侧 – 我们选择了完美适应的类似标准字体。
动画就像图片一样适应。
从左到右:透明背景、白色背景和实心图像
GIF:静态图片和动画

一封电子邮件包含一个包含静态和动态部分的 GIF。为了使其在黑暗主题中看起来不错,我们使用了一种不寻常的方法来剪切图像。

我们将 gif 分为几个组成部分:静态线条和动画轮播。该线条被突出显示,并且 gif 被剪切在透明背景上。

GIF 在深色和浅色主题下看起来都很漂亮且无缝
反向黑暗主题
我们立即将这封信制作在黑色背景上。看来,会出什么问题呢? iOS 上的 Gmail 应用程序中的深色主题会反转所有颜色,因此深色主题中最初的深色邮件会变成浅色。
左边是一封浅色主题的字母(正如我们计划的那样)。右边是黑暗主题对他的影响。
解决办法:把文字剪成图片,这样白色的文字就不会反成黑色,在整个字母的下面(除了页脚)放一张黑色的背景图片。
修正后的结果现在很漂亮,而且是深色主题
适应彩色基材的不均匀边缘

彩色基材的光滑和波浪形边缘看起来很 ZNB 目录 漂亮,但在深色主题中会带来困难:基材必须切割成图片,但切割时它们总是呈矩形;无法用波浪切割它们。

因此,您需要用两个矩形进行剪切,但在深色主题中,图片的颜色会变为相反。结果看起来像中间的屏幕截图。

左侧是以浅色主题显示字母。中间是一个没有任何技巧的黑暗主题。右边 – 我们找到了解决方法

解决方案:将波浪设为半透明。因此它在深色背景下呈现出深色。

还可以做得更好:在块之间的文本下方放置一个半透明的背景图像,以便深色主题中的颜色完美匹配。但不幸的是,在紧迫的期限下,有时根本没有时间考虑更好的解决方案。

文本、图像和按钮的反转
当字母使用带有图片的背景时,您必须记住,此类彩色背景上的深色文本将自动转换为浅色。
左边是一封浅色主题的字母,文字是黑色的。在深色主题(左)中,文本颜色反转并且变得不可读
如果您用图片覆盖两个元素并将它们放在彼此的顶部,则可以在深色主题中留下带有黑色文本的浅色图片。或者用图片剪下整个横幅。
  • 莱西亚
    布局设计师收件箱营销

    “现在模具的情况相当模糊。 Yandex 移动应用程序。邮局已经“学会”识别代码中的空白,但到目前为止还不够成功——这种情况时不时地发生。

    我认为,此类区块的最佳解决方案是为区块本身设置高度的透明度。如果字母本身的背景最初是白色的,那么这不会以任何方式影响它们的外观,但它将有助于解决黑暗主题问题。”

在字母本身或其一部分最初设置为浅色文本颜色的情况下,通常它保持不变。这种字母或块的背景颜色有时也保持不变。但实际上并没有完全可预测的选择。
左边是一封浅色主题的字母。右边是一封深色主题的字母。块的粉红色变成了深红色,但由于某种原因,相同颜色的按钮上的文本没有改变
而这里,由于某种原因,只有“新年”线的颜色发生了变化
测试字母显示
并收集解决方案

在黑暗主题中调整电子邮件的解决方案需要反复试验,只有测试才能帮助您找到最佳选择。请阅读我们关于在何处以及如何测试字母显示的文章。

根据测试结果,收集成功的解决方案并将其放在手边 – 这可以节省时间。以下是关于黑暗主题的一些最后提示。

1
在透明背景上剪下所有图像(徽标、图标、小图画、背景元素)。如果由于某种原因这是不可能的,设计师应该提前对图像进行构图,以便在黑暗主题中一切看起来都尽可能有机。
深色徽标、非标准字体标题、图标和其他深色元素应辅以白色发光或浅色背景颜色。

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注