关于手游技能的UI设计

一、背景

现在是一个手游时代，很多的端游都移植到了手机上，这里会面临一个问题，如何把端游上的大量技能放置在手机小小的屏幕上，同时让玩家的操作舒适，又能够快速精准的释放技能。在这里我总结一些游戏的思路。

二、MOBA类

2.1 这里以王者荣耀作为一个例子，首先，MOBA的端游设定，是一个英雄拥有：4个主动技能，1个被动技能，2个召唤师技能，若干装备技能，1个插眼技能。在这里，王者荣耀为了游戏的简易性，对英雄的技能拥有做了改变（暂时讨论大部分英雄）：3个主动技能，1个被动技能，1个召唤师技能，1个装备技能（如果出了多个主动装备的话会被覆盖），没有插眼技能。我们来看一下王者战斗时的UI：

一、二、三技能：表示英雄拥有的三个技能，一二技能为普通技能，4级之前就能够学习，三技能为大招，4级才能学习。这里可以想一下，为什么大招要放在普通攻击按键的上方。首先，这个游戏中，普通攻击是最常用的，所以，在你横屏手持手机时，你的两个大拇指所自然放置的位置下方（一般人手持的话，大拇指会在手机屏幕中间，因为中间和上方都要显示信息，所以只能把操作的大部分放置在下方，保证手不挡住视角），左手拇指就是移动键，右手拇指就是普攻键。那么我们回到一三技能的问题上，现在你的右手放置在普攻上，向左和向上移动，观察一下整只手的协同幅度，你会发现你上下移动的幅度会大于左右移动。这里就是为什么大招是要放在普攻键上方，因为大招的特性决定的：冷却时间长（大部分英雄）导致使用次数少。现在的一个优化是，英雄的3个技能都可以由玩家切换位置，因为有的英雄，比如露娜，娜可露露，赵云等的大招，都是需要大范围拖动的，控制不好就会拖动到取消区域，导致错失良机，所以这一类英雄的大招在高玩的手中可能会在二位置，防止出现误操作。

推塔，补兵按键：普攻键的子功能键，所以依附在普攻键的周围。这个是我个人常用的方案，我的主玩位置是射手，推塔按键对我来说是很重要的，在推水晶的关键时刻，如果你身为一个射手还在用普攻键攻击英雄/小兵，是会被队友喷死的，在游戏中，普攻键的优先级为：英雄>小兵/野怪>防御塔/水晶。

召唤师技能列：图中的惩戒按钮，位置为一技能的左边。在游戏中，召唤师的技能冷却为30-120秒，在冷却时间上来说，是偏久的，召唤师技能在设定上，是一个偏辅助的技能，但是在关键时刻也能有很大的作用，例如大闪，群奶。所以在下一排的三个技能中（还有回城，恢复），召唤师技能的位置必须要最靠近一二三技能。剩下的两个技能按照使用的频率依次向左排列。

三、MMORPG类

3.1 完美世界手游

完美世界手游人物拥有的技能：普通技能10个（包括一个普攻和一个躲避技能），图中红色方框内，真元技能3个，图中黄色方框内，一共是13个技能。普攻技能仍然是在最中心，但是，在这个游戏里面普攻其实并不是最频繁使用的一个技能，也就是说，普通没有必要放在最中心的位置。各个技能的使用频率是按照CD决定的，你用完一轮技能后，第一个使用的技能CD又好了，在这个过程中是不需要普攻的（看普攻和技能的dps决定是否要在技能中穿插普攻）。所以，UI在设计的时候可能是按照用户的常用习惯而不是技能释放的实际需求来设计这个UI。现在来看一下这8个技能是如何切换的

图中的白色区域4个是一组，当玩家用大拇指以半圆姿势划过白色的圆圈时，技能会切换到下一组（轮盘动画），这样就切换到了另外的4个技能。那么你怎么知道未显示的技能CD已经完毕了呢？

看图中的二技能的，当技能冷却完毕之后，会在相应的技能位置出现技能的阴影图示，大概出现半个圆的区域，1秒之后移动回原位置。这么做有一些弊端：

• 大拇指可能会挡住提示
• 出现提示的时间大概1秒左右，玩家可能没有即时注意到
  

