編輯導(dǎo)語(yǔ)：你是否曾思考過一個(gè)問題——按鈕是表示“動(dòng)作”還是表意“狀態(tài)”呢？這類問題經(jīng)常發(fā)生在功能設(shè)計(jì)的各個(gè)操作環(huán)節(jié)，展現(xiàn)形式小但互動(dòng)頻次很高，本文作者對(duì)此進(jìn)行了分析，一起來看一下吧。

前段時(shí)間和同事討論理財(cái)交易環(huán)節(jié)表單的設(shè)計(jì)方案，正好又遇到了按鈕是表示“動(dòng)作”還是表意“狀態(tài)”的矛盾問題。這類問題雖歸屬于基礎(chǔ)交互，但卻經(jīng)常發(fā)生在功能設(shè)計(jì)的各個(gè)操作環(huán)節(jié)，展現(xiàn)形式雖小但互動(dòng)頻次很高，所以這里重新整理思路，分享下思考。

01 動(dòng)作和狀態(tài)的關(guān)系

檢索這兩個(gè)關(guān)鍵詞，百科和體驗(yàn)文檔中的詞面釋義是這樣的：

• 動(dòng)作：具有一定動(dòng)機(jī)和目的并指向客體的運(yùn)動(dòng)
• 狀態(tài)：人和事物表現(xiàn)出來的形態(tài)

簡(jiǎn)單來說，動(dòng)作有一定的目標(biāo)性，是促使人或事物改變當(dāng)前狀態(tài)的運(yùn)動(dòng)，而狀態(tài)是動(dòng)作造成的結(jié)果，動(dòng)作的介入會(huì)帶來狀態(tài)的變化，如圖所示：

“動(dòng)作”和“狀態(tài)”這兩者緊密相連，有時(shí)又可能互為因果，舉個(gè)生活中的例子：冰箱門常規(guī)情況下是“關(guān)閉”的狀態(tài)，因?yàn)榇蜷_這個(gè)動(dòng)作，隨即切換成“打開”的狀態(tài)。但打開這個(gè)動(dòng)作能夠?qū)崿F(xiàn)，前提則是需要一個(gè)“關(guān)閉”狀態(tài)的冰箱門。

02 按鈕的定義和類型

按鈕預(yù)示著一個(gè)即時(shí)操作的發(fā)起。按照操作帶來結(jié)果的差異程度，由大及小，可以把按鈕分為三類：

1. 空間切換型按鈕
2. 狀態(tài)變換型按鈕
3. 數(shù)值調(diào)節(jié)型按鈕

1. 空間切換型按鈕

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

1. 外投廣告引導(dǎo)端外獲客，點(diǎn)擊[下載]按鈕，跳出瀏覽器，跳轉(zhuǎn)APP Store。
2. 信貸借款流程，點(diǎn)擊[借款]按鈕，跳轉(zhuǎn)開啟完整的借款流程。
3. 首頁(yè)營(yíng)銷浮層，點(diǎn)擊[關(guān)閉]，浮層消失。

以上這些標(biāo)準(zhǔn)意義的交互，操作結(jié)果都是很重的。這類按鈕都是在表達(dá)動(dòng)作-給予用戶預(yù)期，并能告訴用戶點(diǎn)下去之后，究竟會(huì)發(fā)生什么。相信在這一點(diǎn)上大家都有共識(shí)。

2. 狀態(tài)變換型按鈕

狀態(tài)變換型按鈕，顧名思義，不涉及重大場(chǎng)景、流程或者對(duì)象的的改變，而是控件不同交互形態(tài)的變換，這里的使用也是大家經(jīng)常有爭(zhēng)議的環(huán)節(jié)，著重討論一下。

最常見的例子就是：同一音樂播放器界面內(nèi)，“播放”和“暫停”的雙態(tài)切換，這倆是表動(dòng)作；但“切換播放模式”的按鈕，反而表義當(dāng)前狀態(tài)，展示原則和展現(xiàn)形式上，這不矛盾嗎？

