超全总结！「不可用按钮」完全设计指南

编者按：Disabled Buttons 通常被称为「禁用按钮」或者「不可用按钮」，但是考虑到「禁用」本身很容易被视作为动词，为了避免歧义和理解错误，会采用「不可用按钮」来进行表达。在 UI 和 UX 设计当中，「不可用按钮」足够常见但也是体验问题高发的控件，而 Saadia Minhas 这篇文章详细阐述了问题在哪里，注意事项，替代方案，可以说是极为完善了。以下是正文：

本文介绍了「不可用按钮」（Disabled Buttons）对整体用户体验 (UX) 的影响。与「不可用按钮」 UX 相关的可用性问题有哪些？我们如何避免这些问题？

首先，让我们了解什么是「不可用按钮」，以及它们如何导致用户体验不佳。下一节将介绍一些实际案例，其中「不可用按钮」被设计得很好。最后一节将通过实际案例展示「不可用按钮」更好的替代方案。

关键要点

• 每当你想在 UI 上添加「不可用按钮」时，首先问自己是否有更好的替代方案。
• 思考并列出场景，尝试将其与你的实际情况联系起来。然后找到更好的解决方案。
• 如果使用「不可用按钮」是唯一的方法，请尝试为用户提供尽可能方便的体验，以便他们了解其用途，并通过执行所需的操作来启用它们。

什么是「不可用按钮」？

「不可用按钮」是一种非常常用的 UI 元素，通常为按钮的形态，只是这个按钮暂时处于非活动状态，用户无法与之交互。它在视觉上与活动状态的按钮不同。它通常呈灰色，或以较低的不透明度来呈现，以强调其禁用状态。

「不可用按钮」通常用于 Web 表单和 APP 中，以表示根据当前状态或用户输入，特定操作或功能当前不可用。

可用按钮与「不可用按钮」

为什么不可用按钮会导致糟糕的用户体验？

以下是有关「不可用按钮」 UX 的一些常见问题。

让用户感到困惑

用户发现「不可用按钮」是模棱两可的，因为用户可能不明白为什么无法与它们交互。用户会看着按钮，思考它的作用、为什么被禁用以及如何启用它。他们甚至不知道它是最初就已经被禁用的，还是在响应他们的某个操作后，系统将其状态更改为「禁用」。

「不可用按钮」表示用户必须执行某个操作才能启用它。但他们需要在 UI 上找到该操作，如果看不到则会让用户感到沮丧。

破碎的体验

在 UI 界面上填写完表单后，如果发现 UI 上有一个禁用的按钮，用户会感到茫然无措。在他们看来，如果他们的输入的内容有问题，他们就无法继续。他们从头开始查看页面，以查找他们犯的错误，或者继续寻找他们可能遗漏的任何必填字段。

禁用「提交」按钮会让用户认为哪里出了问题，但又没有告诉他们问题出在哪里。此外，他们也无法确定是他们的输入有问题，还是系统有问题，或者是网络有问题。

在没有提示的情况下，其实通常很难找到输入验证错误或缺失的字段，这会让用户感到烦恼。这会导致负面体验，尤其是当用户感到无缘无故受到限制时。

可达性差

正如 Vitaly Friedman 在其《关于「不可用按钮」 的用户体验 》的文章中所提到的，「不可用按钮」在对比度不足的时候，很难将它们与 UI 上的其他活动按钮区分开来。此外，残障用户在识别这些按钮，以及阅读其上低对比度文本时也会面临挑战。

没有聚焦状态

正如 Adam Silver 在这篇《有关「不可用按钮」 UX 问题》的文章中提到的那样，「不可用按钮」天生没有聚焦状态。由于用户无法与它们交互，因此当用户将鼠标悬停在「不可用按钮」上或单击「不可用按钮」时，不应发生任何变化。

这种未聚焦状态会让用户感到困惑，因为他们无法找到有关按钮为何被禁用以及何时启用的线索。用户不希望点击未聚焦的按钮，因此在将鼠标悬停在「不可用按钮」上时，提供工具提示并不是一个好主意。

中断流程

「不可用按钮」会扰乱用户流程，因为用户需要停下来，等待，看看按钮被禁用的原因以及如何启用它。用户需要找到可能导致此问题的错误或缺失的字段。

有时，用户会从头开始填写表单，以纠正之前可能犯的错误。这会使流程变慢，并浪费用户的时间。

沟通不畅

设计即沟通，而「不可用按钮」无法有效地传达其存在的原因。当用户无法找到有关「不可用按钮」以及如何与它们交互的明确线索时，他们会感到烦恼。这种设计天生就缺乏用户在与 UI 交互时所期望的沟通。

什么时候可以使用「不可用按钮」？

如果你考虑使用某些 UX 最佳实践，那么在某些情况下使用「不可用按钮」是可行的。

• (1) 在 Google Drive 或 SharePoint 等内容管理系统中，如果用户未选择项目，则「共享」或「下载」按钮将被禁用。用户需要选择一个项目，然后这些选项才会生效。

