/《绝对演绎》动效简析

《绝对演绎》动效简析



《绝对演绎》是一款网易的新游戏,于2021年12月24日全平台公测。据官方介绍,该游戏为“沉浸式娱乐圈养成手游”,戏称“顶流女明星模拟器”。

















游戏中,玩家将扮演一位刚进入“娱乐圈”的小白,感受从默默无闻到变成大明星的过程:






以演员的身份,共情每个角色的喜怒哀乐,感受到剧本里的悲欢离合,直面镜头背后的欢笑与汗水,体验到红毯上的万众瞩目,在全娱乐圈的期待中,登上演绎生涯的最高峰!



是今天冉冉升起的新星,也是明天声名大噪的影后,你的名字,会被记录在影后奖杯和名人堂里,你的出现,是这个时代送给影视行业的一颗明珠!




不过本质上这仍然是一款卡牌对战手游。游戏的主线为PVE模式,需要消耗“体力”,也可以“扫荡”已经通关的关卡。而PVP则是通过配置牌组,来与其他玩家进行异步对战。该游戏有诸多非常有特色的玩法系统,本文重点不在于此,不做过多介绍。








这显然是一款女性向游戏。从下图中游戏宣发的物料以及游戏界面内的一些相关设计就能明显感受到这一点。









该游戏与往常的女性向游戏的界面设计有共同的特点,如低对比度的色彩设计,明亮的色调,以及纤细优雅的字体设计等。







但特定的世界观设定,使得它更要凸显“时尚”感,从而使界面设计有一些自己特有的特点。





这些特点里最明显的是精致的界面细节设计,以及依托于“三角形”为基础图形的一整套图形构成方式。界面动效也以此为基点进一步展开,最终形成了《绝对演绎》自成一体的设计风格。








《绝对演绎》的界面动效有两个主要特征,一个是以生长式、构成式动画为基础的动画设计;另一个是大量界面细节动画,这一点在网易很多游戏中都有体现。









第一个,生长式动画。
它是以界面中“三角形”基本图形元素为基础展开





的。作为一种极为常见的图形,三角形的形式感在其他游戏界面或者类似的动态形式作品中有过非常多的演绎,所以将三角形作为基本图形会增加设计难度,毕竟不那么容易做出特有的设计。




我们在“








半周谈-16 如何让动效更有细节-1








”(点此回顾)中的一个范例就与此十分相似。




















但是在本游戏中,设计师基于常见的三角形阵列闪动与图形渐次展开的动画形式,赋予了整体界面动效一种新的感官。使三角形的演绎在普通动作的基础上,出现了一种新的风格。
















这事实上是游戏动效中,对不同元素进行巧妙组合,和对元素的时间次序进行特定设计得以出现特定风格的理论依据之一。
















正是基于这样的原因,虽然这种感受是以三角形阵列图形为基础的,但是单靠这种图形动态特点还不足以形成目前所见的感官。它需要界面中其他元素的配合。
















最简单的例子,如下图所示:








这两个控件的入场动画中,以三角横排图形的渐次闪动为基础,但还需辅以控件底图的伸展动画,并且组成控件的其他图形也有一些微小的动作。这些动画以特定的时间节奏组合在一起,就构成了以三角图形为基础的生长式动画。




类似的设计形式在《绝对演绎》中普遍存在,是这款游戏界面动效设计的核心风格化元素。


比如下图所示的,在顶部Tip这样的小型控件中:


整个控件的入场给人以“从中间伸展开”的动作感受。这种感受是由好几个元素的动画一起形成的:中间的光效扩散是主轴动作,两侧的三角形粒子是辅助动作,而底板两侧的三角图形闪切则是另一层辅助,它将这种扩张式的动画补充得更加灵动。


在同类型的小控件动画中也有类似效果,如下图所示的通用型Tip:


稍大型的控件中也同样延续了这一以三角形闪切为基础,横向扩张趋势的动效设计:

而在更大型的控件里,如下图所示的横屏弹窗的入场动画这样,利用更大块面的三角形闪切,配合界面中多层次图形的伸展动画,共同构成统一类型的生长式动效:

下图为慢放动作:

显然,这种三角闪切动画是一种“伴随动画”,即在动效发生的过程中一闪而过,或最终落脚循环,或最终消失的动画元素。


在下图的“获得时装”界面中可以看到:


下图为慢放动作:

下图的“新功能解锁”效果里也可以看到:

下图为放动作:

局内的“镜次提示”控件里也可以看到:

甚至于通用弹窗的入场动效,也是以三角图形闪切的形式引入:


