这次带来的是今年 5 月上线的二次元回合制手游《机动战姬：聚变》的游戏分享。

知名画师药锅锅主导下的二次元机娘谱系

《机动战姬：聚变》原由有《拳皇》、《重装战姬》等项目制作经验的 闪翼工作室 开发，后转由 Access!工作室  制作，在今年 5 月 25 日进行公测，公测前官网预约人数达到 300w 人次以上。

  Access！在《机动战姬》上线前邀请了二次元知名画师 药锅锅 担任主美，同时游戏中的角色立绘也诞生自众多实力派名画师之手（部分画师阵容见下图），随即破圈吸引大量路人玩家关注。

部分画师微博

药锅锅绘制的游戏立绘

游戏故事背景采用未来+末日的设定

在这个背景设定下，Access工作室以机娘为核心卖点，针对阵营各有侧重地进行角色美术设计。

1、机动魔法少女

魔法少女元素 + 浮游炮 机械元素极少

2、阵线卫队众

金属机械义肢的主要设计元素 + 红黑的色彩搭配

3、奥托露娜骑士团

剑与盾的骑士元素设计

4、天之刃

刀刃、机械臂元素设计，红&白配色凸显角色的冷酷血腥

机动战姬的UI设计思路，及其迭代优化

1、主界面UI迭代过程 

内测主界面UI：

(1)类《明日方舟》/《战双帕弥什》的主界面UI；

(2)轻量化、扁平化设计：界面风格轻快明亮；

(3)层次化：暗色UI半透明的设计，加强画面通透感和层次感；

(4)视觉引导：通过几何图形的排列布局，引导对游戏角色的关注。

内测主界面UI

公测优化方向：

(1)简单化：简化规整UI布局，让玩家更易理解和上手；

(2)功能化：弱化UI的装饰性，强调UI的功能。

公测主界面UI

开服后续优化方向：

(1)轻量化：缩小UI占比，凸显角色美术优势；

(2)一体化：将下方功能区与聊天系统进行统合，去除条形框，让整体画面更通透、更一体化；

(3)功能化：将UI上的Q版小人去除，聚焦UI的功能性。

公测第二版主界面UI

2、抽卡界面UI优化思路

测试版UI设计（下图1）

(1)卡池主题不明显；

(2)角色之间没有主次；

(3)信息点过于冗余；

(4)画面被过分的撑满。

公测优化（上图2）：

(1)优化抽卡UP角色的主次，突出单个角色，弱化其他角色，使抽卡画面不会显得过分饱满；

(2)去除冗杂的信息点（如：UP角色信息等）；

(3)缩小弱化了保底信息、招募按钮、招募规则等UI信息，突出强调卡池主题与角色立绘；

(4)优化画面整体饱和度与亮度，整体画面更为通透耐看。

3、战斗系统UI优化

关卡界面公测优化：

(1)优化UI层次感，将背景界面压暗，拉开UI与背景的层次；

(2)橙黄色点缀；

(3)关卡UI统一化，采用黑百灰色调搭配，并与背景地图互动，给玩家关卡信息。

图1内测版本，图2公测版本

编队界面公测优化：

(1)优化角色展示界面的色彩逻辑，突出卡牌的品质；

(2)优化画面整体饱和度与亮度，整体画面更为通透耐看，和其他页面相互协调统一。

图1内测版本，图2公测版本

战斗界面UI优化：

(1)公测弱化部分UI的存在感，优化UI层级，强调科技感；

(2)角色技能UI部分，一测亮黄色的技能条+亮白的血条缺乏一定的主次性；公测版本则调暗血条部分，突出技能部分UI；使用淡蓝色技能反馈，更有科技感的同时，让二者的层级关系更明显，信息更为明确。

左上图为内测版本，右下图为公测版本

公测UI优化方向：

(1)UI背景一体化；

(2)角色与对话框突出，虚化背景；

(3)信息明确化：黄色经验条、经验增加动效，关卡完成度信息提示，下一步操作等要素信息明确，给予玩家体验以更强的反馈。

图1内测版本，图2公测版本

4、总结

机动战姬在UI设计逻辑上参考了《第七史诗》这一成熟的设计案例，并在其之上做了简化/科技化等方向上的尝试。

机动战姬与第七史诗对比

在落地的手段上，则以缩小UI界面、减弱UI存在感等方式来实现这一目标。从玩家反馈来看，效果并不尽如人意。尽管在UI设计上有一定的争议，总体而言机动战姬的UI优化有一定的成效，我们也可以从中有所学习。

社区平台部分反馈截图

5、延伸拓展

