【设计评论】从《动森》的界面看什么才是符合动效原则的设计

有一款画风呆萌，玩法有趣的NS平台游戏风靡朋友圈。它就是老任旗下一款老IP的新作《集合啦！动物森友会》。这款游戏的画风和玩法都有很深的老任风格：温暖的色调、二头身的人物、细腻的NPC人格设定、看似简单但容易沉迷的模拟经营类玩法以及最重要的特点：游戏内时间与现实时间同步。

 

其实从这款IP历史上来说，这些设定都不足为奇。甚至于游戏内几百个NPC都各有性格，各有自己的口头禅这些内容，对于老任来说，在别的游戏里几乎也能看到影子，如在几年前同样出自老任第一方之手，同样风靡的NS平台游戏《塞尔达传说：荒野之息》中，也有很多类似细腻的设定。但是这些东西对于吃惯了套路式RPG游戏、吃鸡和王者的中国玩家来说，着实别有一番风味。

 

一款游戏深得玩家喜欢，缘由有很多。总体上可以认为老任深耕几十年的老IP自有自己把持玩家心理的特有手法。我们抛开玩法层面，抛开所有这些细腻的，海量的细节设计，去看看它的界面设计中，动态效果设计是怎么被融合起来，一起作为游戏的一部分，让玩家沉浸的吧。

一般来说，一款游戏的界面动效的根本存在意义主要是这几个方面：

  第一，反馈。指的是玩家对界面进行操作之后，界面的反应。简单到一个按钮的点击反馈，复杂到页面之间的转接，都可以认为是反馈系统的一部分。

 第二，连接。目前世代的游戏的游玩过程所需要的操作，都离不开界面的辅助。游戏界面是游戏中非常重要的一部分。界面是靠无数的“框体”互相之间有机的连接来发挥其作用的。哪怕一款游戏的界面再简单，也都是由一系列的界面进行连接，并以一定的逻辑联系在一起才会有意义。它们连接的方式和意义就主要依赖界面动效去表现。说白了就是界面之间的跳转关系，也可以理解为转场。

 第三，表达。每个动效都会去用特定的动画去表达出特有的信息。或快或慢，或激动或优雅等，这种表达除了传达某种重要信息外，也是界面情绪化表达的一个途径，目的是提示玩家重要信息，或传达给玩家一种延续自游戏整体氛围、世界观的感官。

 

需要注意的是，这三点在实际运用时并非是完全孤立存在的。也就是说，一个动效中有可能蕴含有这三点中的某一个、某两个或者全有。如果一个动效没有起到这三点中的任意一点作用，就说明这个动效是没有意义的，是可以被去掉了。

 

需要强调的一点是，因为平台的关系，在这款游戏的操作中，其界面反馈设计与其他平台有所不同。比如在手机平台上，我们做一个选中的反馈动效时，就只会考虑正常态和选中瞬间，以及选中后（如果有）的动态效果。在这款NS平台游戏里，界面是通过机体上的按钮来操作的。因此，界面中的反馈主要会有“选中”和“按下”两种效果，其操作模式比较类似于PC平台游戏。在PC上，我们使用鼠标进行点击、拖动等操作，相关的界面反馈就会有“鼠标经过”和“鼠标按下”这样的情况。比较类似于该游戏中“选中”和“按下”效果的。

 

那么，我们结合上述三点，根据具体的示例，来看看《动森》是怎么将界面动效有效的融入在游戏中的。

 

一.《动森》中的反馈动效。

这款游戏拥有可爱呆萌的画风，因此很多动效都带有Q弹的动画风格，在反馈类型的动效里，这一点表现的尤其明显。比如在“手机”界面中的图标反馈。每选中一个图标，这个图标就有一个上下浮动的动态效果。这种动画不是图标整体上下浮动，而是拆分了元素后，每个元素有不同的运动方式。它们的运动曲线也被设计得富有弹性，符合了游戏整体Q弹的风格。如下图所示。

这种反馈比僵硬的把图标放大一定比例，或者整体浮动循环都要灵动很多。应该注意到，在整个游戏里，每个被选中的控件右下角都有一个来回运动的小白手，这算是一种通用的“选中”提示动画。但是同样应该注意到的是，这款游戏中的选中反馈并没有满足于这种通用的动画，而是在每个选中的控件上都设计了特有的动效。手机界面上的图标动画算是其中一种。

 

