Disable 禁用狀態按鈕設計

嗨，
我是 Taony，最近好嗎？是不是也進入冬季狀態了

最近全家人中了流感，一直在照顧和被照顧的狀態下切換
感覺是 Covid 之後第一次有這麼強的病毒了
整個工作計劃有點被打亂

在休息的時候突然想到這期的主題
原因是自己正處於某種 Disable 不可用的狀態

在產品設計中「不可用狀態」還蠻常見的

但是好像要做好並不容易，我也還在持續學習中
所以想說整理一下，和你分享
如何設計「按鈕的不可用狀態」
也叫做「禁用狀態」

這個看似普通的細節，對使用體驗的影響
特別是對完成率、轉換率的影響比我們想的要大

以防你還不是很熟悉按鈕的禁用狀態 Disabled Button
簡單說就是 App 或者網站頁面上，那顆你經常會遇到的灰色按鈕

通常會出現在像是登陸、註冊、資訊提交這類表單流程裡

最糟糕的情境就是：表單填完最後一步，按鈕不能按
但是又不知道該做什麼

結果就會造成使用者憤怒點擊或者直接放棄任務

我總結了 25 條「按鈕禁用狀態」設計檢查點
可以幫助我們在設計時思考和做決策

什麼時候真的「需要」禁用按鈕？

Disable 禁用狀態並不是預設值，而是一種例外
只有在少數情況下才會用到

所以我們在決定是否在流程中打斷使用者之前
可以思考幾個問題

1. 是否需要預設就把按鈕禁用？
   例如：商品缺貨導致「加入購物車按鈕」預設為不可按
   
   

2. 如果不是必須，按鈕是否能保持可按，等提交時再驗證？
   例如：先讓使用者按「提交」，錯誤在下一步提示
   
   

3. 什麼狀況下，按鈕應該變成禁用狀態？
   例如：避免同一秒按兩次結帳，造成重複扣款

禁用按鈕的「引導 & 回饋」

禁用按鈕最大的問題，不是因為不能按，而是因為
使用者不知道為什麼不能按，以及要怎麼做才可以按

要避免任務流程完全卡死，鬼打牆的情況出現
我們可以在 UIUX 層面多思考

1. 錯誤提示訊息要何時、用什麼方式出現？
   例如：Email 欄位輸入錯誤時立刻提示還是點擊提交按鈕後
   
   

2. 點擊禁用按鈕時，是否引導使用者到錯誤欄位？
   例如：按「下一步」自動捲到「姓名未填寫」
   
   

3. 是否要使用即時驗證（Inline validation）
   例如：密碼強度不足，即時進行提示
   
   

4. 即使出現錯誤，是否允許使用者先繼續？
   例如：允許跳過某些欄位，稍後再補
   
   

5. 什麼時候應該啟用按鈕？需要明確規則
   例如：勾選了同意條款、密碼強度達標、資訊格式正確
   
   

6. 每次輸入後，按鈕是否即時更新狀態？
   例如：手機號碼輸入滿 10 位，按鈕變可按
   
   

7. 滑鼠或手指點擊禁用按鈕時會發生什麼？
   例如：按鈕微微震動，顯示「請完成所有欄位」
   
   

8. 是否在禁用按鈕下方提供錯誤原因說明？
   例如：按鈕下方顯示「請完成所有欄位」
   
   

9. 是否用 Tooltip 告訴使用者按鈕為何禁用？
   例如：滑鼠 hover 到按鈕時，顯示原因
   
   

10. 禁用按鈕是否仍可被鍵盤選中？（可及性）
    例如：Tab 鍵仍能選中按鈕，並讀出提示
    
    

11. 禁用狀態的顏色對比是否足夠？（可及性）
    例如：按鈕上的文字依然滿足 WCAG AA 標準

另外一些設計的細節

除了判斷什麼時候禁用和如何給予使用者引導、回饋
一些 UIUX 的細節會讓體驗更好（細節造成品質差異）

1. 按鈕在更新狀態 updating 時應如何變化？
   例如：按鈕加入 loading 的小動畫
   
   

2. 更新期間是否要改變按鈕上的文案？
   例如：「提交」變成「儲存中…」
   
   

3. 按鈕在更新狀態下是否變色？
   例如：藍色按鈕變成深藍色，顯示差異
   
   

4. 是否需要顯示進度條？
   例如：按鈕在點擊提交後，顯示進度條 30%…
   
   

5. 是否需要在禁用狀態下，改變按鈕文案？
   例如：「下一步」在禁用時變成「表單未完成」
   
   

6. 按鈕更新時，是否需要整個畫面一起進入鎖定狀態？
   例如：點擊付款後，整頁鎖定避免誤操作

*當使用者已經按下按鈕，但系統尚未完成動作時
按鈕所呈現的視覺或互動狀態，就是「更新狀態」

最後，設計不是憑感覺

照顧到前面所有這些設計細節後，我們還需要透過數據來驗證
這一步也是用來說服利害關係人和建立設計師話語權的關鍵

追蹤、收集有多少比例的使用者停在「某一個」流程
分析是否是因為禁用按鈕導致

不同的產品類型和期望使用者的行為
也會影響如何去設計「Disable 禁用」

測試「不禁用」vs 「禁用」設計
兩個版本的轉換率，到底差異在哪裡
是最準確的方法

但是無論你是想一路綠燈，還是打斷使用者
都要讓他們「知道自己在哪裡、瞭解狀況、知道怎麼做」

上面這些都是我覺得，
可以改善數位產品使用體驗的設計細節
一定還有更多細節值得我們繼續去發現、挖掘

這也是我覺得 UIUX 設計工作迷人的地方
它是一種圍繞「人心」不斷探索、打磨、創造的過程

我自己也是人，也是使用者
進而會變成對自己的不斷探索、反思
認知邊界逐漸的不斷被拓展

現在又可以和你們分享自己的經驗、所見所聞
希望用一點微薄的力量，去幫助有需要的設計師
創造出更多更好的產品

一如既往，謝謝你願意看到這裡
希望這次的分享同樣可以帶給你一些養分

2025 年的最後一個月了
祝願你的事業、生活一切都心想事成！

那我們就下一次見囉
Have a wonderful week

Best,
Taony