超全总结 ！「不可用按钮」完全设计指南
编者按 ：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 ，为用户规避体验中的复杂性 。
作者 ：陈子木
编者按 ：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 ，为用户规避体验中的复杂性 。
作者 ：陈子木
