禁用按鈕應(yīng)該怎么使用?
發(fā)布時間:2022-01-06 11:03 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

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

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

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

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


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


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

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

禁用按鈕應(yīng)該怎么用?來看高手的分析!

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

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

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

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

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


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


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

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

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

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

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

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

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

禁用按鈕應(yīng)該怎么用?來看高手的分析!

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

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


小結(jié)


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

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

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

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

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

UI設(shè)計之Figma系列教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC