本文，我们将通过几个“卡通”风格界面的游戏，来看看通常情况下这种风格游戏界面动效的设计都有什么
细节差异
和
设计特点
。
统称为卡通风格的界面设计，其实还可以分为很多细分种类。以这些风格的界面为基础进行动效设计时需要注意的事项各有不同。
这类风格的普遍特征是图形造型圆润，色彩明快。
这类界面的动效设计的最主要特征就是弹动类动作，某些情况下还需要表现物体“精力充沛”的特点。
比如，同样是面板的进出，在其他风格里的样子可能是这样：
但在卡通类游戏里可能得设计成这样：
卡通类的动效往往会有比较多弹动动作和预备动作。显得轻松愉快，富有活力。
但是凡事不能一概而论，在特定的世界观或者美术调性下，这一原则未必处处适用，而且即便是比较相似的美术风格，弹动曲线也有很多变化。
比如游戏《WonderBox》的整个美术风格，就很难说是哪种具体的风格，但我们至少可以判定它是一种“卡通”风格。它的一些动态设计就属于相对比较细腻的风格，也有一些比较收敛的弹动效果：
类似的处理手法，可以在
我们之前专文
讲过的《动森》中看到：
它的动效特点又有弹动的设计，还有一些埋梗设计，更是一种细腻的设计。
总体上，卡通类风格游戏界面动效设计总离不开弹动设计。只在一些极具个性化的美术风格里才稍有例外。
如今全球游戏市场非常充盈，基本上没办法找到很“单纯”的设计风格。你总可以在一个游戏里找到不同的风格点。比如说游戏《瑞奇与叮当：时空跳转》（RATCHET AND CLANK RIFT APART）。大体上，它可以被认为是一个美式卡通的美术风格。但界面设计以及动效设计中，又能看到非常多科技感元素的融入。
它的融合方式也比较简单，即将科技感的动效元素与卡通动效元素进行一定的比例分配，有时各自出现，有时候进行了混合。
比如在下图所示的界面入场和切换过程中，就将界面的元素移动设计成弹动式，但同时加入闪动和坏信号效果：
同样的处理方法也可以在“等级提升提示”这样的小控件中看到：
当然，这款游戏之所以能体现出这种混合风格，不仅在于动效设计的这种处理手段，最主要还是界面设计本身的风格特点。
它的界面设计本身也具备科技感和卡通风格的混合设计：圆润的构型与整体锐利的图形共同构成界面的基本型体；充满了科技感的折线设计和相关的颜色设计。
比如在设置界面里，基本上就看不到圆润的图形设计：
而在“购买”界面的整个交互过程中出现的动效和界面，基本上除了界面入场时的框体弹动外，也很少见圆润图形等跟卡通元素相关的设计元素：
不过，在一些几乎全可以看作是科技感造型的界面里，则融入了更多卡通式的动态设计，比如在战斗界面中切换武器时看到的界面效果：
中央的圆盘基本是典型的弹动放大入场，而四周的小控件则绝大部分都是坏信号式的闪动入场。
在另外一些类似的，但内容量更少的界面里，可以看到科技感界面搭配卡通式入场动画的组合，如下图所示：
至此，我们可以判断出一个基本规律，那就是即便是混合风格的游戏界面中，各种风格的设计也都是按照一定的配比进行设计的。
在这样一款混合了科技感和卡通风格的界面里，如果界面设计体现出更多科技感，就可以在动效上找补一下，多设计一些卡通风格的动效。反之亦然。也可以出现只有卡通式的动效，也可以出现纯科技感的动效。但大部分情况下也还是两者混用。并且要横跨视觉设计与动效设计，综合进行均衡设计。
当然，这种比较粗浅的分析并不能囊括这种设计手法的全部。虽然设计逻辑大致如此，但实际设计过程肯定比我们描述的要复杂得多。而且这是一款风格非常分明的游戏。设计师的设计方向也比较明确。
实际项目中，我们经常会碰到需要“风格探索”的情况。有时候甚至制作人都不太明确自己的项目应该具体是一种什么样的风格。但至少明白它混合（缝合）了哪些既有的风格。这种情况下，设计师就好着手去做一些风格上的探索实验。利用类似的方式就可以有不错的效果。
单纯的卡通风格界面动效设计可能比较容易被分析得清楚。但像本文主要提及的几种风格，它们的设计过程也一定经历了一些反复探索。最终才能呈现给我们相对“圆润”，上手很舒服的操作体验。
正如前文所说，当下的游戏中，其实并没有可以被判断成极其单纯风格的例子。卡通风格的游戏也是如此。除了之前看到的与科技感的结合外，还会有什么样的形态？其动效设计又会有什么特征？
我们观察到，卡通风格的游戏，以及延续了这种美术风格的界面上，有些情况下并不一定能看到以弹动为基础的动效。
原因主要有几种情况：
第一种情况
是“原始风貌”的卡通风格，会基于“模仿古早动画样式”的原因，而不必设计弹动动作。
第二种情况
是，游戏设计团队对游戏界面的动效没有充足的资源投入，或者根本不太重视。导致原本需要有动态设计的界面缺乏相应的设计。
第三种情况
，有些特定的卡通风格，甚至是特定的玩法，不适合设计太多动效。因此会很少在这类风格中见到动效设计的痕迹。也就更谈不上为特定卡通风格设计独特的动效了。
第一种情况
并不多见，因为过于别致的风格对于项目团队来讲不一定是好事，毕竟市场上不一定有广泛的受众。这方面的典型范例是《茶杯头》。
《茶杯头》是一款从画面到界面都拥有古早美式动画风格的游戏。可以说能够代表某种独特卡通风格的设计特点。
它的画风和动作模式都对早期美国动画风格有充分的借鉴模仿，游戏过程中的画面也都有旧胶片的做旧纹理效果。
这种风格的动画有一种古早的、朴素的动作特点。其中最主要的特点就是没有“预备动作”。这种动作特点也自然被设计在游戏的人物动作以及一些界面元素动画上：
可以认为这种无预备动作的动画，是我们现在所熟知的卡通类弹动动画的缺失版本。不过它却与这种特定美术风格非常融洽。从理论上来说，它的界面动效也应该基本延续这一动作特点。
但是事实上，《茶杯头》的界面中也用了不少弹动动作动效：
或许将这些弹动去掉，才是比较吻合这种特定美术风格的动效设计。抑或就像下图这个界面一样，模仿默片中静止入场的形式：
不过，确实可以理解这么设计的缘故：我们毕竟是现代人，即便返古或者仿古，也应该是带有现代设计手法的“仿”古。就好比肯德基进入中国也必然会开发适应中国人口味的西式快餐，或者国外中餐店适应当地人口味一般，绝对的原汁原味恐怕不太能被当下受众所接受。
最好的做法则是像这个看似简单的loading动画一样，既模仿古早的无弹动手绘动画，又为一些特定动作设计应有的预备动作：
第二种情况
比较好理解。不论是没有足够的意识，还是没有足够的精力去顾及。缺乏动效设计，总体上都是因为缺乏资源。
这种游戏还是非常多见的，我们只能抱憾观察它们，期待它们拥有与优秀美术风格相匹配的动效设计。
在不少具有独特美术风格的独立游戏身上，我们都可以观察到这种现象。
比如有很强装饰性美术风格的游戏《DITTO》。它的风格非常接近美国动画剧《辛普森》或者《瑞克和莫蒂》的画风。只是设计造型上跟两者比较有差别。那么它的动效设计会不会更贴近这类动画的动作特点呢？
实际上我们在它的界面上并没有看到这种动作的延续。如下图所示，一些界面面板的入场都只采用了比较通用的动态样式：
甚至，一些界面的切换动态是硬切的方式：
不过，结合它一些有趣的设定，有些界面的转接看起来并不那么生硬。
如下图所示的地图据点跳转，就用了一个带翅膀小车穿梭的效果，似乎让我们看到些许《集合啦！动物森友会》中类似坐船表现的影子：
另一款游戏《毁灭全明星》（Destruction Allstars）里，我们也可以看到类似的现象。只不过这种动态设计的缺乏并没有体现在“有或无”上，而更多体现在设计质量上。
如下图所示的诸多该游戏的动态效果展示里，有图形逻辑不太明确的切换关系表现：
也有提示效果中，诡异的文字移动方式，以及配合的不是那么密切的粒子效果：
同样的，下图提示中，文字与其他部分的组合效果并不那么顺畅：
虽然是一种比较朋克和街头气质的“美式卡通”风格，但对弹动效果的过度应用，使得下边页面中的切换效果过于剧烈。配合人物的夸张动作以及剧烈变化的背景视频，还有每切换一次都要变化一次的面板颜色，使整个页面在玩家切换过程中充满了杂乱无章的信息。
当然，也不是每个效果都比较糟糕。下边几图所展示的效果中，设计师对“聚焦”的把握以及相应的动作设计，都还可以。
与之有类似设计风格的另外一款游戏，动态效果设计就要相对好一些。
如《Arcadegeddon》这样，结合了街头元素，赛博色彩调性的，有一些无厘头元素风格的游戏。它的动效设计体现出一种在卡通弹动的基础上更加狂野一些的感觉。
虽然它的细节处理并不那么出色，但整体上的调性把握很准。
如下图所示的主菜单入场及响应样式，都体现出一种“剧烈弹动”的精神气质，这点一以贯之，在整个游戏界面动态效果上保持得非常一致。而且这种动作特点，也与游戏的操作手感和游戏体验比较一致。
该游戏动态设计的动作特质主要有两点比较突出：剧烈弹动与错位结构。通过将通用的弹动动作进一步夸张，来构建基本的动作特点；通过将图形中的前后层元素，在时间上的相对延迟或者动作上的错层，来设计错位结构。下两图就能充分体现出它的这两个动效特点：
第三种情况
则比较特殊。有些游戏的美术风格过于浓重，从而不需要再在界面中增加过多的信息，尤其是动态信息。这时候就会尽量少的加入动效的设计。或者是特殊平台的产品，为保持一些调性，即便美术风格上比较特殊，界面上也不做太多特殊化处理。
如游戏《ROOT》，这款游戏的美术风格更像欧式漫画，它的界面设计更是拥有独特的插画装饰风格。本身静态的图形信息就已经比较浓厚了。这时候加入过多的动态设计，会显得画蛇添足。
但其实依然可以看到，在这种美术风格笼罩下依然基于卡通类动态设计的一点点动态设计。如下图所示的引导提示框体动画：
而且，它的动效更多一些自我的特点，如下图所示，可以看到很多同绘画风格的手绘式卡牌特效，结合一些动画特征上富有弹性的小提示控件动效，比较浑然一体。
又如游戏《Flotsam》。这款游戏的界面设计风格非常特别，有点像有一阵子比较流行的应用类界面设计中的插画风格：淡雅的色彩搭配黑粗描边。同时，它的操作比较繁琐。
与我们在过往文章中提到过的《人类》这样的游戏类似，这种游戏的操作非常繁琐，界面结构也很复杂。遇到这样的项目时，动效设计师应该想到“收手”。即不要为结构极为复杂的界面设计过多的动态效果。
基于这种原因，同时也有可能开发组并没有太多的精力顾及到动态设计。这款游戏的动效看起来比较“简陋”。很多页面或者框体，都是直接硬切的效果，如下图所示：
但其实，我们也能发现一些端倪，表明开发组其实有想设计一些细腻的动画，去体现特定的功能的。如下图所示的效果：
其实，这种界面设计风格，本身就天然符合“细腻”型的动效设计。客观的说，这款游戏在现在的版本上再增加一些细腻的动态效果会更好。
而不是像下图这样，在绝大部分框体为硬切效果的情况下，冷不丁的有一个框体用弹动动效入场：
而在游戏《速斗传说》（Speed Brawl）中，也见不到太多的动效设计，
或者一些掉血文字提示类，需要鲜明的动态特点的地方，看到类似的动态设计：
而在一些信息相对比较多的界面里，往往会对界面动效进行整体性设计，没有太多细节结构上的拆解：
这种稍微有所着墨的动态设计浓度，其实挺符合这款游戏的自身特点的。它的整个游戏体验是一种快节奏，酣畅淋漓的感受。这时候很多东西都要进行短平快的设计，不仅要尽量减少界面上过多的干扰元素，还应该在不多的动效上，做出充满力道的动作设计。
像下图这样的宝箱爆开动效，就属于这种少却完整的动效：有前奏，有释放，还有全画面响应。
而在一些主机类的游戏中，尤其是更独特一些的卡通风格游戏里
，有时候会因为特别的调性，而对动效设计进行极大的简化。
如游戏《生化变种》（BIOMUTANT）。这款游戏的美术属于极具作者风格的类型。但从界面设计中的一些特征来看，走得还是欧美漫画式的表现形式。但这一特点在界面中的体现并不多，少量的比如下图所示的战斗界面中出现的漫画式“拟声词”的动态表现：
在它的大部分其他界面里，基本上只是设计了通用型的动效设计：
跟《生化变种》的动效处理方式有类似形式的，也可以在游戏《ADORE》中见到。
但它们又有所不同。这款游戏的界面有比较强的风格化处理。一种带有魔幻特点的卡通风格界面，会有许多魔幻类风格常见的特效处理:
也能看到一些基本的结构拆解动效：
以及一些弹动类动作设计，只是此例中的弹动设计有点问题：
总体上这款游戏的界面动效也属于比较缺失的状态，完整性与专业性都比较缺乏。与相对优秀的界面设计不相匹配，应该是力有不逮的结果。
上文提及的这些游戏的界面里，这些“不完整”的动效效果的目的是什么，是什么原因导致它是目前呈现的样子。我们作为第三方，并不能非常肯定的就认为缘由真的如本文所言。
但不管是什么原因，游戏界面的完整体验一定是需要完善的，至少是完整的，动效设计去参与的。
不管是细腻的，还是热血激动的，亦或是优雅的。界面中的动效，至少应该以完整的方式呈现在最终的游戏中，有时不能明显引起玩家的注意，但完整性是体验表达的基础。
面对这些动效设计有所“残缺”的游戏，我们抱以遗憾，但还有很多优秀的范例值得我们参考。
完整的界面设计应该包括完整的动效设计。有不完整的动效设计的游戏存在，并不代表大家都应该将此作为一种理想状态。
界面应该被设计成有完整的体验，这其中，界面动效，以及跟界面和美术风格相匹配的界面动效风格，都应该是完整、有效的。
在游戏《恶果之地》中，我们可以看到生动有趣的，对自有风格进行完整阐述的动效设计。这款游戏也是一个作者特征明显的美术风格。
如上图所示，从游戏LOGO的入场动画开始，界面动效就以特有的美术风格为依托，开始进行特殊风格的动效演绎了。
这种充满弹动特征的动画，加上夸张的形变和随动元素的结合，除了是个典型的卡通风格动效之外，还具备这款游戏独有的搞怪气质。
上图中，进入游戏后的第一个界面，就带来了它一种独特的动效构造方法：结构上的时间错位和夸张形变构成的弹动动作，总体上给人以晃动和无序的感受。这种感受是这种特定构造方法所形成的节奏感，这种节奏在接下来的界面动效内保持了高度统一。
如下图，在背包地图信息三个页签界面的切换中，弹动动作与不明显的错层节奏，使界面切换效果看起来像组合不牢靠的老旧机械一样，但你会觉得完全合理：
在场景内弹出的控件组，也是一样的动态特征，它们看似零散，却组织牢靠：
场景内的可交互物品，自然也有同样的动画特点。配合上有趣的台词，让这一切显得轻松好玩：
除了表面的夸张与特殊节奏设计外，该游戏的动效还有些有趣的细节。
一个小白人充满了表演欲，参与不少界面演出。在商店中购买物品时，它会占据因售罄而空荡荡的按钮位：
角色死亡时，它会扮演鬼混为失败烘托氛围：
作为主角的“恶果”们，自然也要参与到一些界面细节中去。在“新成就解锁”时，对应角色变成一张邮票凑热闹：
在“解锁新图鉴”时，对应的水果会游移在界面中，仿佛怕你看不到它：
既然是漫画式的美术氛围，“拟声词”的表现自然不可或缺。
人物开枪时，可以“看到”开枪的声音：
不同的枪械，声音“看”起来也不一样：
有爆炸发生时，可以“看到”爆炸的声音：
不同的轰击声，也“看”起来不同：
暴击无声，但也依然能够“看到”：
这些拟声词虽然看起来比较相似，都是夸张形变为基础的弹动动画。但仔细观察会发现，它们被根据不同的类型，设计出了略显不同的动作形态。
拟声词的广泛、多样化的融入，使得有些文字类的提示看起来也是拟声词的一种，比如“区域安全”的提示：
这是一款风格化非常完整的游戏。从画面风格，到界面风格再到界面动效的风格，整个感受是一体的。
我想这是因为游戏创作者非常明确的知道自己想要的是什么。或者他们本身就非常熟悉这种风格，并且长期进行深耕的结果。
游戏体验的一体性一定是以完整性和一致性为基础的。其中完整性一定是一切的基础。
游戏《TOEM》是一款以“拍照”为核心玩法的游戏。画面风格接近“白描”。是一种黑白灰配色的卡通风格游戏。
它实际上是以面片化的人物与三维场景技术组合而成的。所以我们可以对游戏场景进行自由旋转：
在进行拍照操作时，不仅可以在取景框内旋转画面，还可以调整光圈，做出画面的虚实：
这些元素组合在一起，让这个游戏有一种很细腻的感受：看似扁平的画风，却有通常意义上认为的扁平不具备的高自由度。
它的界面设计也是如此，很多看起来扁平的元素，实际上有三维形态。这一点在动效上体现的很明显。
比如在相册界面的打开和相关操作中，就能看到一些三维形式的动画：
它的动效也是以弹动动作为基础的。但是做了一些个性化的设计。
除了在界面中加入如上图所示的三维物体之外，还有一些入场后的持续性动作。如类似“照片”这种卡片状物体的略微晃动，以及标题类文字的蠕动动作。后者是这款游戏风格化的点题元素。也可以在一些比较细微的界面控件中看到，如下图所示的人物对话气泡的打开与静置动画中的那样：
这种字体的动作基本上由两部分构成，一部分是入场时的渐次出现动画；另一部分是静置时的蠕动效果。这种效果可以在一些标题类文字上看的更清楚：
这类携带了重要信息的文字，似乎都会有一些细微的动效，甚至在二次确认弹窗的按钮文字上，也可以看到微弱的效果：
又比如在系统菜单的文字上：
这是一款很“安静”的游戏。你的游玩方式就是收集各样照片，然后在任务卡（游戏内直译为社交卡）上盖上章，完成相关的拍照任务，就可以通关了。
是不是有一点点《动森》那味了？
它的动效也给我这样的感觉，总在细微之处有令人心动的细节。
比如场景里有播放音乐时，会有提示条告诉你音乐的相关信息：
任务卡上的每条任务被选中时，都有对应的图标，还有它们富有弹性的入场动画：
进入新的地点时，不再是生硬的提示，而是“welcome to”某个地点的小提示，它本身也保持着蠕动：
除此以外，它的动效也喜欢利用一些随动元素，让一些动作显得更加有力度，比如在任务完成，最终确认贴花时的动作：
这个动作设计在技术上来讲堪称完美，因为它不仅利用了放射状的随动元素去进一步延续贴花的力度，还在贴上去的动作完成时，为底部的卡片设计了响应动作。
而在获取物品的动效上，这种动作样式得到了延续和加强。所加强的不仅是一些控件在尺寸上的放大，还有极为收敛的黑白粒子彩带：
如果注意观察的话，除了这些主体的，一以贯之的界面元素外，在左上角还有一个悄悄冒出的小图标。它也是一种获取提示，动作设计并不是简单的冒出，而是冒出加上抖动。
另外，这款游戏在不同的地图之间进行转场的形式也比较特别：
这种形式比较“古典”，结合整个游戏几乎都是黑白的设定，是为了致敬老电影也说不定。
不过，如果你通关的话，在最后会看到彩色的极光和宝石，并为它拍照。这是整个游戏里唯一拥有色彩的地方：
简单，但静谧，且充满细腻的细节。这是我对这款游戏的体会。也是对它游戏界面和动效设计完整性之上的一种体验。
再一次证明，完整的体验里，每一环都不可或缺。
通过诸多实例，我们看到卡通风格游戏中，界面动效的处理方式，总结如下：
1.以弹动动作为基准，不同的细分方向有细微差别；
2.与其他元素混合使用时，可利用配比的方式进行融合；
3.需要根据静态设计的浓度，适当调配动效的密度；
4.首要保证完整性，完整性和密度是两个维度；
5.适当的细节会增强游戏体验，尤其是卡通风格。
以上就是本篇全部内容。
请务必备注
加群
，为防止对您造成骚扰，无此备注者不会被邀请进群哦~
欢迎点击下方名片关注本号
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