數(shù)字體驗(yàn)基本都是生活體驗(yàn)的映射。思考問題之前，我們先看生活中有沒有答案。比如：下班回家后，我們甚至都不用關(guān)注開關(guān)的原始狀態(tài)，按一下就知道開關(guān)被打開了，因?yàn)槲葑拥臒袅亮耍m然開關(guān)有兩種狀態(tài)，但我們不注意也不會(huì)有疑惑。

可設(shè)想一下，燈光開關(guān)設(shè)置在室外，關(guān)門之后，要我們?cè)谑彝忾_啟或者關(guān)閉室內(nèi)燈光，就很難準(zhǔn)確實(shí)現(xiàn)，因?yàn)閷?duì)當(dāng)前屋內(nèi)環(huán)境缺乏判斷。所以后來很多室外開關(guān)在原有基礎(chǔ)上都增加了狀態(tài)展示，這也是移動(dòng)端狀態(tài)切換開關(guān)的界面設(shè)計(jì)靈感來源。

以上案例可以看出，當(dāng)前狀態(tài)的確定性可以消減動(dòng)作帶來的疑惑。

1）能快速識(shí)別狀態(tài)的，按鈕表達(dá)觸發(fā)動(dòng)作

回到音樂播放器例子，播放/暫停這個(gè)按鈕，表示的不是當(dāng)前狀態(tài) – 當(dāng)前是暫停態(tài)，按鈕是“點(diǎn)擊后，會(huì)播放”的意思。音樂是否正在播放，這個(gè)狀態(tài)，從聽覺和視覺上就可以很好地識(shí)別出來：黑膠是不是轉(zhuǎn)動(dòng)、還有沒有歌聲、畫面動(dòng)還是不動(dòng)等等。按鈕的交互邏輯，就可以去強(qiáng)調(diào)觸發(fā)后的狀態(tài)，即表達(dá)動(dòng)作。在很多的常見場(chǎng)景中都有類似的應(yīng)用，比如：

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

等等設(shè)置和展示邏輯皆是如此。

2）不能快速識(shí)別的，按鈕表義當(dāng)前狀態(tài)

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

那么好，這個(gè)按鈕的交互邏輯，最好就去幫助用戶在視覺上更簡(jiǎn)單高效地去識(shí)別當(dāng)前狀態(tài)。繼續(xù)向下思考，好像還有哪里不對(duì)勁：狀態(tài)能夠識(shí)別到了，但用戶操作有預(yù)期嗎？特別是一個(gè)功能存在兩種以上的模式時(shí)，用戶完全不知道點(diǎn)擊后的結(jié)果。調(diào)整到如下方案是不是更合適？既能告知當(dāng)前狀態(tài)，又有選擇預(yù)期。

邏輯上是更清晰了，但和其他功能疊加，這個(gè)界面更復(fù)雜了。移動(dòng)產(chǎn)品物理屏幕的限制不可能給予所有信息的充分展示，要滿足用戶基礎(chǔ)識(shí)別性和產(chǎn)品多功能入口數(shù)的雙重要求，設(shè)計(jì)的精簡(jiǎn)成為必然。于是便有了目前討論的線上方案。

按鈕表意當(dāng)前狀態(tài)，有很多的應(yīng)用場(chǎng)景，比如：

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

等等設(shè)置和展示邏輯皆是如此。

3）動(dòng)作和狀態(tài)的邏輯受產(chǎn)品策略影響

場(chǎng)景的可識(shí)別性與按鈕的使用邏輯在對(duì)應(yīng)關(guān)系上并不是絕對(duì)的，存在著相對(duì)靈活的中間地帶。

①單一功能或小場(chǎng)景

并不是說所有能識(shí)別狀態(tài)的，按鈕都必須要表達(dá)動(dòng)作，存在一些習(xí)慣性的特例小case。比如理財(cái)持倉(cāng)金額數(shù)字展示中的這個(gè)“睜眼與閉眼”圖形隱喻，比如密碼輸入過程中的“顯示與隱藏”按鈕，都是在當(dāng)前功能狀態(tài)[密碼外露/金額顯示]非常明確的前提下，仍舊強(qiáng)調(diào)相同的信息狀態(tài)。

盡管已成行業(yè)通用做法，但仔細(xì)想想，顛倒一下用戶好像也能明白。

②產(chǎn)品本身的策略傾向性

