禁用按鈕應該怎么用?

2021-1-8    資深UI設計者

在做設計的時候,經常會遇到一個問題,就是一個按鈕,在同一頁面的不同情況下,有時可用,有時不可用,我們到底是顯示不可用時的禁用狀態(tài)呢?還是直接隱藏這個按鈕呢?

大家還是喜歡提這種通用性問題,希望有一個說法,可以概括所有情況。但我多次說過,不存在這樣的好事,一定是具體問題具體分析的。

尤其是這個問題,想要聊透徹,得用不少例子來舉證說明,不過也可以通過總結的方式長話短說了。

禁用按鈕的使用,可以從兩個維度來分析,分別是:「無效的禁用狀態(tài)」和「有效的禁用狀態(tài)」。

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

有一種情況是,在一個頁面里,一個按鈕,可能會有幾種不同的情況存在。那人要問了,既然是一個頁面,為什么會有多種狀態(tài)同時存在的情況呢?

比如,在出行場景中,普通乘客發(fā)起訂單,司機接單后是可以發(fā)送消息的(左圖)。但是從第三方渠道來的乘客,司機是無法發(fā)送站內消息的,只能通過電話聯(lián)系乘客(右圖)。

禁用按鈕應該怎么用?來看高手的分析!

不同渠道來的用戶,司機端的頁面會呈現(xiàn)不同的按鈕狀態(tài)。相同的頁面,第三方渠道來的乘客,在司機端就不需要露出消息按鈕了,這樣可以減少無效信息對司機的干擾,還可以避免司機習慣性操作帶來的無效反饋,比如點擊消息,顯示「無法發(fā)送消息」。或者顯示禁用,也會影響司機的操作判斷。

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

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

所以這里有一個結論是:禁用按鈕需要可觸發(fā)的時機,如果沒有這個時機,禁用狀態(tài)就沒有存在的必要。如果存在,那它也是一個無效的狀態(tài)。

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

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

在上面的例子里,有一個前提不可忽略,那就是司機是否可以理解我們不顯示的原因。當然,司機會接受相關培訓,產品中也會有渠道標識,所以司機能夠明白頁面中存在的差異。

但在其他產品中,當狀態(tài)不同,按鈕變化無法自洽的時候,又怎么去處理呢?我們就需要通過合理的解釋來消除用戶潛在的困惑。

對于這點,比較典型的案例是在線上購物時,一件商品會有多個類型供消費者選擇,比如不同的尺寸、型號等,當其中一種類型被搶光時,這個商品依然是可見的,只是無法選擇,展示出了禁用狀態(tài)。

在這種場景中,我們不能一下子把其他無法購買的類型隱藏,因為用戶需要知道我們所有的商品類別,了解商品的全部屬性,盡管當下無法購買,但有上新的可能,用戶依然可以選擇等待,并將其加入收藏,還是會有機會促成這筆交易。而且當可選類型變多的時候,只是禁用沒有庫存的類型,可以使其他可選項保持固定的位置,有利于我們二次搜索和加購。這種場景的禁用也是暫時的,直到商品下架或者上新。

但就像我以前說過的,常常我們見多了的東西,就認為是正常的,但它并不一定好的。禁用也是這種情況。

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

好比淘寶的商品選擇頁面,如今也將原來的商品純禁用按鈕,替換成了「缺貨」。選擇缺貨的商品之后,按鈕會變成「提醒掌柜補貨」。

禁用按鈕應該怎么用?來看高手的分析!

從原來的用戶單方面接收無法點擊的按鈕,到現(xiàn)在直觀顯示缺貨,點擊后同時提醒到商家,這樣的操作從功能角度來說是一個升級。

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

小結

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

對于按鈕來說,顯示禁用則代表它在滿足一定條件后即可擁有可點擊性,讓我們明確地了解它就在這里,未來是可操作的。按鈕也有很多的設計空間來為未來的使用做好鋪墊,特別是營銷類的活動,像是「明日 8 點可搶」、「提醒商家補貨」的按鈕文案,無一不在傳達「可用性」的信息,引導用戶持續(xù)性的關注。

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

我們要知道的是,禁用按鈕本身不是一個特殊的對象,只是禁用狀態(tài)在頁面中是一個特殊的存在,它是產品設計中的一種規(guī)則。為什么按鈕不可用,或者說一定場景下為什么功能不可用,當無法依靠用戶直覺理解的時候,是需要作出解釋的,也就是怎么禁的問題。

但是最開始設計時就應該去想的是,禁用狀態(tài)對用戶和產品的意義在哪里,這和我們設計方案時腦海中涌出的無數(shù)目標一樣,是一個基礎的出發(fā)點。而后,一切迎刃而解。

文章來源:優(yōu)設  作者:呆呆有理

藍藍設計m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