游戏界面中，动效的三大作用之一就是连接。
在连接里，界面转场又是最明显的一种形式。不同界面类型的转场形式完全不同。偶尔还会用转场的具体形式来体现某些功能点，或者提升某些情感体验。
由简到繁，常用的转场形式都有哪些？
第一种，硬切。这是一种不需要任何设计的转场形式。但有时候硬切会带来快节奏的感受，也可以被认为是一种设计。
它的特点是上下画面不做任何形式的逻辑连接或过渡，而是直接进行切换。在一些快节奏或者前后页面内容差别较小的界面之间进行硬切才是正确的选择。
如下图所示，游戏《王者荣耀》中，从大厅界面往铭文界面转场的效果就是硬切。只不过在这个硬切过程中，铭文界面的内容有个短暂的载入过程，使这个硬切显得不太硬。如果注意观察的话，你会注意到这款游戏中大部分界面的转场都保持了硬切加载入的效果。
第二种，黑场过渡。这是硬切的柔化版。将前后没有关联的画面之间插入一个黑场（或者其他什么颜色），仿佛人的眨眼动作。可以适用于所有类型的页面衔接。
它的特点是前后画面之间不需要有逻辑连接，但是依然制造出一个舒适的过渡。在你想不出好的设计方案时，可以盲选黑场过渡。
第三种，抽象过渡。确切的说，应该叫抽象图形障眼过渡。它是黑场过渡的进阶版。它只是将原本简单的黑色透明度变化，转变成了通过稍显复杂方式出现的黑场和稍显复杂消失的黑场褪去。
它除了拥有黑场过渡的优点之外，还额外增加了画面的丰富程度。由于它是抽象图案组成的，我们可以巧妙的将游戏世界观中的元素融入其中，让它显得更加浑然天成。这是你没有好的想法时的第二种选择。
如下图所示，这是正在TapTap上“篝火测试”的英雄射击手游《T3》的转场效果。这款游戏在多个转场中都应用了这种效果，这个效果的抽象图形是由无数三角形阵列构成。背景上也多次出现的同样图形，说明设计师将三角形设定为这款游戏的主体元素。而这种抽象转场图案，也是将这一主体元素的设计进行了合理延伸与融入。
除了单纯的使用抽象元素进行转场设计外，还可以将具象元素与她进行结合设计，模仿出电视体育运动的观感，如下图所示的《机动都市阿尔法》中主界面到模式选择的转场效果。
第四种，贴边出入。这种方法也很常见。是将整个画面当成舞台，将界面控件当成是舞台上的演员。理论上来说，这个形式相当于将演员们挨个退场，然后将下一个画面要参演的演员挨个入场。实际操作中，我们不可能将界面上的每个控件按照顺序，挨个的退场再入场。而是运用错层的方式让它们有进有退。这也是制造界面切换时节奏感的一种方法。
在这种方法中，最实用的一种就是贴边出入。即按照控件与画面边缘的关系，就近出画或入画，如下图的模型所示。
这个模型模拟了从主界面到人物详情的一个转场效果：主界面退场时，各个控件以各自所在的位置向画外退却。遵守的原则是选择最近的边缘。比如紫色的框体离上边缘比较近，于是朝上边缘退却；蓝色框体组同理，而绿色和黄色框体组则遵守同种规则，分别朝右侧和下部边缘退却。入场的蓝色大框体也同样遵守这一规则，从右侧边缘进场。
这种规则的原理：
首先，符合我们常规观察的经验，演员从最近的出口退出舞台；
其次，整体朝各自边缘退却时，造成整体膨胀的效果。也是因为能造成这样的效果，有时候会让场景中的人物配合缩放动作；
最后，这种膨胀效果结合入场时同样可造成的缩小效果，总体上为转场效果造成一张一合的节奏感，符合常理且观感舒适。
第五种，逻辑连接。这是贴边出入的一种进阶版。这个方案放弃了简单的移动和透明度变化，而是通过图形变化或者额外图形变化的接入衔接来完成界面之间的转场。这种方法的好处是足够“有道理”，也足够有视觉冲击力，风险点在于过多复杂动画的加入容易让转场时间变长。
我们都知道，界面的动效总体上讲究的是迅速和敏捷。过长的动画往往不被使用在界面动画之中，因此这种方法需要谨慎使用。客观上，它对动效设计师的设计能力提出了很高的要求。
如下图所示的《漫威超级战争》从主界面到商店界面的转场效果。这个效果是基于将整个画面3D化的思路：以画面左侧框体作为Z轴，其他的画面以这个Z轴为旋转轴，以我们的观察方向为准，以向内旋转的方向将原先的画面转走，将新的画面入场。配合这种纵深方向，在旋转的前中时段，还出现数个速度线，更增强了这一纵深切换的效果。
这个效果还结合了抽象过渡的手法，在前一场景和后一场景的背景上使用抽象图形刷新的方式来交代它们各自的消失与出现。显然，这些效果组合在一起是非常有氛围和冲击力的，但在时间上也稍显冗长。30FPS情况下用了1.13秒时长，几乎逼近转场时间1.5秒的极限。在快速切换的场景下，显然会具有一定的风险。
第六种，摇摆镜头。这种方法需要结合3D或者伪3D的界面背景。当这种方式作为一种转场形式时，玩家可能需要通过滑动手势，而不是通常的点击某个按钮来实现界面的切换。由于使用了类似于镜头横摇、纵摇或者推拉的形式，这种转场往往具备很强的视觉冲击力。但是它的缺点是有一定的阻滞感。与逻辑连接相似，它往往在时长上具备相当的风险。因此也要谨慎使用。
比如在《阴阳师百闻牌》的主界面上，不同的功能入口就被设置在一个伪3D的场景内，玩家要进入不同的功能入口，可以用滑动手势来将“镜头”来回纵摇去切换场景，从而找到不同的入口。这个切换效果还带有镜头广角变形的效果，是一个非常有趣的设计。
而在一些自动切换的界面转场中，也可利用这种方式，可以让玩家很直观的理解各个信息层级之间的关系，如下图和下下图所示的《漫威超级战争》的结算流程中的几个界面转接：战斗结束后首先展示的是当场“MVP”的角色特写和相关的数值，然后镜头拉出，显示出同队伍其他玩家的角色，接着镜头横摇到玩家自己的角色，同时相关的数值以界面面板的形式出现。
整个过程里，展示MVP到展示玩家全员的过程很清楚的表现了个体与队伍的关系，通过镜头横摇到玩家自己的角色，又明确表达了队伍和玩家自己之间的关系。
这就是常用的几种游戏界面转场的方法。
其中前四种的落地性会强一些，也是极为常用的几种。后两种需要多种维度效果的结合，或者干脆就是3D场景内的镜头变化，对手机游戏来说落地性不是那么强。但在一些关键的交互节点上运用，会有非常好的效果。
实际运用时，大家要根据具体的情况选择具体的方案。
时代在进步，技术也在不断的前进，或许性能的限制会越来越不是一个限制，但具体效果的运用除了要考虑性能，还需要考虑合适的应用位置。
对动效而言，在合适的地方用合适的效果，是永不过时的准则。
如何设计合理、合适又有趣的转场？我们从转场的基本概念开始。
转场的根本目的是为了建立前后画面之间的连接。在游戏界面中，前一个界面撤出，后一个界面进入之间所发生的变化，就是转场。
转场是游戏界面动效中最基本的连接形式。以转场为主轴连接起来的所有界面，才能构成完整的游戏界面操作体系。
通常来说，只有两个画面之间的转接才被称为转场。而同一个界面内部的局部切换则不被认为是一种转场。
它主要解决的问题，本质上是界面信息的刷新。由此看来，我们为转场所设计的各类动态形式，本质上是为玩家展示不同的刷新形式。
根据所要达到的目的不同，形式也就会有所不同。目的决定形式，这就是转场有那么多种形式，但不能随便乱用的根本原因。
那我们在游戏界面内进行前后界面衔接、信息刷新的过程中，需要顾及到哪些“目的”呢？
我们可以基于以下原则进行判断：
第一，有关动效的时间控制。是否需要玩家以尽快的速度看到新的信息？
游戏界面的动效应自始至终关注实际运行时长。当我们在进行两个界面之间的转场设计时，应该首先问一个问题：
我在这里是否具备设计足够复杂动态效果的客观条件？
这个客观条件是什么？就是时长。当一个转场属于普适性界面、高频操作界面时，最好设计成尽量简单的样式。一个很简单的道理，越简单的转场形式，所耗费的客观时长也就越短。这时候的优先选择是“硬切”或者“黑场切换”。
如果具备该条件，比如说这个转场是在“商城”里或者是某个活动弹窗。就需要问第二个问题。
第二，有关动效的情感内容表达。是否需要烘托某种氛围？
当遇到需要特别氛围烘托的情况时，就需要设计复杂效果的转场。显然我们大部分情况下聊的转场设计，就指的是这种。
具体的各种情况，以及设计原则，我们会在本系列的后续展开描述，这里只简单的说一些基本的内容。
比如，情感内容的表达应该以什么为基础？应该以本游戏的世界观设定、相关美术元素为基础进行扩充式设计。
如游戏《机动都市阿尔法》的特殊转场设计，基本就是以它本体中的信封图形元素进行展开设计的：
最多见的氛围烘托转场，常出现于各种抽卡、获取珍贵角色、物料等界面中。如下图所示的《GranSaga》中的抽取人物转场：
另外，转场的效果应该区分层级，对应到相应视觉层级的界面内去。这也是为啥有些转场设计得复杂，有些则设计得简单。
如游戏《蛋仔派对》的一系列转场设计之间的差异化设计。
一般的通用型界面用“闪切”：
高频的，特别的界面用特有的“弹动入场”：
局内与局外之间的，用“抽象图形转接”：
除了表达特定情绪，烘托特定氛围，还有一种情况是需要设计结构丰富的转场动态，那就是功能逻辑的解释。
第三，有关功能逻辑的释义。是否需要解释某种逻辑？
除了常见功能性释义外，转场有时也会为建立两个界面之间逻辑连接而设计特定的转场形式。
最简单的，表示无图形关联的界面之间的一张一合：
类似上图《原神》中从主菜单界面到公告弹窗之间的转场效果，就是最简单的表示“一张一合”、“一退一出”关系的转场。这种形式被广泛应用在游戏界面的普通转场中。
承接关系解释
。这属于我们说的动效中的“直接联系”，是一种可直观解释前后界面关系的一种转场形式，往往通过前后界面中的相似或者同一物体的串联来构成这种形式。如下图所示的《GranSaga》中通过人物来串联的几个界面转场：
体现层级关系
，这点我们在后文展开。
提示联动关系。如下图所示的《漫威对决》中的卡牌配置界面的切换转场。在顶部页签切换时，整个页面的刷新方式都是从上到下的一致动态行为方式。这种同一性表明做同种行为的控件地位平等，是一种解释联动关系的转场形式。
更多跟功能与逻辑相关的转场表现形式，我们将在本文第三部分展开。
接下来是转场的“层级关系交代”。
游戏界面的转场动效，根据前后界面层级关系可大致分成两种情况：同级间平移转接和层级间上下跳转。
如果静态层面的界面无法足够交代清楚彼此之间的层级关系，就需要在界面间的转场动效上，用一定的方式去明示或暗示这种关系。
同级间平移转接，通常会用上下、左右的横移动作，或者这种动作趋势来进行示意。
如游戏《机动都市阿尔法》中的一个活动界面中，各个页签的转场动画：
由于在静态层面，这个界面已经非常明确交代了子页面之间的平级关系。因此该界面内各个子页面之间的切换动效，并没有明显的暗示功能，而是将各个页面当作独立界面进行了入场动画处理。
但当同级之间并不是这种明确布局时，应该用动效表达的方法去暗示。
如在同一游戏中的同级别界面转场，就使用同一种入场动画来表明两个界面的“平等”关系：
层级间的上下跳转，则需要根据实际情况，利用多种方法去体现。
直观的方式就是利用直接联系动效，将原先层级的某个控件进行放大，引入次级界面，有必要的情况下，还需要联动场景或者人物动作。如游戏《死亡循环》中的开始界面到模式选择界面转场：
类似形式在手游中也有具体的应用，比如《黑潮之上》中从“时之城”进入其子系统“卡牌研究所”的转场：
根据界面的布局，有时也可以不是缩放，而是平移转换。如游戏《漫威对决》中的便捷组卡操作：
甚至，可以利用镜头动画在场景内穿梭，直观展现从整体聚焦到局部的过程，如下图《黑潮之上》里的层级转场：
而类似的镜头使用，我们也在“
【半周谈】014 界面镜头语言二三事
”中提到过很多示例，有兴趣可以点击文字回顾一下。
但是，过于复杂的转场形式通常会与相应的操作体验相冲突。因此这些具体的形式除了要考虑上下层级的关系交代，还要顾及操作过程的便捷性。
不管怎么设计，这些都属于某种形式感。形式感其实是仪式感的基础。不同复杂程度的形式感本质上是营造不同程度的仪式感的。不同复杂程度的转场形同不同复杂程度的入场动画，都应该与具体界面的视觉层级相匹配。
因此，同界面动效的风格化一样，转场的形式应该讲究整体局面上的节奏感。有梳有密，且应该按照功能层级去具体划分。这也是为啥，我们在一款成熟的游戏界面内，很难看到密集出现的复杂转场设计，它们只会在必要的时候出现，而大部分情况下我们用的转场形式依然是最普通的硬切，或者加入了一些细节的“一张一合”式转场。
或者可以说，当你在一整个项目的视觉层级、疏密节奏上还没有具体细微的把握时，用通用的、普通的转场去承担所有界面之间的转接，是最安全和最有效的设计手段。在此基础上，当项目进展到更垂直的细节时，在进行过一段时间的打磨和迭代后，逐步建立起特有的风格时，再为其中比较高层级的界面设计复杂的转场形式。这才是比较科学合理的游戏界面动效的逐步设计过程。
接着是转场的“功能关系体现”。
动效在很多时候是基于功能体现而设计的。在此基础上如果能设计出更令人愉悦的效果，就可堪称完美的设计方案。而游戏界面的转场动效同样需要体现出必要的功能。
从某种程度上来讲，界面的层级关系也是功能体现的一种。但它与其他的细微功能不太相似，因此会单独在上一篇分析。
在界面转场动效中，常见的功能体现设计分为：世界观传达、细微功能说明和情绪渲染。
世界观传达
很容易理解。就是通过动态的元素来重复游戏世界观中的某些标志性元素。这可以看作是风格化设计的一环。如果足够巧妙，甚至可以结合一些小的、具体的功能表现上去。
如下图所示，游戏《动森》中的机场画面和到达界面之间的转场效果，就将其游戏剧情中的“航空公司LOGO”元素作为转场表现元素，同时，这个动画中的渡渡鸟，也就是机场营运的成员，的轮廓起飞动作，贴切的表现出这两个界面转接时发生的“飞机起飞”动作，既避免了用画面去表现的繁琐，又巧妙的同时利用音效引导玩家去理解这一含义。
细微功能说明
则比较具体。情况会千变万化。通常我们会在静态稿上就表现出界面要传达出的某些特别的功能，尤其是细微的功能。但有时候需要额外强调，或者静态稿无法完整传达某项功能时，就会引入动效，将其功能传达过程补充得更加完整和生动。
如下图所示的游戏《柴堆》中，战斗过程中会有个“镜头聚焦”的效果，由于是画面的剧烈变化，因此理论上来说这也是一种转场，这个转场效果的目的是通过“聚焦”来清晰的表达出战斗过程中“何物发生了何种变化”这样的事情，是一种典型的功能性转场。
又如下图所示的游戏《死亡搁浅》中的武器轮盘转场。
理论上这算是弹出物，是一种画面局部的信息刷新形式。但由于这个界面的特殊布局形式，我们在整个轮盘切换过程中，事实上经历了一次“转场体验”，所以这里也将它作为一种转场来看待。
它的出现和消失过程就几乎是一种纯功能性的过程。风格化的出场动画交代其出现过程，而选中某个武器的动效则用极为鲜明的效果告知玩家“选择有效”。
再如下图所示的《动物派对》的开局转场。通过形同上下摇镜的方式，体现出匹配场景与局内场景的上下层空间关系，也通过这种关系来为玩家明确两个不同空间所暗示的不同功能含义。
动效中体现功能信息的地方极多，但都分散在很多细微的设计上，单纯为说明某种功能或者信息的转场形式不太多，但细微处的设计方式告诉我们，通过转场来传达功能信息不仅是可行的，而且大部分情况下也是很多动效得以存在的缘由。
情绪渲染
是动效表达情感的一种方式。与前两者其实在很多情况下是混用的。有个别转场效果是比较纯粹的情绪渲染，大部分则都承担了一定的功能性作用。
如下图所示的游戏《使命召唤手游》S9赛季BP界面入场的连续转接画面，除了通过各个不同画面内所含的图文信息来给玩家介绍本次BP所含的高级奖励外，还通过这种类似镜头语言的连续转场效果，渲染出“特殊”、“戏剧化”与“高级”的情绪。
又如下图所示的游戏《王牌竞速》中，主界面到赛事界面的转场。除了与世界观营造中的速度线结合外，其镜头语言以及相关的元素动作设计，其实主要就为营造强烈的情绪。这种情绪让玩家在两个界面的转接过程中完成一种“刺激”的转移。
总的来看，转场动效所承载的内容主要是界面本身想要传达的信息。这些信息不仅包括功能性的，也往往需要情绪化的表达内容。这一点和游戏界面内其他动效的本质并无不同。
如果将情绪化的表达，或者由此构建的仪式化的表现形式单独抽离，我们也会发现，动效在这个层面的花样非常丰富。
那么转场动效的花样都有哪些？受到什么样的限制？
我们都知道，动效的具体表现形式理论上有无数种可能。但事实上，能够应用的形式并没有多到无数种这么夸张。这主要是因为在很多情况下，动效的具体表现形式是受具体条件限制的。所以实际上动效的具体设计形式并不是完全自由的。
具体到动效的转场设计里，也是一个道理。动效的转场设计也一样被一些现实条件所限制。
简单来说，动效转场设计主要受限于两个方面：技术问题和设计问题。
技术问题
指的是
由预期效果与落地机能之间的矛盾所导致的，某些效果无法按预期实现的问题。
这是一种非常常见的问题，需要以平常心看待。
技术问题
一般分成两种情况：
一种是过于复杂的效果没办法用简单的手段去实现。
通常我们在引擎中实现一种效果，要么是时间轴动画的形式，俗称手K。要么就是材质动画，利用某些特别材质生成特定的效果动画。
如果手K，那么就需要尽量让一些特殊效果的节点尽量简洁，过于复杂的节点动画会非常耗费时间成本和人力成本。同时也可能会导致性能损耗过高。而材质动画也未必每种效果都能实现得非常好的同时机能也比较好。
这时候就需要综合权衡，是改效果还是改实现方案，还是花一些功夫开发一些特别的工具，都是具体的手段。
另一种情况是有些转场效果是需要衔接上一个界面与下一个界面的。
这时候就会需要一个这样的结构：上一个界面的A元素与转场效果中的B元素以及下一场景中的C元素勾心斗角。
而引擎中往往会将前后两个界面作为单独的预设进行处理，也就说A、B和C逻辑上应从属三个不同预设，在这种情况下，那种前后交织的结构也就变得不可能。这时候就需要做一个讨巧的设计，如果讨巧的设计依然无法完美解决问题，那么可能就需要倒推设计，更改效果了。
设计问题从表面上看很简单。往往只是简单的图形逻辑问题。如前后的衔接关系解释不符合应有的逻辑、无法准确交代前后的关系等。
也有的时候是以为特定的设计不符合动效的基本原则。比如说时间过长，效果间的配合节奏不合理等，这些问题往往是设计阶段处理得最多的问题，我们在最终交付落地之前，应该将这类问题解决完毕。
最后，我们在长期的项目工作中发现，如果想要尽量摆脱局限性，就要按照科学的方式对工作进度进行合理安排。
我们通常会在系统全局上为整个游戏的界面系统划分出不同的转场形式，并且需要有强度梯度规划。这和我们之前提到的界面整体强度划分是一个道理。
这就需要以基本的三步形式规划整体转场形式：
第一步，在未进行梯度规划之前，尤其是界面量少、风格不太确定的情况下，不要进行复杂效果的落地验证。
第二步，在界面量积累足够时再进行各种转场形式的规划，以“从简单到复杂”的基本逻辑去规划，但不要过多划分。
第三步，在前两步基础上，再规划特殊的，特异形式的转场样式，以及统一进行落地验证。
这么做的好处在于，可以以尽量少的资源投入，进行最大化的效果落地验证。如果在风格不明确，整体规划不清晰的情况下就贸然验证一个复杂的效果，费劲九牛二虎之力后发现这是个没有必要存在的效果，就会浪费很多时间和精力。而在有所规划，界面系统整体布局清晰的情况下，对各个点位进行“填充”式的完善时，所有工作都是有清晰目的的，也就能用最经济的方式去做最有效的工作。
这里是COTA五号，分享专业的游戏界面和动效知识，欢迎关注获取更多资讯。
本文完。
欢迎点击下方名片关注本号
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
