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

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

01 動作和狀态的關系

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

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

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

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

02 按鈕的定義和類型

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

1. 空間切換型按鈕

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

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

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

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部