在做設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)遇到一個(gè)問(wèn)題，就是一個(gè)按鈕，在同一頁(yè)面的不同情況下，有時(shí)可用，有時(shí)不可用，我們到底是顯示不可用時(shí)的禁用狀態(tài)呢？還是直接隱藏這個(gè)按鈕呢？

大家還是喜歡提這種通用性問(wèn)題，希望有一個(gè)說(shuō)法，可以概括所有情況。但我多次說(shuō)過(guò)，不存在這樣的好事，一定是具體問(wèn)題具體分析的。

尤其是這個(gè)問(wèn)題，想要聊透徹，得用不少例子來(lái)舉證說(shuō)明，不過(guò)也可以通過(guò)總結(jié)的方式長(zhǎng)話短說(shuō)了。

禁用按鈕的使用，可以從兩個(gè)維度來(lái)分析，分別是：「無(wú)效的禁用狀態(tài)」和「有效的禁用狀態(tài)」。

無(wú)效的禁用狀態(tài)

有一種情況是，在一個(gè)頁(yè)面里，一個(gè)按鈕，可能會(huì)有幾種不同的情況存在。那人要問(wèn)了，既然是一個(gè)頁(yè)面，為什么會(huì)有多種狀態(tài)同時(shí)存在的情況呢？

比如，在出行場(chǎng)景中，普通乘客發(fā)起訂單，司機(jī)接單后是可以發(fā)送消息的（左圖）。但是從第三方渠道來(lái)的乘客，司機(jī)是無(wú)法發(fā)送站內(nèi)消息的，只能通過(guò)電話聯(lián)系乘客（右圖）。

不同渠道來(lái)的用戶，司機(jī)端的頁(yè)面會(huì)呈現(xiàn)不同的按鈕狀態(tài)。相同的頁(yè)面，第三方渠道來(lái)的乘客，在司機(jī)端就不需要露出消息按鈕了，這樣可以減少無(wú)效信息對(duì)司機(jī)的干擾，還可以避免司機(jī)習(xí)慣性操作帶來(lái)的無(wú)效反饋，比如點(diǎn)擊消息，顯示「無(wú)法發(fā)送消息」?；蛘唢@示禁用，也會(huì)影響司機(jī)的操作判斷。

從這個(gè)案例中我們可以看出，當(dāng)一個(gè)按鈕在某種情況下始終無(wú)法被觸發(fā)時(shí)，就會(huì)選擇讓它直接消失，而不是呈現(xiàn)禁用狀態(tài)。

很多人在這類設(shè)計(jì)里會(huì)給按鈕提供一個(gè)禁用狀態(tài)，以免按鈕消失而打亂頁(yè)面布局。但是要知道，在某種情況下，按鈕無(wú)用時(shí)，無(wú)意義的展示反而會(huì)產(chǎn)生干擾信息，就像上面說(shuō)到的那樣。

所以這里有一個(gè)結(jié)論是：禁用按鈕需要可觸發(fā)的時(shí)機(jī)，如果沒有這個(gè)時(shí)機(jī)，禁用狀態(tài)就沒有存在的必要。如果存在，那它也是一個(gè)無(wú)效的狀態(tài)。

既然是無(wú)效的，最好就不要出現(xiàn)了。

有效的禁用狀態(tài)

在上面的例子里，有一個(gè)前提不可忽略，那就是司機(jī)是否可以理解我們不顯示的原因。當(dāng)然，司機(jī)會(huì)接受相關(guān)培訓(xùn)，產(chǎn)品中也會(huì)有渠道標(biāo)識(shí)，所以司機(jī)能夠明白頁(yè)面中存在的差異。

但在其他產(chǎn)品中，當(dāng)狀態(tài)不同，按鈕變化無(wú)法自洽的時(shí)候，又怎么去處理呢？我們就需要通過(guò)合理的解釋來(lái)消除用戶潛在的困惑。

對(duì)于這點(diǎn)，比較典型的案例是在線上購(gòu)物時(shí)，一件商品會(huì)有多個(gè)類型供消費(fèi)者選擇，比如不同的尺寸、型號(hào)等，當(dāng)其中一種類型被搶光時(shí)，這個(gè)商品依然是可見的，只是無(wú)法選擇，展示出了禁用狀態(tài)。

