以“吃鸡”手游为例，讲解如何进行游戏交互界面设计

以“吃鸡”⼿游为例，讲解如何进⾏游戏交互界⾯设计

我们使⽤以下流程，设计⼀款游戏的交互界⾯：

1. 需求整理

1.1 界⾯层级拆解

游戏界⾯不同于应⽤，同屏的元素特别多，我之前的⽂章⾥介绍到，可以⽤“分组”、“相关元素贴近”的⽅式，将繁多的元素整合，提⾼界⾯的

可读性。

以上我们采⽤的是“平⾯”的组织⽅法，还有⼀种“⽴体”的组织⽅法，让我们安排和设计界⾯时更有条理，还不容易遗漏需求。

“吃鸡”⼿游界⾯，我们将其分成了以下层级，⼤家也可以按照喜好安排界⾯UI的分组：

序

号

1游戏层纯游戏画⾯，相当于在魔兽世界⾥⾯alt+Z

2特效层

3HUB层玩家和游戏场景互动的提⽰，例如开门开车、队友的标记等。

4操作按钮等，最重要的⼀层，下⽂会详细说明

名称说明

操作UI

层

辅助提

⽰层

⼆级菜

单层

系统UI

层

附着在游戏画⾯上的特效，例如被⾃⼰击中提⽰、击敌伤害跳字（或是⼤出⾎效果）、加速效果（开车或跳

伞时））、被毒、空投物品提⽰等。

5⼤部分都是⽂字，特点是不常驻（显⽰⼏秒后消失），例如⽂字TIPS、⽂字警告、击杀信息、新⼿提⽰等。

6提供额外功能的弹出框，例如整理背包、整理武器、查看地图、拾取界⾯）

7⾮游戏部分的UI，覆盖在所有层级之上，例如断线提⽰、退出询问等。

排序是以“从底层到⾼层”的⽅式，例如第1层是放在最下⾯，其次是第2层，当层级之间的元素有重叠时，⾼层的元素遮挡低层的元素。

图层

注意：这个层级关系可以作为程序的参考。不过有⼀些特别重要元素，例如被毒或是被攻击的效果、队友的标记，可以放

置在操作UI层或是⼆级菜单层之上，根据游戏的需要可作特别安排。

层级拆解的意义：

1. 为⾃⼰整理思路提供⽅便。

2. 后期加⼊新元素，可以⽐较容易地规避遮挡、重复等冲突。

3. 为程序员实际编码绘制图层提供参考。

4. 不容易漏需求，测试期间，⽅便复查。

1.2 规划操作UI层

整理好了纵向的层级，我们就可以开始平⾯的规划。

平⾯规划的主要⼯作集中在第4层——操作UI层上，⽬前市⾯⼏款“吃鸡”⼿游主要的界⾯区别在这⼀层上。

但有⼀点可以确定，纵向的层级⼏乎都保持⼀样的设计，这也是由于同⼀个类型的游戏性质决定的。

这⾥，我就先以猪场的《终结者》为例，看看如何⼀步步地规划。

横屏⼿机操作的特点

显⽽易见，红⾊热区颜⾊，越深越容易点击，适合放置最重要的操作。

根据这个原理，我们将需要放置的元素⼀个个地置⼊界⾯，从功能区域，然后再⼀步步细化。

放置主要功能区域

市⾯上⼤部分射击⼿游基本都采⽤了这个设计，这个习惯也是从游戏机⼿柄上沿袭⽽来的。

此外，屏幕的两个⽜⾓（左上⾓和右上⾓）也是⽐较可以舒服点击的区域。但是，“⽜⾓区”适合“快速响应”，不太适合“精细点击”，如果此

处同时存在2个或2个以上不同触控区域的功能，就会造成⼀些⿇烦，下⽂也会介绍到。

插⼊特殊功能区

除了移动和射击，但还有很多次级操作（例如：换弹药、调整⾝姿、狙击开镜等），作为重要的操作组成部分，要进⼊这两个区分“分⼀杯羹”。

所以，我们为此特别划分了⼏个“特殊功能区”。另外，HP的显⽰

从设计的⾓度来看，不应该在此处置⼊过多细⼩的功能按钮，但这两块地⽅是⼿机上唯⼀的可以进⾏快速且精细点击的区域，这也是⼀种折中和妥

协。

到这⼀步，我们已经完成了界⾯上⼏乎所有可以点击区域的规划了，其他位置都不太适合加⼊需要⼿指点击的功能或按钮了。

和红⾊热区的重合度很⾼

如果⼀定要红⾊热区之外放置需要点击的按钮，玩家将不得不放弃双⼿持握的姿态，改成单⼿持握（⼀般是右⼿），⽤另

外⼀只⼿的⾷指去点击那个该死的按钮。

操作UI层的⼏个状态