除此以外，按钮上的提示反馈也设计了特有的动效。如下图所示。

在领取里数的界面里，进入到某个“成就”，然后选中得到nook里数下方的按钮时，就可以看到这种按钮上的选中提示。它是斜条纹的横向移动动画，能以比较明显的方式告诉玩家，这个按钮目前处于选中态。斜条纹本身作为一种常见的纹理，也有醒目和“特殊”的含义在里边。

 

类似的，在一些被选中的条目和大型按钮上，结合了这两种表现，既有拥有富有弹性的动画图标，也有斜条纹动画的按钮，如下图所示。

在ATM机的打开界面中，选购物品之前，会先进入一个特别物品选购的界面，这个界面正中偏上有一个硕大无比的按钮，当选中时（默认就是选中）这个按钮会有非常明显的反馈动效，这个动效就结合了动态的图标以及运动的斜条纹动画。点击它进入到商品选择界面后，每个被选中的商品条栏，除了左侧白色的小手，游戏内通用的选中提示动画，以外，每个条栏的背景都是运动的斜条纹动画。由此可见，在这款游戏的条目或者按钮类中的选中态提示是被统一规划为同一类型的，这种统一性的规划也保持了玩家对同种类型提示的认知。

 

除了Q弹的提示类型外，这款游戏还有一种结合了Q弹动画的“喷溅”效果。这种效果在控件动画中一闪而过，一般是由呈喷溅、辐射状的图形形成的动画，所以这里就叫它“喷溅”效果。比如在背包界面里，选中某个物件后弹出的菜单选项中，在选项文字的后层，会出现一个黄色的条状物。选中这一项并按下按钮的话，这个条状物两侧就会出现放射状的图形，同时有一个呈发散状的反馈动画。如下图所示。

这种喷溅效果并不是对液体的模仿，而是一种类似漫画中的速度线一样的表现，是为了体现这个选项被选中后的一种力量感。事实上，我们在进行这种操作时，看到这样的反馈动效，的确会有一定的力量感。这种感觉并非硬核写实的那种硬碰硬的力量，在这种画风里，我们感受到的依然是一种统一在Q弹风格中的感觉。产生这种感受的原因无非是两个：一个是原本图形元素的画风，整个动画过程中出现的图形都比较圆润，色彩也很温和；另一个是，这种动画的运动曲线本身也比较柔和，只是在恰当的时机互相进行了结合，组成了这种特殊的节奏感。

 

类似这样的过场图形元素还有很多，比如表情环的出现动效，以及表情被点选的反馈等，如下图所示。

纯粹的反馈动效基本上是这几种，其他的一些含有反馈功能的动效在很多情况下被融入到一些转场和特定的细节里，更多的是起到一些连接和表达的作用，我们会在下文提及。

 二. 《动森》中的连接动效 

这款游戏中的连接动效分为几种，一种是弹窗的出现；一种是全屏页面的出现；还有就是各个操作之间的转场。

①弹窗的出现。弹窗在这个游戏里主要表现成气泡的样式。可以说很多浮动类型的框体，在这个游戏里都以气泡的样式存在。

以背包为例，玩家打开背包时，游戏人物会原地站立，一只胳膊抱起，另一只胳膊支起下巴，然后头稍微上扬，眼睛看着斜上方，整体做看着气泡的思考状。在人物转变为这个姿势的同时，背包弹窗以一个从无到有冒出来的动态过程进行展现。从这个过程中可以很明显的看出来，这个弹窗的打开行为被游戏设定为玩家的人物在进行思考，而背包则是人物思考时的气泡里的内容。这同样也是一种漫画式的表现方法。巧妙得通过“思考”的形式展现了一个弹窗界面。我们要说的弹窗出现动效，就结合了这种设计。弹窗本体是一个大气泡，那它的出现过程必然是一个气泡冒出来的过程。在这个过程中气泡会有弹动，也会伴随有一闪而过的零碎图形动画。同样的，在转场完成后，弹窗关闭之前的这段“静止”状态中，气泡也会模仿真的气泡，有不停的变形循环动画。整个的过程如下图所示。

