按鈕是常用的設計元素之一，不過你沒有想過，用戶會主動點擊已被禁用的按鈕，因為用戶可能會誤認為這是某種交互形式。如果把處於禁用狀態的按鈕顯示為灰色，除非你把它設置為專有顏色，否則，用戶可能會認為其他灰色的按鈕都無法使用或無法操作。
這篇文章從UX的角度討論，瞭解怎樣設計短時內無法操作的禁用按鈕，以減少用戶混淆。
灰色按鈕是禁用還是正常
禁用狀態的按鈕不使用灰色的理由？
如果頁面上有一個不活動的按鈕，你會怎樣處理，把它刪除？當按鈕從原本位置消失後又顯示時，用戶可能會對突然出現的按鈕感到驚訝。相對的，設計師會使用“禁用的按鈕”來防止在界面中出現重大改動。
很多設計師將該按鈕顯示為灰色，以將這禁用狀態傳達給用戶。但是，這種方法對用戶來說同樣造成困擾，因為按鈕的啟用狀態看上去與禁用狀態幾乎不一樣。
如何處理按鈕的無效狀態？
按鈕從灰色變為全色顯示，這種變化往往會超出用戶的預期。為了獲得流暢、無縫的體驗，建議你不要這樣做，你可以通過降低不透明度來使處於禁用狀態的按鈕透明，而不是把按鈕做成灰色。
當禁用的按鈕為透明時，用戶可以在啟用狀態下看到該按鈕的外觀。即使這個按鈕已淡化並融入背景，但有些顏色依然可見，方便用戶識別。因此，當處於禁用狀態的按鈕變為啟用狀態時，用戶不會對該按鈕的外觀感到意外。
透明按鈕能更好地融合到背景中，而灰色按鈕仍保留在界面中（除非背景是灰色的），與普通按鈕一樣可見。這樣的按鈕反而更引人注意。他們傾向於將它視為某種交互形式，這意味著他們更有可能與灰色的禁用按鈕進行交互。而這正是我們要避免的。
回想一下，產品設計的三要素，別讓我等，別讓我煩，別讓我想。你應該儘量做到不讓用戶去想，哪怕只是可能。
左左:灰色禁用按鈕，右:透明禁用按鈕
由於透明按鈕融合到背景中，用戶將它與其他按鈕混淆的可能性很小。灰色按鈕也並非總是禁用的。例如，灰色可用於低優先級按鈕（例如“取消”）。用戶可能會將禁用的灰色按鈕誤認為是輔助操作按鈕。此外，在最壞的情況下，顏色對比度較低的設計可能會被識別為不能使用的按鈕。
設計禁用按鈕時，請調整不透明度，而不是顏色。不透明度值取決於背景顏色。過往經驗是將不透明度設置為40％或更低。或者文本標籤不可讀為止。重要的是，將不透明度設置得足夠低，否則用戶可能仍認為按鈕是可使用的。
如此一來，可以在不影響用戶的情況下將已禁用的按鈕顯示為已禁用狀態。而他們將體驗到，按鈕狀態之間順暢無縫的過渡。
閱讀更多 極簡設計室 的文章
