遵循直觉:手游手势设计打造“不存在的交互”
以下文章来源于网易雷火UX用户体验中心 ,作者雷火UX体验设计
大部分手机游戏的交互方式,都依赖于UI界面;但是有一部分操作是不依赖UI的纯手势交互,即移动、缩放、旋转等操作。在有UI的情况下,玩家的行为路径一般是:“看到UI控件-根据控件产生操作预期-做出对应的操作-通过反馈验证”。而在没有UI示意的情况下,玩家直接产生预期,所有的操作都是靠玩家根据经验和直觉进行的。
因此,我们评价手势交互的指标可以归纳为3条:
- 合直觉:玩家凭借直觉尝试进行的手势操作,能够帮助其达成目标,且使用最简洁的操作流
- 可预期:操作结果可控,符合预期
- 有反馈:操作后的反馈提示,用于提示玩家操作正确与否或者操作是否到位
本文将对这3点评价指标展开介绍,并结合实际开发经验和具体运用实例进行阐述。
一、游戏中的直觉设计
针对手游玩家的习惯手势,其实说来也非常简单,无非单指拖动、双指缩放。但在实际开发过程中我们发现,其中依然大有文章。
能一步达到的目标,不要分成两步
缩放和拖拽,分别对应了两种操作。但是通过对比一些常见的app,我们能够发现,如果玩家在缩放的同时能够进行拖拽,甚至旋转操作,会比先缩放、再拖拽要流畅很多,也更符合玩家的预期。安卓Material Design设计规范里,也有提到这一点。下图第一张示意了双指只支持缩放操作的情景。可以看到手指触点与画面不匹配,给人一种卡顿的感觉。
Material Design - 演示无法同时支持多种手势操作的情况
在手游《荒野行动》的地图缩放过程中,我们可以看到,玩家可以通过双指确定想要缩放的轴心,这能够帮助玩家一步到位确认想要放大的位置,但是因为缩放的同时不能拖拽,无法将该位置拖到视觉中心,所以依然还是略有一些卡顿。
《荒野行动》局内地图
造成这样感受的原因是,玩家在放大地图进行查看时,通常是有明确的目标点的。此时,如果要求玩家先进行以画面中心为基准的缩放,再操作拖拽,这个明确的目标点就会偏离玩家的视觉重心,甚至出画。
而在地图软件上,玩家用双指可以同时完成拖拽和移动操作,因此我们可以看到如果想把图中的“时代高架路”缩小并推远,只需要进行一步操作。
地图软件缩放的同时可以拖拽
在游戏《小动物之星》中,玩家可以在缩放的同时进行拖拽,操作变得直观很多。
《小动物之星》局内地图
关于这一点Material Design设计规范也有提及。下图中,用户可以在双指拖拽的过程中同时实现拖拽、旋转操作。
Material Design - 双指能够同时缩放、拖拽、旋转
IOS相簿功能的地图系统就践行了这一准则,玩家可以在一步双指操作中同时完成拖拽、缩放、旋转三项目标。操作过程非常流畅。
IOS相簿-地图
操作打架时,优先玩家更习惯、更高频的交互
尤其是在一些手机绘图软件中,我们需要在画面中进行单指涂抹的操作,但是玩家最习惯的拖拽操作也是单指。这两种操作冲突的情况下该如何取舍呢?
对于画图行为进行分析,这种场景下,玩家用到的最高频操作是单指涂抹,而拖拽画布只是为了更好地涂抹进行的辅助手段,并且拖拽可以与双指缩放同时进行。因此在这种情况下可以考虑把单指拖拽功能让位于涂抹,拖拽通过双指的偏移进行实现。
某画图软件
二、可预期的操作结果
我们在前面提到,玩家在进行手势操作时是有心理预期的。这个预期不仅仅是指双指对应缩放、单指对应拖拽这样的映射关系,也是指玩家需要能够在操作过程中精确、高效地完成自己的目标。通常来说,响应的灵敏度非常影响这一点。灵敏度高,相对会更高效;灵敏度低,会更精确。在这一点上我们要如何进行平衡呢?
灵敏度调节:跟手与不跟手都有需求
这里的跟手指的是,玩家开始手势操作时,手指点在操作对象上的位置,与结束操作时的位置一致。表现在地图上即为:开始放大地图时,大拇指在A点,食指在B点,放大地图后也是如此。
Material Design就有提到跟手的交互是最直观的交互。对比下面两张图,第一张明显比第二张舒服很多。
Material Design - 跟手拖拽
Material Design - 不跟手拖拽
在常见的滑动列表的操作上我们也可以见到这一区别。
缓慢地拖拽,滑动列表是跟手的,方便用户定位到自己想要的位置。而当用户快速轻扫时,列表通常都是快速划过的,能够让用户在短时间内对长列表进行高效操作。
下图中第一张是缓慢拖拽的情况,列表的移动是跟手的:
豆瓣 - 电影列表-缓慢拖动
第二张则是快速轻扫,尤其在这种横板布局下,一屏能够展示的内容有限,轻扫能够让用户快速移动列表:
豆瓣 - 电影列表-轻扫
这种滑动的操作非常常见,比如在《荒野行动》的BP列表中,跟手的拖拽就能够让玩家实现左右来回的拖动操作。
《荒野行动》BP
另外还有一种特殊场景的应用:灵敏度非常低的情况,界面上的内容移动会非常迟缓,表现得像在抗拒用户的操作。通常这种情况会让人觉得卡顿,但也有非常实用的应用场景:
比如许多应用可以在首页下拉一段距离以后进入新的界面,或是触发刷新页面等操作。这种拖动时的粘滞感就可以提醒用户,界面上即将有不一样的变化,相当于一种二次确认,帮助用户不会进行不必要的误操作。购物App首页触发页面就是这样的例子,越往下滑动越迟缓。
购物App - 下拉访问二楼,迟滞的手感
总结以上,我们可以得到下图的规律:
实际开发过程中,各种手势的手感调节都需要不断地进行真机测试以便调整。比如在单指旋转的操作上我们就发现,不同游戏合适的旋转手感有一些微妙的差别,操作的灵敏度要根据需求微调,但通常可以调高一些。比如在下图中,手指划过半屏的距离,人物模型旋转两周都是合理的速度。
《哈利波特:魔法觉醒》
三、及时给予玩家反馈
在手势操作的过程中给予玩家反馈能够清晰地告知玩家操作状态。
这里着重提及一下震动反馈。作为界面之外的表现形式,震动反馈不仅仅可以提示玩家操作状态,也可以增强沉浸感。比如Chrome首页下滑可以触发3项功能,滑动过程中左右拖拽可以切换功能。如何让玩家知道自己拖到位,可以松手了呢?除了界面上类似水滴的动效表现以外,Chrome还增加了轻微的震动提示告知玩家这一点。
Chrome浏览器首页下拉,切换3种功能
iPhone拥有强大的Taptic Engine, 可以定义的震动强度非常多样,以满足不同的使用场景。比如在《光遇》这款游戏中,玩家点击交互物会触发微弱的震动,而如果飞行能量不足,则会配合UI动效一起触发较强的震动提示。
《光遇》
在雷亚的ARPG手游《聚爆》中也有这样的震动反馈。玩家护甲受损时,手机发出两端震动,配合屏幕抖动和特效表现进行强提示。
《聚爆》
而在破甲后,血量的流失则改为更轻微的一段震动,屏幕的抖动也减弱了。
可惜的是,许多手机并没有这样强大的震动强度自定义功能,震动都比较单一,因此比较不太能适应多样化的应用场景,也很难给玩家在触觉上提供更深一层的沉浸感。震动反馈还不能作为一种普世的反馈形式,我们也很少看到在手游中的大规模运用。
总结
手势交互设计,重要的是遵循玩家内心所想,并给予玩家操作成功与否的反馈,在没有UI界面的情况下给予玩家“确信感”。手势设计与直觉稍有偏差就会造成奇怪的手感,因此纸上谈兵也并不足够,需要在开发过程中不断对照真机调优,做到最流畅的手势交互。