不同的场景下，显⽰的操作按钮也不同，有以下⼏个场景：

1. 跳伞状态

2. 普通状态

3. 开镜状态

4. 驾驶状态

具体的细化在下⽂正式开始绘制原型图时介绍。

1.3 规划信息相关的层级

除了“操作”以外，显⽰的“信息”也很重要。

第2层特效层、第3层HUB层、第5层辅助信息层，这三层共同承担展⽰信息的任务，通过多种样式的反馈，可以让玩家快速了解当前游戏情况，

得到很多游戏层⽆法获得的信息。

辅助信息层

⾸先我们来看第5层辅助信息层，包含的内容有：

1. ⽅向指⽰器

2. HP显⽰

3. 使⽤状态

4. 瞄准准星

5. ⽂字提⽰

准星⽤于调整⾏动⽅向、观察周围和射击瞄准，⾮常重要，⼀般放置在界⾯正中⼼。

另外，⼏个需要操作时间的使⽤状态，也放在这个位置：

使⽤状态限制

装弹时强制⽆法射击

使⽤药品强制⽆法移动

救⼈强制⽆法移动、⽆法转向

此外，辅助信息层⾥，还有⼀些⽂字的提⽰，如下图：

击杀信息

⽂字格式为：

XXX使⽤XXX（武器名）杀死了（或重创，组队模式适⽤）XXX

可能会播放多条，且持续不断更新，所以设置了多排（⼀般为3排）滚动显⽰。

新内容顶掉旧的内容，旧内容被向上顶出，淡出消失。

另外，组队模式下队友的击杀（重创）信息会被标记成明显的红⾊。

⽂字TIPS

单⾏⽂字（建议⽂字量⼀直维持在单⾏之内），显⽰次要的提⽰⽂字，例如拾取了某某物品、状态变化（背包容量）等等。

⽂字TIPS轻量⼩巧，被⼴泛应⽤，很多系统级别的提⽰（例如⽹络问题）也会调⽤这个功能进⾏提⽰。

警告信息

⼜⼤⼜粗，就适合播报重要信息（例如：毒圈收缩、随机轰炸等），显⽰时间⽐⽂字TIPS长，出现频率不⾼。

特效层和HUB层

这两个层级是“附着”在游戏层上的，如果说游戏层是“真实”世界的话，这两个层级就是真实世界的抽象延伸，⽤于辅助我们获取由于感官局限

（⼿机）⽽不能获取的信息。

特效层的元素

名称说明

被击

中状

飙⾎，环状的警⽰标志，并可⼤致指⽰出伤害来源的位置

态

名称说明

击中

敌⼈

状态

加速

状态

毒状

态

空投

物资以物资落点为地点，垂直向天空投射出⼀道红⾊的光芒，提⽰效果相当明显

提⽰

队友

的标同上类似

记

有下⾯⼏种反馈：⼀、准星变红（当然也是瞄准的反馈） ⼆、击中⾳效（⾳效也是交互的⼀部分） 三、伤害跳字

（不少FPS游戏使⽤夸张的⼤⾯积飙⾎来提⾼打击感，不过吃鸡可是个“和谐”的训练游戏）

跳伞时加速、驾车时的氮⽓加速

整个画⾯笼罩上⼀层夸张的渲染，让⼈产⽣不适感，起到促使玩家尽快摆脱这个状态的作⽤

HUB层的元素

名称说明

队友标记队友的名字、距离数值

环境互动例如：开门/关门，驾驶/乘坐载具。玩过FPS游戏的⼈应该对“E”键不会陌⽣

1.4 其他⼏个层

有下列⼏个⼆级菜单：

名称说明

装备管理⼀、安装配件 ⼆、丢弃⼦弹或武器

背包管理⼀、查看装备耐久 ⼆、丢弃装备或物品

拾取⾯板拾取地⾯的物品

游戏层：纯游戏画⾯，装备体现在⼈物模型上。

系统UI层：⾮游戏部分的UI，⼤部分游戏通⽤。

⾄此，⼏个层级的各⾃需求已经整理好了，就可以开始绘制正式的原型图绘图⼯作。

2、 绘制原型图

缕清了界⾯的层级，我们的原型绘制⼯作也会游刃有余。

建议⼤家在绘制的时候，采⽤“场景导⼊”的⽅法，就是假设实际在什么样的游戏环境下，相应的按钮应该如何排放。

“吃鸡”的⼤致游戏脉络为：

极简化的流程

主要的核⼼是“⽣存”，为了⽣存，我们可以选择武装⾃⼰（搜房舔⼫，获得更好的装备、充⾜补给）、杀⼈（观察、射击）、躲避杀戮（隐蔽、

逃跑）、躲避毒圈（圈、掩体、开车、疾奔等）。

2.1 打和跑

hit and run，打和跑。我们来看要如何实现打和跑：

