用一篇超全面的文章，詳解「按鈕」的禁用狀態(tài)

@Daidai丶呆?：本篇文章我從「召喚類按鈕」與「工具類按鈕」兩個角度詳細拆解了其內(nèi)在邏輯，希望幫到各位更好理解按鈕設計邏輯。

禁用，通常的理解是當前不可點擊或禁止使用，在界面上也是一種占位標識。相對的，當按鈕解除禁用后，就變得可點擊。僅此一種簡單的變化能演化出各類不同的禁用按鈕的處理方式。于是，我把這些「禁用按鈕」的設計思路概括為兩種類型：「召喚類」與「工具類」按鈕。

召喚類按鈕的禁用狀態(tài)

在召喚類按鈕里，我們可以拆分出兩種類型對其進行講解。

1. 不該出現(xiàn)禁用按鈕的情況

召喚，意為引導用戶進行操作的按鈕。那就不應該出現(xiàn)「禁用狀態(tài)」。

我通常會在一些產(chǎn)品里面體驗到這樣的情況：進入 App，看到有活動，點擊進入后，發(fā)現(xiàn)中秋節(jié)活動可領取月餅，累計到一定數(shù)值，即可獲得獎勵。但這時候的領取按鈕是不可點擊的。

仔細看的話，能看到活動頁確實寫著活動開始時間是 20:00，然而我點擊的時間是 18:00，所以也就能理解沒有任何反應的原因了。

但這是一個合理的方案么？這本身是一個「召喚類按鈕」，意圖是讓用戶聚焦于按鈕，但此刻的按鈕無法點擊，會給用戶造成聚焦障礙，似乎在告訴用戶：我按鈕做這么大不是給你按的，先把規(guī)則給我看了。

按鈕做這么大不是給用戶按的？這是什么邏輯？類似于家里的電燈開關是擺設的，是按不下去的。

于是有了下面這個優(yōu)化版：

這個優(yōu)化版無論從設計角度還是開發(fā)角度來說，都是最平衡且能滿足體驗的方案。設計不需要再思考其他情況，用一條 toast 就可以滿足多數(shù)的逆向情況。開發(fā)不需要滿足按鈕的動態(tài)情況，只要在不同時間點分別獲取兩種情況就可以了（活動開放與未開放）。

但這當然也不是最好的方案，畢竟上面有提到，「召喚類按鈕」是引導用戶點擊的，而「點擊后提示不可用」僅比「無法點擊」在邏輯上顯得正確而已，但本質(zhì)上也是不合理的。

最合理的方案應該是：有按鈕即可點擊，不可點擊即無按鈕。

或者倒計時，到點后自動呈現(xiàn)正式活動頁面。在很多比較大型的活動或大廠推出的節(jié)日活動里，經(jīng)常會看到這樣的形式。

上面這個截圖指得是「進入中文直播」后的倒計時頁面，但是我之前沒截圖，所以就用這張圖代替了。

當然還有一類情況是，活動持續(xù)時間為一周，但每天只開啟 2 小時。

即便如此，活動開啟時再呈現(xiàn)按鈕也比按鈕一直呈現(xiàn)會更好。因為用戶會反復通過點擊按鈕來確認是否可點擊，是否可參與活動，即使未到活動開啟時間。所以無法點擊的召喚類按鈕，就不該出現(xiàn)在界面上。

產(chǎn)品界面通常會引導用戶思考。

當然如果為了圖方便的話，上面的第二類方案，即「按鈕可點擊并提示活動暫未開啟」也是可取的。只是大家要知道這里面的邏輯關系。

2. 樣式造成的認知錯覺

其實上述內(nèi)容有一處，我沒有深入去聊，即當按鈕處于「禁用狀態(tài)」的情況下，顏色為淺灰色是否為最佳方案？

灰色的禁用狀態(tài)會給用戶一種錯覺，即這個按鈕從始至終都將不可用。

但是會有人反駁說：那有的「登錄/注冊」功能，按鈕不可點擊，且是灰色的。這怎么解釋？

在這個被簡化的流程里有兩個邏輯，我們需要拆開看，分別是：按鈕樣式，以及違背了上述的「無法點擊的召喚類按鈕，就不該出現(xiàn)在界面上」的結(jié)論。

先看樣式。通過下圖的對比可以發(fā)現(xiàn)，都是不可點擊，后者比前者看起來更像是同類型的操作按鈕，且暗示用戶該按鈕滿足條件即可被點擊。而純灰色按鈕更像是禁止且不可用的狀態(tài)。

使用品牌色，降低不透明度，可加強用戶對該產(chǎn)品按鈕的認知。所以在這兩層關系上，第二種方案會更合理。

類似的例子有很多，這里簡單放兩個，就不一一舉例了。

重點來聊聊邏輯關系。

先說結(jié)論：這里的按鈕操作優(yōu)先級在此流程里低于輸入框，所以可被暫時禁用。

所以上述這個方案是可行的，但從本質(zhì)上來說，多級操作流程的召喚類按鈕被禁用，看起來總是差點意思。

這時候就有人會問：那可否根據(jù)上面提到的一樣，給按鈕加一個可點擊提示呢？

單個按鈕的單個邏輯提示，相比兩個按鈕的多重判斷提示，會簡單很多，后者不僅會讓用戶混亂，甚至會讓設計師混亂。

比如上圖的可直接點擊按鈕，那么點擊「獲取驗證碼」需要判斷手機號正確與否，以及是否輸入了手機號。或者直接點擊「登錄」，除了需要判斷手機號的兩個邏輯，還要判斷驗證碼是否正確與位數(shù)是否為 6 位。