还能看到像下图这样的黑色横条提示控件中,以扫过的形式存在的三角图形闪切:

当一种元素被作为一种通用形式时,不可能在整个界面系统中处处完全一样。而是需要以具体的应用环境为基础做相应的变化。这是“风格设定”和“界面铺量”之间最考验设计师水平的地方。


上文所列举的几个例子已经可以看到一些变化。当应用场景更多时,我们看到了更多变化。如下图所示,当这种三角闪切、生长型动画元素被应用在页签里时:

还有以另一种设计形式存在的页签:

以及在“拍照”界面中的第三种形式页签:

这几个页签的具体所在环境不同,但依然保持了风格一致。这是因为设计师在外观不尽相同的情况下,保留了三角闪切以及生长两种最基本的动画元素。


我们观察至此会发现,这种核心动效元素并不只是一种纯视觉意义上的风格元素而已。它事实上充当了界面动效中“信息刷新”的功能。三角阵列的闪切本身就有流动的动作趋势,生长动画本身就是从无到有的形式。两种动作趋势除了感官舒适外,其实都有“更新的含义。这在以上这些界面中,以及更多的界面中都能得到印证。


比如下图的结算界面中,大到整个框体,小到一列信息,都辅以这种核心动效元素:

下图为放动作:

下图同理

下图中的“合辑”切换中,“合辑”按钮的选中效果和左下角对应信息控件的入场动画,也是类似效果,并表示了类似含义

下图的“恭喜获得”全屏弹窗中,物品图标的入场动画里其实也应用了一样的闪切,刷新含义也继续在延续

下图为放动作:

而下图的三角闪切效果与它表示的含义则更不言而喻

如果说上文中对这种核心元素的处理是一种延续演变,那么有时候这种核心元素就需要被简化掉,或者根据需要进一步延伸出其他图形。


如下图所示的对话控件中,动效的层次仍然不少,但三角闪切的元素被相对简化了一些,可能与该控件的出现频次过高,不宜使用过于强烈的效果有关

类似的,下图中的引导对话框,也做了类似的简化

在“面具馆”界面的入场动效中,则只有“筛选功能”控件上有三角闪切元素

当界面功能有进一步的需求时,三角形元素会进一步扩展,如下图所示的“等级提升”动效中,就扩展出了斜方片图形,设计师将这种图形作为整个界面入场动效的前奏动画元素来使用,以便烘托出与“等级提升”对应的氛围

斜方片元素也有相应的延续,如下图所示的抽卡时获得面具的演示动效中这样,它同样也作为一种前奏动画元素,甚至静置界面就是以斜方片元素作为主要构成图形的

下图的NPC出场也有类似应用

以及设计上更复杂一些,信息更多一些的界面里亦有类似应用

第二个,细节动画。与诸多网易游戏类似,这款游戏的界面动效充满了各种细节,本文无法全部展开,只挑其中一部分进行讨论。


首先是前文所述的三角元素的一些扩展,如三角形和星型的粒子,这些东西往往作为氛围的烘托。用在一些需要点缀情绪的情况,或者进一步烘托界面本身所要营造的“璀璨”氛围。要知道,这款游戏的世界观是“娱乐圈”养成。所营造的时尚感势必缺不了璀璨星光类的视觉感受。


除了上文列举的“恭喜获得”、“结算”类之外,这类细节还存在于如下图所示的“评分”界面中:

以及像下图所示的牌组批量升级里

其次是界面入场中的某些动作趋势设计,这些动作趋势设计往往与界面设计中的“场景化”有关。如下图中“本子”的展开趋势,就是因为界面本很的设计是一个“本子”

又如下图所示的“上传档案”动效,为我们展示了一个照片被塞进信封后寄出的动作

同样的,因为下图的界面被设计为类似的“本子”,它的展开形式也与上上图类似:

下图同理

这个界面中的页签切换还结合了右侧比较写实的翻页动画:

下图和下下图所示的入场动画,均同理。它们都为相应的写实化设计做了对应图形逻辑的动态趋势设计

类似的界面设计里,这种动效构建的入场动画里,界面元素都统一遵守保有对应动作趋势的设计

在一般情况下,游戏里的个人信息页只是一个很普通的二级信息界面。但在《绝对演绎》中,却被营造出聚光灯下的“主角”效果。它的入场动画充满了仪式感,如下图所示,这种仪式感也是动效通过对聚光灯的演绎来达成的

