中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、背景

按鈕在用戶界面隨處可見，是通過單擊來觸發行為的組件。大部分時候我們都不會對按鈕的使用產生困惑，點擊“查看”按鈕就會觸發查看，點擊“搜索”按鈕就會觸發搜索。因為它們都表示“動作”，用戶很容易理解之后會發生什么，但是我們仍然能看見非常規的按鈕。

下面是兩種按鈕的例子。

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

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

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

二、狀態切換控件的兩種情況

1. 兩個狀態，兩個元素

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

2. 兩個狀態，一個元素

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

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

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

但是請記住，任何類型的推論都需要時間和認知努力，而且人們往往承受著快速反應的時間壓力。所以強化用戶對現在狀態的認識非常關鍵。

三、強化用戶對現在狀態的認識

1. 強化對現在狀態的認識

1）從按鈕本身強化認知

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

生活中我們常常能看見實體按鈕，像是下圖這樣老式的收音機，它通過按下按鈕然后觸發行為。可以發現被按下去的按鈕，因為其他按鈕的陰影而視覺上更深（如下右圖）。

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

2）從環境上本身強化認知

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

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

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

這就是從環境上強化了“正在錄音”的認知，從而理解按鈕作用的方式。

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

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

下圖的“取消關注”按鈕則含義明顯得多，代表點下去會改變關注的狀態。

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

四、結論

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

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

本文由 @biubiu 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議