那么我们在看看轮盘切换型技能UI的优缺点

优点：

• 右下角的技能显示少，显得简洁
  

缺点：

• 转换轮盘提升了操作量
• CD完毕提示不明显
  

我个人认为只要右下角安排合理，空间是足够放置8个技能的。在修改之前，我们看看右下角还有什么功能。

• 4技能右边的准心：改变当前选择目标，例如在boss召唤小怪时优先击杀小怪时使用。
• 普攻键右下角的跳跃。在副本中，这个技能的使用频率几乎为0，因为设定中跳跃是不能躲避攻击的，在战斗中也没有对跳跃这种功能的互动，所以跳跃键的加入是画蛇添足的。
• 4个技能左边的躲避键，躲避键的设定在这种UI设计中，我认为是合理的，在战斗中，你可以通过躲避键躲避boss的技能，如果是放在轮盘中的话，你要躲避之前可能要滑动轮盘才能使用，增加了操作量。所以躲避技能独立出来的设计是合理的。
• 黄色区域的三个真元技能。在完美世界中，真元技能的释放需要通过普通技能的释放积累真元，逻辑如下
  

在实际的游戏体验中，大概30秒能够积累200真元，才能满足技能的释放，同时真元的上限是400，决定了一定时间内最多可使用2个技能，所以把真元技能放在普通技能之外的位置是合理的。

• 药品快捷使用键
  

如图分别是78和80的所示位置，这里官方的设定是安排了两个药品的快捷使用键，相对于MOBA游戏的话则是恢复键。完美世界中，瞬间恢复药品的使用CD是90秒，一般情况下，瞬间回血的需求会比较高，包括副本，PK。而瞬间回蓝的需求几乎为0（我玩的职业法师同时使用了对应等级的持续恢复蓝量药品，游戏中也没有职业技能能够减少敌对玩家的蓝量，所以瞬间回蓝药品的设定只是为了和瞬间回血组成一对罢了）。所以一个位置放置瞬间回血药品，另一个位置可放置一些功能药品，例如：


四、如何设计好的技能UI和我的理解

4.1 要设计出好的UI，首先要明确你技能的使用频率。例如MOBA类手游和MMORPG类手游的普攻使用频率是不一样的，如果都把普攻按照中心来设计，那么就是不大正确的。第二点，玩家的习惯，在游戏的设计传承中，带着一些大家都认同的习惯，例如左手控制移动，右手放技能。在画面中心滑动则为改变/缩放视角。我们的设计必须要建立在玩家的操作习惯上，而不是自己凭空的设定。第三点，突出重点，当你在战斗的时候，UI应当能够使你的注意力集中在战斗对象和操作上，这个时候要简化一些其他的干扰，例如完美世界的右上角地图的左边区域


显示的是一些交易和活动有关的信息，在玩家进入副本后会自动隐藏，是一个优秀的设计。

4.2 我的理解

我在这里提出我对于完美世界右下角区域的修改建议，首先提出需求：

• 普通技能（包括普攻），真元技能，普通技能频率>真元技能频率
• 躲避技能按钮
• 切换目标按钮
• 快捷药品使用按钮
  

注：在这里我取消了跳跃按钮，因为没有实用性

设计如图


想法：12345678的顺序，首先，在没有学完技能的时候，依次按照习得顺序存放，全部习得后提供自定义功能。普攻和躲避技能的大小和12345678一样大，并不突出普攻。在药品快捷使用上，我拉进了两个按钮的距离。真元技能和选择目标功能上，我选取了比普攻要小的圆形按钮，放置在普通技能的上方。同时在选取目标的按钮上，提供了一个收回按钮，点击之后收回技能栏和药品栏（待定）。出现日常使用界面，这个时候就有跳跃等功能。

分析：

• 按钮过多，界面不够简洁，可能容易误触，不过习惯之后有改善的空间
• 操作量比起原本的设计有减少
• CD完毕容易观察
  

五、小尾巴

最后，所有的设计都要服务于玩家，当然了，众口难调，所以把方案都设计好了，交给玩家自己选择也是一种可行的方法。


知乎专栏：https://www.zhihu.com/people/bu-ceng-wang-ji-72