設(shè)計(jì)禁用狀態(tài)二三事

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

　　“這個(gè)不可點(diǎn)的按鈕放在這里很雞肋，我們是不是可以考慮去掉？”
　　“默認(rèn)放出按鈕吧，不能點(diǎn)也沒關(guān)系，不然用戶怎么了解產(chǎn)品中有哪些功能？”
　　禁用狀態(tài)可看為應(yīng)用程序機(jī)制對(duì)外暴露的一個(gè)直接體現(xiàn)，什么時(shí)候展現(xiàn)，什么時(shí)候隱藏，也是設(shè)計(jì)中經(jīng)常碰到的爭(zhēng)議話題。

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

　　菜單作為軟件中最完備的功能集合，應(yīng)該呈現(xiàn)所有的功能，這是第一個(gè)前提。在這個(gè)前提下，再根據(jù)具體交互的流程來展示哪些操作可用，哪些禁用。仔細(xì)想想，在我們?nèi)粘Ｋ姷母鞣N軟件中，你并不會(huì)對(duì)菜單里的禁用項(xiàng)感到陌生。

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

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

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

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

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

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

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

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

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

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

　　Dropbox也采用了類似的設(shè)計(jì)，在默認(rèn)界面的表格標(biāo)題欄中不呈現(xiàn)任何操作，單擊選中文件后，具體操作展現(xiàn)在工具欄上。

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

1.需要應(yīng)引導(dǎo)用戶操作時(shí)，扔掉禁用

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

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

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

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

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

2.明確區(qū)分禁用和可用樣式

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

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

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

3.在恰當(dāng)?shù)臅r(shí)候給出恰當(dāng)?shù)慕忉?/strong>