首頁 > 產(chǎn)業(yè) > 觀察·投資
遵循直覺：手游手勢設(shè)計(jì)打造“不存在的交互”
以下文章來源于網(wǎng)易雷火UX用戶體驗(yàn)中心 ，作者雷火UX體驗(yàn)設(shè)計(jì)
大部分手機(jī)游戲的交互方式，都依賴于UI界面；但是有一部分操作是不依賴UI的純手勢交互，即移動、縮放、旋轉(zhuǎn)等操作。在有UI的情況下，玩家的行為路徑一般是：“看到UI控件-根據(jù)控件產(chǎn)生操作預(yù)期-做出對應(yīng)的操作-通過反饋驗(yàn)證”。而在沒有UI示意的情況下，玩家直接產(chǎn)生預(yù)期，所有的操作都是靠玩家根據(jù)經(jīng)驗(yàn)和直覺進(jìn)行的。
因此，我們評價手勢交互的指標(biāo)可以歸納為3條：
- 合直覺：玩家憑借直覺嘗試進(jìn)行的手勢操作，能夠幫助其達(dá)成目標(biāo)，且使用最簡潔的操作流
- 可預(yù)期：操作結(jié)果可控，符合預(yù)期
- 有反饋：操作后的反饋提示，用于提示玩家操作正確與否或者操作是否到位
本文將對這3點(diǎn)評價指標(biāo)展開介紹，并結(jié)合實(shí)際開發(fā)經(jīng)驗(yàn)和具體運(yùn)用實(shí)例進(jìn)行闡述。
一、游戲中的直覺設(shè)計(jì)
針對手游玩家的習(xí)慣手勢，其實(shí)說來也非常簡單，無非單指拖動、雙指縮放。但在實(shí)際開發(fā)過程中我們發(fā)現(xiàn)，其中依然大有文章。
能一步達(dá)到的目標(biāo)，不要分成兩步
縮放和拖拽，分別對應(yīng)了兩種操作。但是通過對比一些常見的app，我們能夠發(fā)現(xiàn)，如果玩家在縮放的同時能夠進(jìn)行拖拽，甚至旋轉(zhuǎn)操作，會比先縮放、再拖拽要流暢很多，也更符合玩家的預(yù)期。安卓Material Design設(shè)計(jì)規(guī)范里，也有提到這一點(diǎn)。下圖第一張示意了雙指只支持縮放操作的情景。可以看到手指觸點(diǎn)與畫面不匹配，給人一種卡頓的感覺。
Material Design - 演示無法同時支持多種手勢操作的情況
在手游《荒野行動》的地圖縮放過程中，我們可以看到，玩家可以通過雙指確定想要縮放的軸心，這能夠幫助玩家一步到位確認(rèn)想要放大的位置，但是因?yàn)榭s放的同時不能拖拽，無法將該位置拖到視覺中心，所以依然還是略有一些卡頓。
《荒野行動》局內(nèi)地圖
造成這樣感受的原因是，玩家在放大地圖進(jìn)行查看時，通常是有明確的目標(biāo)點(diǎn)的。此時，如果要求玩家先進(jìn)行以畫面中心為基準(zhǔn)的縮放，再操作拖拽，這個明確的目標(biāo)點(diǎn)就會偏離玩家的視覺重心，甚至出畫。
而在地圖軟件上，玩家用雙指可以同時完成拖拽和移動操作，因此我們可以看到如果想把圖中的“時代高架路”縮小并推遠(yuǎn)，只需要進(jìn)行一步操作。
地圖軟件縮放的同時可以拖拽
在游戲《小動物之星》中，玩家可以在縮放的同時進(jìn)行拖拽，操作變得直觀很多。
《小動物之星》局內(nèi)地圖
關(guān)于這一點(diǎn)Material Design設(shè)計(jì)規(guī)范也有提及。下圖中，用戶可以在雙指拖拽的過程中同時實(shí)現(xiàn)拖拽、旋轉(zhuǎn)操作。
Material Design - 雙指能夠同時縮放、拖拽、旋轉(zhuǎn)
IOS相簿功能的地圖系統(tǒng)就踐行了這一準(zhǔn)則，玩家可以在一步雙指操作中同時完成拖拽、縮放、旋轉(zhuǎn)三項(xiàng)目標(biāo)。操作過程非常流暢。
IOS相簿-地圖
操作打架時，優(yōu)先玩家更習(xí)慣、更高頻的交互
尤其是在一些手機(jī)繪圖軟件中，我們需要在畫面中進(jìn)行單指涂抹的操作，但是玩家最習(xí)慣的拖拽操作也是單指。這兩種操作沖突的情況下該如何取舍呢？
對于畫圖行為進(jìn)行分析，這種場景下，玩家用到的最高頻操作是單指涂抹，而拖拽畫布只是為了更好地涂抹進(jìn)行的輔助手段，并且拖拽可以與雙指縮放同時進(jìn)行。因此在這種情況下可以考慮把單指拖拽功能讓位于涂抹，拖拽通過雙指的偏移進(jìn)行實(shí)現(xiàn)。
某畫圖軟件
二、可預(yù)期的操作結(jié)果
我們在前面提到，玩家在進(jìn)行手勢操作時是有心理預(yù)期的。這個預(yù)期不僅僅是指雙指對應(yīng)縮放、單指對應(yīng)拖拽這樣的映射關(guān)系，也是指玩家需要能夠在操作過程中精確、高效地完成自己的目標(biāo)。通常來說，響應(yīng)的靈敏度非常影響這一點(diǎn)。靈敏度高，相對會更高效；靈敏度低，會更精確。在這一點(diǎn)上我們要如何進(jìn)行平衡呢？
靈敏度調(diào)節(jié)：跟手與不跟手都有需求
這里的跟手指的是，玩家開始手勢操作時，手指點(diǎn)在操作對象上的位置，與結(jié)束操作時的位置一致。表現(xiàn)在地圖上即為：開始放大地圖時，大拇指在A點(diǎn)，食指在B點(diǎn)，放大地圖后也是如此。
Material Design就有提到跟手的交互是最直觀的交互。對比下面兩張圖，第一張明顯比第二張舒服很多。
Material Design - 跟手拖拽
Material Design - 不跟手拖拽
在常見的滑動列表的操作上我們也可以見到這一區(qū)別。
緩慢地拖拽，滑動列表是跟手的，方便用戶定位到自己想要的位置。而當(dāng)用戶快速輕掃時，列表通常都是快速劃過的，能夠讓用戶在短時間內(nèi)對長列表進(jìn)行高效操作。
下圖中第一張是緩慢拖拽的情況，列表的移動是跟手的：
豆瓣 - 電影列表-緩慢拖動
第二張則是快速輕掃，尤其在這種橫板布局下，一屏能夠展示的內(nèi)容有限，輕掃能夠讓用戶快速移動列表：
豆瓣 - 電影列表-輕掃
這種滑動的操作非常常見，比如在《荒野行動》的BP列表中，跟手的拖拽就能夠讓玩家實(shí)現(xiàn)左右來回的拖動操作。
《荒野行動》BP
另外還有一種特殊場景的應(yīng)用：靈敏度非常低的情況，界面上的內(nèi)容移動會非常遲緩，表現(xiàn)得像在抗拒用戶的操作。通常這種情況會讓人覺得卡頓，但也有非常實(shí)用的應(yīng)用場景：
比如許多應(yīng)用可以在首頁下拉一段距離以后進(jìn)入新的界面，或是觸發(fā)刷新頁面等操作。這種拖動時的粘滯感就可以提醒用戶，界面上即將有不一樣的變化，相當(dāng)于一種二次確認(rèn)，幫助用戶不會進(jìn)行不必要的誤操作。購物App首頁觸發(fā)頁面就是這樣的例子，越往下滑動越遲緩。
購物App - 下拉訪問二樓，遲滯的手感
總結(jié)以上，我們可以得到下圖的規(guī)律：
實(shí)際開發(fā)過程中，各種手勢的手感調(diào)節(jié)都需要不斷地進(jìn)行真機(jī)測試以便調(diào)整。比如在單指旋轉(zhuǎn)的操作上我們就發(fā)現(xiàn)，不同游戲合適的旋轉(zhuǎn)手感有一些微妙的差別，操作的靈敏度要根據(jù)需求微調(diào)，但通?？梢哉{(diào)高一些。比如在下圖中，手指劃過半屏的距離，人物模型旋轉(zhuǎn)兩周都是合理的速度。
《哈利波特：魔法覺醒》
三、及時給予玩家反饋
在手勢操作的過程中給予玩家反饋能夠清晰地告知玩家操作狀態(tài)。
這里著重提及一下震動反饋。作為界面之外的表現(xiàn)形式，震動反饋不僅僅可以提示玩家操作狀態(tài)，也可以增強(qiáng)沉浸感。比如Chrome首頁下滑可以觸發(fā)3項(xiàng)功能，滑動過程中左右拖拽可以切換功能。如何讓玩家知道自己拖到位，可以松手了呢？除了界面上類似水滴的動效表現(xiàn)以外，Chrome還增加了輕微的震動提示告知玩家這一點(diǎn)。
Chrome瀏覽器首頁下拉，切換3種功能
iPhone擁有強(qiáng)大的Taptic Engine, 可以定義的震動強(qiáng)度非常多樣，以滿足不同的使用場景。比如在《光遇》這款游戲中，玩家點(diǎn)擊交互物會觸發(fā)微弱的震動，而如果飛行能量不足，則會配合UI動效一起觸發(fā)較強(qiáng)的震動提示。
《光遇》
在雷亞的ARPG手游《聚爆》中也有這樣的震動反饋。玩家護(hù)甲受損時，手機(jī)發(fā)出兩端震動，配合屏幕抖動和特效表現(xiàn)進(jìn)行強(qiáng)提示。
《聚爆》
而在破甲后，血量的流失則改為更輕微的一段震動，屏幕的抖動也減弱了。
可惜的是，許多手機(jī)并沒有這樣強(qiáng)大的震動強(qiáng)度自定義功能，震動都比較單一，因此比較不太能適應(yīng)多樣化的應(yīng)用場景，也很難給玩家在觸覺上提供更深一層的沉浸感。震動反饋還不能作為一種普世的反饋形式，我們也很少看到在手游中的大規(guī)模運(yùn)用。
總結(jié)
手勢交互設(shè)計(jì)，重要的是遵循玩家內(nèi)心所想，并給予玩家操作成功與否的反饋，在沒有UI界面的情況下給予玩家“確信感”。手勢設(shè)計(jì)與直覺稍有偏差就會造成奇怪的手感，因此紙上談兵也并不足夠，需要在開發(fā)過程中不斷對照真機(jī)調(diào)優(yōu)，做到最流暢的手勢交互。
強(qiáng)推
