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

01 這不是優(yōu)雅的設(shè)計

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

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

02 不告訴用戶發(fā)生了什么

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

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

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

總結(jié)的來看如果用戶找出不什么原因造成禁用態(tài)按鈕對話，那么這種設(shè)計對用戶轉(zhuǎn)化來說沒有什么好處，必然造成用戶放棄當(dāng)下產(chǎn)品。

03 禁用按鈕的原罪

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

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

04 禁用態(tài)按鈕真的不能用？

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

1、當(dāng)所有表單信息都為空的時候，提交按鈕可以設(shè)計成禁用態(tài)，但是用戶開始對表單進(jìn)行信息錄入那一刻起，提交按鈕就應(yīng)該亮起變?yōu)榭捎脿顟B(tài)。

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

05 講點(diǎn)表單校驗

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

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

06 文末小結(jié)

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

#專欄作家#

月亮與六便士，公眾號：月亮體驗設(shè)計坊，人人都是產(chǎn)品經(jīng)理專欄作家。前大廠用戶體驗設(shè)計師，擅長交互原理闡述、作品集指導(dǎo)、設(shè)計趨勢風(fēng)格、求職經(jīng)驗分享等。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來Unsplash，基于CC0協(xié)議。