下图是以帧频30截取的序列帧，能够很清晰的看到整个气泡的展开过程。（以Z字型顺序阅读）

先是在人物的头顶出现几个零碎的很小的圆形气泡，接着会有一个小气泡逐渐放大，放大至最终弹窗底图大小后，进行回弹动作，在最大尺寸的时间点附件，会“炸”出一些零碎的小气泡，这些小气泡很快就消失。等这一套动作完成之后，整个弹窗的入场动画就完成了。这是一个很典型的模仿真实气泡（也可以理解为云团）膨大过程的动画，而且根据美术风格融入了一些动画片式的表现手法。如果仔细看得话，会发现这个界面相关的一些小控件，比如说气泡左下角的“铃币”、“服装”以及画面右下角的“关闭”和“选择”按钮，都处于微弱的持续变形动画状态。这些都统一指向一个设计理念：这些东西都是柔软的物体。这一理念和弹窗的入场，所有的那些点击反馈动效等，对这个游戏的美术风格来讲，都是一致的而且是有机的组成部分。

 

②全屏页面出现。该游戏的全屏页面有三种出现方式，一种是扩大式，这种转场通过一个主要图形从画面中央扩大，而后覆盖满全屏的方式刷新页面。比如在“手机”中打开某个图标，开启“地图”之后的转场，如下图所示。

这个打开“地图”的转场过程，由原“手机”面板填充为纯色开始，该颜色也是“地图”界面的底色，逐渐扩大膨胀为全屏。与此同时，原“手机”中的“地图”图标消失，重新从画面中央渐入出现，伴随一定角度的旋转动画。这个动画中也出现了“喷溅”式的外围图形动画。这个“喷溅”恰好配合了“地图”图标重新出现后的弹动动作。这一切动作完成后，“地图”图标渐出消失，伴随放大动画，“地图”界面中的控件接着渐次出现。整体上构成了一个有始有终，渐次错落的转场动画。

同样的动画也可以在别的打开后为全屏的“手机应用”中看到，比如“图鉴”的打开过程。如下图所示。

 

另一种是刷入式，这种可以认为是扩大式的一个变体，无非是新页面刷新进来时的图形运动方向为从下到上。比如说“工作台”界面的入场动画，如下图所示

玩家在工具台上制造物品之前，会先进入到“工具台”界面去选择自己要制作的物品。这时会打开“工具台”界面。与从“手机”里打开的全屏界面不同，这个全屏界面是由从下到上波浪形的遮罩刷新进来的，序列帧如下所示。

通过所提取的序列帧，可以很明显的看到这个动画的结构是由波浪形的入场和界面内控件渐入两个部分组成的。除了整个背景图形的入场方向以及形态以外，和前面提到的扩大式界面并没有很大的不同。

这种波浪式的动画不仅是在这种情况下应用，在该游戏很多地方的动效里都可以发现，如下图所示“手机”新增“应用”时，“应用”图标的出现动画。

这种波浪形态的遮罩，可能跟这款游戏里关于“海岛”的设定相关，通过海浪的形态，结合了游戏世界观的相关元素。

 

还有一种是渐入式，这种的比较直接，可以理解为直接进行透明度变化，没有图形的某个方向的运动。比如玩家在自己家里时，打开“仓库”界面时的转场。如下图所示。

这些全屏页面的转场动效各自不同，是因为每种转场都有其设计目的：

扩大式的转场，出发点往往有图形化的元素，这些元素更适合去做一些动态变化的表现，因此用这种出发点开始变化一直到变化结束落到最终的全屏页面的方式，更能表达出有来有去的“衔接”。玩家点击界面某处，就从某处开始发生变化（第一段动画），衔接着这个变化的是即将入场的界面扩大式入场动画（第二段动画），这个动画结束时，界面的入场也结束。一以贯之的以时间为线索，将玩家的视线始终锁定在操作流上；刷入式的转场则是切割掉了“来处”的扩大式转场。因为这种类型的转场往往缺乏图形化的出发点，在本文的示例中，出发点只是一个由文字和纯色衬底构成的按钮。这种按钮比较难以作为扩大入式转场那样更生动和有机的连续变化动画的起点，转而使用衔接性没那么强的“半个”扩大式衔接动画，即在玩家操作后，没有触发点的动画，而是从即将入场的界面上直接开始后一段动画；最后的渐入式转场则更加缺乏“第一段”动画所需的图形素材，是直接进行硬件按钮操作之后的切换，界面上只有一个轮廓图标的指引式图形。这种切换方式实际上衔接的是玩家在主机硬件按钮的操作和游戏画面。在这种情况下，渐变式是最不会因为花哨的转场而分散玩家注意力的界面衔接方式。

 

