按钮是常用的设计元素之一，不过你没有想过，用户会主动点击已被禁用的按钮，因为用户可能会误认为这是某种交互形式。如果把处于禁用状态的按钮显示为灰色，除非你把它设置为专有颜色，否则，用户可能会认为其他灰色的按钮都无法使用或无法操作。
这篇文章从UX的角度讨论，了解怎样设计短时内无法操作的禁用按钮，以减少用户混淆。
灰色按钮是禁用还是正常
禁用状态的按钮不使用灰色的理由？
如果页面上有一个不活动的按钮，你会怎样处理，把它删除？当按钮从原本位置消失后又显示时，用户可能会对突然出现的按钮感到惊讶。相对的，设计师会使用“禁用的按钮”来防止在界面中出现重大改动。
很多设计师将该按钮显示为灰色，以将这禁用状态传达给用户。但是，这种方法对用户来说同样造成困扰，因为按钮的启用状态看上去与禁用状态几乎不一样。
如何处理按钮的无效状态？
按钮从灰色变为全色显示，这种变化往往会超出用户的预期。为了获得流畅、无缝的体验，建议你不要这样做，你可以通过降低不透明度来使处于禁用状态的按钮透明，而不是把按钮做成灰色。
当禁用的按钮为透明时，用户可以在启用状态下看到该按钮的外观。即使这个按钮已淡化并融入背景，但有些颜色依然可见，方便用户识别。因此，当处于禁用状态的按钮变为启用状态时，用户不会对该按钮的外观感到意外。
透明按钮能更好地融合到背景中，而灰色按钮仍保留在界面中（除非背景是灰色的），与普通按钮一样可见。这样的按钮反而更引人注意。他们倾向于将它视为某种交互形式，这意味着他们更有可能与灰色的禁用按钮进行交互。而这正是我们要避免的。
回想一下，产品设计的三要素，别让我等，别让我烦，别让我想。你应该尽量做到不让用户去想，哪怕只是可能。
左左:灰色禁用按钮，右:透明禁用按钮
由于透明按钮融合到背景中，用户将它与其他按钮混淆的可能性很小。灰色按钮也并非总是禁用的。例如，灰色可用于低优先级按钮（例如“取消”）。用户可能会将禁用的灰色按钮误认为是辅助操作按钮。此外，在最坏的情况下，颜色对比度较低的设计可能会被识别为不能使用的按钮。
设计禁用按钮时，请调整不透明度，而不是颜色。不透明度值取决于背景颜色。过往经验是将不透明度设置为40％或更低。或者文本标签不可读为止。重要的是，将不透明度设置得足够低，否则用户可能仍认为按钮是可使用的。
如此一来，可以在不影响用户的情况下将已禁用的按钮显示为已禁用状态。而他们将体验到，按钮状态之间顺畅无缝的过渡。
閱讀更多 極簡設計室 的文章
