網站、應用交互設計分析：禁用狀態二三事

　　前言

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

　　“這個不可點的按鈕放在這裡很雞肋，我們是不是可以考慮去掉?”

　　“默認放出按鈕吧，不能點也沒關系，不然用戶怎麼了解產品中有哪些功能?”

　　禁用狀態可看為應用程序機制對外暴露的一個直接體現，什麼時候展現，什麼時候隱藏，也是設計中經常碰到的爭議話題。

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

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

　　菜單有一個好基友叫做工具欄。作為一種直觀、快捷的功能呈現形式，有幸出現在工具欄上的操作一般來說是軟件中最常用的功能，為用戶提供快速、高效的操作入口。

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

　　看上去，對於菜單、工具欄中的操作，不論是否有禁用狀態，默認放出來是最好的選擇。然而當操作較少時，設計師們仍然會做出思考和改進。

　　浏覽器，一個所有人都離不開的軟件，前進、後退是它的核心功能之一。在這件事上，Chrome和Firefox采取了不同的設計思路。Chrome的前進、後退按鈕將位置固定在地址欄左側，根據當前網頁的訪問路徑判斷該按鈕是否展示為可用狀態，如下圖所示：

　　這樣設計的好處在於，用戶第一眼就能明白功能的位置，便於形成操作慣性。雖然在某些情況下前進按鈕會由可用樣式改變為禁用樣式，但用戶浏覽網頁時幾乎全部注意力都在網頁內容上，這裡的狀態變化並不會造成困擾。

　　在Firefox中，打開新網頁時地址欄左側僅有一個後退按鈕。點擊後退按鈕後，一個可用的前進按鈕快速滑出。也就是說，僅當前進按鈕可用時，它才會出現，在不可用時它會被隱藏掉。

　　如果用戶是按照開新窗口的模式打開新頁面，浏覽完畢就關閉窗口，前進按鈕並不會出現;如果用戶在同一窗口內新開頁面，再點擊後退時，前進按鈕快速滑出，動畫的銜接讓它具備了功能自解釋的屬性，不會給用戶造成理解上的困惑。當頁面不能繼續前進的時候，此時前進按鈕瞬間變為禁用狀態且快速滑動收起消失，用戶也沒有機會去點擊。這樣一來，Firefox地址欄左側的空間在大部分情況下視覺感受輕量簡潔，僅有一個最重要的後退按鈕，而在需要使用前進按鈕的場景下，操作也是流暢、自然的。

　　這裡不評判兩種設計孰優孰劣，在處理前進按鈕的這個問題上，Chrome和Firefox都有各自的答案。Firefox之所以采用這種較為大膽的設計，我認為和前進按鈕的使用頻率、使用場景有著密不可分的關系。再換個角度，Chrome也並不適用Firefox的設計：在Chrome地址欄左側有3 個按鈕，如果中間的按鈕有時會隱藏，那麼最後一個刷新按鈕的位置無法固定，在用戶看來這個“工具欄”是有明顯跳動存在的，而firefox的刷新按鈕是在地址欄右側，並不會有這樣的問題。

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

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

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

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

　　1.需要應引導用戶操作時，扔掉禁用

　　先來看看新浪微博的發布按鈕。這個按鈕僅當發布框中有文字時展示為明確可點擊的紅色;若發布框中沒有文字，按鈕顯示為灰色，點擊時發布框背景色變紅閃爍，提示用戶輸入內容。

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

　　facebook 的狀態發布按鈕並沒有設計禁用狀態，當輸入框內容為空時，點擊Post按鈕，頁面上不會產生變化。

　　騰訊微博的發布按鈕也采用同樣的設計，假如內容為空時點擊按鈕，在輸入框的右下角會以橙色文字提示用戶輸入內容。

　　對於微博或類SNS的網站，發布狀態是最重要的寫操作入口，按鈕在界面上可以起到良好的引導作用。這種情況下，僅賦予按鈕一種狀態，是不是更簡單、更容易理解呢?

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

　　如果某個操作確實需要禁用狀態，那麼在視覺上需要明確區分可用的樣式與禁用的樣式。舉一個反例，在tumblr發布文字時，左下角的發布按鈕很難看清什麼情況下是可用，什麼情況下是禁用。

　　上圖中，紅色圈出的部分是禁用狀態。

　　上圖為輸入文字後的狀態，左下角的Publish此時已經可點擊了，但按鈕的顏色、立體效果均沒有改變，僅文字變亮，而文字的亮度和禁用狀態下僅有細微的差別，在比較差的顯示器上是無法分辨的。

　　3.在恰當的時候給出恰當的解釋

　　當禁用狀態的變化對用戶來說有些突然時，可以考慮設計清晰易懂的解釋性說明。例如Bing搜索首頁，當某張圖片不能下載時，下載按鈕置灰，當鼠標移動到按鈕上時，tips解釋了該按鈕置灰的原因。

　　OS X的設置窗口中，Advanced按鈕默認是禁用的。在這種類似的設置窗口中，OS X使用左下角的帶鎖開關來控制高級的操作。對於那些關鍵性的系統級設置，需要開鎖後才能