《云图计划》的动效简析

wanzi3220

《少女前线：云图计划》是上海散爆网络科技有限公司开发的一款少前系列Roguelike策略手游。于2021年9月23日开启全平台公测。

这是一款非常典型的“二次元”风格游戏。界面设计继承自《少女前线》中扁平化、科技感的设计风格，但细节上有所进化。

《少女前线》主界面

诸多相似世界观的“二次元”游戏几乎标配“科技感”设计风格和精美二次元美少女立绘，这款游戏也不例外。按照游戏世界观描述，我们在游戏中操作的角色无一例外都是“人形”少女。它们拥有不同的外貌、“派别”和技能特征。

这种调性和世界观设定必然会导向扁平化科技感的界面设计风格。我们在“半周谈”系列文章中曾经讲过如何进行科技感风格的动效设计（点此回顾）。今天就来讨论一下这款优秀的实例，看这些设计手法是如何结合实际情况去具体体现的。

融合科技感设计，是诸多“二次元”游戏中，比较流行的设计风格取向。究其原因，本质上都由它们的世界观所决定。

相对于经典概念中的科技感风格来说，很多这类游戏的界面风格往往拥有较为粗放的设计细节。这应该源于早期同类型日式二次元游戏中相关界面设定的影响。尤其是“EVA”这类二次元风格牵引所带来的的影响。

《崩坏3》与EVA联动时，具有浓重EVA味的活动界面。

“粗大科技感元素”和“粗宋字体”是这类风格的主要特征。

《少女前线》图鉴界面

《明日方舟》主界面

由此，这类游戏的界面设计虽然可以被归类在“科技感”的大类中，但与严肃的或者“成熟”一些的科技感设计依然有所不同。其中最大的差别就是琐碎细节的处理方式，以及对文字、纹理的处理形式。

如下图所示的《杀出重围：人类分裂》的界面风格，在细节处理上都更加细腻。

虽然如此，但它们依然用着科技感中常见的斜切硬角图形设计，以及诸多动态上科技感常用的手法，如闪切、故障风、图形生长等等特征。从这一点来说，这类游戏毫无疑问的属于科技感与特定类型风格的某种交集产物。在特定语境下，简单的说它们是科技感也未尝不可。

《云图计划》的设计风格也自然如此。它与《少女前线》共享同一世界观（《云》的故事发生在2058年，《少》的故事发生在其后约4年。），同为未来科幻背景下，云服务器世界中发生的故事。所以自然会有极多科技感元素设计。

从下图的几个开头播片的片段中，可一窥《云图》中的浓重科幻风格设计：

就界面设计上的沿袭与发展来讲，《云图》有着与前辈不同的细腻感。也取百家之长，交互体验上也进行了很多的改进。

比如在类似风格游戏《明日方舟》中的这种主菜单交互形式：

在《云图》中也用了同一种形式，但图形设计上更清晰和细腻：

在科技感风格的细节设计上，用了常用的动态设计手法，却做出了自己的特点。

比如常见的闪切、生长类动作，在人形资料页入场动画中：

在突破成功的提示条中：

以及成就经验条的增长动画中：

还有一些结合了诸多科技感设计特点的，进行了更加细腻设计的。

如抽卡阶段，人形的“来源企业”图标的生长动画：

以及扇区解锁时的过场动画中：

这些动画的细腻之处在于，对原有图形进行了非常细节的生成式演绎。并且结合了三维以及生长、闪切的制作手法，且节奏张弛有序。

还有利用科技感动效的特点，对界面信息逻辑进行直接联系的设计。如关卡节点切换时的效果：

《云图》界面中最亮眼的设计，是更贴切的三维界面设计。类似设计特征可以从类似风格的二次元游戏，如《战双帕弥什》和《明日方舟》中看到。

如下图的《战双帕弥什》主界面入场。可以看到主界面中控件的带纵深透视的设计样式：

以及下图《明日方舟》中主界面“真3D”跟随陀螺仪响应的效果：

但是《明日方舟》中的三维界面仅仅还停留在静态表现上，唯一有互动效果的就是如上图所示的，跟陀螺仪响应互动。即它会随着玩家持握手机时晃动而跟着摇摆。不过这也仅仅给玩家一些特殊感受，并没有太多实际效用。

“二次元”的核心应该是角色设计。在《原神》中，是性格迥异，画风“媚宅”的角色群，在《碧蓝航线》中则是画风精致的舰娘立绘，等等。在《云图》中自然也不能缺了二次元美少女们。

《云图》中的二次元美少女拥有多种具体表现形式：战斗中的二头身三维角色、立绘以及大招时的赛璐璐风格动画等。

她们以“人形”的概念存在于游戏世界中，也拥有多种演绎途径：战斗结束时的循环小动作：