③各式转场。

该游戏中的场景和界面中都有转场。

场景类的有类似界面上刷入式的转场，如下图所示。

玩家在自己家里时，可以通过按键进入到“摆设模式”，以便方便快捷的对家里的家具和摆设进行移动和微调。在进入这种模式的前后，会有一个转场，就像横向的一列列墙纸被渐次揭开和贴上。这种图形变化也贴合了“摆设模式”中类似于装修的功能。

还有一种场景类的转场，模仿了老式动画结尾的黑场效果（如下图1），即一个带不断缩小的圆形镂空的黑色遮盖层覆盖住原先的场景，等镂空完全缩小至消失后重新放大大画外尺寸，露出新的场景。如下图2所示。

这种转场方式使游戏带有一定的老式动画调性，也是这款IP延续至今的动态表现手法。在一些较为特别的场景下，这个转场还会变成别的颜色，加入别的动态元素，如玩家坐飞机离开岛屿时的转场，如下图所示。

场景中的机长和机场工作人员互致敬礼之后，就开启这个转场，然后会有一个“DAL”标识的航空公司图标，接着就会进入到“小飞机”loading，等loading结束后，这个转场就进入到新的场景去了。这个部分较为特殊，会放在“表达动效”里详细说明。

界面的转场有很多，基本上都用到了动画演绎的手法，如下图的“领取里数”界面中，领取里程碑奖励的切换效果。

在里数界面中，顶部所示就是里程碑奖励的状态，当达成某一个里程碑时，相应的徽章会变换设计样式，并会有一个晃动的循环动画，按手柄上的“+”按钮后，顶部包括了这些徽章图标的条栏会下拉，同时“地面”从画面下方上浮，与上方的图形“相碰”后形成新界面的背景。在这个过程中，这些徽章也会在动画过程中变大。这就是从里数的主界面转场到徽章领取的转场。提取后的序列帧如下图所示。

这显然是一种“有始有终”的转场动画，它的主要作用就是使两级界面无缝衔接。类似还有下图所示的手机界面进入服装设计界面的转场，类似于扩大式的动画，但没有全屏。

这三大种连接动效大部分都通过动画演绎的方式，将前后两个需要衔接的界面或者场景有机得衔接在了一起，不仅考虑了界面之间的衔接关系，也考虑到了相应的图形元素中的动态合理性，结合整个游戏通用的富有弹性的动作，使这些动效不仅起到了相应的功能性作用，还融入到了整个界面设计体系里。虽然看起来简单，但都有着细腻的思考，其设计思路非常值得学习和参考。

 三.《动森》中的表达动效 

 

《动森》中用了很多动画式的表现手法，游戏本身也是卡通式的画风。它的界面动效就建立在这两者基础上，很多功能性的表现并没有落入窠臼，而是有效且生动得体现着它所要传达给玩家的信息，并深入结合了游戏叙事。其中最有趣的地方莫过于对游戏中发生的“故事”的体现。

 

比如，在玩家离开自己的岛屿，去到野生岛或者朋友岛屿之前，会去机场搭飞机。当飞机即将出发时，机长会出现在机场的闸道口内，向柜台上的服务员互致敬礼。这是场景里的细节，而且不管坐多少次飞机，这些动作都绝无遗漏，一遍一遍不厌其烦的演绎。在这些动作完成之后，一个我们在前文中提到过的特别转场就会出现，一个带不断缩小的圆形镂空的蓝色遮盖层覆盖住原先的场景，等镂空完全缩小至消失后出现了游戏内航空公司的logo。有趣的地方在于，游戏内虽然省去了飞机起飞的画面，但留下了发动机发动的画外音效。伴随着发动机的发动和轰鸣，logo中的小鸟居然跟着挥动起翅膀。接着就是loading界面，此时的loading不同于普通版本，是一个小飞机穿梭于云朵之中的循环动画（如下图1），而在普通版本中（如下图2），画面右下角是一个浮动的小岛，岛上有摇曳的椰子树，岛下水面还有波纹和浪花。

