導讀：當我們進行交互設計的時候，總是秉承著讓用戶在產品使用中盡可能減少出錯率的理念。而絕大部分初級設計師在這種理念驅使下，會習慣性的把未滿足條件的召喚型按鈕設計成禁用狀態，試圖阻止用戶在提交任務時出錯。我們咋一看這種設計似乎是一種合情合理的方案，可是事實真的跟我們想象是一致的嗎？

01 這不是優雅的設計

禁用態按鈕是一種很有趣的交互模式，某種角度來看，它就像孫悟空集齊七顆龍珠，當用戶以正確的格式提供所有系統需要的數據時，系統會通過激活一個按鈕來獎勵用戶。

問題是用戶不都是超級賽亞人孫悟空，并不是每次都能順利集齊龍珠拿到獎勵，一旦需要的信息存在錯誤，禁用狀態的召喚型按鈕將成為用戶與產品主要摩擦點，讓用戶無法在系統中前進。

02 不告訴用戶發生了什么

“為什么我按不了那個該死的按鈕”，當用戶無法前進時必然會提出這個靈魂拷問?！安灰層脩羲伎肌笔求w驗設計中比較重要的可用性規則，但是設計師如果將召喚類按鈕禁用，用戶必然會思考如何我才能解除對他的封印。

如果是表單填寫場景，那么用戶必然會將填寫信息上下不停掃視來找出提交按鈕不能用的原因。想象下這種場景發生在移動端：用戶需要填寫一個復雜的長表單，設備的視口高度又只有這么一點點，這將會是一種災難。

換一種角度繼續思考，即使用戶對表單提供了正確的數據，但是因為一些其他的原因比如“數據格式錯誤”，“不小心碰到了空格”等情況造成沒有通過系統將校驗，結果提交按鈕還是處在禁用狀態。那么用戶將不得不回到開頭一個個檢查填寫信息。

總結的來看如果用戶找出不什么原因造成禁用態按鈕對話，那么這種設計對用戶轉化來說沒有什么好處，必然造成用戶放棄當下產品。

03 禁用按鈕的原罪

1、大多數UI設計師會把禁用態按鈕設計成灰色按鈕，從而來呈現出一種不可用的外觀。那么灰色文字加上灰色矩形讓信息的對比度直線下降，無法滿足用戶對于信息辨別的基本要求。

2、在PC端的使用場景中，有些專家級用戶在某些場景下他們會完全放棄對鼠標的使用，完全用鍵盤與設備進行交互，比如用“Tab鍵”來切換不同的對象，那么是禁用態按鈕的話，很大幾率用“tab鍵”是無法對其進行交互的。介于視覺上識別度低的情況，現在很多大廠在視覺上采用一種半灰的處理方式來解決禁用態按鈕信息識別度低的問題。這樣設計大大提高產品的可用性，對一些視覺有障礙的用戶十分友好。

04 禁用態按鈕真的不能用？

有些設計師對禁用態按鈕一桿子全部打死也不對，任何事物我們都需要一分為二辯證的來看待。小編認為不是這個模式錯了，而是我們使用它的方式錯了。

1、當所有表單信息都為空的時候，提交按鈕可以設計成禁用態，但是用戶開始對表單進行信息錄入那一刻起，提交按鈕就應該亮起變為可用狀態。

2、當系統當中確實有些按鈕是有必要的前置條件，達成后才能使用，那么設計師就應該把滿足的先決條件以對話框的形式注釋在按鈕附近，當用戶鼠標在此位置懸浮時出現提示。（此設計也僅限于PC端）

05 講點表單校驗

說到底禁用態按鈕使用場景窄不是因為它模式問題，而是一些校錯信息以及出發條件很難及時傳達給用戶造成的，所以當設計表單時，小編建議設計師采用“內聯校驗”去幫助用戶糾錯。

內聯校驗可以讓用戶即時看到錯誤消息，通過動態驗證用戶輸入，最大可能保證他們輸入是正確的。當然，內聯驗證不能保證用戶輸入100% 正確，但是可以幫助用戶在點擊提交按鈕之前所輸入錯誤信息的概率降到最低。

06 文末小結

禁用態按鈕這個交互模式其實本沒有錯，新手設計師想為用戶認知減負的理念也沒有錯，錯就錯在新手設計師在兩者組合使用場景時沒有再深入一步去思考，對糾錯信息以及前置條件沒有很好即時的告知給用戶，最后以小編最為喜歡的一句話作為結尾“真正優秀的用戶體驗應該是讓用戶自由的輸入”。

#專欄作家#

月亮與六便士，公眾號：月亮體驗設計坊，人人都是產品經理專欄作家。前大廠用戶體驗設計師，擅長交互原理闡述、作品集指導、設計趨勢風格、求職經驗分享等。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來Unsplash，基于CC0協議。