控制视⾓区域，⽤于控制射击的准星的X轴、Y轴移动，⼈物的⾝位转向绑定准星的X轴。

还有⼀种将移动和瞄准完全剥离的做法，可以⼀边向某个⽅向跑，⼀边朝另⼀个⽅向射击，上半⾝和下半⾝仿佛可以各⾃

360°旋转，例如经典PS游戏地球防卫军，还有PC游戏孤胆⼿（虽然是2D的）。

其实界⾯的左右控制的不是同⼀个平⾯，如下图：

“⾛”：垂直⾯，“视⾓”：⽔平⾯

以上帝视⾓俯视着看，我们就能知道⼈物是如何“⾛”的：

向左、向右、向后分别执⾏左右平移、后退操作，但⽆法切换成跑步。

当触控区域在上图黄⾊范围内，进⾏前进动作（或侧前），中⼼圆点超过虚线范围后，可以变为跑步姿态。

2.2 更精细的动作

加⼊了切换跳、蹲、趴三个动作，并在左边额外增加了⼀个射击按钮。

早期版本的跳、蹲、趴是⼀摞放在右边的，看起来很规整。但实际上，我们叠加上红⾊热区会发现，“趴”按钮所在的区域已经泛⽩，说明此按钮

不是这么好点击了。所幸后⾯的及时修复了这个问题，及时调整了“趴”的位置。

⼀摞放在右边的，看起来很规整，但是...

2.3 恼⼈的移动和射击

由于射击按钮和控制视⾓区域重合，右⼿⼤拇指只有⼀根，那就⽆法像⿏标⼀样，⽆法实现精确定位的同时开射击了，这也是⽬前⼿游吃鸡最为

被诟病的地⽅。

⽬前⼿机FPS游戏有下⾯⼏种操作⽅式：

先定位、后射击

这种⽅法，左⼿不⽤承担任何射击任务，可以⾃由⾏动；右⼿需要承担定位、射击两项任务。这也是PC的经典FPS操作⽅式，左⼿键盘右⼿⿏

标，可以完全胜任。但是在⼿机上，右⼿需要多次的定位-射击-再定位-再射击，不甚其烦。

定位同时射击，或是先射击再定位

左⼿保持不变，右⼿变成了“射击同时定位”。这种⽅法也叫“追射”，准星咬着⽬标不放，优点是⾝体移动的同时可保持⽕⼒持续，反应速度

快、灵活。

缺点也⼀样明显，“⽔龙头打开了就难关了”。AK等后坐⼒强的械，前⼏发⼦弹准度极⾼，但持续连射后弹道就飘忽不定，⼀般⾼⼿是采⽤连

射3-4发，停⽚刻，再连射……但问题是：停顿的⽚刻间，松开⼿指后，射击按钮已经弹回原来位置，⼿指需要再次“寻”射击按钮的位置，并

再次定位，这⽚刻时间极其关键；同时，在⾼压⼒的对抗下，失误率提⾼，甚⾄会出现多次点不到射击按钮的情况，后果很严重。

3D-touch⽅案

相当于上⼀个⽅法——定位同时射击的“威⼒加强版”。右⼿完成定位后，不⽤“寻”射击按钮，直接按压屏幕就可以射击，也可以边定位边射

击，⼏乎可以做到和⿏标⼀样快。

但就这样也存在⼀个问题，按压的⼒度不好把握，时常会出现不⼩⼼“⾛⽕”，或是想射击时按得太轻了。

针对这个问题，我的想法是：

1. 简单⽅法：可以⾃定义3D-touch的⼒度阈值，到⼀个⾃⼰合适的⼒度。

2. 模拟实体按钮：如果可以利⽤⼿机设备的微动马达，在按压的阈值即将达到射击的要求时，给予玩家反馈，通过明确的感知，从⽽合理调整⾃

⼰的⼒度。

⼀旦3D-touch的⼿感被调制最优后，就完全可以去掉右⼿的射击按钮，让⼿机右侧变成⼀块“触控板”。

苹果笔记本触控板的良好触感

定点射击

由于“吃鸡”的特点，各种“伏地魔”、“桥头收费站”、“卡毒圈”的玩法，使得“定点射击”也有了很⼤的价值：

左右⼿各司其职，反应迅速

定点射击的⽅式放弃了移动，将开的任务交给了左⼿（屏幕左边的射击按钮），右⼿全⼒负责定位，实现“精准爆头”、“远距离追射”，深受

⼴⼤狙击⼿的喜爱。

按住开镜，松开射击

号称最快的狙击⽅法，按住射击键不放开（开镜）、移动⼿指定位，松开⼿指（射击）。

速度快、定位准。但容错低，且只能单发，适合威⼒⼤（可以⼀击必杀）的狙击武器。

其他⽅案

为了让⼤家能够开⼼地在⼿机吃鸡，⼤⼚们使劲解数，努⼒提⾼玩家的体验，

