【第3168期】按钮设计的技巧

前言

在设计 B 端组件规范的时候可以参考。主要介绍了设计按钮时常见的问题和错误，以及如何设计用户友好且易于访问的按钮。设计按钮时需要注意颜色对比度、形状对比度和文本对比度，以满足无障碍要求。合理的按钮设计应具有清晰的视觉层次结构、大目标区域和足够的间距。今日前端早读课文章由 @ikoofe 翻译分享，公号：KooFE 前端团队授权。

正文从这开始～～

作为一名从业将近 20 年的设计师，我在许多项目中都使用过按钮，但从来没有花时间仔细考虑过按钮设计。直到最近，我才意识到自己在设计按钮时犯了一些常见错误（而且我不是唯一一个）。

当你拿出手机，打开几个应用程序并浏览一些內容，我敢打赌你会遇到很多按钮。我还敢打赌，其中许多按钮存在影响可用性和可访问性的问题。甚至有很多有问题的按钮，是出自经验丰富的设计师之手。所以我整理了一些实用的按钮设计技巧，以避免这些问题并设计更好用的按钮。

首先，我将介绍一些流行的按钮设计，并客观地使用设计原则来指出它们的问题。在这里我将摈弃所有主观因素，比如美学、“直觉” 或外观漂亮等。我也不会在这里介绍代码，因为我们可以先在设计方面做很多事情。最后，我将总结一些按钮设计技巧和最佳实践。

常见的按钮设计错误

对于大多数项目，都需要设计 3 个不同权重的按钮，用于来展示操作的重要性：主按（primary）、二级按钮（secondary）和三级按钮（tertiary）。在本文中，我们将按组来比较这三种权重的按钮。

接下来，我会重点指出一些常见的按钮设计问题。这些问题可能会对可用性造成潜在风险，因此如果可能的话，最好避免它们。我们的目标是至少达到 WCAG 2.0 AA 级无障碍要求，因为这是最常见的标准，也是一个很好的起点。

用户界面组件（如表单字段、按钮和选项卡）的颜色对比度至少需要 3:1。这样有助于视力障碍者区分不同的组件。那些无需区分的装饰性样式，可以具有较低的对比度。

在这个例子中，二级按钮的填充色与背景色的对比度小于 3:1，这对于视力障碍者来说太低了，让他们无法清晰地识别出按钮的形状。

有人可能会争辩说，二级按钮的填充是装饰性的，不需要具有 3:1 的对比度才能访问。但是，填充是将二级按钮识别为按钮所必需的。没有填充，它只是带有互动性但颜色为纯蓝色的文本。你可以为二级按钮添加高对比度边框来解决此问题。

第 2 组按钮样式存在以下问题：

• 二级按钮的颜色较浅，可能会被误认为不可用或处于禁用状态。为了减少潜在的混淆，最好避免使用浅灰色按钮。

• 二级按钮文本对比度小于所需的 4.5:1，因此对于某些人来说难以阅读。

• 二级按钮边框也小于所需的 3:1 比例。

为了让更广泛的受众能够阅读较小的文本（18px 及以下），它应该具有至少 4.5:1 的颜色对比度。此示例中的按钮样式存在以下问题：

• 由于主按钮和二级按钮比较相似，导致它们会发生冲突。这样会混淆了视觉层次结构，使其不清楚哪个更重要。

• 由于两个按钮具有相同的样式，因此唯一的区别方式是通过它们的颜色。这意味着色盲的人可能无法区分它们。

• 按钮之间的对比度也小于所需的 3:1。这意味着视力受损的人可能无法清楚地区分它们。

这些按钮样式与上一个示例存在类似的问题：

• 由于样式相似且缺乏对比度，主按钮和二级按钮会发生冲突。

• 二级按钮文本对比度太低，应至少为 4.5:1，以确保其可访问性。

这些按钮样式对于视力障碍者来说过于相似，难以区分。按钮之间的对比度是唯一能区分它们的方式，但它太低了（对比度至少需要 3:1）。按钮应该有一个清晰的视觉层次结构，不能仅仅依赖于颜色。

