查看原文
其他

为了让玩家也跟着“动起来”,这款游戏动用了哪些“小心机”?

欧型兔 腾讯GWB游戏无界 2022-08-30


编者按 《Nintendo Switch Sports》的界面设计看似平常,但包含了很多不易被人注意到的设计细节。如何组合构成整个界面体系的脉络?比较常见的动效设计手法,又恰到好处的表现出了别具一格的风格调性?



作者:欧型兔

(本文内容由公众号“COTA五号”提供,转载请征得同意。文章仅为作者观点,不代表GWB立场)



《Nintendo Switch 运动》(英语:Nintendo Switch Sports)是一款由任天堂企划制作本部开发,由任天堂发行于任天堂Switch的体育类电子游戏,于2022年4月29日发售。本作是Wii Sports系列的第四款作品。

与《Wii运动》不同的是,本作以任天堂Switch的Joy-Con代替Wii遥控器操作,可联机对战。背景设定在一个名为“Spocco Square”虚构的综合运动设施中,游戏目前推出网球、保龄球、排球、羽毛球、足球和击剑6种项目,其中排球、羽毛球及足球属于本系列的新增3款项目。有计划于秋季以免费更新的形式推出高尔夫项目。


与此系列作品画风一致,本作属于轻松愉悦的卡通画风。其人物的渲染风格与老任旗下其他作品较为类似。

本作的界面设计则有非常明确的设计特征,以及鲜明的设计特点。

造型设计上,它以线型断点图标样式为关键视觉语言,构建了一整套视觉系统。

这套关键视觉元素的来源,可能是跟运动有关系的速度线。跟我们在表现运动、速度等元素时,经常使用的锐利造型的速度线不同,本作的速度图形是一种造型非常圆润的线条。非常巧妙的是,它通过断点的形式来表现速度,而不是通过传统上锐利的造型。

在游戏开头的标志演示以及主界面入场的动画里,我们可以看到这种图形的动态表现特点:


它是一种柔软、时尚并且略显劲道的一种图形。这种动态特点基本上是由线条的伸展变化动画构成的。这也与后文将要讲到的该图形在界面动效中的生长式动画特点一致。

这种断点线型元素在界面中以各种形式存在。除了常见的细线条形式外,还以下图这样比较硕大的造型形式存在:

在颜色上,以青蓝色为基调,辅以同样色调的其他点缀色共同构成界面色彩基调。而界面中的大部分颜色为带青蓝色调的浅灰色,这种配色方案,使游戏的操作系统显得极为明亮和轻松。




如上文所述,本作界面动效精准地利用了界面中的关键视觉元素--断点线条。它以线条生长和流动为基本动态语言。在静态设计的基础上,进一步完善地表现了这种表现速度力道的图形语言。

除了上文中游戏开头视频所展示的那样,游戏里最主要的视觉热点上,都有这种关键元素。比如进入到“Spocco广场”时的图形动画:

以及进入玩法主菜单界面时,这个标志图形与界面元素之间的转换效果:

另外还有一种简单版本的loading动画:

类似的线条生长动画,也出现在一些比较关键的界面视觉表现点位上,如多人模式时,匹配成功的效果里,就有玩法图标的类似构成动画:

如上文所述,这种线条的形态不仅限于细线条样式,它还会变粗,比如在结算类界面中,它们就是粗细不一的速度线形态:




似的,局内的一些关键提示,也用了这种动态形式:

这种元素的变种也同样出现在另外一些焦点交互点位上,比如VS界面中,VS字样的出场动态中:

一些关键提示字样的伴随元素:



关键提示控件动效的伴随元素:


以及对局过程中,比分变化的伴随效果:

还有取得不错操作成绩时,界面上相关反馈的氛围烘托动画:



果增加颜色表现,它还能进一步表现出操作后的评级反馈:

进一步的,它们充当了画面转场时的抽象覆盖元素:

和加载画面的动态循环背景图形:

至此,我们可以大致梳理出这种关键图形元素在本作界面中的应用手段,从基本的图形出发,继而扩展出多种形态的设计手法上,有一个脉络清晰的演变关系:



作为一款轻松愉悦的卡通风格游戏的重要部分,本作的界面动效自然无法超脱出卡通类动效基本风格设计特点:“弹动”

与一般的游戏界面中的弹动设计略有不同,这种主机类+体感游戏的动效弹动,很多时候要考虑到联动外设反馈一同设计,这样才能塑造出深入人心的反馈感受。

比如我们可以经常看到这样的动效:

它承担了一个操作流尾端的提示作用。这个操作流是玩家正式进入游戏之前的必要准备工作。只有在正确操作的情况下,这一弹动效果以及联动的手柄震动才会发生。

更多的弹动设计,则被深入渗透在界面的角落中,有比较明显的,如每次操作按钮时的点击态:

还有局内的一些关键提示:

及玩法引导里的成功反馈:

还有一些不太明显,比如下图中镜头运动表现出的劲道动作:

以及多个界面之间衔接时,各个控件出入场的动画动作配合起来的弹力效果:

这里的图片只能传达视觉上的弹力,但实际上这种类型的游戏是通过外设和界面一起配合,来综合传达游戏体验的。这种极大区别于手机游戏界面体验设计的形式,是需要很多细腻的细节去支撑的。

这也是为什么这款游戏的界面给人以看似简陋实则处处细节的感觉。它的图形和用色都没有什么令人惊讶的新东西,但总是有令人舒适的感受和细腻的体验。可见老任在体感游戏的细节设计上功力之深厚,一般厂商极难企及。

1. 关键视觉元素打底。可以不独特但要足够明确;

2. 合理、有效甚至是有趣的关键元素延展。这是本作界面和动效中最大的亮点,也是设计师功力所在;

3. 动效层面的具体表现要根据实际功能需要,尤其跟外设相结合时,会涉及更多细腻的处理手段;

4. 通用风格,即本作中的通用卡通弹动动作设计,不仅体现于明显的交互点位,还能在细微之处进行体现,比如转场的节奏感;

以上就是本篇全部内容。


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存