游戏界面动效风格化

原文章作者：COTA 欧型兔

第一部分  什么是动效的风格

 

风格指的是在整体上呈现出的具有代表性的独特面貌。这一概念适用于一切视觉化的美术作品、艺术品、电影、游戏等等。对于游戏界面来说，其特有的风格是被刻意设计出来的。游戏界面的设计需要根据不同游戏的不同世界观，去进行特有的美术风格设计。这些设计来源于游戏世界观的文字描述，以及相关的美术资料，包括但不限于游戏原画、场景等资料。通过提炼这些材料，析出游戏界面可用的美术元素，色彩，特有的排版方式等。对这些元素进行有机的组合后就能形成一款游戏特有的游戏界面设计风格。

 

而界面动效的设计需要以此为基础，除了延续界面设计本身要表现的特有风格之外，还需要在动作和节奏上吻合其特有的风貌和功能特点。比如在偏卡通类型的游戏中，常常可以看到弹动的动效，因为弹动动作往往更能表现卡通风格中精力充沛，富有弹性的精神特质；而在科技感风格游戏里，则有比较多闪动、切变的动效，这些动作特点也常常是人们对高科技类事物的特有印象；在魔幻类的游戏里，则常见偏写实、体现重量的动画设计，因为往往这类游戏的美术和世界观是基于欧洲中世纪的观感特点构建的，那个时代的物品有一种特有的材质感，偏向写实而厚重的动作设计更能贴合这种美术印象；在偏重现代时尚概念的游戏中，则有比较多柔顺、轻盈的动效，因为这种动作特点更加能够体现现代感设计中偏向简约的美术特点，等等。

如下图的游戏《Averangers》中的界面动效，它的窗口入画的动画就是一种弹动效果。这个游戏的美术和界面设计都属于美式卡通风格。这种美术风格使人联想到美式漫画和美式卡通动画中充满视觉冲击力的艺术表现形式，弹动的动作特点正好可以体现这种形式。

下图的游戏《LineStage》界面里，消耗代币的形式动画中，代币飘荡的效果就显然不同于现实中纸片的飘荡效果。这段动画被设计成每个运动加速快，每个运动减速也快的的运动效果。呈现出一种类似卡通动画中常见的“劲道”的动画效果，呈现出“精力充沛”特点。跟line friends 这个IP所要体现的风貌是一致的。

下图的游戏《精英危机》的界面出现动画，与前两者有着显著的差别。很明显的是一种科技感的动画风格。原因主要在于它所用的闪动效果，这种效果的特点是图形和颜色都有短时间内的快速变化，与前两者通过对单个元素运动曲线调整以形成效果的设计所不同，它是一种通过图形元素的快速变化来形成的一种动画风格。

在这些示例中，我们能明显的感知到不同的动效风格。它们之所以有不同风格上的观感，首先一个最主要的原因在于其界面设计在风格上的巨大差异。其次在于对动态效果的不同维度的控制上，有的是运用动画元素的运动曲线去设计出特别的加速和减速运动，有些是通过不同元素的组合切变。但它们的设计目的最终都是为了契合游戏界面设计的既有风貌，是静态图形的一种逻辑上的延伸和功能上的完善。因此我们可以将动效风格定义为：延续了游戏整体美术观感的，符合界面内在逻辑设计的，具备代表性的独特动态设计效果。

 

第二部分  风格结构

 

游戏界面的动效需要被整体性的看待。单独的控件动画不足以构成一款游戏的动效风格。这个整体的最小单元至少应该是由同一个画面内多个控件动画构成。更大的单元甚至是由多个有逻辑连接的画面中的动效构成的有机组合。一个能表现出独特风貌的动效，必定有几个重要的组成部分，这些部分互相影响，有机组合在一起，共同影响着一个动效对外展示出的风貌。

综合来看，影响动效风格的因素，主要有以下几个部分：

 

第一，  静态视觉元素。

它们是动态效果的基础，它们的风格很大程度上决定了动效的风格。

 

