/简示动效中表现界面图形细节的方法【亿点细节】~002~

简示动效中表现界面图形细节的方法【亿点细节】~002~




动效的细节可以影响整体效果,不信你看。




本文界面来自一款前不久的新游戏:《核芯:利希特》,该游戏目前港、澳、台、新、马服上线中。








这是一款二游,它的界面设计非常有特点:特殊的暗沉色调处理,有一种别致的氛围。诸多规整的几何细线构成了界面中的装饰图形,使之隐约可见《命运》的风味。总之,不太像其他很多二游那样“粗放”,而是一种由很细节加持的细腻设计。








但是,在这样的视觉设计基础上,该游戏的动效设计则略显不足。尤其是在一些高情绪点位上,目前的动态设计样式没充分利用界面设计中原本的图形结构去设计相应的动作。这其实就是咱们常说的动效中缺乏对图形结构的交代,从而无法设计出合理的节奏。说起来很复杂,但其实只是一些小细节没有被顾及到。








本文举其中一个例子,并将其进行修改,以此来说明这个问题。









如下图所示,是胜利结算界面在游戏中的效果:








将其主要的图形重新绘制,如下图所示,基本还原主要的图形结构:








然后在这个基础上,重新进行动效设计,效果如下所示:








这里的主要差别:








原版是炸→缩的整体趋势,最后收敛的趋势对胜利情绪是一种消解,而且这种节奏不符合心理预期,会显得阻滞。修改版原本为典型三段式动画,但胜利结算需要有急促的爆开效果,所以去掉了前奏,变成两段式动画,以爆开后原地沉淀为基本节奏。整体节奏要干脆一些,也符合胜利情绪的扩开和舒展趋势;

对比前后效果,我们可以将动效的“图形结构表达”具体为:


1.图形的形状决定它的运动形态,在这里出现比较多的图形是45度旋转的正方形方块图形,且在大布局上有环环相扣的图形结构特点。

原版动效做了很多缩放,多个硬边的、中心对称形式的图形上的这种动画组合,很容易把原先图形规整硬朗的印象破除掉。这种动画也是原版粘滞不利索的根本缘由,如下放慢版本所示:

所以修改版放弃了这些图形的缩放动画,改成生成类型。让它们以线条描绘的形式原地出现,从而避免了整体上粘滞的感受,如下放慢版所示:

2.多个图形之间的关系,决定它们之间的互动关系。这个界面中除了刚才那些方块图形外,居中的文字与文字后方放射状的圆形图形以及竖直居中的纵向图形,是本动效比较核心的图形。


原版中动态的处理方式为文字炸出,圆盘缩进,同时中心方块放大,这些缩放趋势最终产生互相抵触的效果,最终导致占主体的文字炸出效果被大幅消减。另外,落脚点的粒子形态图形也被设计成从两侧向中心靠近的动画,这同样也是消减整体扩张趋势的动作。如下放慢效果所示:

在修改版中,则将文字、圆盘的动作进行了统一,使整体炸开的扩张趋势得到增强,并且保持原版中中央竖型结构的上下出现趋势。在此基础上,为各个动作均增加一些前后修饰细节,让动画层次更加丰富,如下放慢版所示:

3.特殊情况下的细节处理手段。除了上边提到的细节外,如第一条所述,当将原版的缩放动画改成原地构成动画后,处于中心的方块上,一些细节设计上出现了变化,这里用了一些随机透明的平铺方块材质析出的效果,属于增强细节的处理手段。


这就是如何根据具体的情况,凭借图形的结构和逻辑进行动态设计的一种方法。

最后,这种图形逻辑、结构的表达形式不是唯一,本文的修改方案仅为其中一种,利用相似的思路,或许你也可以设计出更好的方案。


本文完。









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








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