试想一下，这些动效都是必须要有的吗？

 

如果我们有这样一个界面，界面上写着“乘坐飞机”，点击这行字后出现一个普通的loading，然后就到达了目的地。一样可以完成整个操作，游戏内的目标“乘坐交通工具去往某地”也依然可以完成。但是拿这种情况去对比一下《动森》里乘飞机的过程，我们会发现，这种简单的设计好像少了点什么。

 

少的那部分就叫做“情感化”设计。

 

好的情感化设计就应该使自己融入到整个游戏的“故事”当中，当作视觉化叙事的一部分，而不仅仅是几个框体，几个按钮，让玩家点来点去，完成一个抽象的任务，去获取某个虚拟的物资。

 

在游戏里，所有的东西都是虚拟的，但人在使用游戏的过程中所产生的感受却是真实的，一个更好的感受其实才是更好的体验。当你在游戏里感觉到一个被认真讲述的故事，感觉到人性的存在，而不是机械的操作时，这种体验就接近完全了。我想这也是这款游戏能够俘获那么多玩家的最重要一点原因。

 

该游戏还通过哪些界面上的动效给我们讲述小岛上的故事？有很多细腻的地方值得注意。

如下图所示的换装界面里，当玩家换装完成，退出界面时，其所搭配的几个服装部件，会以图标的形式排布在画面中央的人物周围，并且向周围移动。它们的动画被设计成“升格”的样式，也即放慢速度播放而后加速离开并消失。

事实上，这种形式在这个穿衣功能上不是必须的，无非是提示玩家这次换装都穿上了哪些衣物，但这样的动画给了玩家一个电影化（或叫动画式）的形式感，富有视觉冲击力。可以被认为是用动画讲故事的“好姿势”。

 

关于换装，该游戏还有一种快捷的方法，那就是使用“魔法棒”，像替换手持工具一样，在人物周围打开一个环状的菜单，用摇杆就可以快速更换服装，如下图所示。

这个环形的菜单界面布局与工具环及表情环一样，但是它的出场动画跟后两者并不相同，并没有使用系统界面动画中通用的带“喷溅”样式的弹动式入场动画，而是伴随人物挥舞魔法棒的动作，以顺时针的方向逐个出现。每个菜单项的图标底板也设计了与工具环和表情环不同的样式。多彩的配色加上旋转的循环动画，构成了这个界面整个的视觉语言，统一指向一个概念，那就是“魔法棒”。可见这个小控件的设计在视觉和动态上都被设计得很有目的性，以求去讲述关于“魔法棒”的认知。

 

此外，游戏里也有不少对场景化的模拟，利用界面的视觉设计和动态设计去替代原本也可以用3D画面表达的信息。前边我们讲到，玩家去别家小岛游玩前乘坐飞机时，并不能看到直观的飞机起飞等一系列3D画面，而是用画外音配合小鸟图标的动画来替代表现，不仅有趣，还节省了一定的3D成本。与此类似，在玩家等待其他玩家到达自己的小岛游玩的过程中，也有一系列的的仪式感表现。这其中，其他玩家乘坐飞机进入小岛的“进度”则是利用界面模拟现实中机场信息屏的样式去表现的，如下图所示。

在这个界面里，好友从自己小岛的机场出发到达自己小岛的过程，用了这样的画面：中部偏上是模拟机场的信息屏，中部偏下是一系列有飞机图标的圆形，底部则是由分布在两侧的两个岛屿轮廓图形以及海面构成。当好友的飞机逐渐接近自己小岛时，信息屏上以信息牌翻转的形式展现“航空公司”、“乘客”以及“出发地”信息，底部的圆形从右侧的小岛方向逐个亮起直到“即将到达”的绿色圆形亮起。整个变化过程虽然简单，但足够有趣和生动。

 

这是一个用形象化的方式展示一个进度的界面，里边的动态效果起到了至关重要的作用，同样的，抽象的逻辑信息也被用同样的方式去做了表现。

 

比如在下图的“里数”界面里可以看到，玩家所要达成的目标被清晰明确的表现出来，所用的动态表现方式不仅包括逻辑性的表达，也包括形象化的情感化表达。

