詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事發(fā)布者：本站     時(shí)間：2021-12-24 11:12:52

禁用，顧名思義，代表不可用的意思。有一個(gè)禁用，就一定對應著(zhù)一個(gè)可用。不論是表單，還是復雜性管理界面，抑或是分步引導，這些場(chǎng)景中都有可能出現禁用狀態(tài)，而如何合理運用禁用狀態(tài)，讓它成為體驗的加分項而不是減分項，正是設計師要不斷思考、深入實(shí)踐的。這里拋一些磚出來(lái)，希望和大家一起探討。

“這個(gè)不可點(diǎn)的按鈕放在這里很雞肋，我們是不是可以考慮去掉?”

“默認放出按鈕吧，不能點(diǎn)也沒(méi)關(guān)系，不然用戶(hù)怎么了解產(chǎn)品中有哪些功能?”

禁用狀態(tài)可看為應用程序機制對外暴露的一個(gè)直接體現，什么時(shí)候展現，什么時(shí)候隱藏，也是設計中經(jīng)常碰到的爭議話(huà)題。

Alan Cooper曾提到，激活和禁止菜單可以幫助用戶(hù)了解菜單所反映的用途，從而幫助菜單成為更好的教學(xué)工具。例如我們常用的photoshop選擇菜單：

菜單作為軟件中最完備的功能集合，應該呈現所有的功能，這是第一個(gè)前提。在這個(gè)前提下，再根據具體交互的流程來(lái)展示哪些操作可用，哪些禁用。仔細想想，在我們日常所見(jiàn)的各種軟件中，你并不會(huì )對菜單里的禁用項感到陌生。

菜單有一個(gè)好基友叫做工具欄。作為一種直觀(guān)、快捷的功能呈現形式，有幸出現在工具欄上的操作一般來(lái)說(shuō)是軟件中最常用的功能，為用戶(hù)提供快速、高效的操作入口。

工具欄給用戶(hù)的預期應該是穩定的，可靠的，用戶(hù)會(huì )不知不覺(jué)地對工具欄的布局進(jìn)行學(xué)習，記住常用操作的位置，形成使用慣性。如果某個(gè)按鈕有時(shí)消失，有時(shí)出現，用戶(hù)會(huì )感到迷惑，也不利于提高界面操作的效率。尤其是當工具欄上有大量操作時(shí)，固定位置的好處顯而易見(jiàn)，例如Ribbon界面，每個(gè)子面板下都包括至少5個(gè)以上的按鈕：

詳細解析<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中禁用狀態(tài)二三事,PS教程,

看上去，對于菜單、工具欄中的操作，不論是否有禁用狀態(tài)，默認放出來(lái)是最好的選擇。然而當操作較少時(shí)，設計師們仍然會(huì )做出思考和改進(jìn)。

瀏覽器，一個(gè)所有人都離不開(kāi)的軟件，前進(jìn)、后退是它的核心功能之一。在這件事上，Chrome和Firefox采取了不同的設計思路。Chrome的前進(jìn)、后退按鈕將位置固定在地址欄左側，根據當前網(wǎng)頁(yè)的訪(fǎng)問(wèn)路徑判斷該按鈕是否展示為可用狀態(tài)，如下圖所示：

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

這樣設計的好處在于，用戶(hù)第一眼就能明白功能的位置，便于形成操作慣性。雖然在某些情況下前進(jìn)按鈕會(huì )由可用樣式改變?yōu)榻脴邮?，但用?hù)瀏覽網(wǎng)頁(yè)時(shí)幾乎全部注意力都在網(wǎng)頁(yè)內容上，這里的狀態(tài)變化并不會(huì )造成困擾。

在Firefox中，打開(kāi)新網(wǎng)頁(yè)時(shí)地址欄左側僅有一個(gè)后退按鈕。點(diǎn)擊后退按鈕后，一個(gè)可用的前進(jìn)按鈕快速滑出。也就是說(shuō)，僅當前進(jìn)按鈕可用時(shí)，它才會(huì )出現，在不可用時(shí)它會(huì )被隱藏掉。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

