用戶界面設(shè)計(jì)中“狀態(tài)”和“動(dòng)作”的表達(dá)

一、問(wèn)題引發(fā)思考

　　前陣子與同事探討一個(gè)小需求時(shí)又遇到了按鈕表示“動(dòng)作”和表示“狀態(tài)”間矛盾問(wèn)題。想想這個(gè)問(wèn)題多年前已經(jīng)開(kāi)始討論了，所以在此整理一下思路，與大家共享。

　　具體案例是這樣的：如上圖所示，在“啟用”和“停用”搜索定制功能時(shí)，這個(gè)按鈕到底是表示“狀態(tài)”還是表示“動(dòng)作”呢?簡(jiǎn)單的說(shuō)，上圖中 1表示當(dāng)前是停用狀態(tài)，還是表示點(diǎn)擊后為停用操作呢?答案顯然是不清晰的。

　　怎樣能夠清晰的表達(dá)兩者的差異，減少用戶的誤解呢?我們首先要從“動(dòng)作”、“狀態(tài)”的定義和兩者的關(guān)系入手。

　　二、什么是動(dòng)作，什么是狀態(tài)

　　動(dòng)作是指具有一定動(dòng)機(jī)和目的并指向一定對(duì)象的運(yùn)動(dòng)。

　　狀態(tài)指人或事物表現(xiàn)出來(lái)的形態(tài)。

　　結(jié)合來(lái)講，動(dòng)作是促使人或事物改變某一狀態(tài)的運(yùn)動(dòng)，而狀態(tài)是動(dòng)作造成的結(jié)果表現(xiàn)。因此兩者經(jīng)常是緊密關(guān)聯(lián)的，有時(shí)甚至是互為條件的。

　　比如“操作收音機(jī)”這件事，我需要扭動(dòng)旋鈕或按鍵等“打開(kāi)”的動(dòng)作來(lái)打開(kāi)收音機(jī)，當(dāng)動(dòng)作完成后收音機(jī)的狀態(tài)是“打開(kāi)的”。而“關(guān)閉”收音機(jī)這個(gè)動(dòng)作的前提，是一個(gè)“打開(kāi)的”狀態(tài)的收音機(jī)。

　　”聽(tīng)起來(lái)好復(fù)雜阿!“很多人都會(huì)這么認(rèn)為。為什么我們?cè)谏钪刑焯烀鎸?duì)類似的事卻很少有這樣的感覺(jué)呢?

　　下面來(lái)看看生活中的例子我們或許就能理解了。

　　三、生活中的例子

　　1、電燈開(kāi)關(guān)

　　「圖2」

　　單控開(kāi)關(guān)，我們最常見(jiàn)的開(kāi)關(guān)之一，設(shè)計(jì)極其簡(jiǎn)單，按下一邊是開(kāi)，另一邊是關(guān)。至于到底那邊是開(kāi)那邊是關(guān)，沒(méi)有幾個(gè)人會(huì)特別關(guān)心。因?yàn)槲覈L試兩次總會(huì)作對(duì)操作，幾乎沒(méi)有什么成本。人們不會(huì)感覺(jué)什么不爽。

　　當(dāng)然，現(xiàn)在還有更好的設(shè)計(jì)。

　　「圖2」

　　2、Ipod HOLD

　　「圖3」

　　蘋果的Ipod播放器的按鍵鎖定功能“HOLD”。當(dāng)開(kāi)關(guān)撥動(dòng)到“HOLD”字樣一邊時(shí)，左側(cè)便會(huì)露出紅色。而撥動(dòng)到另一邊是沒(méi)有顏色的。巧妙的運(yùn)用了色彩對(duì)人們心里特征的影響區(qū)分出了hold的狀態(tài)。

　　3、顯示器

　　「圖4」

　　顯示器電源開(kāi)關(guān)，又一個(gè)“動(dòng)作”和“狀態(tài)”結(jié)合的應(yīng)用。使用按鈕突出的形態(tài)，和開(kāi)關(guān)的圖形表現(xiàn)來(lái)表示可執(zhí)行的動(dòng)作(這里按下去是用來(lái)開(kāi)關(guān)的)，使用背景燈的暗與亮來(lái)表示開(kāi)關(guān)狀態(tài)(燈亮表示現(xiàn)在是開(kāi)的狀態(tài))。

　　類似的應(yīng)用非常多，我們可以看到其中具有的特點(diǎn)是：1、可以觸摸、按動(dòng)(撥動(dòng))的按鈕 2、色彩的區(qū)分 3、有的還有明顯的位置差異以及標(biāo)識(shí)。

