《云图计划》的动效简析

作者:欧型兔 COTA五号 2021-09-26 50.2k


《少女前线:云图计划》是上海散爆网络科技有限公司开发的一款少前系列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

相关推荐

最新评论
暂无评论
参与评论

Facebook游戏出海峰会
推广
商务合作 查看更多

编辑推荐 查看更多