不止妹子和大长腿，还有……
该游戏的动态设计有三个显著的特点：
其一，镭射设计元素的延伸使用。
这种元素本质上是一种类似金属的材质，在不同角度光源的反射下，散发出多种色彩的一种视觉效果。
不过，该游戏的世界观中有一种很有意思的概念，即黑潮。这种东西视觉化之后，再体现在界面上时，是一种流动的黑色烟雾状物体。由此延伸，动态设计中表现镭射时，就将镭射的“五彩斑斓”体现在这种烟雾状物体固有的运动形态之中。
这种流动的黑色物体，却散发出多种色彩光泽。不就是传说中“五彩斑斓的黑”吗？这就是典型的既结合了游戏世界观元素，又巧妙将流行元素结合在设计中的一种手法。
如上图所示的“道具购买弹窗”中，背板中的黑色衬底上，就有持续流动的动态镭射效果
在上图的战斗内“回合提示”弹窗的入场中展示了这种黑色物质的另一种形态，除本身的彩色光泽感外，又结合了型体生成的动态效果。
其二，空间感设计。
界面的动效设计和游戏场景的结合在游戏产品中极为多见。但是在手游中受限于用户的硬件机能不统一，具体应用时会非常谨慎。
这种设计在视觉上会给人一种空间感。比如在主界面中，点击右上角的“邮件”打开邮件界面时，就不像传统的界面一样直接出现一个框体，而是通过在主界面场景中的镜头运动，将画面直接推移到场景一角的一个邮箱处。接着邮箱里还会跳出一只可爱的小白猫，邮件就和真的邮件那样挨个跳出来，玩家只有在点击了场景中真的存在的邮件实体时，邮件内容才会在左边的面板中展示出来。而这个面板，却也是写实化的“实体”。
邮箱界面入场（做了加速处理）
邮箱-点开邮件
又如，在限时活动“幻梦奇谭”系统中，点击“神龛”或者“奇谈”或者“式神灵”时，都会出现类似的镜头推移动作，画面出现大透视纵深变化。
幻梦奇谭-神龛幻境入场
类似的转场设计在该游戏中非常多见。
这种设计的好处在于，能突破传统框体转接的视觉效果，在效果上有很强的视觉冲击力，让整个游戏有别样的风格体现。
但其实也有固有的问题：
首先就是机能问题。这种大纵深的画面视角变化，意味着三维场景短时内的即时渲染需求，这就对手机配置有一定要求。对下沉市场来说这并不是好消息，也是很多主流大DAU手游在尝试这种方案上非常谨慎的主要原因；
其次是时间控制。镜头的拉伸效果往往需要镜头沿着某一条纵深轨道进行运动，这种运动需要依赖一定的时间长度才能出效果。与传统的框体之间的衔接效果相比，这种效果会更吃时间。当应用在高频操作界面中时，这种设计显得并不友好。玩家首次看到这种效果时能感受到很强的视觉冲击力，但频繁操作该类界面后，会很容易因为多次观看而产生审美疲劳。毕竟对玩家来说，界面是用来操作的，并不是单纯用来欣赏的。从这个角度上来说，那些耗时更短的快速响应界面比好看的耗时更长的界面会更加实用；
动效的时长对玩家观感的影响
最后是动效节奏感上的影响。本质上这影响了玩家在时间维度上对界面的信息感知。在游戏画面里，我们通常用有镜头运动的视觉效果来表现一些戏剧性的画面，或者将其用于需要表达高浓度情感的界面上，这个手段显得界面传达出来的视觉化信息比较有仪式感。用较多的时间去体现这种仪式感无可厚非，玩家也乐于接受，也是一种（相对）慢节奏的设计手法。但如果在高频使用界面里这样做，就是不恰当的设计了。所以说这种类型的动效虽然好看，但并不一定好用，应该选择性使用。
可能基于同样的考虑，在该游戏中，我们也可以看到一些做了让步的设计。比如在“备战室”系统的入场中，就改用面片平移的方式切换场景。这种类型的转场响应更加快捷，也同时有一定的三维场景镜头移动的效果。可谓一石二鸟的巧妙设计。
其三，逐帧动画效果。
大部分情况下，设计师在游戏界面中设计动效时所利用的材料都是已有的图形素材。通过对这些图形进行缩放、位移、旋转或者透明度变化来组合出丰富的动态效果。如下图所示的“群星商城”界面中“东方商会”到“协会通行证”的切换动效，该游戏中的大部分动效依然遵循这一制作方法。
而采用逐帧动画的制作方法，制作出图形形体本身发生变化的效果，在游戏界面动效中并不多见，原因见后文。该游戏中占据比较重要地位的几个界面都能看到这种效果。如下图所示的“获得物品”弹窗：
究其原因，正如上文所言，这款游戏世界观中很重要的一部分就是“黑潮”的可视化元素。这种元素显而易见的被设定成一种流动的黑色烟雾状物体。在这样的视觉设定下延伸出的动态设计，几乎必然需要被设计成具备流体特征的样式。流体的特征就是持续蠕动，形态不定。用传统的固定图形元素进行形变、缩放等制作方式是很难做出这种效果的。而逐帧动画效果的特点就在于能够贴切细腻得表现出这种动态特点。
如下图所示的“战斗开始”提示弹窗的背景动画，仔细观察的话，会发现它入场与出场帧就属于完全不同的形态，这种动画如果设计成在固定的图形元素上位移，乃至于缩放，都会显得整个型体比较僵硬。
好处在于，可以更贴切的表现出流体的动画特点。逐帧动画效果的最主要特点就是每一帧上的图形都不尽一致，连续的帧会表现出型体上，透视上的丰富变化。如果用固定的图形，通过对它进行形变缩放，只会得到一个僵硬的，不符合人们常识的奇怪动画。
问题在于，如果真的用逐帧动画方式去实现效果的话，它在引擎内还原需要大量的序列帧。尤其当这种效果上要求的面片面积比较大时，帧数又比较高时。这对游戏最终的包体并不友好。不过也有对应解决方案。
比如，只在有限的几个界面中使用这种样式，并保证一个效果尽量复用在多处界面上。既能从效果上凸显这几个界面的重要性，或者情感表现上有别于其他界面的强度，又在不普遍使用的情况下节省包体。
又如，可以做适当的拉伸设计。用比效果上看起来小得多的贴图，在引擎中运行时拉伸到设计尺寸，也在一定程度上可以起到节省贴图占量的作用，但这种作用比较有限。有些特有的图形，尤其是比较多细节的，在被从小图拉伸到大图时会产生人眼可见的质量损失，占屏幕比例越大，这种损失感知就越明显。
而最高效的方式，就是利用引擎中的材质去模仿这种效果。在unity中可以设计对应效果的shader，在UE4中则是材质（母材质和材质实例）。这个方法的本质是利用单张较小的贴图，然后利用材质的特定程序运算规则（渲染管线），去即时生成一个流体效果。
实际上，这款游戏的这种类似逐帧动画的效果可能就是用的这种方法，除了上文中那种轮廓形态变化效果外，还有诸如弹窗的黑衬底上的动态效果：
这款游戏的弹窗结构设计非常一致，几乎都有一个黑色镭射材质的衬底。很多这种衬底上都被设计了色彩流动的动态效果。但它们并没有使用序列帧的还原手法。而是用了材质生成效果（并不明确该款游戏所使用的引擎，但材质生成的动态效果在多个引擎中的实现原理和基本逻辑是高度一致的）。
这种设计方式一方面肯定是考虑到逐帧动画的资源耗量，另一方面也是这个界面的动态结构决定的。这种动态只是面板上的一个待机动画。
“卡牌详情”弹窗
备战室-空无之域入场
空无之域-支援之域打开和关闭
第四章结语-入场
动效的节奏感是通过界面元素的行动次序来表现的。合适的节奏感通常需要结合几点来做设计：交互层面上各个元素的主次顺序（重要程度）；视觉层面上的图形逻辑关系；时间维度上的快慢结合。
该游戏的动效整体感官紧凑有序，除了一些细节外，整体的节奏感设计非常舒适。而且在系统层面上非常统一。
比如在“限时弹窗”与“燃情双旦弹窗”这两个拍脸图的对比中，我们就能显而易见的观察到设计师对节奏感设计要点的有效利用：
交互层面上各个元素的主次顺序。
在“燃情双旦”弹窗中，右侧人物的出现要早于左侧文字的出现；左侧文字的设计效果、待机特效效果要强于其他元素。这些设计表明这个弹窗的主要功能目的是吸引玩家参与活动，并告知玩家：所展示的角色出率在活动期间大幅提升。
在“限时弹窗”中，也是人物出现早于文字出现。但这里遵循的是人眼阅读顺序原则：从左至右。人物立绘更多起到吸引阅读的作用。在待机状态中，右侧文字中“700%”的美术样式和字号都要强于除人物外的其他元素。这些设计表明：这个限时活动会有超出平时“700%”的收益，而设计样式在强调这一点。
视觉层面上的图形逻辑关系。
在“燃情双旦”弹窗中，可以基本划分成人物、文字和底板三部分图形元素。出场顺序上，人物与底板第一次序，文字整体上第二次序。底板跟随人物与文字顺序，从右至左渐显。而且它是个信封的样式，在渐显的过程中有信封合上状态至打开状态的动态变化。
在“限时弹窗”中，也基本上可以划分成人物、文字和底板三部分图形元素。但是出场顺序正好和前例相反。与之对应的是抽象样式的渐显，方向也由左至右。由于样式上的抽象化，它没有像前例一样的信封形态变化。
时间维度上的快慢结合。
在两个弹窗中，都有人物（底板）→文字的出现次序安排。这种安排是由前两点决定的，在时间安排上的必然体现。
应该明确的是，界面中每个元素动画的动作都可以看做是出场走位→站定待机的过程。出场的时刻点决定着最早吸引眼球的点位，即玩家的阅读起点。而站定待机的时刻点，则决定着玩家的阅读落点。有时候甚至站定待机更能吸引眼球。
这是因为一个朴素的原理：在静态的海洋中，动态的元素更容易被注意到。在一堆视觉元素渐次落定时，最后一个或多个元素姗姗来迟的落定实际上在整个界面动效所持续的短暂的1-2秒内，起到了整体动效落定的作用，是最终的吸睛点，也是整个界面开始被玩家阅读并理解的起点。
图形，如人物立绘，底板等，都是可以一眼感知的，毕竟人是视觉化的动物。图形就起到第一时间呼唤注意力的作用。而文字，则是界面中最重要的信息传达元素。第一时间让玩家注意到图形，而落定时才是重要信息元素，也就是文字内容开始传达给玩家的时刻点。
这也是文字类元素在这类界面中，往往是最后落定部分的一个很重要原因。
燃情双旦弹窗
获得弹窗的动效整体动效较为冗长。正如前文所述，这是一种高频界面，这种弹窗上的动效如果设计得持续时间较长，在理论上是不可取的。不过这并不是太大的问题，前提是需要给玩家随时中断的权力。
但目前游戏内并没有给玩家随时中断该动效的权力，每次都必须等待动效完成后才可点击空白处切断界面。
较深层级的界面操作有时长过长、数量过多的空间感设计。这本质上也是一种时长设计问题。比如，玩家需要进入时之城，再由时之城进入其内的任一系统时，就可能连续经历两个纵深转场。单次操作问题不大，但高频操作时，这些界面切换效果就会损耗玩家耐心。或许设计师需要在这些地方花一些心思去设计一些巧妙的方式，以便交给玩家随时跳切的权力。
“时之城”进入“卡牌研究所”转场
其一，每个界面的动画，如一个界面的入场或者一个复合元素（一般指按钮或者图标）的反馈动效，首要的设计原则就是要感官上足够快捷。这点决定了每个自成一体的动效，都需要在尽量短的时间内完成入场动画（或足够短的反馈型动画）。
一般而言，这种时间长度都应尽量控制在0.6-1.5秒左右。超过这个时长时，玩家会明显感觉到迟缓。
因此，在这么短的时间内，当界面的图形设计足够复杂，一段动效内需要交代的动作足够多时，是没有足够的时间来让每个组成元素的动画挨个播放的。
其二，很少有那种将组成元素动画挨个播放的动效。动效设计师在设计和制作每一个动效的时候，可能会交代每个界面元素的来龙去脉。但这些内部细节并不一定都需要让玩家在操作界面时都看得一清二楚。而是通过一定逻辑组合在一起，用特定次序构成了一个自成一体的动效后，在使用界面的过程中，只需要让玩家能感受得到个中变化即可。
通常动效中各个动画间的关系是“错落有致”而非“首尾相接”
这里需要明白的是，感知与看到全部细节是两回事。那些首尾相错的元素动画，正是通过将主要的动态部分在短暂的时长内展示给玩家，而给玩家造成特定的印象，而非全时段展示。
我们所看到的最终成品一定只是这款游戏的设计师们为这个项目所产出的工作的很少的一部分。本文更是只讨论了其中的一部分，但窥一斑而见全豹，我们仍然可以看出他们在品质控制、风格控制和系统落地设计上的诸多亮眼表现。
我在本文材料准备阶段储备了大量游戏录屏，并以此裁切出了将近两百个单独的动效视频，这些片段几乎包含该游戏所有的动效设计样式，有很高的学习研究价值。本文的研究评论仅涉及其中的几十个，如果你有兴趣用这些视频文件进行学习研究（含本文GIF图片），请关注本公众号后，于后台发送“黑潮”，即可获取。
以上就是篇文章的全部内容，如果感到有所收获，请点击“在看”，或者分享给好友。有问题想要跟我交流，欢迎你在本文或公众号后台留言，我都会看到并回复。
往期推荐：