近期在C端理財資產購買流程和B端系統操作工具專案中，均涉及按鈕禁用狀態的相關問題，本篇權當漫談，討論下。

Web開發中常用的CSS按鈕狀態，包含6種，分別是正常態、懸浮態、焦點態、啟用態、載入態和禁用態。因移動端的手指與Web中滑鼠的物理操作的差異，移動端中按鈕更多時候去除了懸浮態和焦點態「注：原因可自行檢索」。其中禁用態因為使用狀態的不穩定及互動變化中的不確定性，在設計中討論的最多。

先說觀點：如果禁用按鈕無法被啟用，則應該消失。如果暫時無法被啟用，最好能把禁用態替換成使用者能夠積極操作的其他動作，實在要保留禁用態的話，至少也要告知按鈕禁用的原因或啟用按鈕的條件。

禁用狀態如無法被啟用，按鈕該消失

禁用態與正常態作為按鈕的兩種常規狀態，一體兩面，禁用按鈕的存在本身就預示著一旦符合條件，按鈕能恢復正常，可以被啟用。如果禁用狀態無法被啟用，也就變成了無效狀態，無效狀態就不應該存在。

看個例子，左圖是在職員工的內部IM聯絡卡片，右圖是離職員工的，員工離職後內部溝通許可權已然無法使用，也就不能再進行「電話/訊息」溝通，所以對應按鈕刪除。

這樣可以減少無效資訊的干擾，還可以避免操作帶來的無效反饋，比如點選電話，顯示「無法撥打內部電話」。或者顯示禁用，也會影響其他人的操作判斷。

從這個案例中我們可以看出，當一個按鈕在某種情況下始終無法被觸發時，就會選擇讓它直接消失，而不是呈現禁用狀態。

禁用態暫時不能啟用，選擇積極的正向替換

按鈕的禁用狀態是有它存在的意義的，這種在電商或金融產品中表現尤其明顯。常因為庫存的原因，商品某一時段會出現售罄或某一門類缺貨的暫時情況。對使用者而言，除了不能即時購買，瀏覽、評論等都不會受到影響，使用者同樣可以收藏商品為下次加購做準備，所以這是一種介於下架和正常銷售的中間狀態。

舉個專案的例子，使用者可以在理財的資產詳情頁購買理財，點選底部“購買”按鈕即可發起購買流程，但如果產品緊俏，賣完了，該展示什麼呢？

右邊兩個方案，右A像bug，右B說賣完了，看似符合現實狀況但使用者很懵，使用者不知道怎麼就賣完了，以後這個商品還會有嗎？滿滿的負面疑問。重新思考這個問題，調轉方向，從更為積極的角度，是不是以下方案使用者感受更好些：針對補充貨源時間不能確定的情況【到貨提醒我】、對於後臺已設定準確的發售時間【準時提醒我】、對於重新上架可能要等很長一段時間，【相似推薦】則極有可能挽回使用者流失帶來的部分損失。正向的引導遠比常規的描述，更有積極暗示和實踐意義。

類似的例子有很多，比如在「淘寶」選購商品時，如果所選的產品和型號處於完全缺貨的狀態，加入購物車的按鈕會變成「缺貨中，提醒掌櫃補貨」。相較於老版本的置灰分類選項，新版促進了賣家與商家的良性互動，登記缺貨之後賣家補貨會第一時間發訊息通知買家，為缺貨給買家帶來的不良購物體驗提供了補償方案，也利於商家爭取潛在使用者的下次購買行為。

禁用按鈕如要保留，務必明確告知原因

先看一個Web端例子，如下圖文件對比模組中，尚未上傳文件的時候，「對比按鈕」顯示置灰的禁用態，滑鼠hover狀態會提示按鈕生效的條件和規則，使用者能理解只有在兩種文件都完成上傳後，「對比按鈕」才會高亮。

同樣的道理，移動按鈕禁用狀態的展現，也要符合這個基本要求。舉個具體的例子，B站影片短片下載按鈕雖被禁用，但能看到是文字註釋「版權受限」。螞蟻理財購買環節支付功能被禁用，但輸入框出有明顯的紅色文字報錯，使用者也能明白是買入金額低於起購金額所致。

簡單小結一下：

禁用按鈕做為一種不可用的按鈕狀態，操作前的認識預期，過程中的生效條件，對使用者都很容易造成困惑，在使用上要務必謹慎。展示邏輯需要判斷不同的使用場景和角色許可權，甄別按鈕的禁用狀態是否一定要存在，是否可以用更為積極的行為動作來替換，亦或者是否已經給予使用者充分的禁用理由，能讓使用者簡單明白。

以上，謝謝

——————————————————————

圖片授權基於CC0協議