所以在這個方案里，「召喚按鈕」雖然還是「召喚按鈕」，但它的優(yōu)先級相比于輸入框要更低，且輸入框也是操作控件，因此也需要引導用戶聚焦（比如直接彈出輸入框）。

即需要多次判斷，又需要用戶多重聚焦，以至于上面兩個方案無法成為最佳方案。

于是，后來也就演化出了如下方案。

先聚焦輸入框，再喚起按鈕，之后輸入驗證碼自動校驗。僅一次主動判斷，且按鈕邏輯被拆分至不同頁面，讓用戶也更好理解。

所以到這里，可以理解為什么說很多「登錄/注冊」功能會拆分步驟了么？原因有很多，我這里提到的兩塊內(nèi)容「判斷邏輯」與「按鈕狀態(tài)」是關鍵因素。

3. 小結(jié)

根據(jù)前面的分析，得出了這三個結(jié)論：

• 無法點擊的召喚類按鈕，就不該出現(xiàn)在界面上；
• 當召喚類按鈕不是最高操作優(yōu)先級時，要引導用戶使其可用（如上圖的請輸入手機號）；
• 禁用按鈕的樣式，應該選擇低透明度的常規(guī)按鈕色值。

如果單看結(jié)論，會產(chǎn)生矛盾點。但經(jīng)過上述分析，相信各位可以充分理解其含義了。

工具類按鈕的禁用狀態(tài)

設計師平時用的最多的設計工具應該是 Photoshop 或 Sketch 了，我們經(jīng)常會在這類「工具類按鈕」里發(fā)現(xiàn)一些功能不可操作。

如果根據(jù)「召喚類按鈕」的邏輯來說，是否「工具類按鈕」的禁用狀態(tài)也不應該出現(xiàn)或只能淺色顯示呢？

從正常邏輯來說：是的。

但因為「工具類按鈕」有其特殊性，所以我們還是要從頭來分析一遍才好給出結(jié)論。

1. 歷史遺留問題

為什么說這是歷史遺留問題呢？要回答這個問題，我們得先說說「工具類按鈕」的禁用狀態(tài)為什么特殊。

在我們平時使用的大部分設計類產(chǎn)品里，它們的設計模式統(tǒng)一為固定工具欄，有哪些工具一目了然，同時哪些禁用，哪些可用，也是展現(xiàn)得一清二楚。

原因是操作頻繁，用戶需要反復使用，對界面與工具位置擺放的熟悉度也是這類產(chǎn)品的可用性保障。

包括其他很多設計類產(chǎn)品，都可對工具進行自定義擺放，其目的與我上述所說的也是相吻合。

Word、Excel 等產(chǎn)品也是類似，雖然不能自定義擺放，但是設計宗旨基本類似。

大家是否發(fā)現(xiàn)一個問題？即我們大多數(shù)時候在設計類產(chǎn)品里使用的功能也就那么幾個。即使下載了很多插件，用得最頻繁的估計也就是切圖跟標注了。

即使到現(xiàn)在，很多工具也依然這樣被設計出來，不是因為設計者思維固化，有時候用戶的使用習慣反而決定了這個結(jié)果。但從某個角度來說，工具欄被固定，各類按鈕被設計者釘在它們被安排好的位置上，確實也是高效率的一種方案。但肯定不是最好的方案。

2. 顛覆以往的按鈕設計

這樣做一定是好的么？把所有這類產(chǎn)品的工具都放出來，合理擺放讓用戶自己熟悉、適應，就肯定沒問題？

真不是。

好的工具類按鈕，一定是根據(jù)場景來呈現(xiàn)的。也就是隨著用戶與功能的互動而出現(xiàn)相應的內(nèi)容。

比如網(wǎng)盤的產(chǎn)品，用戶勾選某個文件或文件夾前后的操作邏輯也是隨著場景改變的。

我們來看 figma：

從上圖可以看到此時的頂部內(nèi)容除了固定可操作性的工具外，沒有其他任何可操作內(nèi)容。

這時候選取界面中的圖形，頂部工具欄發(fā)生了變化：

其按鈕會出現(xiàn)針對于此圖形可操作的工具，且還會根據(jù)圖形的數(shù)量而進行工具的變化。這就是一種進步，一種工具類產(chǎn)品的革新。

其他很多產(chǎn)品目前也已經(jīng)逐漸場景化。比如滴滴打車，從選址、叫車、評價，都是場景引導按鈕出現(xiàn)，而不是一窩蜂地出現(xiàn)在界面上，告訴你還沒下車，所以不能評價。

而隨著「工具類按鈕」的演化，我相信最終的結(jié)果會回到本篇文章第一部分講的那樣：不該出現(xiàn)的東西，就隱藏掉吧。

總結(jié)

按鈕的禁用狀態(tài)一直以來都是業(yè)界存在的爭論點，從樣式到邏輯，從文案到可見性。本篇文章我從「召喚類按鈕」與「工具類按鈕」兩個角度詳細拆解了其內(nèi)在邏輯，告訴各位按鈕的禁用狀態(tài)應該隨著場景、功能屬性的變化而變化。保證用戶易于理解，設計師通于屬性。

• 無法點擊的召喚類按鈕，就不該出現(xiàn)在界面上；
• 當召喚類按鈕不是最高操作優(yōu)先級時，要引導用戶使其可用（如上圖的請輸入手機號）；
• 禁用按鈕的樣式，應該選擇低透明度的常規(guī)按鈕色；
• 工具類按鈕也隨之場景化。

歡迎關注作者的微信公眾號：「呆呆U理」