【半周谈】012 常见界面转场形式

游戏界面中，动效的三大作用之一就是连接。

在连接里，界面转场又是最明显的一种形式。不同界面类型的转场形式完全不同。偶尔还会用转场的具体形式来体现某些功能点，或者提升某些情感体验。

这次我们由简到繁，看看常用的转场形式都有哪些，以便引起新的启发，设计出吻合当下需求的恰当转场形式。

第一种，硬切。这是一种不需要任何设计的转场形式。但有时候硬切会带来快节奏的感受，也可以被认为是一种设计。

它的特点是上下画面不做任何形式的逻辑连接或过渡，而是直接进行切换。在一些快节奏或者前后页面内容差别较小的界面之间进行硬切才是正确的选择。

如下图所示，游戏《王者荣耀》中，从大厅界面往铭文界面转场的效果就是硬切。只不过在这个硬切过程中，铭文界面的内容有个短暂的载入过程，使这个硬切显得不太硬。如果注意观察的话，你会注意到这款游戏中大部分界面的转场都保持了硬切加载入的效果。

第二种，黑场过渡。这是硬切的柔化版。将前后没有关联的画面之间插入一个黑场（或者其他什么颜色），仿佛人的眨眼动作。可以适用于所有类型的页面衔接。

它的特点是前后画面之间不需要有逻辑连接，但是依然制造出一个舒适的过渡。在你想不出好的设计方案时，可以盲选黑场过渡。

第三种，抽象过渡。确切的说，应该叫抽象图形障眼过渡。它是黑场过渡的进阶版。它只是将原本简单的黑色透明度变化，转变成了通过稍显复杂方式出现的黑场和稍显复杂消失的黑场褪去。

它除了拥有黑场过渡的优点之外，还额外增加了画面的丰富程度。由于它是抽象图案组成的，我们可以巧妙的将游戏世界观中的元素融入其中，让它显得更加浑然天成。这是你没有好的想法时的第二种选择。

如下图所示，这是正在TapTap上“篝火测试”的英雄射击手游《T3》的转场效果。这款游戏在多个转场中都应用了这种效果，这个效果的抽象图形是由无数三角形阵列构成。背景上也多次出现的同样图形，说明设计师将三角形设定为这款游戏的主体元素。而这种抽象转场图案，也是将这一主体元素的设计进行了合理延伸与融入。

除了单纯的使用抽象元素进行转场设计外，还可以将具象元素与她进行结合设计，模仿出电视体育运动的观感，如下图所示的《机动都市阿尔法》中主界面到模式选择的转场效果。

第四种，贴边出入。这种方法也很常见。是将整个画面当成舞台，将界面控件当成是舞台上的演员。理论上来说，这个形式相当于将演员们挨个退场，然后将下一个画面要参演的演员挨个入场。实际操作中，我们不可能将界面上的每个控件按照顺序，挨个的退场再入场。而是运用错层的方式让它们有进有退。这也是制造界面切换时节奏感的一种方法。

在这种方法中，最实用的一种就是贴边出入。即按照控件与画面边缘的关系，就近出画或入画，如下图的模型所示。

这个模型模拟了从主界面到人物详情的一个转场效果：主界面退场时，各个控件以各自所在的位置向画外退却。遵守的原则是选择最近的边缘。比如紫色的框体离上边缘比较近，于是朝上边缘退却；蓝色框体组同理，而绿色和黄色框体组则遵守同种规则，分别朝右侧和下部边缘退却。入场的蓝色大框体也同样遵守这一规则，从右侧边缘进场。

这种规则的原理：

首先，符合我们常规观察的经验，演员从最近的出口退出舞台；

其次，整体朝各自边缘退却时，造成整体膨胀的效果。也是因为能造成这样的效果，有时候会让场景中的人物配合缩放动作；

最后，这种膨胀效果结合入场时同样可造成的缩小效果，总体上为转场效果造成一张一合的节奏感，符合常理且观感舒适。

第五种，逻辑连接。这是贴边出入的一种进阶版。这个方案放弃了简单的移动和透明度变化，而是通过图形变化或者额外图形变化的接入衔接来完成界面之间的转场。这种方法的好处是足够“有道理”，也足够有视觉冲击力，风险点在于过多复杂动画的加入容易让转场时间变长。

我们都知道，界面的动效总体上讲究的是迅速和敏捷。过长的动画往往不被使用在界面动画之中，因此这种方法需要谨慎使用。客观上，它对动效设计师的设计能力提出了很高的要求。

如下图所示的《漫威超级战争》从主界面到商店界面的转场效果。这个效果是基于将整个画面3D化的思路：以画面左侧框体作为Z轴，其他的画面以这个Z轴为旋转轴，以我们的观察方向为准，以向内旋转的方向将原先的画面转走，将新的画面入场。配合这种纵深方向，在旋转的前中时段，还出现数个速度线，更增强了这一纵深切换的效果。

这个效果还结合了抽象过渡的手法，在前一场景和后一场景的背景上使用抽象图形刷新的方式来交代它们各自的消失与出现。显然，这些效果组合在一起是非常有氛围和冲击力的，但在时间上也稍显冗长。30FPS情况下用了1.13秒时长，几乎逼近转场时间1.5秒的极限。在快速切换的场景下，显然会具有一定的风险。

第六种，摇摆镜头。这种方法需要结合3D或者伪3D的界面背景。当这种方式作为一种转场形式时，玩家可能需要通过滑动手势，而不是通常的点击某个按钮来实现界面的切换。由于使用了类似于镜头横摇、纵摇或者推拉的形式，这种转场往往具备很强的视觉冲击力。但是它的缺点是有一定的阻滞感。与逻辑连接相似，它往往在时长上具备相当的风险。因此也要谨慎使用。

比如在《阴阳师百闻牌》的主界面上，不同的功能入口就被设置在一个伪3D的场景内，玩家要进入不同的功能入口，可以用滑动手势来将“镜头”来回纵摇去切换场景，从而找到不同的入口。这个切换效果还带有镜头广角变形的效果，是一个非常有趣的设计。

而在一些自动切换的界面转场中，也可利用这种方式，可以让玩家很直观的理解各个信息层级之间的关系，如下图和下下图所示的《漫威超级战争》的结算流程中的几个界面转接：战斗结束后首先展示的是当场“MVP”的角色特写和相关的数值，然后镜头拉出，显示出同队伍其他玩家的角色，接着镜头横摇到玩家自己的角色，同时相关的数值以界面面板的形式出现。

整个过程里，展示MVP到展示玩家全员的过程很清楚的表现了个体与队伍的关系，通过镜头横摇到玩家自己的角色，又明确表达了队伍和玩家自己之间的关系。

这就是常用的几种游戏界面转场的方法。

其中前四种的落地性会强一些，也是极为常用的几种。后两种需要多种维度效果的结合，或者干脆就是3D场景内的镜头变化，对手机游戏来说落地性不是那么强。但在一些关键的交互节点上运用，会有非常好的效果。

实际运用时，大家要根据具体的情况选择具体的方案。

时代在进步，技术也在不断的前进，或许性能的限制会越来越不是一个限制，但具体效果的运用除了要考虑性能，还需要考虑合适的应用位置。

对动效而言，在合适的地方用合适的效果，是永不过时的准则。

以上。

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

以上就是篇文章的全部内容，如果感到有所收获，请点击“在看”，或者分享给好友。有问题想要跟我交流，请直接在本文留言，我都会看到并回复。

往期推荐：