手游操作按钮交互设计

如何去做操作按钮交互设计？将从以下三个方面进行说明

1、页面布局
2、交互细化
3、中级、高级用户优化

1、页面布局

1.1搞清楚需求！需求！需求！

一切抛开需求的设计都是耍流氓，首先根据需求，把操作按钮种类进行分类。理清楚需求中的按钮模块大致分清按钮要分为几个区域，预留出对应的信息区域。

下图是以吃鸡游戏的布局图，吃鸡算是游戏中较为复杂的一类了，不仅有常规的移动菜单，还额外分为信息区1、2、3、4等等

假如现在需要做一款游戏，操作区的需求简单整理了一下，如下：需要菜单区、信息区、伙伴区、移动、玩家状态、操作区；

操作区又包含：普通攻击（1）、主动技能（1-3）、大招（1）、道具（0-1），大致分为以下几个区域

以操作区为例，需要设计当前区域的操作按钮，根据评估的按钮权重设计对应的位置，按钮评估大致分为三个维度：出现频率、按键频率、错误成本

·出现频率：指在不同情况下，是否会显示，拿【攻击】举例，无论何种情况下，攻击一定会出现，因此为5；而道具玩家未拥有时就不显示，玩家购买道具的场景也不常见，因此为2；
·按键频率：指在游戏过程中此按钮在同一时间段的按键频次，【攻击】为各种场景均会使用的按键，因此也为5；大招前期无法解锁，且CD较长，因此为3；
·关键性：指此按钮在游戏中的重要性，与不小心按错时需要付出的成本，数值越大，越应该放在舒适且不易误触的位置；例如大招只会在关键时刻使用，CD一般比较长，因此各种频率会稍低，但考虑到大招的关键属性，若释放失败会带给玩家更大的挫败感，因此仍旧是放在高效区；
    根据游戏情况，大致把使用权重更高的按钮放在高效区，中等的放在中效区，较低的按钮放在低效区；

1.2使用习惯用法范式界面

习惯用法即不关注技术或直觉，而是通过学习简单、非隐喻的视角或者行为习惯用法来完成目标和任务，例如windows中，窗口的右上角就都是【X】，不论我们使用什么软件，都可以不用看屏幕完成上述操作，游戏也一样，明确当前做的游戏类型后，在没有完全跳脱出游戏模式框架前，采用玩家已经默认的操作模式。
    假设要做一款moba，包含攻击按钮与技能按钮，这和王者荣耀的操作有一定的相似，由于目前的市场几乎是王者荣耀垄断的市场，巨量的玩家已经在王者荣耀中养成了习惯，王者的布局几乎已经成为了moba的默认标准，符合游戏模式框架的东西首先要进行套用，例如攻击在右下角，其他技能以环装围绕攻击，若彻底反过来，玩家需要更高的学习成本，直接去冲击玩家的操作习惯，很容易迎来玩家的一句“XX游戏”。
设计时的重要程度： 习惯 > 按键权重

再举个例子，游戏中一般会把自己的生命值放在左上角，玩家已经有相关的意识了，如果把BOSS的血放在此位置，会很容易让玩家第一意识反应错误导致失误引起的挫败感。

1.3 按钮的人机布局

通过第一步得到按钮的分类与权重，第二步得到的大致布局，即可根据人机图优化按钮的位置，大概的舒适区如下图，即为146px-585px之间，所有操作按钮尽量满足在此操作区内。

权重相近的按钮，使用频率更低的放在更上方，可相对减少误触的概率。

2、交互细化

2.1 交互基础逻辑

首先要弄清楚按钮的功能、使用场景、使用状态等

以范围型技能为例设计：

1.拖动：
·按钮处出现摇杆圆盘、人物周围出现技能范围圆圈、人物脚底出现道具范围法阵
·摇杆中心为按钮偏上，防止无法拖动至下方施法，摇杆默认出现在圆盘中心，玩家拖动按钮处摇杆，可控制技能方向
2.点击
·手指按下，显示UI，若不移动摇杆，则不施法
·若附近有可以适用目标，如敌人，点击后自动选中目标，并对目标范围使用当前点击道具
3.长按
·长按技能图标展示技能tips，tips右下角自动跟随技能按钮左上角位置，松开手后不触发技能
4.取消
·手指拖动至【x】，范围变为取消状态，松开手指触发取消

5.特殊状态

·state1：普通状态，点击/拖动技能时，会进入如上攻击状态
·state2：未装备技能，不展示
·state3：失效态，无MP或角色死亡，置灰，点击提示toast，“XXXXXX不足”“角色已死亡”
·state4：冷却中，点击提示toast：“技能名字冷却中”
·state5：硬直中，点击无反应（若在硬直结束前的0.2s前按了按键，硬直结束后自动释放最后一次按下的技能）

以上为按钮的基础交互，手游与主机或pc游戏不同，手游的精细操作难度更高，按钮的场景判断等预测行为可有效优化玩家的体验；【若附近有可以适用目标，如敌人，点击后自动选中目标，并对目标范围使用当前点击道具】
【可适用目标】种类多的情况如何判断？是先攻击小兵还是先攻击boss？若有多个小兵，优先攻击血多的还是血少的？若小兵都满血，先攻击近的还是远的？若有精细操作需求，是否应该继续添加切换目标操作？因此需要针对大多数正收益的情况对按钮状态做出判断。

2.2 交互反馈

丰富的视觉反馈是操作成功的关键回应，主要的视角反馈为两种：
1、按下成功后的反馈
2、按钮状态变化时的反馈，例如技能CD转好

如下，攻击按下后的漾开的波纹，技能释放成功后的特效，技能CD转好之后的特效，由于手机屏幕的物理特性，没有手柄的物理强反馈，因此需要在视觉上再次加强表现，以强化玩家成功按下按钮后的感觉。

3、中级、高级用户优化

3.1 中级用户

大多数用户即非新手又非专家，而是中级用户，新手玩家在游戏初期，有相对大量的新游戏内容，在学习新内容和提高的过程是一种愉悦状态，在不久后，大部分玩家就进入了中级用户的状态。

假如玩家在游戏的过程中无法通关，原因是小怪攻击力太高了，我需要优先攻击小怪，再消灭boss，那么针对这些中级用户，就需要设计一个优先攻击小怪的按钮。

继续以王者荣耀为例 ，此处添加了两个按钮（补刀、推塔），这两处按钮解决了用户无法像pc用户一样使用鼠标进行精准操作，在一定程度上满足了用户的特殊需求。

3.2高级用户、特殊用户

玩家都是聪明且忙碌的人，部分玩家可以使用更加复杂的设置来让自己达到更高的操作效率，此处的设计一般无法在设计初期完成，就如吃鸡，也是在版本一代代更迭中逐渐优化，设计师可能在最开始也无法想象用六个手指去玩吃鸡。

那么怎么针对中高级玩家做设计呢？

先说结论：不存在通用的按钮布局方案；可以从以下几个方面去做针对性设计。
1、不同尺寸的最佳适配方案有所不同
2、以推荐形式为玩家提供方案，在默认方案的基础增加其他方案
3、收集各路大神的方案，让玩家在大神方案的基础微调适合自己的手机和手指
4、若为跨区域游戏，需要针对不同地域做出微调方案

结语：操作按钮作为一款手游的核心，需要不断收集用户信息来逐渐优化，随着设备与玩家的变迁，按钮布局也会有着对应的变化。
一只交互设计师，欢迎交流。

VX：Lwanna7