起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識“動作與狀態(tài)”的再思考
編輯導語：你是否曾思考過一個問題——按鈕是表示“動作”還是表意“狀態(tài)”呢？這類問題經常發(fā)生在功能設計的各個操作環(huán)節(jié)，展現形式小但互動頻次很高，本文作者對此進行了分析，一起來看一下吧。
前段時間和同事討論理財交易環(huán)節(jié)表單的設計方案，正好又遇到了按鈕是表示“動作”還是表意“狀態(tài)”的矛盾問題。這類問題雖歸屬于基礎交互，但卻經常發(fā)生在功能設計的各個操作環(huán)節(jié)，展現形式雖小但互動頻次很高，所以這里重新整理思路，分享下思考。
01 動作和狀態(tài)的關系
檢索這兩個關鍵詞，百科和體驗文檔中的詞面釋義是這樣的：
- 動作：具有一定動機和目的并指向客體的運動
- 狀態(tài)：人和事物表現出來的形態(tài)
簡單來說，動作有一定的目標性，是促使人或事物改變當前狀態(tài)的運動，而狀態(tài)是動作造成的結果，動作的介入會帶來狀態(tài)的變化，如圖所示：
“動作”和“狀態(tài)”這兩者緊密相連，有時又可能互為因果，舉個生活中的例子：冰箱門常規(guī)情況下是“關閉”的狀態(tài)，因為打開這個動作，隨即切換成“打開”的狀態(tài)。但打開這個動作能夠實現，前提則是需要一個“關閉”狀態(tài)的冰箱門。
02 按鈕的定義和類型
按鈕預示著一個即時操作的發(fā)起。按照操作帶來結果的差異程度，由大及小，可以把按鈕分為三類：
- 空間切換型按鈕
- 狀態(tài)變換型按鈕
- 數值調節(jié)型按鈕
1. 空間切換型按鈕
因操作的發(fā)起帶來場景的重大變化、空間的巨大切換或交互對象的消失與重建，這類操作的按鈕，我們都稱之為空間切換型按鈕。大多數項目中涉及的案例均屬此類：
- 外投廣告引導端外獲客，點擊[下載]按鈕，跳出瀏覽器，跳轉APP Store。
- 信貸借款流程，點擊[借款]按鈕，跳轉開啟完整的借款流程。
- 首頁營銷浮層，點擊[關閉]，浮層消失。
以上這些標準意義的交互，操作結果都是很重的。這類按鈕都是在表達動作-給予用戶預期，并能告訴用戶點下去之后，究竟會發(fā)生什么。相信在這一點上大家都有共識。
2. 狀態(tài)變換型按鈕
狀態(tài)變換型按鈕，顧名思義，不涉及重大場景、流程或者對象的的改變，而是控件不同交互形態(tài)的變換，這里的使用也是大家經常有爭議的環(huán)節(jié)，著重討論一下。
最常見的例子就是：同一音樂播放器界面內，“播放”和“暫?！钡碾p態(tài)切換，這倆是表動作；但“切換播放模式”的按鈕，反而表義當前狀態(tài)，展示原則和展現形式上，這不矛盾嗎？
數字體驗基本都是生活體驗的映射。思考問題之前，我們先看生活中有沒有答案。比如：下班回家后，我們甚至都不用關注開關的原始狀態(tài)，按一下就知道開關被打開了，因為屋子的燈亮了，雖然開關有兩種狀態(tài)，但我們不注意也不會有疑惑。
可設想一下，燈光開關設置在室外，關門之后，要我們在室外開啟或者關閉室內燈光，就很難準確實現，因為對當前屋內環(huán)境缺乏判斷。所以后來很多室外開關在原有基礎上都增加了狀態(tài)展示，這也是移動端狀態(tài)切換開關的界面設計靈感來源。
以上案例可以看出，當前狀態(tài)的確定性可以消減動作帶來的疑惑。
1）能快速識別狀態(tài)的，按鈕表達觸發(fā)動作
回到音樂播放器例子，播放/暫停這個按鈕，表示的不是當前狀態(tài) – 當前是暫停態(tài)，按鈕是“點擊后，會播放”的意思。音樂是否正在播放，這個狀態(tài)，從聽覺和視覺上就可以很好地識別出來：黑膠是不是轉動、還有沒有歌聲、畫面動還是不動等等。按鈕的交互邏輯，就可以去強調觸發(fā)后的狀態(tài)，即表達動作。在很多的常見場景中都有類似的應用，比如：
- 視頻APP播放器的播放/暫停模式
- 在線閱讀的黑夜/白天切換模式
- 微信中的攝像頭前/后切換、語音/視頻切換
等等設置和展示邏輯皆是如此。
2）不能快速識別的，按鈕表義當前狀態(tài)
還是音樂播放器的例子，播放模式切換按鈕，表示當前狀態(tài) – 當前處于隨機播放模式[以截圖為例]。播放模式[隨機、循環(huán)、單曲]的變化，相比于畫面視覺或聲音，是有滯后性的。到底選擇了哪種播放模式，在音樂暫停亦或播放中，都非常不明顯，很難判斷。
那么好，這個按鈕的交互邏輯，最好就去幫助用戶在視覺上更簡單高效地去識別當前狀態(tài)。繼續(xù)向下思考，好像還有哪里不對勁：狀態(tài)能夠識別到了，但用戶操作有預期嗎？特別是一個功能存在兩種以上的模式時，用戶完全不知道點擊后的結果。調整到如下方案是不是更合適？既能告知當前狀態(tài)，又有選擇預期。
邏輯上是更清晰了，但和其他功能疊加，這個界面更復雜了。移動產品物理屏幕的限制不可能給予所有信息的充分展示，要滿足用戶基礎識別性和產品多功能入口數的雙重要求，設計的精簡成為必然。于是便有了目前討論的線上方案。
按鈕表意當前狀態(tài)，有很多的應用場景，比如：
- 視頻播放器的鎖屏功能
- 電商列表頁的商品圖文展示模式
- 手機顯示控制中心的各種功能入口切換模式
等等設置和展示邏輯皆是如此。
3）動作和狀態(tài)的邏輯受產品策略影響
場景的可識別性與按鈕的使用邏輯在對應關系上并不是絕對的，存在著相對靈活的中間地帶。
①單一功能或小場景
并不是說所有能識別狀態(tài)的，按鈕都必須要表達動作，存在一些習慣性的特例小case。比如理財持倉金額數字展示中的這個“睜眼與閉眼”圖形隱喻，比如密碼輸入過程中的“顯示與隱藏”按鈕，都是在當前功能狀態(tài)[密碼外露/金額顯示]非常明確的前提下，仍舊強調相同的信息狀態(tài)。
盡管已成行業(yè)通用做法，但仔細想想，顛倒一下用戶好像也能明白。
②產品本身的策略傾向性
以上討論多是按鈕狀態(tài)和狀態(tài)間、動作和動作間的切換，因為產品本身策略的原因，經常也會有按鈕的動作和狀態(tài)間跨邏輯的轉換。比如：微信讀書為了強化用戶對加入書架的引導，功能拆成了“加入書架”和“已加入書架”兩種形式。
- “加入書架”是動作，強化加入這一動作
- “已加入書架”是狀態(tài)，展示加入后的形態(tài)
無論從哪種角度看，都希望用戶對書架有正向感知，不要刪除書架。
這類傾向性在社交產品中更加明顯，為增加關系鏈數據，都會側重促成用戶建立好友關系，所以按鈕形式會使用“加關注/已關注”而不是“添加關注/取消關注”、“未關注/已關注”等。
3. 數值調節(jié)型按鈕
盡管《About Face4.0交互設計精髓》第21章[控件與對話框]中同樣定義稱為滑塊控件[slider]。但畢竟和“滑動按鈕”存在模糊的邊界，我們這里權且從按鈕的角度來看：形變最小，不涉及空間環(huán)境改變或控件形態(tài)轉換，更多指同維度的不同程度數值的變化。
1）表狀態(tài)并通過反饋強化實時狀態(tài)
這個比較好理解，數值大小就是狀態(tài)的外在表現。數值變化常伴隨有實時的反饋，告知用戶當前的具體狀態(tài)，幫助用戶判斷。比如iPhone亮度調整時，屏幕會實時變化明暗效果；調節(jié)提醒時，鈴聲會同步響起。
當然也有反面案例，比如微信讀書音頻模式下的語速調節(jié)功能，滑動按鈕，沒有任何聲音示例，用戶根本就不明白數字對應什么語速。
2）狀態(tài)的變化具有精細化特征
狀態(tài)特征的精細化，作為設計細節(jié)的重要一環(huán)，在優(yōu)秀產品上體現的淋漓盡致。舉個例子，手機使用側邊鍵調節(jié)音量強度，和屏幕滑動的結果一樣，可以實現音量強弱狀態(tài)的變化。
iPhone的邏輯是把聲音分16級，每次按鍵增幅相同，按16次音量增到滿。魅族的flyme8，音量一共被分成12級，第一級低音區(qū)又被分成了4個小級，按鍵調節(jié)音量時，低音量區(qū)里的每一級的音量漲幅要比高音量區(qū)里的漲幅小得多。也就是說你從零開始提高音量時，前四次按鍵每次音量提升的幅度都非常之小，后11次則是正常的提升幅度[如圖]（感謝知乎@干魚案例）。
這個細節(jié)的差異設計就非常符合我們夜間聽歌的音量訴求：拒絕大音量并能精確設定一個適宜的低音分貝。也體現出了對精細場景訴求的呼應-音量很低時才需要更細致的音量調節(jié)。
03 總結一下
回顧以上對按鈕“動作和狀態(tài)”的探討，基于動作觸發(fā)結果的影響度，抽象意義上可以分為三類，對應具體場景中的使用和表意，整理成下圖。
最后一個問題，大家想想文章底部的“喜歡”和“在看”分別屬于那一類？
作者：葉魯，微信公眾號：葉魯設計思考，滴滴高級設計專家，共同思考設計和提升技能，提供體驗咨詢、交互設計、設計師職業(yè)發(fā)展等相關信息。
本文由 @葉魯 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
