編輯導(dǎo)語：如何利用好按鈕設(shè)計，幫助用戶更明確、更清晰地了解“狀態(tài)”，避免產(chǎn)品使用過程中的操作失誤？這要求產(chǎn)品在設(shè)計過程中，更好地應(yīng)用狀態(tài)切換控件。本篇文章里，作者總結(jié)了狀態(tài)切換控件的應(yīng)用策略，一起來看一下吧！

一、背景

按鈕在用戶界面隨處可見，是通過單擊來觸發(fā)行為的組件。大部分時候我們都不會對按鈕的使用產(chǎn)生困惑，點擊“查看”按鈕就會觸發(fā)查看，點擊“搜索”按鈕就會觸發(fā)搜索。因為它們都表示“動作”，用戶很容易理解之后會發(fā)生什么，但是我們?nèi)匀荒芸匆姺浅Ｒ?guī)的按鈕。

下面是兩種按鈕的例子。

下左圖是騰訊云的“開始個人認(rèn)證”的按鈕，上面的文案表示了點擊之后的狀態(tài)。用戶點擊按鈕后跳轉(zhuǎn)至另外一個頁面，然后開始填寫個人認(rèn)認(rèn)證的相關(guān)信息。

下右圖“bilibili視頻播放器”中的“靜音”按鈕不同，它表示當(dāng)前靜音的“狀態(tài)”，而不是靜音的“動作”。并且點擊后會切換成正常喇叭的圖標(biāo)。不一樣的處理方式可能引起用戶的認(rèn)知錯誤。

這引出了我們今天要討論的主題，如何讓用戶更清晰地理解“按鈕”的含義，特別是那些表示“狀態(tài)”的按鈕。

二、狀態(tài)切換控件的兩種情況

1. 兩個狀態(tài)，兩個元素

Tesla車子的開關(guān)有兩個狀態(tài)，下圖是Tesla app在iPhone中的界面。上面的“鎖”圖標(biāo)是否打開用來表示車子目前的狀態(tài)。下面的按鈕表示“動作”，暗示了下一個狀態(tài)。例如上面“鎖”圖標(biāo)是關(guān)上的狀態(tài)，只要點擊下面“Unlock”的按鈕，就能把鎖打開。

2. 兩個狀態(tài)，一個元素

有時候我們能看見一個控件，既是表示現(xiàn)在狀態(tài)，也是一個行動點。比如下面Bilibili視頻播放器的音量控件，“未靜音”圖標(biāo)表示現(xiàn)在是“未靜音”狀態(tài)，點擊之后視頻會靜音。這與“動作”按鈕邏輯不同，但神奇的是我們使用起來卻是非常自然。

這讓我想起小時候晚上進(jìn)入房間的場景。房間一片漆黑，想要開燈。我不需要思考向上按還是向下按，只要換個當(dāng)前不一樣的放下按下去就行了。這是因為我對周邊“黑暗”的環(huán)境有明確的認(rèn)識，又知道那個開關(guān)能控制電燈的開啟和關(guān)閉。

同樣在Bilibili視頻播放器的音量控件的例子中，視頻所發(fā)出的聲音已經(jīng)明確表現(xiàn)了當(dāng)前的狀態(tài)——聲音已開啟。所以用戶只要知道某個東西能控制聲音開關(guān)，是通過點擊的方式操縱的，就能知道關(guān)閉它的方法。

但是請記住，任何類型的推論都需要時間和認(rèn)知努力，而且人們往往承受著快速反應(yīng)的時間壓力。所以強(qiáng)化用戶對現(xiàn)在狀態(tài)的認(rèn)識非常關(guān)鍵。

三、強(qiáng)化用戶對現(xiàn)在狀態(tài)的認(rèn)識

1. 強(qiáng)化對現(xiàn)在狀態(tài)的認(rèn)識

1）從按鈕本身強(qiáng)化認(rèn)知

按鈕的類型中有一種圖標(biāo)按鈕，它能在較小的空間里放下更多的按鈕，常常出現(xiàn)在工具性應(yīng)用中。但因為沒有動作文字說明，表現(xiàn)它的狀態(tài)就需要新的方法。

生活中我們常常能看見實體按鈕，像是下圖這樣老式的收音機(jī)，它通過按下按鈕然后觸發(fā)行為?？梢园l(fā)現(xiàn)被按下去的按鈕，因為其他按鈕的陰影而視覺上更深（如下右圖）。

同樣的處理方式我們用在圖標(biāo)按鈕上。語雀中的Button Group的交互就模仿了上面的做法，選中加粗后會在圖標(biāo)的背景加層“陰影”。這表示“加粗”按鈕已被按下，說明“加粗”已經(jīng)生效了。

2）從環(huán)境上本身強(qiáng)化認(rèn)知

下圖是在iOS的語音備忘錄中的兩個按鈕，其中一個是“開始錄音”按鈕，另外一個是“停止錄音”按鈕。從視覺上看，一時間很難對應(yīng)上。

一旦看見下圖軟件的使用界面，我們很容易判斷按鈕的作用。下面是推論的方式。

1. 當(dāng)前狀態(tài)：下右圖中的波狀聲音很明顯地說明“當(dāng)前正在錄音”；
2. 行動點：有一個能控制錄音開關(guān)的按鈕；
3. 結(jié)論：點擊后就會停止錄音。

這就是從環(huán)境上強(qiáng)化了“正在錄音”的認(rèn)知，從而理解按鈕作用的方式。

2. 使用有動詞文案的按鈕

如果上面有表述動作的文字，用戶更容易知道點下來會發(fā)生什么事情。比如下圖站酷修改前的“已關(guān)注”按鈕，看起來像是在描述現(xiàn)在的狀態(tài)，但是又錯誤地使用了按鈕的樣式。

下圖的“取消關(guān)注”按鈕則含義明顯得多，代表點下去會改變關(guān)注的狀態(tài)。

有意思的是，設(shè)計者正是考慮到了使用“取消關(guān)注”按鈕的話表意明確，然后反方向設(shè)計出一個表示狀態(tài)的按鈕來迷惑用戶。用戶就難知道如何取消關(guān)注了。

四、結(jié)論

讓用戶更清晰地理解“狀態(tài)切換控件”的含義有下面幾種方式：

1. 使用有動詞文案，讓用戶去理解文字；
2. 從控件本身強(qiáng)化認(rèn)知。依據(jù)用戶的認(rèn)知設(shè)計控件的樣式，比如收音機(jī)案例中按鈕的顏色變深；
3. 從環(huán)境上本身強(qiáng)化認(rèn)知。使用明顯的視覺、聽覺效果，讓用戶容易理解現(xiàn)在界面所處的狀態(tài)。

本文由 @biubiu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議