按鈕是界面設(shè)計(jì)中最常見的元素之一。比如播放器的“播放”和“暫停”按鈕。也正是在使用某一款播放器的時(shí)候遇到的問題促使我記錄以下文字。
這是Windows Media Player的播放控制區(qū)域。在音樂停止時(shí)，中間的播放按鈕圖標(biāo)顯示為一個(gè)三角形，這是通用的播放圖標(biāo)，提示用戶點(diǎn)擊按鈕后會(huì)開始播放音樂。當(dāng)正在播放音樂時(shí)，按鈕圖標(biāo)則顯示為暫停，提示用戶點(diǎn)擊按鈕后會(huì)暫停播放。
以上設(shè)計(jì)已經(jīng)沿用多年，用戶也習(xí)慣了此類模式，在使用過程中完全不會(huì)多想。就如同燈的開關(guān)，按一下開燈，再按一下關(guān)燈。不過最近在使用某一款視頻播放器的時(shí)候，播放按鈕上圖標(biāo)的設(shè)置則是與上面的使用習(xí)慣相反：視頻正在播放時(shí)，圖標(biāo)顯示三角形；視頻暫停時(shí)，圖標(biāo)顯示兩條豎線。因?yàn)檫@種設(shè)計(jì)與習(xí)慣相反，一開始讓我有些不知所措，反復(fù)點(diǎn)擊了幾下按鈕才搞明白。細(xì)想一下，設(shè)計(jì)師應(yīng)該是想用圖標(biāo)表達(dá)當(dāng)前播放的狀態(tài)。先不說這樣的思路對(duì)不對(duì)，在一個(gè)已經(jīng)成熟的設(shè)計(jì)模式上做創(chuàng)新挑戰(zhàn)用戶習(xí)慣確實(shí)要冒極大風(fēng)險(xiǎn)，且有點(diǎn)不必要。
不過再深入想想，按鈕這個(gè)簡(jiǎn)單的東西并不那么簡(jiǎn)單。
來看看維基百科的解釋：按鈕，全名：命令按鈕。英文：Command Button。程序或網(wǎng)頁最常用的一個(gè)控件。在程序中，按鈕是最常用的用于觸發(fā)事件的控件，也可以開始，中斷，結(jié)束一個(gè)進(jìn)程。按鈕接受最常用的事件為單擊事件（Click），按鈕的狀態(tài)為兩種，即：原狀態(tài)和按下狀態(tài)。當(dāng)鼠標(biāo)單擊按鈕時(shí)，按鈕處于按下狀態(tài)。
按鈕需要用戶動(dòng)作觸發(fā)，然后執(zhí)行命令。在網(wǎng)頁設(shè)計(jì)中，我們常常會(huì)忘記按鈕的狀態(tài)，因?yàn)辄c(diǎn)擊網(wǎng)頁上的一個(gè)按鈕后經(jīng)常會(huì)是進(jìn)入另一個(gè)界面，這個(gè)按鈕已經(jīng)看不到了，比如“提交”按鈕。此類按鈕可以叫做單態(tài)按鈕，或者動(dòng)作按鈕。動(dòng)作按鈕只有一個(gè)狀態(tài)。
在篇首給我?guī)硪苫蟮牟シ?暫停按鈕是兩態(tài)/切換按鈕(toggle button)。除了播放/暫停，開/關(guān)也是很典型的兩態(tài)按鈕。此類按鈕要順利使用，需要讓用戶了解當(dāng)前的狀態(tài)，同時(shí)還要給用戶預(yù)期，預(yù)示點(diǎn)擊以后的結(jié)果。音樂/視頻正在播放時(shí)，用戶能夠感知到，因此不需要在按鈕上額外表示當(dāng)前狀態(tài)，只需要提供預(yù)期即可。因此在播放時(shí)，按鈕上顯示暫停圖標(biāo)預(yù)示點(diǎn)擊按鈕將暫停播放，是正確且符合使用習(xí)慣的設(shè)計(jì)。燈的開關(guān)也是如此。
正是因?yàn)橛脩舫３？梢栽诓恍枰~外設(shè)計(jì)的情況下就可以感知到當(dāng)前狀態(tài)，設(shè)計(jì)師也常常忘記了狀態(tài)的存在。可以設(shè)想以下場(chǎng)景來證明狀態(tài)的重要性：假如一個(gè)房間沒有窗戶，關(guān)上門之后無法看見燈光，燈光開關(guān)設(shè)置在室外。在關(guān)門之后，要求用戶在室外開啟或者關(guān)閉室內(nèi)燈光。因?yàn)闊o法知道燈當(dāng)前的狀態(tài)，如果開關(guān)按鈕上也不提供狀態(tài)，用戶將無法完成這個(gè)任務(wù)。如果將開關(guān)設(shè)計(jì)成下面這樣，用戶就能順利完成任務(wù)了：
因此，在界面設(shè)計(jì)中常常會(huì)看到運(yùn)用顏色、圖形、文字、提示信息等多種方法來達(dá)到按鈕設(shè)計(jì)的目的。比如上面說的Windows Media Player播放按鈕，當(dāng)鼠標(biāo)放在按鈕上的時(shí)候，就會(huì)顯示按鈕執(zhí)行動(dòng)作的提示。而且，就算這樣用戶也可能需要反復(fù)嘗試幾次之后才能正確使用。
對(duì)于兩態(tài)按鈕，目前并沒有統(tǒng)一的設(shè)計(jì)原則，從以往的設(shè)計(jì)實(shí)踐中可以總結(jié)出以下方法：
1）在當(dāng)前狀態(tài)很清楚的情況下，直接預(yù)示動(dòng)作結(jié)果。比如播放/停止按鈕。
2）顯示當(dāng)前狀態(tài)，點(diǎn)擊后切換至另一狀態(tài)。比如手機(jī)界面常見的WIFI開關(guān)。
無論采用哪一種設(shè)計(jì)方法，都要綜合考慮，遵循用戶習(xí)慣、業(yè)界標(biāo)準(zhǔn)、平臺(tái)原則。