静态的视觉元素是动效建立的基础，无米不以成炊，静态视觉元素是制作动效的米，米是什么成色，很大程度上决定了最终动效的样貌。

因此，不同的动效看起来之所以不同，最大的影响因素在于它们“皮相”的不同。一个以纯线条和纯色图形为基础制作的动效与以具象化的美术元素为基础制作的动效会有显著的风格差异，即使它们除了图形元素外其他的动态设计都完全相同。

如下图一所示的游戏《掠食》中的tip提示动效和图二所示的游戏《羞辱》中的tip提示动效。两者的动态方式及其相似，都有很多闪动，和基于元素间逻辑关系的动态设计。可以说是几乎相同的动态设计手法。但我们依然会在感受上认为这是两种风格的动效。主要原因就是组成这两个动效的基本美术元素在风格上有很大的差异：前者的设计图形是由大量平直的线条和块面组成；后者则由偏向欧式的图形，字体以及残破材质构成。

可见，即便动态的演绎方式都极其相似，但如果基于不同的美术元素，动效整体依然可以呈现出不同的风貌。

 

视觉元素的风格决定了动效风格这点其实体现了动效的本质。它本身就是游戏视觉元素的一部分，或者说是游戏界面设计的一种延伸。可操作的游戏界面本身应该被看作一个整体，不管是设计稿也好，动效的设计也好，本质上都是为了形成最终那个可操作界面的一个工作程序，人为割裂的看待后被定义的所谓界面设计概念和动效设计概念其实都只是这一整个整体的有机组成部分。因此动效必然是视觉风貌某种维度上的延伸设计，但这不意味着两者有高下与主次之分。他们同属一个风格维度，互相牵扯和影响。动效设计师的关注点应该放在界面设计上，不仅需要关注它所表现出的风格特点，更应该了解清楚它所要表现的信息，所要达成的目的，即功能目的。这才是这项工作的终极目的。

第二，  伴随元素。

伴随元素指的是主图形运动过程中出现的那些转瞬即逝的、充满变化的图形。整体动效结束后这些元素会消失或者保持待机循环。它们在某些情况下是动态设计的有机组成部分，可以为整体动效润色，并辅助动态设计形成更细分的动效风格。

在前文所述第一点的基础上，基于整体元素的动态变化，在其过程里的伴随元素会使不同动效间有更加细腻的差别，也就形成了不同的细分风格。比如两个同样是弹动动画的动效，一个只有圆形本体的动画，另一个则另外设计了带有喷溅效果的伴随元素（动森的动效风格）。这两个动画就可以看作是卡通风格中的细分化风格。 

游戏《精英危机》（下图）中的界面展开动效里有很多闪动的效果，这种效果使这种展开动画效果有很强烈的科技感。这种闪动效果的展开过程可以理解为多个伴随元素的短暂交替出现组合而成。这种短暂出现又最终消失的图形元素就是一种典型的伴随元素。试想，把这里的伴随元素去掉，或者替换为别的形式，那么这个界面的展开动效就会有完全不同的风貌。因此它们在这里可以说是这种动态设计能形成独特风格的核心元素。

游戏《命运2》（下图）的新物品提示动画里也是用伴随元素来增强它的独特风貌的。它的展开过程可以极简化的理解为一个中心扩张式的动画。这款游戏的界面设计风格是极简扁平的，大多数界面元素用到的都是点、线、面这些元素。如果没有更多独特性的图形做额外的修饰，这种界面设计风格很容易泯然众人。事实上设计师通过在界面中应用独有的图形元素避免了这样的问题。同理，以这样比较普适性的图形设计为基础去设计动效时，如果没有独有性的伴随元素，动效的风格也很容易泯然众人。因此，我们可以在扩张式动画的那一段里看到，动态设计师利用了X型放射线的出现消失动画来充当了伴随元素的效果。这种效果不仅契合静态图形本身的风格，也在这个风格基础上做了合理延伸，并作出了独特的风貌，形成自己的风格。

