费茨定律在游戏交互设计中的运用

如宣湛

大家好，我是游戏交互设计师懒蚂蚁GM。今天跟大家科普一下游戏交互设计中的另一门杀手锏——费茨定律（Fitts’ Law），这是每个交互设计师都如雷贯耳的七大交互定律之一。
费茨定律

1954年，担任美国空军人类工程学部门主任的保罗 • 菲茨，通过对人机交互过程中的运动特征、运动时间、运动范围和运动准确性的研究，提出了著名的费茨定律（Fitts' Law）。后来，费茨定律逐渐演变为人机界面设计法则，是一种主要用于人机交互中的人类运动的预测模型，在很多领域尤其是人机交互设计领域影响深远。
费茨定律数学表达式

费茨定律图示

费茨定律主要表明了初始点到目标之间的距离、目标物的大小和所需时间之间的关系。其中：T表示完成这次操作所需要的时间，a和b是取决于输入设备的常数，D表示初始位置和目标物之间的距离，W表示目标物的宽度。
由公式可得：
• 当距离D一定时，目标W越小，完成操作所需的时间T越大；目标W越大，完成操作所需的时间T越小。
• 当目标大小W一定时，初始位置与目标物之间的距离D越小，完成操作所需的时间T越小；初始位置与目标物之间的距离D越大，完成操作所需的时间T越大。
费茨定律在手机游戏交互设计中的运用

这里值得一提的是，虽然费茨定律的诞生主要是为PC端的人机交互行为进行指导，但是其对移动端的人机交互同样具有指导意义。费茨定律在手机游戏交互设计中的运用主要体现在以下几点：
1.按钮越大越容易点击
在合理范围内，增大按钮的尺寸或触发区域可以使按钮更容易点击，从而便于玩家进行游戏操作。例如网易高自由度武侠手游《楚留香》（现已更名为《一梦江湖》）登录界面的”进入游戏”按钮尺寸比较大，极大的方便了玩家点击，使玩家能够更快速的进入游戏。
《楚留香》登录界面

再如网易无套路妖怪卡牌对战手游《阴阳师:百闻牌》中的许多弹窗界面，采用了点击空白处即可关闭窗口的方式，这也是通过增加“关闭”按钮的触发面积来达到使玩家快速操作的目的。
《阴阳师:百闻牌》设置界面

2.将按钮放置在离起始点较近的地方更易于点击
（1）按钮放置在左、右手拇指附近更易于点击（屏幕左、右下角）
根据研究表明，人们在使用手机时，75%的交互操作都是由拇指驱动的，而拇指悬停的位置恰恰就是屏幕下方。所以，界面中使用频次较高的按钮一般都置于屏幕下方，尤其是屏幕左下角和右下角。例如，当前小学生最爱玩的腾讯5V5对抗手游《王者荣耀》对局中的界面，控制角色移动的遥感icon布局于屏幕左下角，控制角色攻击的icon布局于屏幕右下角。众所周知，在Moba类游戏中控制角色移动和攻击的按钮是最为常用的。
《王者荣耀》对局中界面

（2）需连续操作的、功能相近或具有承接性的按钮放置在一起更容易点击
上述第一条是将玩家的拇指作为起始点，而这第二条是将玩家需要进行连续点击操作过程中，首次点击的位置作为起始点。比如鼠标在电脑桌面点击右键时所弹出的面板距离鼠标光标很近，而不是在距离鼠标光标很远的位置，这样就大大减少了光标移动到面板中某属性位置的距离。
鼠标邮件单击弹出的面板

简单来说就是，如果玩家点击A按钮后还要点击B按钮，那么将A、B两个按钮放置在一起能够大大提高玩家的操作效率。例如上述提到的《王者荣耀》游戏战斗界面中，角色的三个技能icon和普攻icon放置在一起；如《轮斗西游2》游戏战斗界面中，玩家所操纵的三个角色的头像icon一起排布在屏幕右侧，方便玩家在当前角色技能CD冷却时快速切换其他角色；如手游《神都夜行录》的战斗界面中，三个助战妖灵的头像icon排布在一起，方便玩家快速轮流释放妖灵大招。
《乱斗西游2》战斗界面

