編輯導語：你是否曾思考過一個問題——按鈕是表示「動作」還是表意「狀態」呢？這類問題經常發生在功能設計的各個操作環節，展現形式小但互動頻次很高，本文作者對此進行了分析，一起來看一下吧。

前段時間和同事討論理財交易環節表單的設計方案，正好又遇到了按鈕是表示「動作」還是表意「狀態」的矛盾問題。這類問題雖歸屬於基礎交互，但卻經常發生在功能設計的各個操作環節，展現形式雖小但互動頻次很高，所以這裡重新整理思路，分享下思考。

01 動作和狀態的關係

檢索這兩個關鍵詞，百科和體驗文檔中的詞面釋義是這樣的：

動作：具有一定動機和目的並指向客體的運動
狀態：人和事物表現出來的形態

簡單來說，動作有一定的目標性，是促使人或事物改變當前狀態的運動，而狀態是動作造成的結果，動作的介入會帶來狀態的變化，如圖所示：

「動作」和「狀態」這兩者緊密相連，有時又可能互為因果，舉個生活中的例子：冰箱門常規情況下是「關閉」的狀態，因為打開這個動作，隨即切換成「打開」的狀態。但打開這個動作能夠實現，前提則是需要一個「關閉」狀態的冰箱門。

02 按鈕的定義和類型

按鈕預示著一個即時操作的發起。按照操作帶來結果的差異程度，由大及小，可以把按鈕分為三類：

1. 空間切換型按鈕

因操作的發起帶來場景的重大變化、空間的巨大切換或交互對象的消失與重建，這類操作的按鈕，我們都稱之為空間切換型按鈕。大多數項目中涉及的案例均屬此類：

外投廣告引導端外獲客，點擊[下載]按鈕，跳出瀏覽器，跳轉APP Store。
信貸借款流程，點擊[借款]按鈕，跳轉開啟完整的借款流程。
首頁營銷浮層，點擊，浮層消失。

以上這些標準意義的交互，操作結果都是很重的。這類按鈕都是在表達動作-給予用戶預期，並能告訴用戶點下去之後，究竟會發生什麼。相信在這一點上大家都有共識。

2. 狀態變換型按鈕

狀態變換型按鈕，顧名思義，不涉及重大場景、流程或者對象的的改變，而是控制項不同交互形態的變換，這裡的使用也是大家經常有爭議的環節，著重討論一下。

最常見的例子就是：同一音樂播放器界面內，「播放」和「暫停」的雙態切換，這倆是表動作；但「切換播放模式」的按鈕，反而表義當前狀態，展示原則和展現形式上，這不矛盾嗎？

數字體驗基本都是生活體驗的映射。思考問題之前，我們先看生活中有沒有答案。比如：下班回家後，我們甚至都不用關注開關的原始狀態，按一下就知道開關被打開了，因為屋子的燈亮了，雖然開關有兩種狀態，但我們不注意也不會有疑惑。

可設想一下，燈光開關設置在室外，關門之後，要我們在室外開啟或者關閉室內燈光，就很難準確實現，因為對當前屋內環境缺乏判斷。所以後來很多室外開關在原有基礎上都增加了狀態展示，這也是移動端狀態切換開關的界面設計靈感來源。

以上案例可以看出，當前狀態的確定性可以消減動作帶來的疑惑。

1）能快速識別狀態的，按鈕表達觸發動作

回到音樂播放器例子，播放/暫停這個按鈕，表示的不是當前狀態 – 當前是暫停態，按鈕是「點擊後，會播放」的意思。音樂是否正在播放，這個狀態，從聽覺和視覺上就可以很好地識別出來：黑膠是不是轉動、還有沒有歌聲、畫面動還是不動等等。按鈕的交互邏輯，就可以去強調觸發後的狀態，即表達動作。在很多的常見場景中都有類似的應用，比如：

視頻APP播放器的播放/暫停模式
在線閱讀的黑夜/白天切換模式
微信中的攝像頭前/後切換、語音/視頻切換

等等設置和展示邏輯皆是如此。

2）不能快速識別的，按鈕表義當前狀態

還是音樂播放器的例子，播放模式切換按鈕，表示當前狀態 – 當前處於隨機播放模式[以截圖為例]。播放模式[隨機、循環、單曲]的變化，相比於畫面視覺或聲音，是有滯後性的。到底選擇了哪種播放模式，在音樂暫停亦或播放中，都非常不明顯，很難判斷。