就我们刚提到的扁平化的界面设计容易风格同质化的问题而言，在不同游戏中，基于类似的扁平化设计去做出不同风格的动效设计也是一个难点。

但借助于独特的伴随元素设计，可以很巧妙的解决这个问题。在游戏《死亡搁浅》（下图）中就有活生生的例子。这个页面刷新动效巧妙利用了一个半透多边形的伴随元素，不仅起到“页面刷新”的提示作用，它还被设计为最终“归宿”在底部按钮上，更加上了一层指示器的功能，这就在动效风格层面与交互引导层面起到了双重作用。这种巧妙的伴随元素使用方式是促成这款游戏的界面动态设计效果拥有独特风格特点的很重要的一部分。

第三，  结构次序。

 

动效风格需要由组成该动效的诸多动画单元进行特有次序的组合才得以形成。不同的动画出场顺序组合构成了不同的节奏感，即便出场顺序相同，但出场间隔不同，也会形成不同的节奏感，这就导致最终的风格差异。多个动态元素的的排布顺序、时间间隔、持续时间会综合影响动态观感，这种观感通常称之为动效节奏。特有的动效节奏是特有动效风格的组成部分。

界面动效设计的结构次序设计应该遵循的原则是逻辑自洽、功能决定。

逻辑自洽 

指的是有特定设计结构的元素，需要以其结构逻辑为依据进行动态的演绎。整个界面的动态演绎也应以界面内元素的结构为依据，而不应该出现逻辑不自然的动作。这点保证了动态元素在其所构建的世界内的存在性更加合理。也顺延保证了界面动效整体的合理性。

功能决定 

指的是动态演绎的各个部分的出场顺序，应该主要由界面设计中所传达的功能性为依据，进行先后排序。不管是单一控件内的各个组成部分还是整个界面内的各个控件，都应遵照这一原则。这一原则是保证“动效体现功能性”这一设计理念的一部分。

如下图所示的游戏《CYBERPUNK 2077》中的“信誉值增长”提示控件动画，就运用了复杂的动态元素次序动画。整体上可以粗略划分为“预载入”、“展开”、“循环”和“收起”四个阶段。

理论上来说，提示性的tip类动效一般不需要做这么复杂的结构和持续时长。我们往往会将它们设计成以尽量短的时间内完成入场动画，几秒钟的循环动画结束后迅速退场的形态。

但此例中的tip却较为特别，首要原因大概在于这是一款第一人称视角的游戏，它的局内画面需要随着玩家的视角和方向随时发生变化，也就说它的画面极其多变，视觉信息多且杂。这种画面内如果有提示性质的界面，就需要设计成强存在感或曰强提示性，否则极易被画面内的视觉信息淹没。

就像这段动画所展示的那样，需要有一个“预载入”的动画，让玩家的注意力暂时转移到画面的这个角落，仿佛我们在机场或车站听到广播消息那样，在正式信息前会听到轻柔的“噔、噔、噔”提示音，既不产生惊吓，又适当打断当前的注意力，告诉你“有消息”。这段预载入的动作也需要有个过渡，让它和后续的内容有柔和的衔接关系，促使玩家的视线被自然的引入到接下来的“广播”之中，这就是“展开”的意义。而“循环”就是给玩家阅读的时间。接着就是完成任务后的“收起”。这个结构符合我们所说的逻辑自洽，也符合它之所以存在的功能决定，而先后次序的安排又契合体验设计原则，整体干净整齐。

在下图所示的《底特律变人》的线索扫描动效中，我们可以看到相似的设计理念，即动效是对功能逻辑的解释，而因为扫描和结果呈现之间的逻辑关系，这段动效中的扫描动画和结果信息显示必然是先后关系，加上一些富有科技感的伴随元素的使用，如荧光的蓝色方框元素，像显微镜镜框的元素等，让整个画面表现出很强的高科技质感。

