【画风别致】004-类塔科夫式玩法的美式风格游戏《THE CYCLE: FRONTIER》

总体上，它的界面动效有几个显著特点：结构式动画、斜切图形和微量弹动。

结构式动画，即我们常说的“将界面元素拆分后重新以动画形式展现”的动效设计方法。这种设计方法一般用于比较重度的交互节点上，少有全局普遍适用的情况。

但是本作动效反而充满各种结构式动画。这种做法有很大的风险，但整体上体现出一种顺滑的感觉，可见设计师对动效的“浓度”有非常好的把握。

这些结构式动画几乎存在于本作界面的各种细节之处，小到各式TIP：

大到整页界面出入场：

甚至是一些简单的操作，都设计了细节动效。

比如下图所示的进入局内时，战斗界面的入场：

和下图所示的，局内界面中的“任务”面板入场动画：

以及下图所示，通常其他游戏中只会设计为透明度变化，甚至只是闪切处理的“地图”面板：

甚至还有主副武器切换，这类控件在同类游戏中，往往只是被处理成变换上下面板的状态，在这里却不厌其烦的设计了上下切换效果：

一些简单的弹窗，也会有自己的特有动效：

在这种普遍设计了动效细节的前提下，动效整体分布节奏的控制难度是很高的。动效密度大增的情况下，很有可能会在很多维度上影响到整体的界面操作体验。这也是我们平时并不提倡动效在一款游戏的界面内大密度存在的主要原因。

通过体验整个游戏，我并没有发现该作在界面体验层面，因为动效的密度过高而引起什么显著问题。反而，这种高密度的结构式动效，让整个界面显现出一种畅快和柔顺的感觉。界面上整体体现出的这种操作感受，正好与游戏整体上略显“Q弹”的美式卡通风格相一致。

这其实是一种高超控场能力的体现，不见得动效密度高就是一件每个动效设计师都可以熟练把握的事情。

斜切图形。本作界面设计是一种科幻世界观下的科技感风格设计。它利用斜切图形来作为风格化的关键元素。这一元素也被大量用来做动效层面的关键元素。可以在很多细节上看到这个元素的表现。

最明显的是结算界面：

其次是通用的抽象转场图形：

以及强提示界面：

界面中其他的一些微小的造型也都使用这种简单的构型。基本上被融入在上文所说的结构动画中。

不过，目前的诸多效果还略显简陋，尤其是结算和转场中出现的图形，都显得比较单调，与其所处的交互点位的重度不相匹配。不过重点在于，总体上利用某一个关键元素去全面而且统一的表现出特有的风格化取向，则是一种成熟的设计手法。

微量弹动。上文我们有提及，该作的美术风格从属于美式卡通风格。这种风格说到底是一种“卡通”。势必要在某些动作细节上体现出“卡通”的“Q弹”特征。但作为稍微偏向严肃一些的细分趋向。这种“弹”不必那么明显。在人物动作上，我们看到这种特点，在界面动效上，也有同类特点。

比如下图所示的武器轮盘，其入场效果就有一些回弹效果，这不仅是整体风格偏向的要求，也符合它圆盘造型的动作特点：

更多的这类特点其实到处都能看到，比如比较通用的框体或者界面的动效中。

下图所示的界面入场动效里，右侧面板的入场运动显然就有类似的微弱回弹：

下图界面亦是同理：

这三种设计特征融入在该作界面动效设计中，构成了界面整体上的特点，可以说形成了特有的风格。

我们可以在胜利结算流程里，看到它们的完整融合：

顶部的提示，告诉我们撤离飞船的状态，这里利用了科技感动效设计里通用的闪切效果，而不是简单的整块硬切：

玩家撤离到飞船后，游戏结束，出结算提示。这个提示虽然有点简陋，但它的动效动画有结构有节奏，利用的是关键元素斜切图形：

接着是结算详情，以通用斜切图形转场接入，先展示获得的物品列表。这个列表的出场设计了细节动画：

点击继续按钮后，出现后续的几个详情面板，这些面板布局不同，但都有细腻的出入场和各自的结构动画：

游戏的整体流程中的界面，尤其是界面动效，利用这几种元素，保持了风格调性，同时又高度统一。

整体上看下来，这款游戏的界面有些细节仍显简陋，但整体的设计品质还是很高的。最重要的是，它其实给我们展现了一款稳定成熟风格的游戏应该以怎样的“控场”结果展示给玩家。

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

---

往期推荐：