一、背景闲白
游戏《黑帝斯》是一款由Supergiant Games开发并发行在macOS、Microsoft Windows和Nintendo Switch平台上的Roguelike动作角色扮演游戏，于2020年9月17日公开发售。
Supergiant Games就是超级巨人游戏工作室，这是一家美国的电子游戏开发商及发行商。公司成立于2009年，由前EA雇员Amir Rao与Gavin Simon创立。他们游戏的特点是多采用等距视角。著名的《晶体管》便是出自这家公司。
这家公司截至目前共开发并发行了四款游戏，它们分别是发行于2011年的《堡垒》（Bastion）、发行于2014年的《晶体管》（Transistor）、发行于2017年的《柴堆》（Pyre）和发行于2020年的《黑帝斯》（Hades）。最后者便是本文要讨论的这款游戏。
它们的游戏不仅都保持着等距视角的特点，还在某些程度上保持着美术风格的一惯性。纵向来看，其游戏界面和动效的设计也随时间而逐渐趋向于成熟，但总体上保持了一惯性。这种一惯性让这些游戏都带有强烈的超级巨人游戏工作室特色。
比如，虽然《晶体管》的世界观设定与其他几款游戏大有不同，而且属于广义概念的“科技感”风格，但它的界面动效与后期的《柴堆》和《黑帝斯》都有着相似的特征。这些相似特征中最突出的就是材质动画的巧妙使用，以及复杂的动画元素结构构成。
如下图的《晶体管》中“函数界面”的打开动画，就有多层结构构成的前奏动画设计：
以及它的“OVC面板”打开动画，就层叠了多个材质动画效果，并且也结合了多动画结构，最后构造出拥有丰富结构的前奏动画：
而下图是《柴堆》中的一些界面动效：
明显能看出，这款游戏的动效也喜欢使用多层材质动画来构造界面控件的出入场动画，并且都有丰富的结构动画来构成动效的前奏甚至拖尾动效。
透过它们不同的美术风格外表，我们看到的是一脉相承的动态设计思维。
那么《黑帝斯》几乎一定也是继承了这种设计思维，它会怎么做呢？
二、美式漫画风格画面
在此之前，我们有必要看下对应的美术风格是不是能够与这种设计思维相吻合。
先来看一看以下图片所展示的《黑帝斯》游戏画面：
可以看到，它的游戏场景设计、人物立绘以及界面设计。都带有浓重漫画式表现方式。由于它相对来说明亮度较高的设计，使这种风格有别于更偏暗黑的哥特式漫画风格，比如类似《暗黑地牢》这样的美术风格。
两者其实有一定的共性，如都使用黑色边线等。但它们的线条造型方式有比较大的差别，而且色彩使用上也不一样。所以《暗黑地牢》看起来更不像“美式漫画”风格，而《黑帝斯》更像。而且《黑帝斯》也保有和它的前辈《柴堆》相似的美术调性。
至于我们在这里称呼这种风格为“美式漫画”的原因，大部分在于它在结构细节刻画，排线方式以及经典的黑色描边、全黑暗面的绘制手法上，都极具美式漫画特征。为了描述方便，我们暂且就叫它美漫风格。
通常来说，动效设计师在面对类似这样的美漫风格的界面设计时，脑海中首先出现的大致是“弹动”、“夸张”、“戏剧化”之类标准词汇。这些都代表着直觉上的美式漫画的动态表达语言。
但显然《黑帝斯》并不是简单得将这些动态语言用于界面动效设计之中。接下来我们来看看它用的是什么独特的动态方式。
三、有特点的动效设计
首先可以确定的是，《黑帝斯》的界面动效依然继承了以往自家游戏界面动效中的“材质动画”效果。如下图所示的“NPC对话”界面入场动画：
为了看清细节，下图为慢放处理的效果：
而且，这些动效也都依然设计成了多结构前奏构成的动画节奏，比如下图所示的“夜之圣镜”界面入场动效：
下图是上图的慢放版本：
这种丰富的动画结构似乎是该游戏的动效设计师最喜欢的设计手法，在诸多重要界面或者面板里层出不穷，如下图所示的“祝福选择”界面入场动效：
下图是上图的慢放版本：
重要界面的动效设计中，前奏设计不仅重要，也是必要的。它会促使界面的动效效果富有层次和节奏感。《黑帝斯》这种设计手段不仅是一种一以贯之的手法，而且实际效果也极具视觉冲击力。
看起来和以往的自家游戏界面中的动效设计一脉相承，但这次又有所不同。除了这些“传统艺能”外，《黑帝斯》的动效显得更加夸张。这恐怕也是我们前文中所提到的那些动效设计师在面对美漫风格设计时蹦出的词汇中，唯一被《黑帝斯》所传达的。
如下图所示的“祝福选择”界面点击效果，通过极具爆发效果的光效与背景层上的材质动画，将整个点击确定的感受表现到非常夸张的程度：
下图是上图的慢放版本：
类似的手法多处可见，如“新武器解锁”的提示出场动效：
下图是上图的慢放版本：
这种设计效果由两部分构成：在材质动画的基础上，特定的夸张式的动画设计；以及光效的细腻使用。
在战斗界面中，设计师亦利用了同种设计手法来表现各种状态变化，如血槽上的状态提示：
以及武器栏的状态提示：
事实上，这些夸张的效果并不伪和。原因主要在于游戏本身所塑造的一种美漫风格氛围。其次还在于游戏的玩法以及爽快的打击感设计，让玩家感觉这种夸张是情理之中的。
四、动效的细节
其实，仅仅利用多材质动画、多结构前奏设计以及夸张的动作设计，并不能使《黑帝斯》的界面动效变得完整。
让它们变得完整的，是这些看似“粗暴”、“夸张”的动态设计中，所渗入的点滴细节。
细节之一。光效的充分合理利用。如果你注意观察，会注意到一些光效细节。在快速播放的动效中这些通常不太会被注意到。如下图所示的界面“奖励获得提示”界面的入场效果：
在这整个动态效果中，光效分别起到了引子、演绎和落脚的作用。通过细腻的嵌入，参与了这个三段式结构动效的完整过程。
而最容易被观察到的光效就是鼠标经过时的扫光，以及可点击框周围的彩色缓动边框：
另外，流光设计也经过细节处理。它们的型体和光芒效果都有不易觉察的细节。在游戏开头的Logo入场动画中表现最为明显：
细节之二。速度线的使用。虽然有很多效果都是充分利用材质的结果。但类似漫画速度线表现手法，让《黑帝斯》的很多界面动效显得具备手绘逐帧动画特征，如“地图名称提示”这类控件的入场动画中的一些细节：
细节之三。特别NPC的动态细节。在一些特别的角色立绘上，不仅会有简单的入场动画，也还为它们赋予各具特点的光效，甚至是类似表情的“颜艺”，如下图所示：
其他还有针对特定场景设计的动效，如带有“水”概念的弹窗，自始至终贯穿着水波纹的动态元素：
如卷轴式的弹窗的特定入场动作，从下到上然后展开：
如横向左右结构的弹窗，入场动画的形式是从左至右展开：
林林总总，才构成效果与功用具备的，风格与节奏完整的界面动效设计。
总结
总体上来说，《黑帝斯》的美术风格非常“稳固”且自成一体。
一般情况下，这种体量的开发者和游戏，通常不会在界面设计与界面动效上投入过多的精力。
我们现在能看到这种品质，至少说明两件事：
开发者对界面有足够的重视，充分认识到游戏界面在表达游戏本身意图上的重要性；
开发者有足够高的审美和相应的技术能力，足以将这种品质的设计变为现实。
总结来看，通过观摩《黑帝斯》的动效设计，能看到的不仅是它为我们展现的畅快淋漓的游戏体验，也不仅是一个美漫风格界面的动效设计手法，而是他们设计这种动效的思维方式：
1.利用美术风格中的核心意图展开设计。这里就是“夸张”。
2.对材质动画的充分利用，并结合特定风格的动作设计。
3.更多样化的利用光效动态，它有时可以构成动效主轴。
以及充分必要的动效细节设计。
以上。
来源：COTA五号
原文：https://mp.weixin.qq.com/s/kWzbtMg8yv7Du_WQxPEyng