其動作態度「動態與狀態區別」

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

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

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 協議