精美的立绘，甚至2D动态立绘：

以及最精彩的，大招时的赛璐璐风格动画：

很大程度上，吸引玩家去玩这款游戏的主要因素，恐怕是这些内容。至少可以说，主要吸引玩家的是围绕着以这些内容为核心的一系列体验。

不过若没有与这种品质的美术相匹配的界面体验，这些精美的纸片人所构建的品质，说不定会被拉下几个档次。

如上文所述，我们在《战双帕弥什》和《明日方舟》中就见到3DUI的应用。除了上文列举过的那些，还有如下图所示，《明日方舟》中利用错层动画，想要体现纵深感的动态设计：

当然，别的类型的游戏中这种形式也很多见。只是在手游上的实践还很少有堪称比较合理和圆润的设计。

那种带有三维纵深的卡片式设计，当没有与之匹配的一整套体验设计时，总有一种画蛇添足之感。正如我一向坚持的那样：“没有必要的情况下，请不要在手游狭窄的画面内用带纵深的三维界面”，甚至我认为在任何平台上，无所顾忌的使用三维界面，是一种无视游戏体验的行为。

当然，我反对的只是“因为想用而去用”的情况。也有必然需要这种形式去表达的情况。比如在《全境封锁》中那样，恰到好处的去融入一些带纵深效果的三维界面设计，体验自然是提升的，尤其它还是有效的。如果在有限的画面内，毫无理由的，仅仅因为“好看”而去设计三维界面，那是我所拒绝的。

不过在《云图》中，我们再一次看到三维界面的应用时。感受到它这次不再是静置的，或者仅仅只是带有一些纵深透视的片状物。而是充分利用了镜头穿梭的方式去结合实际功能，进行了细致设计的真三维界面。

如在战斗内界面，开战前的一整个镜头穿梭效果：

这个“镜头”将整个场景和场景上方界面层进行了完整的演绎。玩家跟随镜头的动作，完整预览了场景的效果，可以更快辨明界面中关卡节点与场景之间的对应关系。而且这种演绎方式所造成的视觉冲击也非常强烈。

当场景更加复杂与纵深时，这个穿梭的效果更有冲击力：

与之相配合的是真三维的关卡节点界面的交互形式：

也就是说，这是一个视觉效果和交互体验完整结合的设计。

与这种设计形式相匹配的，是一整套的设计语言。最简单的理解就是，其他界面都处于这个空间内的同一视角。

如函数卡界面：

结算时的一系列镜头动作和界面穿梭入场：

可以明显的观察到，这套界面在战斗内有统一的透视角。不仅如此，在外围系统中，这种三维透视关系也得到了很好的统一。它们未必在静置时有明显的纵深透视，或与战斗内保持统一视角，但其转场动画都保持着“镜头穿梭”的动态设计样式：

最典型的莫过于几个大系统的出入场：

而在一些非场景化设计的系统中，也依然保持了这种纵深推进的动作趋势：

还有些界面内，则是省却了界面的纵深感，直接利用镜头动作来表现空间切换关系，如下图所示的队伍编辑界面的打开与关闭切换：

而在抽卡这类界面中，需要非常强情绪表现时，就将镜头动画与特效进行了非常充分的利用：

这种设计形式是一种很恰当的设计语言，很好的诠释了该游戏的“科幻”元素。

可以说，这种应用手段是极其成功的。整个操作过程中并没有感受到这种设计手法的“炫技”或者感觉到“画蛇添足”。

最核心的缘故在于，它们是基于操作体验所做的合理设计。

针对体验的细微设计，除了上文提到的那些之外。还有一个老生常谈的问题。那就是完整的穿梭或者演绎，往往会使动效有较漫长的时长。在头几次播放时会引起玩家的兴趣，但频繁的重复之下，一定会引起审美疲劳。

《云图》显然考虑到了这一点。虽然有时界面上没有明显的提示，但这些“漫长”的动效可以通过点击空白来跳过。

连续点击，快速领取：

过场点击跳过：

总结来看，《云图计划》界面动效设计的主要特点和优势在于：

1.继承了这类“二次元”游戏的“科技感”设计风格，但有明显的细腻改善，使整体气质上与同类产品在品质上拉开了差距。

2.在三维界面的设计上有非常清晰的思路，有的放矢，与整体操作体验进行了深度结合，不再流于形式。

3.与同类游戏相比，它的动效设计并没有非常明显的“风格化”设计。而是将特定“二次元”细分类别结合特定“科技感”风格进行了更细腻的、收敛的设计。

以上。

文/欧型兔
来源：COTA五号
原文：https://mp.weixin.qq.com/s/kFQ2olKNE4B-0qunp8kUuQ