如果两个界面功能相似，结构相似，以它们为基础，会不会设计出相似的动效风格？答案是肯定的。但结构次序是风格之上的，比风格更加重要的需要去传达的信息。因为我们必须保证界面运行的首要目的是易用性，而非艺术性。并且我们可以利用这种特点，在界面规划的初始阶段，如策划阶段或者交互设计阶段，就去寻找一种符合需求的，能更准确传达自己游戏中特有功能的界面设计方案，以此来做出特异性。

通过适当控制动效设计中对逻辑结构的交代程度和功能决定程度，也可以做出完全不同的动态风格。比如在故事性强的画面中，就可以多利用镜头语言交代场景内物体的出入场次序和一定程度的视觉冲击力，而在功能性强的画面中，就可以更多应用待机循环的动态效果，传达出更近似静态设计稿的风格特性。

在动效设计中，动态元素的组合次序对动效的整体效果而言是一个非常基础的因素，它不仅决定了动效呈现的风貌，还直接决定了动效的节奏感。动效的节奏感是一个很丰富的课题，我会专辟一文对此进行讨论。但简单的说，设计师如果能够注重分析界面中信息的表达次序，能够深刻理解界面所要传达的信息和要实现的功能，就基本上掌握了一半的动效节奏感设计。

 

第四，  运动曲线

在动效的组成元素中，运动曲线（经过特定的次序组合后）会极大影响整体动效的风格。

运动曲线是什么呢？

以一个只有两个关键帧的动画为例，从初始帧（A）到结束帧（B），时间间隔相同的情况下，如果将这段动画设计为出发速度较快但结束速度较慢，则这段动画会使物体显得灵动；如果出发速度较慢，到B之前逐渐加速至最快然后渐渐停下，则这段动画显得物体会较为粗重。这种感受来自我们对现实物理世界中物体运动认知的实际经验。在现实中，质量较轻的物体会有更小的惯性，在相同加速度情况下，加速会比较快，停下来的也会比较快，而较重的物体则都相反。它们的物理特征决定了特定的运动规律，反过来为某物体设计特定的运动规律也可以给人造成该物体拥有特定物理特征的印象。运动曲线就是控制物体运动规律的表象特征的一个工具。

当动画被设计为相应的运动规律时，观感自然会被映射到我们对现实物体观察所得的经验上。这种速度上有变化的运动规律，在动画制作软件里就直接对应了运动曲线功能。我们以AE中的“值”曲线为例来简单的看看不同运动曲线对同一个图形运动观感的影响：

第一个是普通的缓入缓出曲线

这个曲线表示物体的运动速度从零缓慢加速至一个速度，而后再缓慢减速至零速。到达中间点的极速前，物体的加速度和减速度都保持恒定。它的运动曲线如下图所示：

实际效果如下图所示，小黄球从左侧移动到右侧，并没有用匀速运动，而是一种缓入缓出。为了观察舒适，该动画的开头和结尾添加了渐入渐出效果，下同。

而如果我们想要让图形的运动表现得更加灵动时，往往会用到第二种运动曲线：急动慢停。这种曲线表示物体会很快加速并运动至接近预定位置，然后放缓速度直至停下，其曲线如下图所示：

实际效果如下图所示。可以看到，在这种运动曲线里，小黄球会有更快的初始“反应速度”。由于跟上一个运动的总时长相等，两种情况下小黄球运动到终点时的时间实际上是一致的，但此处的小球总体运动状态显然要灵动得多。这种感觉实际上是由这种运动曲线带给它更快的初始“反应速度（加速度）”有关。我们在曲线上为它增加的一个关键帧，为它加速到极速的过程缩短了时间，也就意味着运动初始阶段的加速度更快，就有一种观感上的“反应速度更快”的感受，这也是这种运动给人更“灵动”的原因之一。

这种曲线的应用场景非常广泛，比如下图我在“Syn”项目中的界面动效上对这种运动曲线的应用，右侧的面板的切换就多处运用了这种曲线。