进入到这个界面时，会看到矩阵式排列的卡片。这些卡片是各式的任务目标。当玩家达成任务目标时，卡片上会出现“获得里数”字样的紫色横幅。这个横幅上会有动态效果提示，提示玩家这是可领取奖励的状态：循环弹动动画和闪烁小星星。按A键后，卡片就会有一个放大的转场，进入到“详情”界面。在“详情”界面中依然会有上述紫色横幅。不同于小卡片，这张大卡片上会有更加详细的信息，尤其是横幅下方连起来的圆圈。这明确传达给玩家一个信息：这是一个连续的任务。当再次按下A键领取里数后，会有一系列动效提示玩家更多信息：横幅消失，露出横幅后层的一个绿色带数字的小控件，出现一条虚线，这个小控件被用虚线连接着下方的某一个圆形（本例中为第一个）。被连接着的圆形上有个“目标感”很重的小旗子图标。同时底部的圆圈们会放大。这时小旗子图标会消失，出现盖上特定的任务图章的动画。接着就会在下一个圆形（本例为第二个）上出现绿色的圆环，接着它和绿色小控件会被一条虚线连接起来。这一系列动画完成后，就出现一个新的弹窗，弹窗上显示获得的头衔和“领取里数”的按钮。弹窗底部有一个狸猫和画着路线的地球的图画。点击按钮后，会有一个狸猫在地球上沿着路线跑动，直达一个有小旗子图标处停下的动画。关键的序列帧如下图所示。

这个操作过程通过动态效果切换虚线的连接为玩家展示一个目标更新的信息，通过狸猫跑动的动画使获得里数的操作更加有仪式感和成就感。是逻辑性表达和情感化表达的结合。可以看作是动效在游戏界面中表达作用的典型体现。

 

这些就是这款游戏中表达式动效的部分，实际游戏中还有更多，不再赘述。

 

最后，动效是界面的一部分，界面是游戏的一部分。同样的，组成完整体验的，跟动效关联度最强的，恐怕就是音乐和音效了。如果你注意的话，这款游戏中每个不同的场景是有不同的白噪音的。人物踩在不同的地面上，也会有不同的脚步声。每个界面操作，每个动效都对应着特有的音效。这提醒动效设计师，在对动效进行设计时，不光要顾及“视”，还要注意“听”的元素，毕竟对我们人类来说，视听一体时才会有更加真实的感受，游戏产品的体验才能更深入内心。

 

在整个分析过程中，或者对体验过这款游戏的玩家们来说，可以很明显的觉察到一个特点，那就是该游戏对细节的处理非常有特点。在可要可不要的地方总会有令人心动的处理。这些处理在技术上未必见得是复杂的或者想不到的，但总会有恰到好处的效果。试问，相比这款游戏，市面上大有使用到更复杂技术的游戏，也更有用了华丽的动态效果的游戏，更有很多号称次世代的，画面无所不用其极的游戏，等等。但为什么在这些游戏里，玩家很少能有“体贴”、“细腻”的感受，乃至于感受到人性的部分？是因为技术的原因吗，还是玩法缺乏创意？

 

我想都不是。

 

游戏的这个部分，有太多需要融合界面设计，动态设计，让游戏的操作过程更加顺滑和顺应人性。靠堆叠光效，应用复杂技术，设计结构复杂的界面是达不到这种目的的。

还是上文提到的，每款游戏总会对自己构建的世界有所交代，这种交代方式离不开我们人类所使用的“讲故事”的方式。从远古时期开始我们就是用图形讲故事的物种，我们现今已经离不开图形化的叙事方式了。利用更加先进的技术，我们可以实现很多复杂的效果。但是讲故事的方式却没有太多变化。现实告诉我们，即便用了复杂的技术，却抛弃讲故事本身，就会有失败的体验。

 

有太多的游戏只是把游戏操作，界面设计当作是模式化的操作的一部分，将所谓的“世界观”仅仅作为游戏的皮相去处理，没有认真结合游戏本身所需要交代的情节，不去用我们所知的方法用心引导玩家沉浸到故事中去。才会制作出千篇一律的，没有感情的，批量生产的工业化产品出来。

 

是时候认真考虑这个问题了。