编者按 ：Disabled Buttons 通常被称为「禁用按钮」或者「不可用按钮」 ，超全但是总结考虑到「禁用」本身很容易被视作为动词 ，为了避免歧义和理解错误 ，用按会采用「不可用按钮」来进行表达。钮完南在 UI 和 UX 设计当中，全设「不可用按钮」足够常见但也是超全体验问题高发的控件 ，而 Saadia Minhas 这篇文章详细阐述了问题在哪里 ，总结注意事项 ，用按替代方案 ，钮完南可以说是全设极为完善了 。以下是超全正文 ：
本文介绍了「不可用按钮」（Disabled Buttons）对整体用户体验 (UX) 的总结影响 。与「不可用按钮」 UX 相关的用按可用性问题有哪些？我们如何避免这些问题 ？
首先，让我们了解什么是钮完南「不可用按钮」，以及它们如何导致用户体验不佳。全设下一节将介绍一些实际案例 ，其中「不可用按钮」被设计得很好 。最后一节将通过实际案例展示「不可用按钮」更好的替代方案 。
「不可用按钮」是一种非常常用的 UI 元素 ，通常为按钮的形态 ，只是这个按钮暂时处于非活动状态 ，用户无法与之交互 。它在视觉上与活动状态的按钮不同 。它通常呈灰色 ，或以较低的不透明度来呈现 ，以强调其禁用状态。
「不可用按钮」通常用于 Web 表单和 APP 中 ，以表示根据当前状态或用户输入 ，特定操作或功能当前不可用。
可用按钮与「不可用按钮」
以下是有关「不可用按钮」 UX 的一些常见问题。
用户发现「不可用按钮」是模棱两可的 ，因为用户可能不明白为什么无法与它们交互 。用户会看着按钮，思考它的作用 、为什么被禁用以及如何启用它。他们甚至不知道它是最初就已经被禁用的 ，还是在响应他们的某个操作后 ，系统将其状态更改为「禁用」 。
「不可用按钮」表示用户必须执行某个操作才能启用它 。但他们需要在 UI 上找到该操作 ，如果看不到则会让用户感到沮丧 。
在 UI 界面上填写完表单后 ，如果发现 UI 上有一个禁用的按钮，用户会感到茫然无措 。在他们看来，如果他们的输入的内容有问题 ，他们就无法继续。他们从头开始查看页面 ，以查找他们犯的错误，或者继续寻找他们可能遗漏的任何必填字段 。
禁用「提交」按钮会让用户认为哪里出了问题 ，但又没有告诉他们问题出在哪里 。此外 ，他们也无法确定是他们的输入有问题 ，还是系统有问题 ，或者是网络有问题。
在没有提示的情况下 ，其实通常很难找到输入验证错误或缺失的字段，这会让用户感到烦恼 。这会导致负面体验，尤其是当用户感到无缘无故受到限制时。
正如 Vitaly Friedman 在其《关于「不可用按钮」 的用户体验 》的文章中所提到的 ，「不可用按钮」在对比度不足的时候 ，很难将它们与 UI 上的其他活动按钮区分开来 。此外 ，残障用户在识别这些按钮 ，以及阅读其上低对比度文本时也会面临挑战 。
正如 Adam Silver 在这篇《有关「不可用按钮」 UX 问题》的文章中提到的那样 ，「不可用按钮」天生没有聚焦状态 。由于用户无法与它们交互 ，因此当用户将鼠标悬停在「不可用按钮」上或单击「不可用按钮」时 ，不应发生任何变化 。
这种未聚焦状态会让用户感到困惑 ，因为他们无法找到有关按钮为何被禁用以及何时启用的线索 。用户不希望点击未聚焦的按钮 ，因此在将鼠标悬停在「不可用按钮」上时，提供工具提示并不是一个好主意 。
「不可用按钮」会扰乱用户流程 ，因为用户需要停下来 ，等待 ，看看按钮被禁用的原因以及如何启用它 。用户需要找到可能导致此问题的错误或缺失的字段 。
有时 ，用户会从头开始填写表单，以纠正之前可能犯的错误 。这会使流程变慢，并浪费用户的时间 。
设计即沟通 ，而「不可用按钮」无法有效地传达其存在的原因。当用户无法找到有关「不可用按钮」以及如何与它们交互的明确线索时 ，他们会感到烦恼 。这种设计天生就缺乏用户在与 UI 交互时所期望的沟通。
如果你考虑使用某些 UX 最佳实践 ，那么在某些情况下使用「不可用按钮」是可行的。
当列表中未选择任何项目时，SharePoint 会显示禁用状态下的「共享」按钮 。
Slack 显示不可用的「发送消息」按钮，直到用户在输入框中输入消息 。
除非用户开始输入内容 ，否则 Twitter 会显示一个不可用的「发布」按钮 。
总而言之， UI 上的「不可用按钮」意味着用户应该有办法启用它 。这种方式应该让用户清楚 ，这样他们就不必到处寻找解决方案 。在上面的例子中 ，用户希望在一段时间后或响应某个操作后启用这一按钮。
为了确保更好的用户体验 ，可以使用一些替代解决方案来代替 UI 上的不可用按钮 。
你可以完全隐藏按钮 ，而不是使用「不可用按钮」 。但是 ，这个解决方案只在某些情况下有效 。
否则 ，隐藏 UI 中的按钮并在用户操作时再次显示 ，是一种负面的体验 。用户会对按钮的显示状态感到困惑 。如果用户需要反复搜寻来找到按钮，过程中可能需要刷新页面 、甚至重新启动浏览器，这样的操作成本就太高了。
借助工具提示 ，解释按钮不可用的原因以及用户需要如何启用它 ，这样用户就会知道原因以及启用按钮所需的操作 。
选择此选项时需要考虑以下几种情况 ：
当鼠标悬停在不可用按钮上时 ，Google 搜索框会显示一个工具提示 。
Instagram 会显示一个已禁用的「注册」按钮 ，并且没有任何帮助文字或线索 。
不要使用不可用按钮 ，而是考虑一些可以以更好的方式传达给用户替代的方法 。
当当前用户无法购买所选商品时 ，亚马逊会提供一个「查看类似商品」按钮。
始终保持按钮处于启用状态并让用户可以点击它们 。与搜索按钮禁用的原因相比，允许用户点击按钮 ，但是让用户可以发现可能的错误，是一种高效的体验 。
Google 登录页面始终启用「下一步」按钮 。如果用户点击该按钮时 ，尚且没有输入正确的信息，则会随控件一起显示相关的报错信息 。
Mailchimp 显示一个活动状态的「注册」按钮 。如果用户点击它而不提供必要的信息，它会显示表单中的所有错误 。
上述的详细分析可帮助你设计一整套用户体验方案 ，避免在涉及「不可用按钮」时出现 UX 令人不适的情况 ，并为你强化设计的可访问性 ，并且具有简约高效的 UI ，为用户规避体验中的复杂性 。
作者 ：陈子木