　　四、軟件以及網(wǎng)站中的例子

　　軟件或網(wǎng)站界面顯然不具備可觸摸的特點(diǎn)，不過(guò)我們的設(shè)計(jì)師也盡量會(huì)模擬出類似現(xiàn)實(shí)中物品的可以操作的形狀和質(zhì)感。

　　「圖5」

　　播放器常用的UI。點(diǎn)擊中間的“播放”與“暫停”鍵即可切換操作?？梢钥闯?，這里忽略了狀態(tài)的表現(xiàn)，我無(wú)法直觀的看到現(xiàn)在是播放還是暫停的狀態(tài)。原因很簡(jiǎn)單，就像開(kāi)關(guān)電燈一樣，影片的打開(kāi)與關(guān)閉是可以直接感知到的，不需要專門的狀態(tài)提示。

　　「圖6」

　　再來(lái)看列表的視圖切換。圖上箭頭所示“切換到大圖”功能也是此類應(yīng)用，忽略了狀態(tài)的表現(xiàn)。因?yàn)?ldquo;切換到大圖”動(dòng)作執(zhí)行后，界面的狀態(tài)會(huì)明顯的改變(大圖模式)，不需要專門的狀態(tài)來(lái)標(biāo)識(shí)。

　　再看另一種情況

　　「圖7」

　　音樂(lè)播放器中的隨機(jī)播放。因?yàn)?ldquo;隨機(jī)”與“按順序”播放并不容易直觀察覺(jué)，因此狀態(tài)需要明確標(biāo)識(shí)。而動(dòng)作本身由于并不是核心功能被弱化了，僅僅依賴界面功能區(qū)塊劃分來(lái)表示此處的可操作性。

　　「圖8」

　　還是音樂(lè)播放器，這次不同的是線性的狀態(tài)表示。音量的大小并不只是“開(kāi)、關(guān)”兩個(gè)狀態(tài)那么簡(jiǎn)單，而是由小到大線性變化的。上面那個(gè)UI通過(guò)左右兩個(gè)喇叭的形狀很好的表達(dá)了音量大小的兩端，中間的圓鈕既是動(dòng)作的操縱桿又是音量大小的刻度標(biāo)識(shí)。因?yàn)樗妥髠?cè)很好的連接在一起形成水槽效果，填滿部分的長(zhǎng)短再一次反映了音量的大小，非常巧妙。而下面那個(gè)UI只在左側(cè)放了音量大小標(biāo)識(shí)，雖然不同因量大小時(shí)左側(cè)圖標(biāo)也會(huì)相應(yīng)改變，但相比之下初次使用會(huì)難理解很多。

　　「圖9」

　　上面是某帳戶管理的UI，將狀態(tài)和操作(動(dòng)作)明顯的分兩列標(biāo)識(shí)，雖然顯得有些啰唆，但也清楚的表達(dá)出了應(yīng)有的含義。

　　最后我們來(lái)看一個(gè)手機(jī)界面的應(yīng)用。

　　「圖10」

　　仿照物理?yè)軇?dòng)開(kāi)關(guān)的質(zhì)感與色彩表達(dá)，很好的”動(dòng)作“與”狀態(tài)“結(jié)合的例子。這樣的設(shè)計(jì)你還會(huì)犯錯(cuò)么?

　　五、小結(jié)

　　前面作了很多應(yīng)用的舉例，那么到底怎樣才能做好”動(dòng)作“與”狀態(tài)“結(jié)合的設(shè)計(jì)呢?

　　1、分離狀態(tài)與動(dòng)作的表示(如圖9)。最直接，產(chǎn)生歧義的可能最小，但可能會(huì)占用大量空間，以及造成信息冗余。

　　2、忽略狀態(tài)，突出動(dòng)作(如圖6)。當(dāng)狀態(tài)無(wú)需標(biāo)識(shí)也能直觀識(shí)別時(shí)適用。

　　3、忽略動(dòng)作，突出狀態(tài)(如圖7)。當(dāng)動(dòng)作操作已經(jīng)被劃分指定區(qū)域，可以預(yù)期其可操作性時(shí)適用。

　　4、具象與仿生(如圖10)。當(dāng)與現(xiàn)實(shí)物品建立感官聯(lián)系時(shí)，人們的學(xué)習(xí)成本會(huì)大大降低。此類運(yùn)用不好定義其適用范圍，留給大家探討吧。

　　作者：Tony Lee

　　文章來(lái)源：aliued.cn