这种曲线的第三种变体则是：慢动急停。 如下图所示，它的特征是将加速阶段时间延长，即用很小的加速度将物体加速到极速，然后在很短时间内停下。这种曲线有一种为物体在最终停下之前积攒力量的特征。因此多用于表现撞击类，具备强视觉冲击力的动画

以小球的横向运动为例的话，这种曲线的运动效果如下所示：

不仅是位移属性，这种曲线应用在多种属性上时能为物体赋予更多的运动含义。比如把它应用在物体的缩放上时，就可以制作出如下图所示的“物体从眼前的画外摔入画面中央”的效果。如果是从大到小的变化，则运动曲线的方向会发生变化，但它的总体变化趋势与刚才的典型图示是一致的。

其动画效果如下图所示：

在此基础上，对这个摔入的运动曲线做一些细微的调整，比如加入一个回弹效果，就会让这个撞击有更真实的感受，运动曲线如下图所示。

实际效果如下所示：

甚至，还可以配合这个动画，在整个画面上加上镜头晃动的效果，这个撞击的力量感就更加强烈了，如下图所示。

其动画效果如下图所示：

应用这种曲线，可以制作出如下图所示的开场动画效果，这也是我在另外一个项目中的实例应用。图中的盾牌就被设计成具有很大质量的物体，它从空中落下时利用这种曲线缓慢的加速但迅速的减速的特点，可以充分表现这种重量感。因此在应用了这种动作曲线后无疑具有很强的视觉冲击力。

这种曲线更典型的应用场景正如下图所示，这是我在另一个项目中的实际案例。这个画面中，中央logo附属的两个美术字的入场动画，就是一种典型的砸入动画，这种动画如果想表现速度以及砸到画面背景上时的冲击力，这种运动曲线就会是一个非常好的选择。

这种曲线的第三种变体则是：慢动慢停。 如下图所示，它的特征是加速阶段和减速阶段都很长，但在整个运动的中间阶段是速度最大的阶段，也是值变化曲线最陡峭的阶段。这种曲线所表现出的运动特征是整体灵活，但启动与停止优雅。在一些特定的次序组合中，容易给人顺滑流畅的感觉。被很多基于平面化设计的动效所应用。由于经常被用在时尚、现代风格的设计中，使它有比较强烈的时尚风格。所以也可以多用于想要表现此类风格的场景中。

它的动画效果如下图所示：

如下图中，是我在实际项目中应用了这一曲线所做的一个列表类页面的入场动效。画面中人物和它们所属的姓名条的展开动作，都运用了这种运动曲线。配合这种组合次序的设计，整个入场动画流畅顺滑，且贴合视觉设计所展现的现代与竞技风格。

事实上，动效的风格因为运动的曲线不同而营造出的不同风格，不仅仅是在同一动效中广泛应用同一种曲线的结果。有时候需要因应具体的情况，去对这些曲线进行一些小的修改或者有目的的排列组合，才能得到自己想要表现的效果。

比如我们可以在慢动慢停曲线的基础上，为它增加一些小的细节。如预备动作和反弹动作。这样就产生了一个新的变种曲线预备反弹。该曲线如下图所示。

在启动阶段增加一个关键帧，帧的值要低于初始值，时间点接近于即将加速到极速的位置。同样的，在它的镜像位置也增加一帧，这帧的值要高于最终值，时间点位于刚从极大速降回极小值时。

应用在位移属性上，它的效果就如下图所示：

可以看到，小球在往右运动之前，会有一个缓慢的向左的运动，在停下来之前也有一个向右一点点的“过界”，然后缓慢向左运动一点后停下。这段运动过程中，小球有预备和回弹的动作，就给人以更加生动，贴近现实的感受。如果把预备和回弹的值变化调大，小球的运动会表现得更加夸张，整个动画就会更偏向卡通化的风格。一个小的时间变化或者值的变化，就是这么真切的影响着动画的风格特点。

如果我们在这段动画的基础上做进一步的修改，比如在右侧放置一个障碍物，让小球最终不是停到右侧，而是撞击在障碍物上回弹呢？这段运动曲线又该做怎样的修改？