现在“吃鸡”⼿游⼤热之际，各⼤外设⼚商都纷纷推出各种“吃鸡专⽤”⼿柄。以个⼈之见：就和《王者荣耀》⼀样，⼿游要的就是不需要任何外

设，玩家宁愿忍受着各种不便，也不要抱着⼀个累赘的⼿柄。

真的要有⼀个专⽤的外设，我觉得只要加⼀个“扳机键”专门⽤于射击就可以了：

扣动扳机，顾名思义，被⼴泛⽤于主机上的FPS游戏

有了“扳机键”，就可以实现边移动边瞄准边射击了，虽然还是⽐不上⼿柄，但⼿感已经UP很多了。扳机键可以整合到⼿机壳上，⼜⽅便携带。

⼿机壳上加装L、R键

2.4 其他的辅助功能

除了射击和移动，操作区还有⼏个重要的按钮：

此次加⼊的按钮较多，所以在原型图内对按钮加⼊灰度显⽰其重要程度：

除了灰度，按钮⼤⼩也可以反映其重要程度

按钮上还有⼏个⼩细节，当⼿上持有多种类型的⼿雷或⾎包时，有⼀个⼩箭头可以进⾏切换：

细⼩的按钮不能说很好点，但也够⽤

显⽰负重程度：

⽤颜⾊和进度条来区分包裹的空满程度

2.5 最后两个功能区

分别放的是：武器管理和地图查看。

名称内容

缩略地图缩略地图、收圈倒计时、跑圈进度条，警告标志（红⾊、绿⾊）

武器管理武器信息、弹药信息、切换⾃动&单发、击杀信息、累计⾥程信息等

武器管理这⼀块区域按钮太过于密集，我们来看这个区域承载的功能以及重要程度：

序需求或

号功能

1

查看武通过映象分辨械的类型（冲锋、散弹、⾃动步、狙击），辨识具体是哪个械需要更深的游戏熟

器类型悉程度

查看弹

药情况

切换武

器

更换弹当弹匣内弹药未满，且包裹内有存弹情况下，有三种⽅式：（1）直接点击相应的武器按钮 （2）不开等

药待⽚刻后⾃动更换 （3）弹匣余弹为零⾃动更换

说明

使⽤“弹匣存弹数 / 包裹内总弹数”可以很清楚地知道弹药状况，弹匣存弹数被刻意放⼤2

3直接点击相应的按钮图标（主武器1、主2、近战、⼿）进⾏切换

4

序需求或

5装备⾃动武器时，可以切换连发、单发的射击模式

号功能

切换射

击⽅式

说明

除了1、2两个查看需求外，这块区域密集了5个可点击区域，某些按钮还承载了2个功能（换弹和换），所以导致此处误点率极⾼。

最主要的操作还是两个——换、换弹

1. 换。在激烈的对抗下，⼦弹续航不够时，附近没有掩体保护，第⼀时间应该选择更换武器⽽不是等待换弹。另外，很多玩家喜欢配置两把不

同类型的武器，随时切换应对不同场景（室内：散弹+⾃动步，室外狙击+⾃动步等），⽅便快速的换很重要。

CS的经典切连续杀⼈的视频

2. 换弹。⾼⼿习惯⾃⼰掌控换弹夹的节奏，新⼿也有强迫症似的⼀定要换满的需求。都需要“⾃由掌控”换弹时间，不⽅便的换弹⽅式、使⽤⾃

动机制来弥补，来不如直接来⼀个换弹按钮。

保证两个核⼼操作的体验，另外的功能和按钮靠边站（放置到更深层级或隐藏），⽽不是和核⼼功能抢位置增加误点⼏率，体验可能会更好。

到这⾥，我们介绍完了操作UI层的所有界⾯，另外⼏个层级也可以⽤类似的⽅法，⼀步步地拆解、分析。

最后

本⽂对当前已有交互设计的点评和分析，思考不周，欢迎⼤家批评指正。

“吃鸡”就是⼤⼚游戏，其他⼩⼚是鸡汤都喝不上。不做“吃鸡”，但研究“吃鸡”却依然有意义。

个⼈认为：⼿机版的吃鸡应该是属于⼀种简化版的吃鸡体验，⼿机版不需要完美的还原电脑板的吃鸡体验，⽽是保留其核

⼼要素的情况下，⼿机和电脑版吃鸡应该是并存的状态，体验另外⼀种乐趣。

现象级游戏就是值得研究的，很多⼈也是由于操作等原因“看衰”⼿机版的吃鸡。但是，“吃鸡成为下⼀款国民级⼿游”的说法被越多越多⼈认

同，我们“看”⼤⼚们如何在如此限制多多的⼿机上给⼤家带来良好的“吃鸡体验”，同时也可以借鉴和学习。