如果用戶(hù)是按照開(kāi)新窗口的模式打開(kāi)新頁(yè)面，瀏覽完畢就關(guān)閉窗口，前進(jìn)按鈕并不會(huì )出現;如果用戶(hù)在同一窗口內新開(kāi)頁(yè)面，再點(diǎn)擊后退時(shí)，前進(jìn)按鈕快速滑出，動(dòng)畫(huà)的銜接讓它具備了功能自解釋的屬性，不會(huì )給用戶(hù)造成理解上的困惑。當頁(yè)面不能繼續前進(jìn)的時(shí)候，此時(shí)前進(jìn)按鈕瞬間變?yōu)榻脿顟B(tài)且快速滑動(dòng)收起消失，用戶(hù)也沒(méi)有機會(huì )去點(diǎn)擊。這樣一來(lái)，Firefox地址欄左側的空間在大部分情況下視覺(jué)感受輕量簡(jiǎn)潔，僅有一個(gè)最重要的后退按鈕，而在需要使用前進(jìn)按鈕的場(chǎng)景下，操作也是流暢、自然的。

這里不評判兩種設計孰優(yōu)孰劣，在處理前進(jìn)按鈕的這個(gè)問(wèn)題上，Chrome和Firefox都有各自的答案。Firefox之所以采用這種較為大膽的設計，我認為和前進(jìn)按鈕的使用頻率、使用場(chǎng)景有著(zhù)密不可分的關(guān)系。再換個(gè)角度，Chrome也并不適用Firefox的設計：在Chrome地址欄左側有3個(gè)按鈕，如果中間的按鈕有時(shí)會(huì )隱藏，那么最后一個(gè)刷新按鈕的位置無(wú)法固定，在用戶(hù)看來(lái)這個(gè)“工具欄”是有明顯跳動(dòng)存在的，而firefox的刷新按鈕是在地址欄右側，并不會(huì )有這樣的問(wèn)題。

上文是一層操作的例子。那么多層操作呢?假如你面對一組信息列表，針對全部列表有一套操作，針對每條信息又都有一套新的操作時(shí)，就必須要考慮隱藏的設計了。

Gmail的郵件列表頁(yè)在未選中郵件時(shí)，工具欄只包括3個(gè)針對列表的功能。選中具體郵件后，針對該郵件的操作出現在工具欄中，原有的操作消失。這樣既可以避免未選中郵件時(shí)大量禁用操作擺放在界面上給用戶(hù)造成負擔，又保證工具欄在默認狀態(tài)下的清爽簡(jiǎn)潔。然而，這種設計也給用戶(hù)帶來(lái)一定的學(xué)習成本，新手用戶(hù)在初次使用時(shí)需要探索一番才能明白郵件選中前后的區別。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

 

Dropbox也采用了類(lèi)似的設計，在默認界面的表格標題欄中不呈現任何操作，單擊選中文件后，具體操作展現在工具欄上。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

當我們面臨不那么復雜的操作時(shí)，例如web上的發(fā)布表單、提交流程等，對禁用狀態(tài)的取舍則需要更加細致入微的思考。以下是一些設計建議供參考：

1.需要應引導用戶(hù)操作時(shí)，扔掉禁用

先來(lái)看看新浪微博的發(fā)布按鈕。這個(gè)按鈕僅當發(fā)布框中有文字時(shí)展示為明確可點(diǎn)擊的紅色;若發(fā)布框中沒(méi)有文字，按鈕顯示為灰色，點(diǎn)擊時(shí)發(fā)布框背景色變紅閃爍，提示用戶(hù)輸入內容。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

這里設計要表達的目的很明確，既輸入文字后才可以發(fā)布。然而，當發(fā)布按鈕看上去呈現不可點(diǎn)擊的灰色時(shí)，鼠標移上按鈕仍然為手型，點(diǎn)擊后系統也給出了交互上的反饋，這樣一來(lái)按鈕就被賦予了多重含義，在變灰時(shí)也可以點(diǎn)擊，給用戶(hù)造成了理解上的困惑。按照用戶(hù)的認知，如果一個(gè)按鈕看上去可點(diǎn)擊，那么它應該實(shí)際也可點(diǎn)擊。如果看上去不像能點(diǎn)的樣子，那它就應該不可點(diǎn)。