主菜单在这款游戏里也变成了手机,与同为网易游戏的《永远的七日之都》有着异曲同工之妙。它的打开形式就是手机被拿起来,如下图所示,如果你注意观察,会看到我们的人物此时也同时拿起手机

这款游戏的“商城”也是同样的场景化设计思维,进入“商城”时,我们真的可以看到进入一个商城场景的推镜动效

这种推镜动作并不罕见,在这款游戏里也是一种标配,如在“衣柜”界面的入场动效里


“经纪公司”系统中进入“资源洽谈”界面。不仅如此,这一界面与下下图所示的该界面另一页签内容界面里,所有重要控件都设计了细腻的入场动画 :

这种推拉镜头的表现形式的优势在于,这种“直接联系”动效可以为玩家展示不同界面区域之间,或不同界面之间的层级乃至逻辑关系。同时,也可以用较低的成本实现更有冲击力的视觉效果。本例中就是用二维图片的缩放这种低成本形式,营造了推拉镜头这样的高视觉效果。如下两图所示的“咖位”一览系统就是这个道理

这种形式在当下的游戏中虽然常见,但如果用心设计,也可以有很有意思的效果。就像本游戏用常见的三角形闪切元素构造了独特的视觉和动效风格一样。下图所示的从“家”系统退回到主界面的转场,就有特别的感受。因为“家”系统退场时,我们的“镜头”实际上对准了场景里的一个门,而主界面中人物站立的场景则是室外。这两个场景的一推一拉以及它们的具体衔接关系岂不是一目了然,又有形式又有内容

另外,如果仔细观察主界面的入场动效,会发现构成它的这些组成部分的动画入场次序经过了精心的安排,有着明显的主次之分。同时还交代了一些图形元素的造型含义,如右侧的几个主功能入口,造型圆润,其入场动作也像吊牌,有一个轻盈优雅的下坠动作

当两个场景之间无法找到联系时,使用简单的推拉效果,造成“一呼一吸”的视觉感受,也同样可以令人接受。如下图从主界面进入到“家”系统界面的转场动效

在一些抽象化的界面中,如下图所示的列表页,动效设计依然充盈诸多细节,列表与页签,顶部的图标都有入场的由来方向:


下图的任务界面也是同样

像下图这种几乎只有列表结构的界面,也都利用入场动效的次序构建了合理的结构解释

下图同理

如果界面本身的图形比较复杂,还会有三段式的动效表演。如下图所示,从中心展开的图形作为前奏,引入主要的六边形框体后,底部按钮入场落定。是一个完整的三段式动效:

但足够复杂但没必要很多细节动画的地方,如下图所示的“编组”界面里,依然为卡牌设计了跟静态布局相关的动作趋势,每个牌组中两侧的卡牌都有一个入场时向外倾斜推出的动作:

还有如下图这样的介于写实描绘与抽象信息列表形式的界面里,也利用动效次序、动作趋势,为组成该界面的各个组件进行了逻辑和图形上的合理解释

下图这样综合了场景化与抽象式的界面,则同时兼具两种界面的入场动效特点,有镜头推拉模拟也有细节结构动效:








总结来看,这是一款界面设计审美在线的游戏。界面设计本身的细节足够多,由此延伸的界面动效细节也足够多。与众多的女性向游戏相比,乃至与所有类型游戏相比,《绝对演绎》都是一款界面设计层面上极为出色的游戏。








从这款游戏的界面动效设计上,我们能看出女性向、时尚感类型的界面动效设计的几个要点:









1. 利用尖锐的图形、图形阵列表现时尚、优雅气质。
本例为三角阵列和钝角的四芒星星图形阵列。并以此为基础扩展出特有的动效设计元素。本例为三角图形闪切,以及由此构建的生长式动效设计元素;









2.淡雅的、对比度底的色调是女性向游戏界面设计的一大特点。
但这类界面亮度过高,不易使用特效,因此可以在部分界面中使用暗色调进行处理。如本游戏的“恭喜获得”、“结算”等大量使用特效的界面那样;








3.时尚和璀璨的感觉是综合使用各种元素的结果。
就本例来讲,至少需要利用闪切三角图形、闪现光效、三角形粒子和频闪星星粒子这些元素的组合。不仅如此,这些元素还需要基于界面元素本身特定的动作设计。如闪、炸等特定动画动作。








本文篇幅所限,未能讨论到所有效果。该游戏还有很多有趣的细节,各位读者如有兴趣,可自行体验。






以上。









 欢迎点击下方名片关注本号 



往期推荐:

本文来自微信公众号“COTA五号”作者:欧型兔(ID:cotadesign)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。