创建一个有组织且可扫描的层次结构

Explore workouts, and achieving AB Data
Post Reply
badabunsebl25
Posts: 703
Joined: Tue Jan 07, 2025 6:13 am

创建一个有组织且可扫描的层次结构

Post by badabunsebl25 »

实时文本也可搜索,这意味着订阅者可以找到他们记得你上周发送的新闻通讯或促销代码。电子邮件的 SEO是一件好事!

最后,使用真实文本而不是将其锁定在图像中,可以让您通过动态内容个性化消息。


认知障碍和情境障碍(例如匆忙或分心)都会使人们难以阅读和理解长而统一的文本块。层次结构(或创建强调重要性的视觉差异)可帮助这些用户快速浏览电子邮件中的内容。

通过使用较大的文本尺寸、易读的颜色和战略性布局,您可以创建易于扫描和阅读的电子邮件。尝试在较小的副本部分上方创建粗体、高对比度的标题,并在各部分之间留出足够的空白,以避免内容混在一起。


将电子邮件副本左对齐
使用真实文本和层次结构可以提高可读性,但副本的对齐也会影响电子邮件的可读性。

阅读依靠视觉线索来判断我们在页面或屏幕上的位置。最重要的线 台湾电话号码大全 索之一是新行的开始,当我们在电子邮件中跳转时,新行的开始可以作为我们眼睛的锚点。如果你将文本居中,眼睛和大脑就必须找到新行的开始位置,这会让阅读变得费力和混乱。

对齐文本会增加单词和字符之间的间距,以创建统一的文本块。虽然乍一看这种对称性很好,而且行首也一致,但它会带来其他可访问性问题。如果用户使用屏幕放大镜或放大屏幕以方便阅读,他们就必须理解单词之间的随机空格(或挤压)。

如果您只有一两行文本,居中文本是可以的。不过,您需要考虑文本的位置如何随着屏幕尺寸或缩放而变化。

如果您有超过几行文字,请选择左对齐文本。这是最容易理解的选项,而且看起来更自然、更舒服。

复制显示了如何将副本左对齐、居中和对齐。 使用最小 14px 的字体大小
“这是什么,给蚂蚁发的电子邮件!?”

小字体会使您的设计变得令人讨厌甚至完全无法阅读。幸运的是,这很容易解决。某些移动设备(如 iPhone)会自动放大小于 14px 的文本。将字体设置为至少 14px(最好更大)有助于创造更好的阅读体验。请记住,辅助缩放设备或屏幕放大镜可能会更改您的字体在电子邮件中的位置。

您还需要注意选择的字体。网页安全字体是更可靠的选择,其中包括最易用的字体,如 Arial 和 Helvetica。如果网页安全字体破坏了您的氛围,您可以尝试使用网页字体,但当网页字体不受支持时,您需要一种后备字体。

让每封电子邮件对每个人都有价值

了解如何设计、编写和编码包容性强且所有订阅者均可访问的电子邮件。

获取电子书

优化行距
文本的可读性也以非常恰当的方式取决于行距。

当文案行距太近时,很难区分它们。相反,当它们相距太远时,很难知道下一行在哪里,因为它们看起来都像短小的独立段落。

万维网联盟甚至针对适当的行距制定了明确的可访问性指南,建议 1.5 到 2 倍行距优于单倍行距。


保持高对比度
对比度是电子邮件中两个元素之间的差异。通常,它是副本颜色与其所处背景颜色之间的差异。对比度太低,视力较差的人阅读电子邮件会非常困难。

幸运的是,有完善的正确对比度指南。Web 内容可访问性指南明确定义了如何确定适当的对比度。主要规则是使元素可区分。用他们的话说,“让用户更容易看到和听到数字内容,包括将前景与背景分开。”

有多种方法可以实现这一点,包括使用颜色、字体粗细和字体大小。无论使用哪种方法,请确保您的元素与周围的元素形成足够的对比,以便您的电子邮件设计易于理解。

提示:无障碍组织 WebAIM 甚至有一个免费的在线对比度检查器,可以帮助您在订阅者之前发现任何无障碍问题。在下面的示例中,CTA 按钮上的对比度通过了 WebAIM 测试,但蓝色背景上的棕褐色标题没有通过。

电子邮件中一个很好的 CTA 示例是“购买新泳装”来购买夏季泳装。

平衡背景图片和文字的大小

背景图像是许多电子邮件设计中必不可少的元素,我们已经讨论过在背景图像上方而不是背景图像中使用实时文本。不过,还需要考虑平衡文本量和图像大小。Sarah Gallardo 指出: “使用缩放工具作为辅助技术的用户可以将文本大小增加到 200% 或 300%,因此我们需要一个可以在文本增加这么多时包含该文本的背景图像。”

“使用缩放工具作为辅助技术的用户可以将文本大小增加到 200% 或 300%,因此我们需要一个可以在文本增加这么多时包含该文本的背景图像。”

Sarah Gallardo,Oracle Digital Agency 首席电子邮件开发人员和电子邮件可访问性专家
使按钮易于查看、理解和点击
按钮——您的行动号召。这是您希望每个读者都会采取的步骤。这很重要,对吧?设计中的可访问性对于像按钮一样重要的元素至关重要。

您的按钮需要描述性文字和高对比度,原因与其他设计相同。

在设计时考虑到色盲人士的可访问性也意味着您不能依赖颜色来传达含义,例如绿色表示积极,红色表示消极。虽然您仍然可以使用这些颜色,但一定要添加符号或文字,以便每个人都能理解其含义。

可访问按钮还应足够大,以便即使是最大、最抖动的拇指或指点设备也能点击。并确保这些目标周围有足够的空白,以免用户意外点击链接并避免沮丧。


为链接添加对比和悬停效果
文本链接需要与周围文本区分开来——这就是为什么链接的默认样式是带下划线的蓝色文本。覆盖该样式时,应谨慎使用。尤其是下划线,它是一种视觉指示,表明电子邮件中有链接。世界上大约有 3 亿色盲人士,因此仅依靠颜色来设计链接样式会让他们陷入困境。

在链接和按钮等交互元素上添加悬停状态是创造更好、更易访问的用户体验的另一种好方法。

UX Movement 的 Anthony 在他的文章《为什么您的链接需要悬停效果》中很好地总结了这一点, “无论您的用户是否是色盲,每个人都应该能够轻松识别和定位链接。为链接添加悬停效果是一种满足他们需求的简单有效的方法。链接和文本不应该只是看起来不同。为了获得最佳用户体验,它们的行为也应该不同。”
Post Reply