手游摇杆设计的思考 | 手游交互设计

 摇杆几乎是一个动作游戏中最常用的按钮，作为一个玩家控制角色的途径，它最应该满足操作简单，及时且准确反馈，而且功能是大于美术的。

注：本篇文章的分辨率默认为1334*750进行说明，范围并不是固定的，给出参考数值会更加直观。

01

—

摇杆模式

一般游戏有以下两种模式较为常见，不同模式有些许差别：

• 跟随式

    简而言之，就是在热区中某一个点按下了手指，摇杆在手指按下处附近生成，也是目前大多数游戏采用的模式。

    优点：可大概率减少误操作率，虚拟按键最大的问题就是无反馈，会导致用户不知道按到了什么位置，跟随式可以不使用固定位置，使用滑动，解决方向问题。

• 固定式

    摇杆固定在某一个位置，点击热区，直接计算手指位置与摇杆中心位置相对角度。

    优点：触发快，点击行为的触发时间远远小于滑动的时间

摇杆位置

通用规则：大致范围为从屏幕左下角，在不遮挡游戏里可操作UI 的前提下，向右不超出1/2屏幕，向上不超出2/3屏幕，没有确切的数值。简单换算一下，以左下角为中心，向右向上580px左右即可

    手指按到哪里，摇杆出现在哪里就可以了？

· 在屏幕边缘按下，摇杆飞出屏幕半个怎么办？

· 一激动，在屏幕中心按下了手指，向右推动，影响了右手的操作。

还是回到刚才这张图，根据比例，对iPhone X的进行一个简单的换算

    因此若给摇杆设置一层范围限制，让摇杆只能生成至固定范围内即可解决这种问题；在手指最舒服的位置设置一小块区域，若手指按在了移动热区（蓝色），根据手指位置，计算摇杆中心（x/y大于最大值取最大值，最小值同理）

    第一步，摇杆最好不要靠近边缘，为了例子中的防止上述问题，需要对摇杆再做一层范围限制；最好大于一个普通人直接大小的距离最佳，以苹果ios设计规范为参照，指尖的范围为44px，中心范围大概380px长宽左右。

    第二步，确定摇杆尺寸，通过调研与测试，摇杆尺寸大概在160-280px为合理尺寸；

    游戏需要根据自己的游戏内容做出对应的调整，举个例子：例如吃鸡的摇杆，手指划出摇杆，再划出一段距离后就变为锁定奔跑，此时摇杆的大小就不宜太大，否则不宜划至上方，吃鸡的尺寸为170px；再例如，有的游戏需要精确移动，短推为走路，长推为奔跑，此时就可以使用280px。

    根据自己游戏的场景与其他功能确定好尺寸后，最后计算出中心的位置区域。

固定式摇杆

通用规则：与固定式摇杆相同，大部分在上述手指舒适范围即可

特殊情况：

A：游戏功能较为复杂，移动热区较小，需要给其他功能让开位置的游戏；例如原神由于其他位置为拾取物品，而且会遮挡拾取日志；又或许是因为原神的操作中，向前的操作更加多一些，而且原神需要更快速的操作，因此最终选择了固定式摇杆，以上是我个人看法，欢迎大家讨论下自己的想法。

B：方向仅有四向的游戏，或仅有左右，或上下的游戏（此种类型或许不叫作摇杆更贴切）

摇杆的功能

·点击

·轻滑

·长按

    长按锁定奔跑

·双击

    冲刺（ACT/FTG）

·距离

·角度

     吃鸡相关设计

    那么锚点为啥不是左下角呢？这就要考虑到目前的手机屏幕的进化了，主要原因为以下两点：

1. 屏幕圆角，导致UI不宜靠边

2. 虽然屏幕大了，但iPhone X（全面屏）相对于iPhone7（非全面屏）少了 大黑边，最舒服的位置仍旧没变， 若玩家操作至内圈时，上推摇杆时为右上，仍可以使用上述理论

总结

    摇杆的最基础功能就是移动，所有的其他功能都是服务于移动的，游戏设计没有什么定式，一切功能都是针对游戏服务；

    例如玩家奔跑可以做成原神的【左手移动，右手奔跑】，也可以做成吃鸡的【远距离推动奔跑】，虽然远距离推动和长按并不是对玩家友好的交互，但是吃鸡是一个紧张的游戏，玩家在奔跑的时候需要作出其他的操作，例如更换装备等操作，因此采用多功能合一的操作，这样虽然增加了学习和操作成本，但是在功能性上更加全面；

vx：Lwanna7

欢迎交流