这次我们先看最终的动画效果，如下图所示：

忽略右侧障碍物的互动动作，我们只观察小球的运动，可以分析出这样的运动特点：

它在开始撞击之前，有一个预备动作，缓慢向左运动，然后急速向右撞击障碍物。撞击的一瞬间，运动方向即时调转，然后向左运动至缓慢停下。那么就需要它的运动在X轴上的值变化曲线为如下所示：

这段动画总共有五个关键帧，为方便叙述，我们以从左到右的顺序把它们按照数字命名。从1到2之间，是小球向左的一个预备动作，这段动作表现得很缓慢，因此是一个持续时间长，但值变化短的曲线。在曲线图中，小球如果向左，那么值就会向下，因此这是一段普通的缓入缓出曲线。但在2上，值发生了一个转折，这表明小球结束了预备动作，以最大的力度向右开始冲击，到3点时速度达到最大。但这个过程中加速是逐渐衰减的，因此也是一个缓入缓出的曲线。3点上同样发生了曲线转折，而且是180°的转折，因为此时小球撞击了障碍物，速度方向完全翻转，翻转后原先的向右冲击的能量被障碍物完全传导成向左的能量，因此这一阶段是一个初始点加速极大，但结尾处加速衰减为零的运动过程，所以在3、4、5之间的运动是一段快动慢停曲线的变种。

可见，想要表现某种运动形态，有时候需要多种曲线的组合和一些细微的修饰。这些很小的变化就能让物体的运动形态发生巨大的变化，而动效的运动形态的不同，传达出的含义也不同，风格的差异也就逐渐累积出来了。

而且有时候单个物体的运动要更加复杂一些，不同于我们为了说明一个问题，而只是像以上的示例那样只展示单一维度（平面X轴）。有时候它们的运动是在二维上甚至三维上的多种运动曲线的组合，下图所示的如钟摆运动，如果将它看成X轴的横向循环动作和Y轴的纵向循环动作来看的话，就会清晰很多，也好控制很多。

比如将它的纵向运动隐藏，X轴运动本质上是如下图所示这样的：

而本质上，这个运动的曲线可能是如下图所示的二维综合曲线，红色为X轴，绿色为Y轴：

这就意味着，运动曲线几乎在每个维度上都对物体的运动特征有着影响，维度越多，我们可调节物体运动特点的方式也越多，它们所能表现的风格特点也就越多。

运动曲线在实际工作中被应用在很多软件中，尤其是Unity和UE4这类引擎中。运动曲线都是以“值”曲线的形式存在的，它们的含义高度一致，这也是本文只以AE中的“值”曲线去讨论它的原因。在AE中还能将值曲线切换为速度曲线，这两种曲线是物体同一运动在图表上的不同形式的表现，但它们的形态含义并不相同，在实际工作中需要注意研究和区分。

因为运动曲线的巨大作用，我们在为某个项目制定动效制作规范时，就很依赖对其中通用型控件的运动曲线的控制。有时候可能会精确到时间区间和曲线的样式。在这样的基础上，仔细规划某些固定搭配的界面元素的出现次序，也可以进一步规范整个项目的动态效果风格的一致性。

第三部分  总结

总结来看，游戏界面的动效风格，主要由游戏界面的设计风格，动效中各个元素的动态次序，动态中的伴随元素以及诸多底层运动曲线共同决定。这其中，游戏界面的设计风格甚至游戏的整体美术风格，都决定了界面动效的风格取向，并从根本上决定着动效的风格。而要设计出动效的特定风格，就需要运用合适的动态次序、伴随元素并熟练运用运动曲线。

另外，在规范和统一整个项目的动效风格时，这几个维度都是切入口，可以通过规范特定的运动曲线，特定的元素动态次序与特定的伴随元素使用方式，来制定有效且切实可行的游戏项目动效制作规范。

更多好的文章，请关注我们官网

https://www.magesbox.com/article/index/category/16?plate=vx