碧蓝档案UI整体风格画面明亮，风格讨喜，操作界面简单易懂，信息明确，受到玩家获得一众好评。

碧蓝档案游戏截图

机动战姬游戏截图

《喷射战士2》与《多娜多娜》采用高饱和度和利落干净的线条组成的UI设计，能够给玩家强烈的视觉刺激，风格化明显。

左图《喷射战士2》，右图《多娜多娜》

《女神异闻录5》的UI风格特点：线条流畅利落，概括统一性的黑白配色以及形态描绘，同样让人印象深刻。

女神异闻录5游戏截图

可圈可点的战斗表现工艺与设计

机动战姬最初是由曾制作《拳皇》的闪翼工作室研发，因此在最初开发的进程中，最令人惊艳的就是它的战斗动效。

1、技术工艺

动效强调冷色调，科幻感十足

机动战姬运用了3D与Spine结合工艺，可以模拟多种复杂的动作模组，充分解放角色限制，创作出多种结构和体型的角色。

在角色技能特效上，增强冷色调的动态光效，整体更为自然，突出了机械与未来的科技感。

2、光照工艺

随着时间变化的角色渲染效果

最令人惊艳的是，新光照工艺能够随着时间变化改变角色的渲染效果，闪翼工作室将角色模组与自发光粒子的渲染效果配合得相得益彰。

3、角色技能

机动战姬的角色都拥有专属的技能过场动画，3D场景+2D角色结合的形式很大程度地丰富了游戏观赏性层次。

专属技能过场动画

角色技能特效视觉效果震撼，角色动作流畅，打击感十足。

打击感十足

特效视觉

4、打击感呈现

(1)差异性：根据各个角色的特色，设计蓄力阶段、攻击阶段和氛围特效。

视频：https://www.bilibili.com/video/BV1qa4y177eQ?p=50

(2)节奏感：特效的聚集、酝酿及爆发的时间点和节奏恰到好处。

视频：https://www.bilibili.com/video/BV1qa4y177eQ?p=36

(3)命中特效与受击特效：匹配受击的时间点，根据攻击状态（如是否暴击、是否弱点攻击等）来匹配不同效果（大小、亮度等）的受击特效。

普通伤害数字显示

暴击伤害数字显示

(4)体现打击感的UI：根据伤害的种类（元素，暴击，格挡等）通过不同的颜色、大小、亮度、震动等来表现打击感。

视频：https://www.bilibili.com/video/BV1qa4y177eQ?p=53

(5)相机效果：通过加入镜头效果和各种后期处理，也能很大程度上增强打击感。

镜头特写

(6)招式连击：高频高段的连击可以增强角色招式的打击爽快感，通过回避或取消动作的蓄力与收招等方式，增强角色攻击流畅性和即时反馈。

(7)攻击变速：通过调整游戏整体或角色动作的瞬时速度，来凸显角色攻击的整体效果（比如卡刀，卡肉，蓄力等手段）。

攻击变速：https://www.bilibili.com/video/BV1qa4y177eQ?p=20

蓄力攻击：https://www.bilibili.com/video/BV1qa4y177eQ?p=40

5、战斗美术优化

公测优化后【机动战姬：聚变】鹰身女妖 康德尔：

https://www.bilibili.com/video/BV1Ty4y1n7VJ?zw

特效

(1)区分攻击特效：采用蓝、黄、红三种颜色来区分招式的连段。

(2)放大攻击特效：采用更大，更炫，更华丽的攻击特效。

动作

(1)第三段普攻增加蓄力时间；

(2)延长小技能锁链连接的时间；

(3)终结技的动作连携更为流畅；

(4)收尾类钻头攻击增强打击感。

6、延伸拓展

（1）街霸打击特点

节奏感：长时间的蓄力和瞬时的爆发，配合镜头晃动、模糊等效果，体现了攻击的节奏，上身蓄力时的抖动，很好的体现了蓄力的力量感。

攻击变速：膝踢的长时间卡顿及升龙的多段连续小卡顿，很好的体现了角色招式的力量及节奏。

（2）第七史诗战斗画面

战斗动画品质高：特写镜头的人物表情刻画细致，高精度的动作展现，人物塑造也十分到位。

镜头衔接丝滑：第七史诗大招动画画面丰富，近景中景切换流畅，镜头之间衔接十分顺畅。

打击感表现力足：大招表现力十足，不逊色于动作游戏和格斗游戏的打击感。

对应的游戏细节：不同角色的技能，血条的削减动画大有不同。强调一发入魂的高伤害技能，血条是刷的一下红掉大半，而强调连击爽快感的多段伤害技能，血条的扣除则会配合动作节奏与伤害数字跳跃的节奏完全相符。