那麼好，這個按鈕的交互邏輯，最好就去幫助用戶在視覺上更簡單高效地去識別當前狀態。繼續向下思考，好像還有哪裡不對勁：狀態能夠識別到了，但用戶操作有預期嗎？特別是一個功能存在兩種以上的模式時，用戶完全不知道點擊後的結果。調整到如下方案是不是更合適？既能告知當前狀態，又有選擇預期。

邏輯上是更清晰了，但和其他功能疊加，這個界面更複雜了。移動產品物理屏幕的限制不可能給予所有信息的充分展示，要滿足用戶基礎識別性和產品多功能入口數的雙重要求，設計的精簡成為必然。於是便有了目前討論的線上方案。

按鈕表意當前狀態，有很多的應用場景，比如：

視頻播放器的鎖屏功能
電商列表頁的商品圖文展示模式
手機顯示控制中心的各種功能入口切換模式

等等設置和展示邏輯皆是如此。

3）動作和狀態的邏輯受產品策略影響

場景的可識別性與按鈕的使用邏輯在對應關係上並不是絕對的，存在著相對靈活的中間地帶。

①單一功能或小場景

並不是說所有能識別狀態的，按鈕都必須要表達動作，存在一些習慣性的特例小case。比如理財持倉金額數字展示中的這個「睜眼與閉眼」圖形隱喻，比如密碼輸入過程中的「顯示與隱藏」按鈕，都是在當前功能狀態[密碼外露/金額顯示]非常明確的前提下，仍舊強調相同的信息狀態。

儘管已成行業通用做法，但仔細想想，顛倒一下用戶好像也能明白。

②產品本身的策略傾向性

以上討論多是按鈕狀態和狀態間、動作和動作間的切換，因為產品本身策略的原因，經常也會有按鈕的動作和狀態間跨邏輯的轉換。比如：微信讀書為了強化用戶對加入書架的引導，功能拆成了「加入書架」和「已加入書架」兩種形式。

無論從哪種角度看，都希望用戶對書架有正向感知，不要刪除書架。

這類傾向性在社交產品中更加明顯，為增加關係鏈數據，都會側重促成用戶建立好友關係，所以按鈕形式會使用「加關注/已關注」而不是「添加關注/取消關注」、「未關注/已關注」等。

3. 數值調節型按鈕

儘管《About Face4.0互動設計精髓》第21章[控制項與對話框]中同樣定義稱為滑塊控制項[slider]。但畢竟和「滑動按鈕」存在模糊的邊界，我們這裡權且從按鈕的角度來看：形變最小，不涉及空間環境改變或控制項形態轉換，更多指同維度的不同程度數值的變化。

1）表狀態並通過反饋強化實時狀態

這個比較好理解，數值大小就是狀態的外在表現。數值變化常伴隨有實時的反饋，告知用戶當前的具體狀態，幫助用戶判斷。比如iPhone亮度調整時，屏幕會實時變化明暗效果；調節提醒時，鈴聲會同步響起。

當然也有反面案例，比如微信讀書音頻模式下的語速調節功能，滑動按鈕，沒有任何聲音示例，用戶根本就不明白數字對應什麼語速。

2）狀態的變化具有精細化特徵

狀態特徵的精細化，作為設計細節的重要一環，在優秀產品上體現的淋漓盡致。舉個例子，手機使用側邊鍵調節音量強度，和屏幕滑動的結果一樣，可以實現音量強弱狀態的變化。

iPhone的邏輯是把聲音分16級，每次按鍵增幅相同，按16次音量增到滿。魅族的flyme8，音量一共被分成12級，第一級低音區又被分成了4個小級，按鍵調節音量時，低音量區裡的每一級的音量漲幅要比高音量區裡的漲幅小得多。也就是說你從零開始提高音量時，前四次按鍵每次音量提升的幅度都非常之小，後11次則是正常的提升幅度[如圖]（感謝知乎@乾魚案例）。

這個細節的差異設計就非常符合我們夜間聽歌的音量訴求：拒絕大音量並能精確設定一個適宜的低音分貝。也體現出了對精細場景訴求的呼應-音量很低時才需要更細緻的音量調節。

03 總結一下

回顧以上對按鈕「動作和狀態」的探討，基於動作觸髮結果的影響度，抽象意義上可以分為三類，對應具體場景中的使用和表意，整理成下圖。

最後一個問題，大家想想文章底部的「喜歡」和「在看」分別屬於那一類？

作者：葉魯，微信公眾號：葉魯設計思考，滴滴高級設計專家，共同思考設計和提升技能，提供體驗諮詢、互動設計、設計師職業發展等相關信息。

本文由 @葉魯原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

「動作與狀態」的再思考