按鈕的禁用狀態 | 設計詳解

日期:2019-09-29 10:39作者:北大青鳥西安建大IT學院

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

 

召喚類按鈕的禁用狀態

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

 

a.不該出現禁用按鈕的情況

召喚,顧名思義,意為引導用戶進行操作的按鈕。引導用戶操作?那就不應該出現「禁用狀態」。
我通常會在一些產品里面體驗到這樣的情況:進入 App,看到有活動,點擊進入后,發現中秋節活動可領取月餅,累計到一定數值,即可獲得獎勵。但這時候的領取按鈕是不可點擊的。
仔細看的話,能看到活動頁確實寫著活動開始時間是 20:00,然而我點擊的時間是 18:00。所以也就能理解沒有任何反應的原因了。
但這是一個合理方案么?這本身是一個「召喚類按鈕」,意圖是讓用戶聚焦于按鈕,但此刻的按鈕無法點擊,會給用戶造成聚焦障礙,似乎在告訴用戶:我按鈕做這么大不是給你按的,先把規則給我看了。
按鈕做這么大不是給用戶按的?這是什么邏輯?類似于家里的電燈開關是擺設的,是按不下去的。
于是有了下面這個優化版。
這個優化版無論從設計角度還是開發角度來說,都是最平衡且能滿足體驗的方案。設計不需要再思考其他情況,用一條 toast 就可以滿足多數的逆向情況;開發不需要滿足按鈕的動態情況,只要在不同時間點分別獲取兩種情況就可以了(活動開放與未開放)。
但這當然也不是最好的方案,畢竟上面有提到,「召喚類按鈕」是引導用戶點擊的,而「點擊后提示不可用」僅比「無法點擊」在邏輯上顯得正確而已,但本質上也是不合理的。
最合理的方案應該是:有按鈕即可點擊,不可點擊即無按鈕。
或者倒計時,到點后自動呈現正式活動頁面。在很多比較大型的活動或大廠推出的節日活動里,經常會看到這樣的形式。
上面這個截圖指得是「進入中文直播」后的倒計時頁面,但是我之前沒截圖,所以就用這張圖代替了。
當然還有一類情況是,活動持續時間為一周,但每天只開啟 2 小時。
即便如此,活動開啟時再呈現按鈕也比按鈕一直呈現會更好。因為用戶會反復通過點擊按鈕來確認是否可點擊,是否可參與活動,即使未到活動開啟時間。所以無法點擊的召喚類按鈕,就不該出現在界面上。
產品界面通常會引導用戶思考。
當然如果為了圖方便的話,上面的第二類方案,即「按鈕可點擊并提示活動暫未開啟」也是可取的。只是大家要知道這里面的邏輯關系。 

 

b.樣式造成的認知錯覺

其實上述內容有一處,我沒有深入去聊,即當按鈕處于「禁用狀態」的情況下,顏色為淺灰色是否為最佳方案?
灰色的禁用狀態會給用戶一種錯覺,即這個按鈕從始至終都將不可用。
但是會有人反駁說:那有的「登錄/注冊」功能,按鈕即不可點擊,且是灰色的。這怎么解釋?
在這個被簡化的流程里有兩個邏輯,我們需要拆開看,分別是:按鈕樣式,以及違背了上述的「無法點擊的召喚類按鈕,就不該出現在界面上」的結論。
先看樣式。
各位通過下圖的對比可以發現,都是不可點擊,后者比前者看起來更像是同類型的操作按鈕,且暗示用戶該按鈕滿足條件即可被點擊。而純灰色按鈕更像是禁止且不會被可用的狀態。
且使用品牌色,降低不透明度,可加強用戶對該產品按鈕的認知。所以在這兩層關系上,第二種方案會更合理。
類似的例子有很多,這里簡單放兩個,就不一一舉例了。
重點來聊聊邏輯關系。
先說結論:這里的按鈕操作優先級在此流程里低于輸入框,所以可被暫時禁用。
所以上述這個方案是可行的,但從本質上來說,多級操作流程的召喚類按鈕被禁用,看起來總是差點意思。什么意思呢?繼續分析。
這時候就有人會問:那可否根據上面 a 篇里提到的一樣,給按鈕加一個可點擊提示呢?
各位謹記,單個按鈕的單個邏輯提示,相比兩個按鈕的多重判斷提示,會簡單很多,后者不僅會讓用戶混亂,甚至會讓設計師混亂。
比如上圖的可直接點擊按鈕,那么點擊「獲取驗證碼」需要判斷手機號正確與否,以及是否輸入了手機號?;蛘咧苯狱c擊「登錄」,除了需要判斷手機號的兩個邏輯,還要判斷驗證碼是否正確與位數是否為 6 位。
所以在這個方案里,「召喚按鈕」雖然還是「召喚按鈕」,但它的優先級相比于輸入框要更低,且輸入框也是操作控件,因此也需要引導用戶聚焦(比如直接彈出輸入框)。
即需要多次判斷,又需要用戶多重聚焦,以至于上面兩個方案無法成為最佳方案。
于是,后來也就演化出了如下方案。
先聚焦輸入框,再喚起按鈕,之后輸入驗證碼自動校驗。僅一次主動判斷,且按鈕邏輯被拆分至不同頁面,讓用戶也更好理解。
所以到這里,各位可以理解為什么說很多「登錄/注冊」功能會拆分步驟了么?原因有很多,我這里提到的兩塊內容「判斷邏輯」與「按鈕狀態」是關鍵因素。
通過 a 段和 b 段內容的分析,得出了下面這三個結論:
  • 無法點擊的召喚類按鈕,就不該出現在界面上;
  • 當召喚類按鈕不是最高操作優先級時,要引導用戶使其可用(如上圖的請輸入手機號);
  • 禁用按鈕的樣式,應該選擇低透明度的常規按鈕色值。
如果單看結論,會產生矛盾點。但經過上述分析,相信各位可以充分理解其含義了。 






轉載請保留本文網址http://www.cpnradio.com/qqwd/ui/494.html
上一篇:【干貨】25個故事性網頁設計,輕松講述網頁獨有
下一篇:UI培訓:設計理論研究
人妻 清高 无码 中文字幕