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