2021-1-8 濤濤
在做設計的時候，經常會遇到一個問題，就是一個按鈕，在同一頁面的不同情況下，有時可用，有時不可用，我們到底是顯示不可用時的禁用狀態呢？還是直接隱藏這個按鈕呢？
大家還是喜歡提這種通用性問題，希望有一個說法，可以概括所有情況。但我多次說過，不存在這樣的好事，一定是具體問題具體分析的。
尤其是這個問題，想要聊透徹，得用不少例子來舉證說明，不過也可以通過總結的方式長話短說了。
禁用按鈕的使用，可以從兩個維度來分析，分別是：「無效的禁用狀態」和「有效的禁用狀態」。
有一種情況是，在一個頁面里，一個按鈕，可能會有幾種不同的情況存在。那人要問了，既然是一個頁面，為什么會有多種狀態同時存在的情況呢？
比如，在出行場景中，普通乘客發起訂單，司機接單后是可以發送消息的（左圖）。但是從第三方渠道來的乘客，司機是無法發送站內消息的，只能通過電話聯系乘客（右圖）。
不同渠道來的用戶，司機端的頁面會呈現不同的按鈕狀態。相同的頁面，第三方渠道來的乘客，在司機端就不需要露出消息按鈕了，這樣可以減少無效信息對司機的干擾，還可以避免司機習慣性操作帶來的無效反饋，比如點擊消息，顯示「無法發送消息」。或者顯示禁用，也會影響司機的操作判斷。
從這個案例中我們可以看出，當一個按鈕在某種情況下始終無法被觸發時，就會選擇讓它直接消失，而不是呈現禁用狀態。
很多人在這類設計里會給按鈕提供一個禁用狀態，以免按鈕消失而打亂頁面布局。但是要知道，在某種情況下，按鈕無用時，無意義的展示反而會產生干擾信息，就像上面說到的那樣。
所以這里有一個結論是：禁用按鈕需要可觸發的時機，如果沒有這個時機，禁用狀態就沒有存在的必要。如果存在，那它也是一個無效的狀態。
既然是無效的，最好就不要出現了。
在上面的例子里，有一個前提不可忽略，那就是司機是否可以理解我們不顯示的原因。當然，司機會接受相關培訓，產品中也會有渠道標識，所以司機能夠明白頁面中存在的差異。
但在其他產品中，當狀態不同，按鈕變化無法自洽的時候，又怎么去處理呢？我們就需要通過合理的解釋來消除用戶潛在的困惑。
對于這點，比較典型的案例是在線上購物時，一件商品會有多個類型供消費者選擇，比如不同的尺寸、型號等，當其中一種類型被搶光時，這個商品依然是可見的，只是無法選擇，展示出了禁用狀態。
在這種場景中，我們不能一下子把其他無法購買的類型隱藏，因為用戶需要知道我們所有的商品類別，了解商品的全部屬性，盡管當下無法購買，但有上新的可能，用戶依然可以選擇等待，并將其加入收藏，還是會有機會促成這筆交易。而且當可選類型變多的時候，只是禁用沒有庫存的類型，可以使其他可選項保持固定的位置，有利于我們二次搜索和加購。這種場景的禁用也是暫時的，直到商品下架或者上新。
但就像我以前說過的，常常我們見多了的東西，就認為是正常的，但它并不一定好的。禁用也是這種情況。
雖然我們現在還是會在各個地方看到禁用操作，但是禁用的原由始終沒有給到用戶合理的解釋，以至于許多人見到類似的操作都是一頭霧水。所以在設計過程中，尤其要謹慎對待，盡可能的避免出現無法解釋的禁用操作。
好比淘寶的商品選擇頁面，如今也將原來的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會變成「提醒掌柜補貨」。
從原來的用戶單方面接收無法點擊的按鈕，到現在直觀顯示缺貨，點擊后同時提醒到商家，這樣的操作從功能角度來說是一個升級。
這就是我說的，有效與無效的禁用按鈕之間的區別。禁用不該是真的禁止使用，而是告知用戶，它如何可被使用。
如果一個按鈕在不同的階段有禁用和可用的狀態顯示，那么意圖是很明顯的。比如一些活動頁面，某個按鈕的禁用狀態是倒計時，就像電影的前期宣傳，為電影的上線制造話題和熱度，來鼓勵更多人的觀看一樣。
對于按鈕來說，顯示禁用則代表它在滿足一定條件后即可擁有可點擊性，讓我們明確地了解它就在這里，未來是可操作的。按鈕也有很多的設計空間來為未來的使用做好鋪墊，特別是營銷類的活動，像是「明日 8 點可搶」、「提醒商家補貨」的按鈕文案，無一不在傳達「可用性」的信息，引導用戶持續性的關注。
但是還有一類禁用狀態只是靜默地提示，多出現在表單中，當用戶沒有完成輸入的時候則無法點擊，因為看的多了，我們就以為這是正常的。但我們都知道它仍可優化，比如，在它以禁用狀態出現時，用更為友好的方式去提醒用戶應如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。
我們要知道的是，禁用按鈕本身不是一個特殊的對象，只是禁用狀態在頁面中是一個特殊的存在，它是產品設計中的一種規則。為什么按鈕不可用，或者說一定場景下為什么功能不可用，當無法依靠用戶直覺理解的時候，是需要作出解釋的，也就是怎么禁的問題。
但是最開始設計時就應該去想的是，禁用狀態對用戶和產品的意義在哪里，這和我們設計方案時腦海中涌出的無數目標一樣，是一個基礎的出發點。而后，一切迎刃而解。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務