/【半周谈】067 游戏界面动效基础规则-时间-1

【半周谈】067 游戏界面动效基础规则-时间-1




对时间长度的精准把握,是动效设计的核心规则。动效是一种时间轴形式的事物,其时长设计非常重要。








我们以前的文章中说过,动效的时间不能过短或过长,但具体多短为短,多长为长,如果想一言以概之,并没有一个准确的定论。因为不同维度,不同类型的动效,其时长设计都各有特点,但是只要在特定规则下,就会有一定的设计规律。








从表象上来看,动效可被视作诸多线性动画的非线性集合。它们以片段的形式,呈点状分布在各个交互点位上。与游戏中的其他动画形式,如人物动画、战斗特效等等有不一样的时间表现特征。





在这种维度下,动效都是一些呈小片段状的动画,这里包括了比较大块的如一整个界面的出入场动画、弹窗的出现、列表的入场等,以及小块的如各种形式的反馈动画等。




这些动效的时长通常都比较短,一般在2S以内。这样的时长设计根本原因在于这些动画的设计目的。绝大部分情况下,它们为承接界面的转换关系而生。这种转换关系的目的则是以尽量快捷的表现形式,来为玩家呈现界面的相关信息。这些信息包括但不限于图像、文字等。所以作为转换的过程中的一段时间轴形式内容,这些片段状的动效不需要太久的时间。只需要给玩家留下一定的“印象”即可。









也是因此,动效给很多人,尤其是很多不太熟悉动效设计的人以不太重要的印象。








这符合人们的直觉,占比太小的部分,甚至不直接呈现在人们面前的东西往往显得不太重要。








但仅凭直觉去判断某项事物的重要程度,是一种反智行为。








显而易见的,我们看不到代码,不代表游戏的运行不需要程序。类似的道理,动效在大部分情况下表现出的短小精悍特点,不意味着这部分不重要,更不意味着它很容易被设计出来。









单独看来是一段短小的线性动画,但总体上以非线性的形式有机组合在整个游戏的体验系统中。这本身就意味着动效有比较复杂的时长设计逻辑。









我们可以把这些时长设计按照几种情况进行划分,以便大家理清这套逻辑的思路:









1.连接功能动画










我们曾经有文章专门讨论了动效的连接功能(



点击这里回顾



)。动效的连接功能在整个动效的设计体系中占有非常大的比重,这也是上文“它们绝大部分情况下为承接界面的转换关系而生”的说法来源。









基于此一特征,我们发现这种承接关系本质上是一种在时间维度上转瞬即逝的变化过程。虽然目的是承上启下,但这一过程本身也足够重要,我们需要在这样一个过程中给玩家留下一定的印象。这一印象可能就承担着表达世界观甚至是特定情绪的作用。这意味着在这种情况下,动效设计在时间受限的情况下也要有一定的表演功能。








转瞬即逝,就要很短,不要耽误承上启下的“正事”。内涵丰富,就要在很短时间内将各个元素的表演进行巧妙压缩,这就需要用到时间错层以及特定的节奏设计。



所以,可以总结出这种动效的时长特点:

第一,短,一般不超过1.5S;


第二,时间错层设计,有限时间内保证足够多的内容。


比如,游戏《真三国无双霸》的人物详情界面中,一个简单的页签切换效果:

这是个典型的“连接”型动效。为了表示页签的切换,左侧有直观的挪动效果;为了表示右侧信息的刷新,右侧的新入面板信息有比较细致的入场动画,但这些内容都在1S内完成,它们显然做了时间错层处理。如果按照首尾相接的方式设计,将没办法同时满足两个需要。











2.反馈功能动画










反馈也是动效的很重要功能。一些动效是专门设计来承担反馈功能的。以被动反馈动效为例,这种反馈往往是对操作的直接反应,所以时长通常是最短的。









如下图,《漫威超级战争》中的页签点击反馈效果:







这种效果是点击操作的瞬间反应动画,大约只有0.5S时长,但囊括了多层次效果设计。








不同的风格氛围中,这种动画的长度差异不大,最主要的差异在具体的效果设计,如动画曲线和美术元素。比如当处于卡通化的风格氛围内时:







这个动画是《恶果之地》商城界面中的页签点击反馈,它的时长也在0.5S左右。









处于一个国风氛围内时,则可能是这样:









这是游戏《花亦山心之月》中的一个新系统开启的提示动效。是一种典型的主动反馈动效。它的持续时长有国风氛围下的优雅绵长特性,但如果仔细观察,可发现主体动作依然是在0.5S内完成,后续的动作都是通过延长“拖尾”来填充的。这也是特定情境下,拖长时间但动作不拖沓的一种设计方法。



主动反馈动效还经常被设计成循环动画。








如待领取状态:







这种状态是单位动画的不停重复,视为整体时它是一种无限时长的动画。不过讨论到设计时长时指的是单位动画。这种动画需要持续性活动,因此单位动画时长比被动反馈型动效长一些,此例为2~3S长度。








这种状态与静置保活动画有一定的相似性,后文详述。








另外,还有式表现动画静置保活动画特殊功能动三种情况,我们下篇继续。









以上就是本篇全部内容。


















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



推荐阅读

本文来自微信公众号“COTA五号”作者:欧型兔(ID:cotadesign)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。