这些按钮样式与上面的示例存在类似的问题：

• 按钮样式在对比度和样式上过于相似，视力受损的人无法区分它们。

• 三级按钮边框的对比度必须至少为 3:1，才能使其可访问并清楚地将其识别为交互元素。

在可访问性方面，我们不能仅仅依赖颜色来区分界面元素。这会导致那些色盲的人无法区分出元素。

在这个例子中，三级按钮是不可访问的，因为颜色是它唯一的交互性指示。这意味着色盲的人可能无法将其与纯文本区分开来。

在某些情况下，三级按钮与其他按钮的上下文、位置和接近程度可能有助于将其与纯文本区分开来，但仍然存在可能造成混淆的风险。

界面设计的每一个细节都应该有一个合理的目的。为什么示例 8 中的主按钮和二级按钮形状不同？是它们的功能不同吗？功能相同的元素应该看起来相同。避免不一致的按钮形状，因为它们可能会造成混淆。

视觉层次是我们传达界面元素相对重要性的方式。设计 3 种按钮样式的目的是为了区分操作的重要性。这样有助于用户做出决策。在该示例中的按钮样式存在以下问题：

• 由于主按钮和二级按钮具有相似的视觉重量或突出性，因此视觉层次不明确。

• 二级按钮背景对比度小于 3:1，这对于视力障碍者来说太低了，无法清晰地指示按钮的形状。

按钮的设计技巧

基于前面错误的按钮设计，这里总结了一些实用的设计技巧，可帮助大家设计出用户友好且易于访问的按钮：

• 按钮应该有一个清晰的视觉层次结构，不能仅仅依赖于颜色。

• 按钮形状的对比度必须至少为 3:1，以确保视力受损的人可以将其识别为交互元素。

• 按钮文本对比度必须至少为 4.5:1，以满足 WCAG 2.1 AA 级无障碍要求。

• 如果按钮具有相同的样式，则它们之间的对比度必须至少为 3:1，以确保视力受损的人可以区分它们。

• 使用较大的目标区域（至少 48pt x 48pt）以确保人们可以轻松选择按钮。

• 确保按钮之间有足够的空间，以免人们误选错误的按钮。我通常使用 16pt 来作为安全距离。

安全的按钮设计

以下按钮样式是熟悉的、易于访问的，并且具有清晰的视觉层次结构，而不仅仅依赖于颜色。

你可能已经注意到，三级按钮看起来与文本链接完全相同，但这真的是一个问题吗？传统上，文本链接被设计为指向某个地方，而按钮被设计为执行某个动作。如今，许多人并不了解这种交互模式，当然也不会在心理上产生期望的交互，所以我认为我们不需要坚持它。

在下面的 banner 示例中，链接用于将人们带到另一个页面。但问题是链接不够突出，无法表明它们是页面上最重要的操作。

将链接更改为按钮样式有助于使它们更加突出，并形成更清晰的视觉层次结构。这些按钮把大家带到某个地方而不是执行某个操作，这对于用户来说并不是很重要。

在下面的消息对话框示例中，我们可以看到我们的 3 种按钮样式在起作用。即使三级按钮看起来像一个链接，但在这种情况下，很明显，点击它将执行一个动作而不是将你带到另一个页面。不难发现，链接和按钮之间的界限再次变得模糊。

只需确保将按钮编码为按钮，将链接编码为链接，无须关心它们的外观如何。这有助于我们避免屏幕阅读器的可访问性问题。

当然，这里的按钮样式并不是设计按钮的唯一方式，但它们没有上述许多可用性和可访问性风险，因此是一个相当安全的设计。

关于本文
译者：@ikoofe
译文：https://mp.weixin.qq.com/s/Ot0haBhgFMGPGOdrtzOGbg
作者：@Adham Dannaway
原文：https://www.adhamdannaway.com/blog/ui-design/button-design-tips

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。