以上討論多是按鈕狀態(tài)和狀態(tài)間、動(dòng)作和動(dòng)作間的切換，因?yàn)楫a(chǎn)品本身策略的原因，經(jīng)常也會(huì)有按鈕的動(dòng)作和狀態(tài)間跨邏輯的轉(zhuǎn)換。比如：微信讀書為了強(qiáng)化用戶對(duì)加入書架的引導(dǎo)，功能拆成了“加入書架”和“已加入書架”兩種形式。

• “加入書架”是動(dòng)作，強(qiáng)化加入這一動(dòng)作
• “已加入書架”是狀態(tài)，展示加入后的形態(tài)

無論從哪種角度看，都希望用戶對(duì)書架有正向感知，不要?jiǎng)h除書架。

這類傾向性在社交產(chǎn)品中更加明顯，為增加關(guān)系鏈數(shù)據(jù)，都會(huì)側(cè)重促成用戶建立好友關(guān)系，所以按鈕形式會(huì)使用“加關(guān)注/已關(guān)注”而不是“添加關(guān)注/取消關(guān)注”、“未關(guān)注/已關(guān)注”等。

3. 數(shù)值調(diào)節(jié)型按鈕

盡管《About Face4.0交互設(shè)計(jì)精髓》第21章[控件與對(duì)話框]中同樣定義稱為滑塊控件[slider]。但畢竟和“滑動(dòng)按鈕”存在模糊的邊界，我們這里權(quán)且從按鈕的角度來看：形變最小，不涉及空間環(huán)境改變或控件形態(tài)轉(zhuǎn)換，更多指同維度的不同程度數(shù)值的變化。

1）表狀態(tài)并通過反饋強(qiáng)化實(shí)時(shí)狀態(tài)

這個(gè)比較好理解，數(shù)值大小就是狀態(tài)的外在表現(xiàn)。數(shù)值變化常伴隨有實(shí)時(shí)的反饋，告知用戶當(dāng)前的具體狀態(tài)，幫助用戶判斷。比如iPhone亮度調(diào)整時(shí)，屏幕會(huì)實(shí)時(shí)變化明暗效果；調(diào)節(jié)提醒時(shí)，鈴聲會(huì)同步響起。

當(dāng)然也有反面案例，比如微信讀書音頻模式下的語(yǔ)速調(diào)節(jié)功能，滑動(dòng)按鈕，沒有任何聲音示例，用戶根本就不明白數(shù)字對(duì)應(yīng)什么語(yǔ)速。

2）狀態(tài)的變化具有精細(xì)化特征

狀態(tài)特征的精細(xì)化，作為設(shè)計(jì)細(xì)節(jié)的重要一環(huán)，在優(yōu)秀產(chǎn)品上體現(xiàn)的淋漓盡致。舉個(gè)例子，手機(jī)使用側(cè)邊鍵調(diào)節(jié)音量強(qiáng)度，和屏幕滑動(dòng)的結(jié)果一樣，可以實(shí)現(xiàn)音量強(qiáng)弱狀態(tài)的變化。

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

這個(gè)細(xì)節(jié)的差異設(shè)計(jì)就非常符合我們夜間聽歌的音量訴求：拒絕大音量并能精確設(shè)定一個(gè)適宜的低音分貝。也體現(xiàn)出了對(duì)精細(xì)場(chǎng)景訴求的呼應(yīng)-音量很低時(shí)才需要更細(xì)致的音量調(diào)節(jié)。

03 總結(jié)一下

回顧以上對(duì)按鈕“動(dòng)作和狀態(tài)”的探討，基于動(dòng)作觸發(fā)結(jié)果的影響度，抽象意義上可以分為三類，對(duì)應(yīng)具體場(chǎng)景中的使用和表意，整理成下圖。

最后一個(gè)問題，大家想想文章底部的“喜歡”和“在看”分別屬于那一類？

作者：葉魯，微信公眾號(hào)：葉魯設(shè)計(jì)思考，滴滴高級(jí)設(shè)計(jì)專家，共同思考設(shè)計(jì)和提升技能，提供體驗(yàn)咨詢、交互設(shè)計(jì)、設(shè)計(jì)師職業(yè)發(fā)展等相關(guān)信息。

本文由 @葉魯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議