当列表中未选择任何项目时，SharePoint 会显示禁用状态下的「共享」按钮。

• (2) 在 Slack 或 Microsoft Teams 等协作和即时通讯 APP 中，聊天或讨论界面中的「发送」或「发布」按钮在用户输入消息之前处于不可用状态。这鼓励用户在尝试共享/发送内容之前，先撰写内容。

Slack 显示不可用的「发送消息」按钮，直到用户在输入框中输入消息。

• (3）在协作类 APP 中，会议的「加入」按钮在会议开始前 15 分钟之前保持禁用状态。用户可以在那时加入会议。
• (4) 在 Microsoft Word 或 Google Docs 等编辑器中，某些格式或编辑选项保持禁用状态，直到用户选择相关文本或对象来应用这些更改。
• (5) 社交媒体平台（如 Facebook 或 Twitter）会禁用「发布」按钮，直到用户在状态更新中输入的字符数达到最低要求。用户开始输入内容后，该按钮就会显示为可点击状态。

除非用户开始输入内容，否则 Twitter 会显示一个不可用的「发布」按钮。

总而言之， UI 上的「不可用按钮」意味着用户应该有办法启用它。这种方式应该让用户清楚，这样他们就不必到处寻找解决方案。在上面的例子中，用户希望在一段时间后或响应某个操作后启用这一按钮。

有哪些替代解决方案？

为了确保更好的用户体验，可以使用一些替代解决方案来代替 UI 上的不可用按钮。

隐藏 UI 中的按钮

你可以完全隐藏按钮，而不是使用「不可用按钮」。但是，这个解决方案只在某些情况下有效。

• (1) 在任何情况下，按钮都不会被当前级别的用户启用。例如，它可以是基于权限的「删除」操作，而当前用户可能无权执行该操作。
• (2) 用户点击按钮后无法执行任何有价值的操作。例如，当「下一页」上没有可显示的数据时，系统会默认跳转到当前页。

否则，隐藏 UI 中的按钮并在用户操作时再次显示，是一种负面的体验。用户会对按钮的显示状态感到困惑。如果用户需要反复搜寻来找到按钮，过程中可能需要刷新页面、甚至重新启动浏览器，这样的操作成本就太高了。

借助工具提示说明不可用的原因

借助工具提示，解释按钮不可用的原因以及用户需要如何启用它，这样用户就会知道原因以及启用按钮所需的操作。

选择此选项时需要考虑以下几种情况：

• (1) 找到合适的位置来显示工具提示或帮助文本。由于不可用的按钮没有聚焦状态，用户可能不希望将鼠标悬停或单击它们来查看工具提示。你可能需要一个单独的图标，用户可以将鼠标悬停在该图标上并查看详细信息。

当鼠标悬停在不可用按钮上时，Google 搜索框会显示一个工具提示。

• (2) 你可以在 UI 上靠近按钮的位置显示帮助文本。确保文本在屏幕上看起来不会显得突兀。
• (3) 如果在填写完所有字段后按钮仍处于不可用状态，并且用户需要自己查找问题，这可能会让用户感到迷惑。你应该提供即时的验证，当用户移动到表单中的下一个字段时，告知用户当前字段有哪些问题。

Instagram 会显示一个已禁用的「注册」按钮，并且没有任何帮助文字或线索。

使用更好的方式与用户沟通

不要使用不可用按钮，而是考虑一些可以以更好的方式传达给用户替代的方法。

• (1) 当某件商品无法购买时，你可以提供「添加到愿望清单」或「查看类似商品」按钮，而不是提供不可用的「缺货」按钮。这向用户传达了含义，他们可以表达对商品的兴趣，这将对他们将来有所帮助。

当当前用户无法购买所选商品时，亚马逊会提供一个「查看类似商品」按钮。

• (2) 当用户打开要购买的商品时，为用户选择默认的尺寸和颜色选项，而不是禁用「添加到购物车」按钮。用户可以点击后根据需要更改详细信息。

不要使用「不可用按钮」

始终保持按钮处于启用状态并让用户可以点击它们。与搜索按钮禁用的原因相比，允许用户点击按钮，但是让用户可以发现可能的错误，是一种高效的体验。

• （1）在按钮点击时执行输入内容验证
• （2）在页面上突出显示报错信息
• （3）将用户的输入光标，移动到页面上第一个错误出现的位置，并显示错误的缘由以及相关字段。

Google 登录页面始终启用「下一步」按钮。如果用户点击该按钮时，尚且没有输入正确的信息，则会随控件一起显示相关的报错信息。

Mailchimp 显示一个活动状态的「注册」按钮。如果用户点击它而不提供必要的信息，它会显示表单中的所有错误。

结论

上述的详细分析可帮助你设计一整套用户体验方案，避免在涉及「不可用按钮」时出现 UX 令人不适的情况，并为你强化设计的可访问性，并且具有简约高效的 UI ，为用户规避体验中的复杂性。