《神都夜行录》战斗界面

3.将按钮放置在屏幕的四角或四边更易于点击
这一点的本质还要归于第1点，因为屏幕的边角是巨大的目标，它们无限高或无限宽，所以放置在此处的按钮等同于具有无限大的触发区域。值得注意的是，这一点总结于PC端的人机交互中，因为无论如何操作，鼠标光标都不可能超出屏幕，但是在手机游戏中也可以应用。
如手游《QQ飞车》的背包界面，一级页签布局于屏幕左侧，当玩家进行页签切换时，拇指可以放心大胆的去操作，因为只要有拇指面积触碰到页签区域，即使大部分拇指都触碰到手机外壳，仍然是可以完成切换页签的操作。这个例子中，页签的触发范围虽然不是无限大，但是由于其布局于屏幕边缘，手机外壳在无形中增加了其触发面积。
《QQ飞车》背包界面

手游中具有无限大的触发面积的控件也很常见，例如改版前的腾讯吃鸡手游《刺激战场》游戏中的背包窗口，当玩家想要丢弃背包中的道具时，只需将其拖动至屏幕右侧边缘的区域（图示红色区域）即可。因为无法将道具拖动出手机屏幕，所以此区域的面积等价于无限大。
《刺激战场》背包窗口

4.反向使用费茨定律，降低玩家点击按钮的可能性
游戏设计中经常会遇到一些不希望玩家点击但在功能上又必不可少的按钮，或者是避免玩家误操作的按钮，这时便可以反向利用费茨定律，通过增加按钮与拇指之间的距离或减小按钮的尺寸，来降低按钮被点击的概率。
俗话说“好的开头，是游戏成功的一半”。游戏开场动画是开发团队精心制作的，用来对游戏世界观或角色背景故事进行一定的说明介绍。虽然它对游戏的功能和玩法无任何附加影响，但是由于首因效应的重要性，它是游戏运行时吸引玩家目光的重要手段。所以，为了降低游戏开场动画被玩家选择跳过的可能性，一般将跳过按钮放置于屏幕右上角，增加其与拇指的距离，如《神都夜行录》的开场动画界面。
《神都夜行录》开场动画界面

当玩家需要在两个或多个操作中进行选择时，若游戏不希望玩家执行某项操作，则会提高该操作的难度。例如常见的二次确认窗口，此处以更具说服力的充值确认窗口举例，一般“取消”按钮布局在左，“确认”按钮布局在右。因为玩家中绝大多数都习惯右手操作，所以此处增加“取消”按钮与玩家右手拇指的距离，即相对而言增加了玩家取消充值操作的难度，促进了玩家消费。
充值确认窗口

除了通过增加按钮与拇指之间的距离或减小按钮的尺寸，来降低按钮被点击的概率之外，还可以通过增加交互方式的难度来提高操作难度。例如移动端常见的交互方式为单击，而双击和滑动等交互方式相较于单击而言对用户更为不便。手机游戏中一般是通过滑动等操作来丰富交互方式和提高游戏体验，因此此处以苹果手机关机界面进行举例说明。如图，虽然“关机”和“取消”两个按钮分别处于手机上半身和下半身，其在操作难度上已经具有了很大的区别，但是将关机设计为滑动操作，进一步增加了关机的操作难度。
苹果手机关机界面

笔者会继续发表一些与游戏交互设计相关的文章，喜欢交互设计或情感化设计的小伙伴可以点波关注，避免您错过有助于提高设计思维或积累优秀交互案例的知识宝库。
推荐笔者之前发表的同类型文章《格式塔心理学在游戏交互设计中的运用》

jun19

支持你哈...................................

hubin

看帖要回，回帖才健康，在踩踩，楼主辛苦了！

woshishui123

纯粹路过，没任何兴趣，仅仅是看在老用户份上回复一下

牛必塞

佩服佩服！

bohoasxs

我只是路过，不发表意见

陈辉422

呵呵，低调，低调！

夜·月痕

支持，楼下的跟上哈~

口口灰色口口

路过 帮顶 嘿嘿

爱上明月楼

支持楼主，用户楼主，楼主英明呀！！！