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

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

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

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

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

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

　　動作是指具有一定動機和目的并指向一定對象的運動。

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

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

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

　　”聽起來好復雜阿!“很多人都會這么認為。為什么我們在生活中天天面對類似的事卻很少有這樣的感覺呢?

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

　　三、生活中的例子

　　1、電燈開關(guān)

　　「圖2」

　　單控開關(guān)，我們最常見的開關(guān)之一，設(shè)計極其簡單，按下一邊是開，另一邊是關(guān)。至于到底那邊是開那邊是關(guān)，沒有幾個人會特別關(guān)心。因為我嘗試兩次總會作對操作，幾乎沒有什么成本。人們不會感覺什么不爽。

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

　　「圖2」

　　2、Ipod HOLD

　　「圖3」

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

　　3、顯示器

　　「圖4」

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

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

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

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

　　「圖5」

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

　　「圖6」

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

　　再看另一種情況

　　「圖7」

　　音樂播放器中的隨機播放。因為“隨機”與“按順序”播放并不容易直觀察覺，因此狀態(tài)需要明確標識。而動作本身由于并不是核心功能被弱化了，僅僅依賴界面功能區(qū)塊劃分來表示此處的可操作性。

　　「圖8」

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

　　「圖9」

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

　　最后我們來看一個手機界面的應(yīng)用。

　　「圖10」

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

　　五、小結(jié)

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

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

　　2、忽略狀態(tài)，突出動作(如圖6)。當狀態(tài)無需標識也能直觀識別時適用。

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

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

　　作者：Tony Lee

　　文章來源：aliued.cn