facebook 的狀態(tài)發(fā)布按鈕并沒(méi)有設計禁用狀態(tài)，當輸入框內容為空時(shí)，點(diǎn)擊Post按鈕，頁(yè)面上不會(huì )產(chǎn)生變化。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

騰訊微博的發(fā)布按鈕也采用同樣的設計，假如內容為空時(shí)點(diǎn)擊按鈕，在輸入框的右下角會(huì )以橙色文字提示用戶(hù)輸入內容。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

對于微博或類(lèi)SNS的網(wǎng)站，發(fā)布狀態(tài)是最重要的寫(xiě)操作入口，按鈕在界面上可以起到良好的引導作用。這種情況下，僅賦予按鈕一種狀態(tài)，是不是更簡(jiǎn)單、更容易理解呢?

2.明確區分禁用和可用樣式

如果某個(gè)操作確實(shí)需要禁用狀態(tài)，那么在視覺(jué)上需要明確區分可用的樣式與禁用的樣式。舉一個(gè)反例，在tumblr發(fā)布文字時(shí)，左下角的發(fā)布按鈕很難看清什么情況下是可用，什么情況下是禁用。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

上圖中，紅色圈出的部分是禁用狀態(tài)。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

上圖為輸入文字后的狀態(tài)，左下角的Publish此時(shí)已經(jīng)可點(diǎn)擊了，但按鈕的顏色、立體效果均沒(méi)有改變，僅文字變亮，而文字的亮度和禁用狀態(tài)下僅有細微的差別，在比較差的顯示器上是無(wú)法分辨的。

3.在恰當的時(shí)候給出恰當的解釋

當禁用狀態(tài)的變化對用戶(hù)來(lái)說(shuō)有些突然時(shí)，可以考慮設計清晰易懂的解釋性說(shuō)明。例如Bing搜索首頁(yè)，當某張圖片不能下載時(shí)，下載按鈕置灰，當鼠標移動(dòng)到按鈕上時(shí)，tips解釋了該按鈕置灰的原因。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

OS X的設置窗口中，Advanced按鈕默認是禁用的。在這種類(lèi)似的設置窗口中，OS X使用左下角的帶鎖開(kāi)關(guān)來(lái)控制高級的操作。對于那些關(guān)鍵性的系統級設置，需要開(kāi)鎖后才能進(jìn)行更改。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

4. 賦予禁用狀態(tài)更多可能性

禁用狀態(tài)總是會(huì )令人聯(lián)想到冷冰冰的系統規則，但如果善用禁用狀態(tài)，信息傳達將更有效。例如在Twitter發(fā)推時(shí)，提交過(guò)程中Tweet按鈕變?yōu)榻?，同時(shí)在按鈕左側出現loading動(dòng)畫(huà)，通過(guò)兩個(gè)UI元素的組合表達了提交中這一動(dòng)作。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

新版flickr的上傳圖片工具中，點(diǎn)擊提交后，按鈕立刻變?yōu)榻脿顟B(tài)，而有趣的文案“Hold on there，tiger”也給界面帶來(lái)生動(dòng)感。

詳細解析網(wǎng)頁(yè)設計中禁用狀態(tài)二三事,PS教程,

小結

禁用狀態(tài)是否始終可見(jiàn)，取決于它所屬操作在界面中的功能屬性。最重要的是保證核心功能交互體驗流暢，用戶(hù)不會(huì )形成理解上的困惑，然后再根據具體界面環(huán)境進(jìn)行分析。如果需要展示禁用狀態(tài)，我們必須讓用戶(hù)明白該操作變得可用的方法;如果需要隱藏禁用狀態(tài)，在它出現時(shí)要讓用戶(hù)自然接受而不是“被嚇了一跳”。更進(jìn)一步，如果展示了禁用狀態(tài)，那么就盡量避免樣式上和可用狀態(tài)的混淆，明確可點(diǎn)與不可點(diǎn);在必要的時(shí)候給出解釋和說(shuō)明，不要讓用戶(hù)去猜測揣摩。