“ 目前手游摇杆几乎已经成为了标配，作为一名交互设计师，如何把摇杆做的好用呢。”
此篇文章三个方向分析了手游操作按钮交互，摇杆交互、按钮交互、菜单交互，此篇为第一篇——游戏摇杆。
摇杆几乎是一个动作游戏中最常用的按钮，作为一个玩家控制角色的途径，它最应该满足操作简单，及时且准确反馈，而且功能是大于美术的。
注：本篇文章的分辨率默认为1334*750进行说明，范围并不是固定的，给出参考数值会更加直观。
01
摇杆的位置
摇杆模式
一般游戏有以下两种模式较为常见，不同模式有些许差别：
跟随式
简而言之，就是在热区中某一个点按下了手指，摇杆在手指按下处附近生成，也是目前大多数游戏采用的模式。
优点：可大概率减少误操作率，虚拟按键最大的问题就是无反馈，会导致用户不知道按到了什么位置，跟随式可以不使用固定位置，使用滑动，解决方向问题。
固定式
摇杆固定在某一个位置，点击热区，直接计算手指位置与摇杆中心位置相对角度。
优点：触发快，点击行为的触发时间远远小于滑动的时间
摇杆位置
通用规则：大致范围为从屏幕左下角，在不遮挡游戏里可操作UI 的前提下，向右不超出1/2屏幕，向上不超出2/3屏幕，没有确切的数值。简单换算一下，以左下角为中心，向右向上580px左右即可
先说下跟随式摇杆：
手指按到哪里，摇杆出现在哪里就可以了？
· 在屏幕边缘按下，摇杆飞出屏幕半个怎么办？
· 一激动，在屏幕中心按下了手指，向右推动，影响了右手的操作。
还是回到刚才这张图，根据比例，对iPhone X的进行一个简单的换算
中间第三道即为最舒适的范围，因此，手指最好在此范围移动。
有了上述结论，再说一个现象：玩家在大拇指伸直的情况下，向上/向下推动摇杆的动作并非是垂直的，而是朝向左上/左下的
根据现象与上述问题，玩家在慌张或特殊情况下，容易点击至最外层范围，向上推动时即变成了向左上移动；
因此若给摇杆设置一层范围限制，让摇杆只能生成至范围内即可解决这种问题；在手指最舒服的位置设置一小块区域，若手指按在了移动热区（蓝色），根据手指位置，计算摇杆中心（x/y大于最大值取最大值，最小值同理）
如何计算出摇杆中心？
第一步，摇杆最好不要靠近边缘，为了例子中的防止上述问题，需要对摇杆再做一层范围限制；最好大于一个普通人直接大小的距离最佳，以苹果ios设计规范为参照，指尖的范围为44px，中心范围大概380px长宽左右。
第二部，确定摇杆尺寸，通过调研与测试，摇杆尺寸大概在160-280px为合理尺寸；
游戏需要根据自己的游戏内容做出对应的调整，举个例子：例如吃鸡的摇杆，手指划出摇杆，再划出一段距离后就变为锁定奔跑，此时摇杆的大小就不宜太大，否则不宜划至上方，吃鸡的尺寸为170px；再例如，有的游戏需要精确移动，短推为走路，长推为奔跑，此时就可以使用280px。
根据自己游戏的场景与其他功能确定好尺寸后，最后计算出中心的位置区域。
固定式摇杆
通用规则：与固定式摇杆相同，大部分在上述手指舒适范围即可
特殊情况：
A：游戏功能较为复杂，移动热区较小，需要给其他功能让开位置的游戏；例如原神由于其他位置为拾取物品，而且会遮挡拾取日志；又或许是因为原神的操作中，向前的操作更加多一些，而且原神需要更快速的操作，因此最终选择了固定式摇杆，欢迎大家讨论下自己的想法。
B：方向仅有四向的游戏，或仅有左右，或上下的游戏（此种类型或许不叫作摇杆更贴切）
02
摇杆的功能
摇杆除了基础的移动，根据常见的交互动作，可以做出各种拓展
·点击
点击摇杆为攻击/跳跃/蹲下
·轻滑
翻滚/冲刺
·长按
长按锁定奔跑
·双击
冲刺（ACT/FTG）
转身
·距离
短推走路，长推跑步（各种arpg）
·角度
吃鸡相关设计
03
摇杆适配
先说结论：若屏幕从16:9拓宽至18:9，屏幕两侧会增加一段距离，热区锚点以屏幕中心不变，向左下角屏幕拓展至满
那么锚点为啥不是左下角呢？这就要考虑到目前的手机屏幕的进化了，主要原因为以下两点：
1、屏幕圆角，导致UI不宜靠边
2、虽然屏幕大了，但iPhone X（全面屏）相对于iPhone7（非全面屏）少了大黑边，最舒服的位置仍旧没变， 若玩家操作至内圈时，上推摇杆时为右上，仍可以使用上述理论
04
总结
摇杆的最基础功能就是移动，所有的其他功能都是服务于移动的，游戏设计没有什么定式，一切功能都是针对游戏服务；
例如玩家奔跑可以做成原神的【左手移动，右手奔跑】，也可以做成吃鸡的【远距离推动奔跑】，虽然远距离推动和长按并不是对玩家友好的交互，但是吃鸡是一个紧张的游戏，玩家在奔跑的时候需要作出其他的操作，例如更换装备等操作，因此采用多功能合一的操作，这样虽然增加了学习和操作成本，但是在功能性上更加全面；
交互就是在做项目的平衡。
