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

一、背景

按鈕在用戶界面隨處可見(jiàn)，是通過(guò)單擊來(lái)觸發(fā)行為的組件。大部分時(shí)候我們都不會(huì)對(duì)按鈕的使用產(chǎn)生困惑，點(diǎn)擊“查看”按鈕就會(huì)觸發(fā)查看，點(diǎn)擊“搜索”按鈕就會(huì)觸發(fā)搜索。因?yàn)樗鼈兌急硎尽皠?dòng)作”，用戶很容易理解之后會(huì)發(fā)生什么，但是我們?nèi)匀荒芸匆?jiàn)非常規(guī)的按鈕。

下面是兩種按鈕的例子。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下圖是在iOS的語(yǔ)音備忘錄中的兩個(gè)按鈕，其中一個(gè)是“開(kāi)始錄音”按鈕，另外一個(gè)是“停止錄音”按鈕。從視覺(jué)上看，一時(shí)間很難對(duì)應(yīng)上。

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

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

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

2. 使用有動(dòng)詞文案的按鈕

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

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

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

四、結(jié)論

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

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

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

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