在這種場(chǎng)景中，我們不能一下子把其他無(wú)法購(gòu)買的類型隱藏，因?yàn)橛脩粜枰牢覀兯械纳唐奉悇e，了解商品的全部屬性，盡管當(dāng)下無(wú)法購(gòu)買，但有上新的可能，用戶依然可以選擇等待，并將其加入收藏，還是會(huì)有機(jī)會(huì)促成這筆交易。而且當(dāng)可選類型變多的時(shí)候，只是禁用沒有庫(kù)存的類型，可以使其他可選項(xiàng)保持固定的位置，有利于我們二次搜索和加購(gòu)。這種場(chǎng)景的禁用也是暫時(shí)的，直到商品下架或者上新。

但就像我以前說(shuō)過(guò)的，常常我們見多了的東西，就認(rèn)為是正常的，但它并不一定好的。禁用也是這種情況。

雖然我們現(xiàn)在還是會(huì)在各個(gè)地方看到禁用操作，但是禁用的原由始終沒有給到用戶合理的解釋，以至于許多人見到類似的操作都是一頭霧水。所以在設(shè)計(jì)過(guò)程中，尤其要謹(jǐn)慎對(duì)待，盡可能的避免出現(xiàn)無(wú)法解釋的禁用操作。

好比淘寶的商品選擇頁(yè)面，如今也將原來(lái)的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會(huì)變成「提醒掌柜補(bǔ)貨」。

從原來(lái)的用戶單方面接收無(wú)法點(diǎn)擊的按鈕，到現(xiàn)在直觀顯示缺貨，點(diǎn)擊后同時(shí)提醒到商家，這樣的操作從功能角度來(lái)說(shuō)是一個(gè)升級(jí)。

這就是我說(shuō)的，有效與無(wú)效的禁用按鈕之間的區(qū)別。禁用不該是真的禁止使用，而是告知用戶，它如何可被使用。

小結(jié)

如果一個(gè)按鈕在不同的階段有禁用和可用的狀態(tài)顯示，那么意圖是很明顯的。比如一些活動(dòng)頁(yè)面，某個(gè)按鈕的禁用狀態(tài)是倒計(jì)時(shí)，就像電影的前期宣傳，為電影的上線制造話題和熱度，來(lái)鼓勵(lì)更多人的觀看一樣。

對(duì)于按鈕來(lái)說(shuō)，顯示禁用則代表它在滿足一定條件后即可擁有可點(diǎn)擊性，讓我們明確地了解它就在這里，未來(lái)是可操作的。按鈕也有很多的設(shè)計(jì)空間來(lái)為未來(lái)的使用做好鋪墊，特別是營(yíng)銷類的活動(dòng)，像是「明日 8 點(diǎn)可搶」、「提醒商家補(bǔ)貨」的按鈕文案，無(wú)一不在傳達(dá)「可用性」的信息，引導(dǎo)用戶持續(xù)性的關(guān)注。

但是還有一類禁用狀態(tài)只是靜默地提示，多出現(xiàn)在表單中，當(dāng)用戶沒有完成輸入的時(shí)候則無(wú)法點(diǎn)擊，因?yàn)榭吹亩嗔?，我們就以為這是正常的。但我們都知道它仍可優(yōu)化，比如，在它以禁用狀態(tài)出現(xiàn)時(shí)，用更為友好的方式去提醒用戶應(yīng)如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。

我們要知道的是，禁用按鈕本身不是一個(gè)特殊的對(duì)象，只是禁用狀態(tài)在頁(yè)面中是一個(gè)特殊的存在，它是產(chǎn)品設(shè)計(jì)中的一種規(guī)則。為什么按鈕不可用，或者說(shuō)一定場(chǎng)景下為什么功能不可用，當(dāng)無(wú)法依靠用戶直覺理解的時(shí)候，是需要作出解釋的，也就是怎么禁的問(wèn)題。

但是最開始設(shè)計(jì)時(shí)就應(yīng)該去想的是，禁用狀態(tài)對(duì)用戶和產(chǎn)品的意義在哪里，這和我們設(shè)計(jì)方案時(shí)腦海中涌出的無(wú)數(shù)目標(biāo)一樣，是一個(gè)基礎(chǔ)的出發(fā)點(diǎn)。而后，一切迎刃而解。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)