公司介绍吉比特成立于2004年3月，专注于网络游戏的研发和运营，于2017年1月在上交所主板挂牌上市，股票代码603444。公司多次被评定为“国家规划布局内重点软件企业”、“国家火炬计划重点高新技术企业”，并获得“中国互联网百强企业”称号。雷霆游戏作为公司的自主运营平台，专注于网络游戏的推广和运营，坚持“精品化”路线，重视产品品质及玩家服务，运营的多款游戏获得良好的口碑与较高的人气。截至目前，公司已运营了《问道手游》《一念逍遥》《摩尔庄园》《鬼谷八荒（PC版）》《魔渊之刃》《最强蜗牛（港澳台版）》《不思议迷宫》《地下城堡2：黑暗觉醒（安卓版）》《异化之地》《奇葩战斗家》等多款游戏。“雷霆游戏”为吉比特旗下游戏运营平台，目前已建立了包括游戏品牌建设、媒体宣传、活动策划、合作渠道拓展及后续客户服务等一整套完备的运营系统，具备较为出色的游戏运营能力。“雷霆游戏”自成立以来，一直努力构建游戏与文化传播之间的良性关系，并且始终坚持传播优秀文化、服务大众的理念，不断挖掘和发现有想法、有创意的好游戏，满足玩家的审美趣味和精神文化需求。代表作品▲一念逍遥▲问道手游▲摩尔庄园▲鬼谷八荒▲奥比岛：梦想国度招聘职位01设计向资深GUI设计师

哈利波特IP最新3A

动效设计讲究适可而止。这其中，什么需要动，什么不需要。什么时候需要，什么时候不需要。即where

设计是相通的。动效设计与其他形式的设计至少在一个方面比较相似，那就是设计过程中的主次关系把握。如果对此没有比较好的把握能力，你的作品极有可能会表现出下边两种主要的问题：1.细节突兀，乱；2.巨细无关，怪。动效中的主次关系与静态视觉层面上的类似概念可能会有重合，但未必都指向同一个元素。因为动效中的主次关系判断，是通过“力的来源”来衡量的。即整体运动是由谁驱动的，或者主要是由谁影响的。如果你的动效细节比较突兀，整体上显得比较乱，通常是由于主次关系判断失误，或者具体的动作设计没有表现出图形元素间主驱动与被动的关系；巨细之间没有显而易见的关系，也显然是驱动和被动的表现出现偏差造成。接下来，我们分别以一个2D人物的循环动画和一个界面入场动效为例来说明这个问题。这两个“动画”都有“多个元素构成”和“元素间有主次关系需要”的特点，因此非常适合用于说明此问题。示例1，2D人物的摇摆循环动作。如果有这样一个人物，想要设计它的左右摇摆动画。从图形的角度上来说，它的摇摆动作应主要由中部的圆形“大头”驱动，一个主要的原因是它看起来比较重，躯干是无法驱动它的。所以它就是本动画中的主要动作元素，可以将它的摇摆动作首先设计出来：然后再根据头部的运动，将合理的腿部协调动作设计出来。如下图所示，腿根部显然是连接头部的，因此两腿都以腿根部为轴做左右旋转运动：以相似的逻辑，将胳膊的伴随运动也设计出来。与腿部不同，胳膊要轻一些，因此摇摆的幅度更大：如果头上还有其他附属物件，如下图这样显然不太合理。首要原因是它虽然跟随头部运动，但它本身的“物理”状态不受头部影响，因此显得僵直、假。要改善这一点，可以为它设计伴随头部左右晃动而产生的晃动动作：以上总共三组动作：头部、腿、胳膊、呆毛。其中头部为主要运动元素，而其他的部分全为次要元素，后者的运动可视为受前者运动驱使。另外，如果在每组中间增加少许的时间延迟，可促使整体动画更加生动。如果各组间的运动过于协调，反而显得生硬，增加时间错位一方面是客观如此，另一方面也增加“随机”性，从而显得生动。示例2，一个界面的入场动效。假设有这样一个界面，需要为它设计入场动效。此例平面设计特征非常明显：圆盘和人物是这个界面的主体元素，而三个横条则是圆盘上的附属图形，人物也可看作是圆盘的附属。按照这一显著构图结构来进行动态设计的构思时，思路就会非常清晰了。作为主体的圆盘应该首先出现，并且“释放”出其他的元素。这至少指明两个设计特征：1，圆盘的运动特征决定其他元素的运动特征；2，圆盘与其他元素的时间先后关系。所以第一步就是设计出圆盘的入场动画，这里依据它本身的图形特征，做了两层有时间错层的缩放动画：第二步是圆盘“释放”人物的动画，这里将人物与圆盘的平面关系进行了解释，注意这里的人物缩放中心与圆盘不同，人物结构决定其重心不在视觉中心上：第三步就是加入横条的动作。这里的设计为通用条目动画：横向上从左到右，这是为了符合圆盘的缩放扩张方向；纵向上以从下到上的顺序进行设计。主要原因是，这个界面的构造特征是上轻下重，即纵向靠上的物品看起来像从纵向靠下逐渐垒起来的。这时候如果将横条的顺序改成从上到下，就会有违该界面整体上表现出的物理特征：本例的动态设计样式是本例界面设计样式可能性中的一种。如果以不同的逻辑进行拆解，可能会有别的方案。从纯设计层面上讲，只要是逻辑合理，符合动画设计原则的都是可接受的方案。动效中主次判断的原则，简单总结如下：首先，判断主体运动元素。即整个动态是由画面中的哪个部分决定的，或者驱动的，先对这部分进行动作设计；其次，根据主体运动推断随动元素的运动。主体元素的运动决定，或者影响了伴随元素的运动。做完主体运动，就比较方便推断出伴随元素的运动，根据前后者之间的具体关系来进行细节设计；最后，调整主体和伴随这两者主次的时间关系，通过简单的时间错层即可设计出相对合理的动画动作。更进一步的，在以上基础上根据特有的设定，判断是否将相对通用的动作异化为特有风格。这一点通常通过添加特有伴随元素，或者对动作曲线进行微调来进行。这里是COTA五号，关注我们，共寻设计本质。本文完。

《极品飞车》是EA旗下年代久远的一个IP，属于欧美三大游戏品类“车枪球”其中一个大类。《极品飞车：不羁》由Criterion

America，简称UCA）大陆上，通过运送各种重要的货物来使美国各地重新相连，创建起新的美国。游戏最初于2016年E3游戏展上公布，于2019年11月8日在PlayStation

当下，游戏界面动效的开发方兴未艾，加之岗位比较稀缺，因此很多人不太了解完整游戏项目流程中动效的特有开发流程，尤其在大型项目中，这一块尤其影响到工作效率和最终效果。但是每个公司甚至每个项目组又有各自的特殊情况，也就不可能存在一个放之四海而皆准的“标准的动效开发流程”。不过，动效自有其规律，这意味着动效开发流程其实是有一个基础的模型的。所有已经在运行的动效开发流程基本就是在这一基础模型基础上的“魔改”或者优化。我们即将要讨论的就是这个“模型”。如果讨论到的情况与你所面对的情况有比较大的差异，那说明你所在的流程很可能有问题，或者你的开发环境有非常特殊的情况。在此之前，需要理解在当下的业界环境中，动效这一岗位需要做的工作。在游戏项目开发流程中，相对标准或者大部分开发环境中的动效岗位，主要需要负责的工作，大致可人为划分为两块内容：一个是界面动效的效果设计，产出物一般是视频。以往还有高保真可操作模型类产出物，不过主流上以视频为主，我们称其为动效预演。另一个是引擎重构，即将设计好的效果原样复原在游戏引擎中。目前涉及到的主流引擎是Unity和虚幻4（虚幻5），少数厂商会使用Cocos和其他自研引擎等，根据实际情况会有比较大的差异。从这一现实状况出发，客观上动效设计师除了需要掌握设计能力，还需要掌握引擎内动效还原的相关操作技术。这两步相当于游戏界面设计师在PS等软件中产出界面设计稿和在游戏引擎中将其原样拼好（界面重构）。不过在条件允许的情况下，大部分项目中的游戏界面设计师一般不会被要求做重构工作。毕竟界面重构涉及到前端逻辑、节点结构等比较繁琐的问题，需要极大的沟通和理解成本，对设计师来说是一个不小的时间和精力成本。在成本、人力或者项管水平有限的情况下，一些项目要求设计师做重构的工作，看似节省成本，实际上造成一些隐性成本，总体上拉低了效率。因此很多项目会设置专门的界面重构岗位来衔接设计师和前端之间的工作量，以提高整体工作效率。简单地说，界面动效的预演产出物等同于界面设计师的静态设计稿，而动效重构则相当于界面重构产物。目前的动效工作并不总保持上述两线并行，这是受项目周期客观规律影响的。在效果设计中，动效设计师所设计制作的动效预演，并非只注重效果而不注重可落地性的“空中楼阁”。这些“设计稿”同界面设计稿起到同样的作用，那就是提前以最小成本让大家看到游戏运行起来时最可能的样貌。以及进行设计风格的探索和制定。在“空中楼阁”和“可落地性”之间，是对引擎中界面结构和运行逻辑的深刻了解。设计师需明白什么样的结构拆解是可能被实现的，什么样的效果是在可接受的范围内的。以这个基点出发才有可能设计出切实可落地的方案。而不纯粹是单纯的效果视频。在确保这一点的前提下，动效预演相对于直接在引擎内设计效果的效率优势非常明显：只需要界面设计稿的源文件就可以相对快速的产出一个操作流程效果。如果在引擎内直接设计，将会涉及到切图、程序逻辑以及版本打包等等流程，一整套流程下来涉及多个人力和时间上的协调工作，如果需要修改效果，整个流程可能还要跑一遍，这样的成本显然较高。这是需要项目前期花费大量精力在动效预演上的根本原因。我们可以将效果确定好之后，再跑成本更高的流程，相对快捷很多。因此项目前期动效设计的主要产出物就是动效预演。当动效和界面设计的风格趋于稳定时，动效设计师就可以着手将预演中的特定元素进行提取，制定出初步的动效设计规范，指导和规范后续的进版工作。当项目进入到铺量阶段时，有了这些既定规范的指引，无需再花费时间在所谓“风格探索”上时，就可以直接套用既有的设计类型，在引擎内直接还原。遇到少数特殊页面时，才会单独去制作预演，探索特定的细节风格或者操作流程。至此，我们以项目的整个开发周期为着眼点，可以看到动效进版流程的一个概览如下：上文提到，在游戏项目开发的初始阶段，动效的工作主要放在“动效预演”的设计和制作上。这样做的目的是用最经济的方式去预览最终的效果。项目初期的动效预演工作可以大概概括为以下图表内容：动效预演的目标有两个：探索动效的风格和制定初步的动效规范。如果界面视觉的迭代仍在继续，则始终围绕前者去做，直到视觉风格稳定。假设视觉风格趋于稳定，则这两步应该按照以下次序渐次展开：首先，探索动效的风格。这一阶段我们称为“第一阶段”，包括三步。第一步是最初步的工作，这时候你拿到了最原始、最初步的设计稿，并在这种初始稿件的基础上设计动效效果。此时主要考虑风格问题，即什么样的动效设计可以完美的延伸视觉设计要表达的情感，要营造的氛围等，属于“纯创作”阶段。可以比较少考虑最终的落地可能性，可以认为是一个复杂版本的动效脑暴。这一步的设计稿会经历最多频次的修改直到有比较满意的版本。与此同时，界面设计稿也逐渐铺开。按照正常的项目开发阶段，此时项目应该已经完成了最小玩法循环的验证（在有些公司里，最小玩法循环的验证在立项之前就应该完成），开始为项目定制对应的界面设计。最初的稳定风格版本的界面设计稿也首先是为最小玩法循环定制的。与此同时，在动效设计层面上，为了探索整体、系统性的风格，也需要设计出最小玩法循环的动效预演，这属于第二步。这一步的动效预演的特点：拥有完整的玩法循环，包括主流控件、主要转场形式、一般应包括全部高中低情绪界面。这一套预演应该为完整的视频，有时会为有特点的分支操作专门再设计预演，以补充完整的动效风格材料。这些材料为后续迭代和抽离设计规范准备了充足素材。下方视频就是一个最小玩法循环的动效预演，与实际项目相比还不是那么完整，但可以一窥“最小玩法循环预演”的大致样貌。第三步是第二步的打磨，如果认为第二步是扩展的话，第三步就是收缩。对明显不可实现的、明显损耗过高的等不经济的设计进行剔除。然后通过取巧和其他设计形式进行替换后，制作出完整可实现的动效预演版本。其次，梳理初步动效设计规范。在上述第二步和第三步过程中，动效设计师应同时有整理初步规范的意识。此时的设计规范只是个初步的雏形。不要妄想一次性整理出完整、无懈可击的设计规范。这一点和界面设计过程中逐渐产生的设计规范有同样的规律。但主要应该包括开头图中展示的一些基本元素。在整个动效开发流程模型中，我们将整理初步规范这一块工作，称为第二阶段。该阶段与第一阶段是交叉并行的。在这两个阶段都已经基本完成后，就意味着项目开始进入到铺量阶段。动效工作就会进入到快节奏的满需求状态。如果前期的工作流程在此时打磨到位，后续的铺量效率将非常惊人。应注意的几点：1.如果前期界面设计经常迭代、推倒重来，动效就需要重复以上工作。作为后置流程，动效需要时刻关注前序流程的完成状态以及需求流转状态，以便随时调整工作状态。2.项目前期通常是一个非常“无头苍蝇”的状态，需要来回修改很多设计，这在无论哪家公司都是存在的，不用将其看做太大的问题。毕竟项目的初始阶段，大家对具象化的东西，认知都还比较模糊，很多都还停留在想像中，实际产出的东西未必都能符合想像。再加上通过少量的用户CE等市场数据检测，也会通过搜集玩家数据来进一步改善。3.这一阶段如果持续过久，会导致非常严重的一系列问题。这可能透露出项目的设计者们没有明确的方向，有明确方向的项目往往会在短暂的混乱后迅速理清思路。4.动效预演的目的是寻找风格的可能性以及为最终落地做准备。设计样式与设计规范都服务于这一最终目的。脱离这一目的的任何行为都将是无用功。5.预演的设计和制作基本上集中在项目前期，中期与后期将不再是动效工作的主要工作内容。但一些特别的系统，如活动系统、BP更新等，在后续流程中仍需插入预演设计流程。6.项目前期的工作除了技术性的探索之外，还需要设计师与诸多岗位配合，打磨出适合自己项目的工作流程，这一打磨过程应在项目进入铺量阶段之前完成。否则会造成项目中后期开发效率的严重折损。7.预演的形式和内容都是根据项目、公司或设计师个人的实际情况决定的。主流上以AE等视频或特效软件制作预演，是因为在绝大部分情况下，这些软件的“效果VS时间”效率较高，如果设计师在某些特定的软件甚至是引擎使用上拥有同等或更高效率，则不必限于某些特定软件或形式。这里的流程指的是最小需求单位内的流程。这个流程是构成整个项目周期内动效开发流程的最小单位。如果这个流程一直没办法确立，将会导致全局更加混乱，效率更低。根据动效工作的客观需要，我们可以推导这一最小需求单位的流程模型为下图所示：毋庸置疑的，动效的工作需要以拼好的界面为基础来展开，因此动效的工作流程应该以“界面重构”的起始点为起始点。客观上每个界面都需要前端进行基础设置，并将界面设计师设计好的设计稿“进版”，整个界面进版的过程简称为界面重构。而后才能交予动效进行界面动画的引擎内制作。如果我们倾向于将整个流程设计为最高效的模式，那么上图所示的整个流程中，理想的情况下，拼界面应该由专人负责。原因在于：其一，拼界面需要将设计稿进行合理切图，这是一个需要理解设计稿和切图规范的工作，理论上界面设计师本人最了解这一工作，但通常界面设计师的工作侧重点不在此处，且较为繁琐的工作容易牵扯设计师大量精力，导致客观上并没有余力去高效平衡各项工作；其二，拼界面需要对游戏引擎有一些了解。但游戏引擎的功能庞杂，每个岗位的理解深度都是基于各自岗位的需求的。前端、重构和动效所使用的功能块面完全不同。这是个不可忽略的学习成本。为解决这一问题，通常会有几个解决方案，这些方案也可以看作是从低效到高效逐渐演进的几种模式：第一种是界面设计师切图，然后由前端进行拼接。这种模式好处在于切图的规范出问题的概率极低，我们会默认为界面设计师在这方面是非常专业的。但问题是前端对设计的不敏感，会导致界面还原度偏低。设计师一侧需要输出大量辅助材料，如标注图甚至是图层结构示意图。在后续的走查并修复还原度上耗费大量时间精力；第二种是由界面设计师或者交互设计师自己去引擎内拼接界面。这样做是对第一种模式的修正，界面和交互对视觉的敏感度高，可以大幅提升界面重构的还原度，但问题是需要两者花费时间去理解和学习引擎。并且在日常需求处理的基础上，额外增加了进版流程，会让他们的工作压力更大，这可能直接影响他们的单位时间产出质量；第三种是设置专门的界面重构岗位。这种岗位的基本要求就是既理解界面，拥有对界面设计的视觉敏感度，又具备比较熟练的引擎操作基础（仅限界面这一模块）。他需要具备界面设计师在切图方面的专业性，也同时需要具备前端在界面进版方面一部分的专业能力。是两者过渡部分的一个完美衔接。目前看来第三种方式是解决界面重构质量和效率的最佳解决方案。但很多公司限于开发和人力成本，依然大量驱使界面和交互去做拼界面的工作，这使得有些公司或者项目中的动效流程有较大不同。正如本文开篇所展示的动效工作流程模型所示。拼界面只是动效的准备工作，虽然其自身也要考虑还原度和程序逻辑挂接问题，但最主要的，那些视觉上不可见的，拼接的节点结构也会影响动效设计的表现。最简单的，当你设计为拆分了的图形被以一个单独切片拼到引擎内后，动效就需要等待拼界面环节重新拆分拼接后才能开始工作。这也是整个流程内加入“确认”环节的主要原因：在一定的条件下，需要打回重做。当我们预备建立一个高效流程时，就应该假设这种打回重做是频次较高的行为。此时如果不是一个专职的人员在执行拼界面的工作，那么他在高频次打回重做的过程中面临的不仅仅是大量沟通成本，还有极高的心理负荷。这对整体流程的提升是没有任何益处的。当然，如果客观条件限制，动效不得不经常与非专门岗位的人去沟通类似的问题，就需要考虑去建立符合自己实际情况的流程。比如，可以在界面重构开始之前就讨论好具体的节点结构，或者制作好动效预演，让大家直观的看到你所期待的界面层级拆分方式。甚至于，动效可以参与到界面重构的流程中去。但是本文依然倡导的是专人专事，这样有利于整体效率的提升。只有效率的提升，才能给各个垂直岗位留出足够多的时间去打磨出更好的质量。虽然每个环节的质量提升加总不一定等于项目整体的质量提升，但至少我们可以快速落地方案，也就为快速试错准备好前提条件。这也是整体项目取得较高质量或者获取市场成功的基础。另外需要明确的一个事情是，在每个项目的初期，尤其是在开发经验不足的团队中，这种基本的流程往往是不存在的。流程其实是靠打磨形成的。所谓的打磨其实就是依照理想的模型，在现实运作过程中去摩擦、沟通，通过数次失败逐渐建立的成本最小、效率最高的工作方式。动效本身就是一个沟通上下游的工作：需要去跟界面设计师沟通界面设计的含义、去跟策划了解整个系统的功能、去跟前端聊低成本的实现方案、去跟PM协调时间安排等等。在不同的岗位和环节中去协商，本身就对动效设计师的沟通能力有很大的要求。不仅要对流程设计的初衷，即高效，有所坚持。也要深刻领会各个岗位的工作特性、基本逻辑。更要能够长袖善舞，根据每个人的性格特性，去推进你的工作。当然，流程是否能够落地还要看各个环节是否因此受益。如果你的流程并没有让每个人感觉事半功倍，那不仅无法推进，反而应该考虑方案是否周全，以及这一切是不是大家协商的结果。动效预演设计并不是空中楼阁，而是为后续的动效工作做准备的。这些准备主要包括两点：动效风格探索和动效规范的制定。其中动效的规范制定又包括两个方面：纯设计向的规范与进版规范。纯设计向的规范包括当前所定风格中的细节。将感性的设计转化为理性可复制的元素，确定边界并且保证品质的稳定。这类规范根据项目的具体情况和设计组自己的习惯，具体形式多变，但大致上都包括以下内容：1.基本控件的动态形式；基本控件包括了常见的和通用型控件，它们的动态形式比较固定，因此可以指定固定的动态样式。比如“返回按钮”的进出场形式、弹窗、tip的入场形式等。由于这些控件并不一定是由单独的元素构成的，因此它们的动态规范往往相对复杂，会涉及其构成元素的动态次序以及对应的动态曲线等属性。2.基本曲线使用规范；与通用控件比较类似的，常用的和通用的动作曲线也可以作为一种规范元素。这样做的好处是可直接复用，从而节省重新探索的成本。但动画曲线的使用情境极为复杂，基本曲线的规范不可能完全覆盖系统内所有界面中所有元素的所有使用情境。这类规范一般只覆盖到通用的情境，可以与通用控件（基本控件）的动态规范混合制定。3.基本布局动态形式；界面的不同的布局形式本质上是由界面的交互功能决定的。因此类似的界面布局理论上有类似的功能需求。由类似的功能需求生发的动态设计也是相似的甚至是完全相同的。为这类相似的布局形式制定动态规范也是必要的。实际上，除了一些极为特殊的案例之外，游戏界面系统内的界面布局基本上是固定的几大类构成的，如顶栏构成、左右布局、左中右布局等等。通过制定这些比较通用布局的动态规范，可以覆盖到绝大部分的布局形式动态设计。4.转场形式与使用要求；游戏界面系统内的转场形式与各自页面间的跳转关系、功能表现以及情绪表达都有直接关系。这些都生发自原本的功能设计。因此一个游戏内绝对不止一种转场形式。但是一定是分属不同类型的，动效的设计规范就一定需要去严格根据不同的功能设计去制定对应的转场形式。不管是项目初期的铺量还是后续的延展，依据这样的设计规范，即可有理有据的展开设计。5.全局使用禁止项。在一些特殊情况下，设计师可以在设计规范的范畴外进行自由发挥，创造出特殊类型设计。典型的如活动类界面、BP的外围包装等。但整体上应该符合游戏本身的调性。这种调性是由游戏本身的美术风格、动态层面的曲线与节奏设计共同构成的。因此严格来说，这种自由发挥也是在设计规范的范畴之内的。但如何区分设计规范的边界，就需要指定一些全局禁止项。进版规范则根据项目不同有很大的差异。包括但不限于程序侧的节点规范（甚至有比较详细的节点命名规范）、材质命名规范、资源路径规范以及跟具体落地技术强相关的一些细则。通常来说进版规范不会形成规模庞大的文档系统，而是会被分散在不同职能部门的相关工作规范中。进版规范目的有两个，一个是保证设计还原度。这需要根据纯设计规范中提到的相关元素去把控。如曲线和节奏次序，在引擎内就需要严格按照设计规范提到的数值进行设置。另一个是保证项目的资产管理有序，提高基于此的工作效率。有些项目中会严格规定相关资产的路径，如贴图、材质和预设等都有固定的路径。这一方面会方便查找，另一方面，程序会设置一些固定的引用脚本，这里边的路径一旦发生改变，甚至只是没有按照规范去对相关资产进行命名，都会导致引用失效，从而报错。对应的，节点的命名规范也是类似的道理。既方便检索，又方便程序按照固定的命名方式去引用。即便出现问题，也可根据命名去定位问题。具体的规范制定是一个逐渐演化的过程。也是项目内部人员磨合的一个过程。从来不存在一个一蹴而就，瞬间完成的规范。因此在这种事情上，设计师们也应该有一定的心里准备，这是一个持久战，而且是需要足够细心的持久战。在动效开发流程中，一些成文（形成文档和详细的指导手册类）的设计规范可以辅助整个流程参与环节搞清楚品质的下限。但是脱离开具体的执行流程，一切都会成为泡影，所有的文档都会成为一纸空文。因此团队的协作过程需要约定俗成的流程规范。尤其在开发量极大，工作量极多的阶段，依赖成熟的流程规范，可以节省大量沟通成本，在保证品质的基础上，可以成倍提高团队协作效率和开发效率。具体到游戏界面动效的开发流程中。我们主要基于几个环节的客观工作流转的需要，制定相应的工作流程。这种流程在具体的执行层面有很大的不同。但是可以根据客观需要总结出可套用的模式如下：所有的版本内界面都是以界面设计稿为基础开始的。所以动效开发流程的第一步就是界面的进版。界面进版需要规范的切图，基于前端的基本逻辑架构去“拼界面”。高效的工作流程中，进版是由专门的岗位完成的。此后前端会检查界面进版后的问题，如有无节点影响程序逻辑等。检查无误后就会交给动效设计师去进行动效进版的工作。动效根据相应的设计规范或者现成的预演，将动效进版之后，再次交给前端检查。此时检查内容与界面第一次进版时类似，额外增加检查因为动效进版而修改新增的内容。偶尔情况下，在动效进版时或者之前，需要动效根据设计效果去给TA提请相关的材质需求。这一般涉及一些特殊效果或者项目初期的一般效果，如流光材质、粒子效果等。如果进版速度过快，TA验证相关方案不及时时，可以动效先行，待TA问题解决后再行解决剩余问题。前端检查无误后就需要运行游戏，进一步检查进版的界面和动效有无其他问题。这时除了涉及一些设计预期与实际操作体验之间的差距，从而需要一定程度修正设计方案之外的基本问题外，还可能涉及性能问题。但一般性能类的问题综合了前端、TA和其他技术类岗位的工作，且都一般集中在项目的前期。如果遵循固定的工作模式、相关规范，则越到后期这类问题越少，大家越能集中精力在具体的小细节修正上。整体的效率会越高，流程就会越来越通畅。如果此一阶段检查出相关问题，就需要将相关问题打回重新处理。还有问题就继续循环此一流程。以上流程的跑通，乃至于进一步形成流程规范，需要基于以下基本设施建设：1，标准的提单流程。这一点由PM全程掌握，且需明确各环节的处理时间与产能上限，以便据此安排环节时间节点。任何问题都可以提单进入相应环节的排期表，也即可以自动化流转需求与问题单。无形中提高协作效率。2，单个环节排期有序。这是非常基础的要求，单个环节内应按照需求优先级进行合理有序的排期，以便以此为单位处理项目级海量需求。如果单个环节的需求管理是混乱的，不仅需求处理人自己会手忙脚乱，还会造成整体项目混乱。3，验证类先行。包括效果方案、性能基准要求，都要在项目初期有完整验证，并提出规范和详细的要求文档。这些细则会成为相关环节有关规范的指导性原则。若与其他需求并行，在不影响基准效果或功能时，可滞后入版。4，遵守细则规范。流程的畅通是为提升效率的，但高效率不能基于低质量产出物，不然工作都是白费。高质量的流程化工作依托的正是各个环节上制定好的规范。举例来说，界面进版就至少需要遵守严格的切图规范、动效进版则需要遵守严格的动效设计规范等等。5，迭代思维。严格的流程规范并不代表每项任务都必须在单次流程中完全完成。必要的时候，需要根据实际情况优先完成一部分。可以是主体的部分，也可以是当前可以实现的部分。对动效来说，遇到的最多的情况是某些未经验证的效果暂时无法进版，那么就需要在客观条件允许的情况下进版一部分，这个部分往往是纯动效的部分，剩下的特效或者需要特别技术支持的、需要特别技术验证的部分可以进行切割后，在后续流程中再行进版。从整体上讲，这可以视作是动效进版的一个特点，即可能需要多轮打磨后，最终才能呈现理想的效果。这里是COTA五号，关注我们，共寻设计本质。本文完。

“在《咩咩启示录》这片虚假XianZhi横行的土地上，你要建立自己的JiaoPai，遍历大陆上神秘无比、风格迥异的各个区域，笼络一群笃信森林的忠诚XinTu，广散你的真言，最终一统全境，成为唯一的Zhengjiao。”该游戏由Massive

书接上文，我们继续讨论特殊设计的运动规律中的“风雨雷电”的第二个部分：雨。所谓雨，就是液态表现或者接近液体形态的表现，它们常常会以伴随元素的形式存在于动效中。这种形态的元素和“风”有相似之处，也经常与“风”混合使用。某种程度上，“雨”也是用来直观体现“风”的能量的。在本文的“雨”概念中，其运动元素的形态不仅包括字面意思的液体物质，也包括与这类物质运动形态有一定相似性的其他物质，甚至是抽象的图形，如任意方向飞溅的液态物质、闪动的火苗、柔和的云雾甚至飘动的头发等。它们都有较为相似的运动规律，从贴近液态本身的形态到扩展至其他物质形态的分布来分类的话，这些运动规律可以分为几种主要形式：刷、溅、飘（或荡）、散等。刷，指的就是将液态物质刷在一个表面上后呈现的运动过程。比如说刷在屏幕上：这种动画主要表现的是液态物质，或者粘稠质在被涂抹时的状态变化，主要规律是有柔和边缘的撕裂变化，以及存在与主体分开的单元。主要运动规律可简单总结为主体经过，撕裂状轮廓和溅落单元。根据不同的施力状况，有不同的细节表现。如快涂快出：粘稠质互动：类水墨渲染效果：等等。在实际项目实践中，设计师需要结合实际设计情境考虑。根据设计时所模拟的实际液态物质的性质不同，其运动状态是千变万化的，总体上遵守我们总结的主体经过，撕裂状尾巴和溅落单元规律。

本文，我们将通过几个“卡通”风格界面的游戏，来看看通常情况下这种风格游戏界面动效的设计都有什么细节差异和设计特点。统称为卡通风格的界面设计，其实还可以分为很多细分种类。以这些风格的界面为基础进行动效设计时需要注意的事项各有不同。这类风格的普遍特征是图形造型圆润，色彩明快。这类界面的动效设计的最主要特征就是弹动类动作，某些情况下还需要表现物体“精力充沛”的特点。比如，同样是面板的进出，在其他风格里的样子可能是这样：但在卡通类游戏里可能得设计成这样：卡通类的动效往往会有比较多弹动动作和预备动作。显得轻松愉快，富有活力。但是凡事不能一概而论，在特定的世界观或者美术调性下，这一原则未必处处适用，而且即便是比较相似的美术风格，弹动曲线也有很多变化。比如游戏《WonderBox》的整个美术风格，就很难说是哪种具体的风格，但我们至少可以判定它是一种“卡通”风格。它的一些动态设计就属于相对比较细腻的风格，也有一些比较收敛的弹动效果：类似的处理手法，可以在我们之前专文讲过的《动森》中看到：它的动效特点又有弹动的设计，还有一些埋梗设计，更是一种细腻的设计。总体上，卡通类风格游戏界面动效设计总离不开弹动设计。只在一些极具个性化的美术风格里才稍有例外。如今全球游戏市场非常充盈，基本上没办法找到很“单纯”的设计风格。你总可以在一个游戏里找到不同的风格点。比如说游戏《瑞奇与叮当：时空跳转》（RATCHET

、“索引”、“索引大全”、“搜索”、“找文章”、“目录”、“知识树”、“全部”获取。

《GranSaga》是一款由NPIXEL开发的Anime、Gacha、MMO游戏，混杂了二次元、韩式MMO以及抽卡扭蛋机制。其开发者NPIXEL是由曾经打造《七骑士》的班底组成。该游戏于2021年1月26日在韩国上线，2021年11月18日在日本上线，并同时包括安卓、苹果和PC版本。韩版与日版都有专门的语言和独有的配音。据说本作是曾经试图挑战某神江湖地位的游戏，因此设计了类似的游戏系统，并在每个游戏系统设计上都试图更进一步。但最终仍无法突破韩式MMO的窠臼，在短期的市场成功后，并未成为现象级的游戏。但是它的美术设计以及整个体验系统依然有亮眼的设计。尤其是独树一格的人物渲染风格。同时，其整体游戏画面渲染风格保持了韩式游戏的特征，如夸张的特效和过爆的画面亮度，有些场景中的色彩甚至焦掉。另外，看似开放世界的场景与玩法设计，实际上是类似线性的设计，并没有足够的自由度。围绕核心玩法所建立的外围系统设计极为复杂，玩家每日需要完成极为繁重的各类型任务（如下图）。游戏设计者为核心玩法设计了自动模式，也许在试图避免玩家繁重的战斗操作，进而更集中精力于重复的系统任务中。除此之外，围绕每个人物的各项装备与技能，都设置了极深的培养空间，需要反复升级、升星和突破。这些设计都让游戏的游玩体验到后期逐渐干涩无趣。从一些细节上观察，本作的界面设计有很强的的某神影子。比如一些边角花纹设计、字体的选择和同为古典西欧世界观的延伸等。但凭借强力的设计水准还是形成了自己独有的一套风格。第一眼印象，本作界面并不像如今所流行的极简和扁平化风格，但仔细观察后会发现，它却又不是传统上立体构型的写实化风格，而是更接近于浮雕造型。总体上，它可以被划归为西式奇幻类型的设计，界面上多用繁复的花纹和西式雕塑纹样元素做修饰，淡雅的黄金材质是这些修饰元素的主要材质。面板则使用的是偏蓝的淡色。这从色彩上讲是一种非常好的配色方案。游戏的界面系统非常庞大，仅仅从界面的种类和数量上来讲，这都是一款体量庞大的游戏。与同类型对比，本作在整体的美术量级上甚至更胜一筹。即便如此，界面的品质与风格也保持了高度一致，这体现出开发者高超的管理水平和工业化水准。另外，本作采用UE4开发，这秉持了韩国厂商在引擎选择方面的“革命传统”。游戏内的很多效果都体现出开发者高度熟练的引擎掌握程度。毕竟从虚幻早期版本时代就将其充分利用在游戏工业中的先发者，其技术优势还是相当明显的。毫不夸张的讲，仅仅从本作的动效特点上就可以一眼识别出这是一款韩国游戏，它的特效比重比一般游戏高的多，也有典型的“光污染”特性。在界面系统上比较通用的一类控件，就比一般的处理手段要多一层光效处理，如通用的提示和弹窗类控件：当只有比较小的视觉重度差异时，仅先从界面设计样式上做出差异，如下图所示的特别获取弹窗：而在下图的章节特别任务完成的提示流程中出现的小tip中，仅仅只是蜡封的样式，也会加上流光和粒子效果：一些更特别的情境，如下图所示的坐骑购买完成提示里，就是由视觉的异化和与之匹配的专有特效光组成，这种设计本身就代表这个行为是对消费行为的奖励：在通用的页签切换样式上，可以看到光效已经几乎完全替代了界面动效本身的动作，用来表现切换状态，某种程度上过于夸张：常见的需要特别强化的提示，如下图所示的玩家等级提升提示，在本身视觉设计比较强的基础上，增加了光效与结构设计：下图的BP等级提升提示也类似，与上图属于同种规格下的不同样式：涉及到局内或者其他付费项目时，界面上的特效设计逐渐开始更加夸张。如下图所示的公会战匹配画面，静态图形设计本身非常复杂。除了对决双方玩家的组队信息外，还有额外的繁杂图形修饰。动态层面上就简单很多，只是两侧控件组的缓慢靠近。焦点则集中在画面中央的“VS”样式上，而焦点中的焦点则集中在VS上的光效。整个匹配的张力实际上全靠这几层光效来进行烘托：接着上述流程，如下图，匹配完成进入局内之前的另一个画面中，3D人物的加入以及更多，占比面积更大的特效，将战前的氛围推进到更高的程度。这时界面本体的动态元素也进一步增加：此后就是一段即时渲染的过场动画，玩家可以通过几个戏剧化的镜头，展示自己的队伍迈向竞技场的画面。这是一段纯3D动画的过场：最后的结算也是一场战斗的最终高潮。如下图所示，结算流程中设计了较长的人物演出效果，这个人物是当场战斗的“MVP”，也是展示玩家自己对该角色经营结果的最佳场所之一。玩家会为角色投入大量资源，比如比较明显的服装和武器等。这些视觉效果不仅是玩家直接经营的结果，更是一种个性化的“炫耀”，能显著增强本局战斗的成就感。显而易见的是，结算中的界面部分被这些3D资产“压了一头”而显得不是那么耀眼，这与以界面元素为主角来烘托结算类界面成就感的设计有比较大的差异：在别的战斗形式的结尾，也会有类似的结算效果，根据其在游戏系统内的重度而有细节上的不同，比如一般的任务流程中的战斗，就是由简单的镜头动画和角色的pose组合的：在一些刷材料类型的战斗结束后，则增加了强调材料获取的特效：自然而然的，当战斗的结果是失败时，所有的效果都会相应减弱很多：仅从“公会战”的整个流程来看，其视觉效果是层层递进的，从“光效+微弱动效”到“微弱3D动画+更强光效+更多动效”，再到“纯粹3D动画”层层递进，一步步的把玩家引入到战斗情绪当中。这是一个节奏逐渐增强的过程，也可以看作是本作界面设计体系的一个缩影。之所以这么说，是因为我们可以在本作界面系统内看到明确的证据。在界面中普遍存在的切换和状态转换中，都大量利用了特效辅助。如下图所示的角色任务界面中，任务关卡的图标入场效果：以及下图所示的，视觉层级上很低的“骑士团技能”界面入场，都会为已经解锁的技能加上过光效果，更不要提背景上的粒子效果：对比上文提到的通用页签切换效果，本作增强视觉强度的方法，往往是通过视觉与动效结构化设计的方式实行的。如下图所示的“骑士训练场”中，不同等级的切换效果：而一些升级、突破和升星等效果，更是将特效的张力效果做到了很夸张的程度：消费类的提示效果，就会用几乎全3D动画的效果：这些现象显然就是一种系统化的，有规律的将视觉强度按阶梯式设计的方法。游戏的体验系统设计显然是从更高的维度出发去考虑的，而不仅仅局限在界面本身。这可以从刚才就一直在讨论的特点，即比重极高的特效使用，以及界面中与大量3D动画组合使用的效果看出。这些组合式的设计方式虽不新鲜，但特点在于大量使用，这种方式让体验系统不局限在二维层面上，而是使用更多的三维物料，从而使一些演出效果更佳。三维物料的使用，尤其与体验系统的结合使用，最重要的是“融合”后的一体化感知。这一点在本作中也是呈阶梯式分布的，最简单的就是3D人物演出配合相应的界面功能。如一些功能性界面中，就是以3D人物为核心构造的：上几图所示的“交换所”内几个界面，人物处于画面的视觉焦点，而玩家在界面内的每个操作，其视觉反馈最终都会落到人物上，不管是人物的演出还是一些简单的点击反馈。这其实都显然是为了将原本简单的点击操作“情感化”，显得你不是在操作界面的框体，而是与虚拟人物进行交易或者交流。本作类似的情感化设计还有很多，比如下图所示的每日签到奖励，是每天进入游戏看到的第一个画面，这个画面可以看作是由该NPC的演出所主导的：任务系统中的艾丽莎，每次都会为你敬礼：艾丽莎显然是游戏世界中负责任务分发的角色，在“王国任务”也可以看到她，并且可以通过点击人物来与她进行简单的互动：在服装系统里，画面一侧也有一个专门与打扮相关的NPC“值班”：在每日签到里送奖励的红发NPC也负责“灵魂能力”系统，而她其实是主线流程中一直陪伴主角的小精灵（形式上类似应急食品派蒙，但两者的比重显然不同）：在邮件系统里有个比较可爱的金发NPC，每次界面入场都会有欢迎表演：领取奖励后，她还会表现的很开心：本作中还有个与主要角色进行感情培养的系统，在该系统中可以了解他们的故事以及送礼物，相应的，它们都会有一些表演，如下图的送礼表现：另外一种大量存在的3D人物则缺乏表演，比如个人战界面中的玩家队伍：深渊回廊中的怪：讨伐战里的怪：相比NPC，它们的情感价值比较低，想必这才是它们缺乏表演的最根本原因。而下几图所示的无表演3D人物则发生在主要角色身上，可能因为这是角色相关的任务界面，本身也不太需要它们在此处“发力”：在此基础上，比较复杂一些的设计，则是加入一定的镜头语言。如下图所示的“召唤”界面入场，就是一个以人物为焦点的镜头推进动作：在公会中与NPC对话时进入子系统前，也有类似的镜头设计：还有类似前文所述的，各种战斗模式流程里的人物演出，也配合了各式各样的镜头设计：在一些与核心系统相关的界面转场过程中，镜头语言也非常多见，比如进入到购买坐骑的系统内时的镜头弧形推进：以及游戏的核心系统，角色相关的子系统跳转，每次进入和退出时，不仅有镜头推拉动作，还配合了每个角色的专有动作设计：在一个叫“GW技能”的系统内，玩家可以预览所有角色的所有技能效果。这个系统有“引诱”玩家为角色经营更多完善功能的作用，所以也被设计得非常华丽，基本上用到前述所有的设计手段：如果回到本初，观察本作在狭义概念层面的界面动效上，即严格意义的界面二维层上，会发现它的动态设计是极为收敛的。这是一种我们曾提及过的特别的设计手法：其动画动作不靠切实的移动，而只是通过巧妙的，短距移动或轻微变化设计来给人以“运动”的印象，此处暂且称之为“虚晃派”。这并不代表本作的动效本身很粗糙。事实上，较为写实的界面风格本身就不太合适做非常细腻的动效，尤其是结构化的动效。本作在浮雕式写实刻画的界面风格上，将二维动效本身也进行了阶梯式的划分。级别一，属于最简单的，为直接闪切。这类界面属于“层级低+结构拆解不适”两种的混合。如下图所示的BP弹窗入场闪切效果，就属于“结构拆解不适”类型：而下图所示的“背包”页签切换时效果，就属于“层级低”类型：级别二，增加透明度与位移效果。目的是暗示界面本身的强度级别更高。如下图所示的活动图弹窗：以及下图所示的高频操作控件，任务控件：和类似商城类的页签切换，归功于更多属性动画的处理，对比上文的背包中同类切换，它要显得级别高一些：下几图同理：级别三，属于较复杂的，可视为级别二的复杂版。本质上也是位移透明度等属性变化，重点是讲究结构化。也是通过更多属性的变化来暗示更高的层级，如下图所示的主菜单入场效果：以及以下多图所示的各类弹窗入场效果：商城中的banner也通过结构化的设计，模仿了升格效果，塑造出戏剧化的展示效果：界面本身有定向拟物设计时，动效层面基本上必须要交代对应物体的变化，下图的卷轴就有此意：下图的纵向卷轴也用了类似的设计：在图鉴系统的主界面中，表示分类入口的图标被设计成书籍样式，但它们的入场只是轻微的放大，这本质上是列表动态样式设计中的渐次入场，同时符合了书架上书籍如此排列时的物理结构限制，它们最多是纵深移动：又如下图的特别任务接取后的效果，本质逻辑与上述几图类似，只是这种向下伸出的设计较为抽象：下图所示的面板中，各个任务控件很像在公告栏上的挂件，其入场效果所设计的晃动也是对这种拟物的表现：下图的角色亲密度任务的列表设计，通过抽拉形式来规整信息，其操作过程的动态变化也是种典型的结构化设计：下两图也是典型的列表入场设计，它们通过随机顺序来丰富列表的动态形式：而下两图则是通过列表单元内部的动态设计来表现控件处于更高的视觉层级，其入场动态设计相应变得简单。不过却增加了界面中其他元素的动态设计，如顶栏的细节：下图是静置时，这种列表单元内的动态展示：利用二维元素表现空间结构时，会更依赖动态层面的设计。而且这种情况下的动效设计也是一种结构化设计思维。如下图所示的公会战系统中，选择某一战场的流程，就通过上下两个层级的纵深推进效果来表现：同一系统内，表现对抗情绪的动态效果也是同理：下图“灵魂能力”的切换效果，也是使用二维元素设计的动态效果，其目的也是模拟纵深空间效果：级别四，更复杂一些，有实体化交代内容，会增加很多特效辅助。比如下图所示的主线剧情回顾，就将剧情的每节设计成书的样式，而回顾每节内容时，表现在界面上就是打开书籍，这本身就需要较为复杂的拟物化动态表现：类似的拟物也出现在支线任务界面中：在另一个玩法系统“证明之书”也有对书籍的相关表现：在地图界面中，查看某地点详情时，也会出现同样的书籍效果：本作还有个“无限书库”的玩法，“书籍”在本作是一个重要的包装元素。级别五，最复杂的一级，除了增加很多特效辅助，还因为以三维元素为主体的原因而简化的二维元素设计，以及更多情绪化的内容表现。下图所示的界面中，其综合信息展示就主要依赖一个3D动画：相比之下，其周边功能的界面控件都较为次要，它们的动态设计也都较为简略：类似系统内的其他界面，其处理方式也较为类似：在其他的以三维元素为表现主体的界面内，也都可以看到类似的特征：另外，在额外强调情绪的界面中，动效设计都会讲究强大的冲击力，比如下图所示的“歼灭战”倒计时：以及“公会战”或“竞技场”中出现的开始提示：和类似于升级提示处理手法的特别活动提示：它们都或多或少用到了结构化设计、特效辅助以及富有冲击力的动作设计等设计手法。这些所列举的内容，其实也都是游戏界面动效中常见的设计手法。比较特别的一点是，本作中的界面元素本身的动作设计都会比较收敛，二维动画将大部分的重度表现让给了三维动画或者特效。本作有非常多3D动画，不仅包括刚才提到的，与界面体验系统相结合的3D动画，还有更多更纯粹的演出效果，有一些效果更进一步使用内嵌视频去表现。这在国产游戏中并不是见不到，而是在对应类型的设计上，很少见如此大量的投入。通常比较少用类似手段的主要原因，一个是性能限制，一个是考虑到包体。从最终效果来看，本作至少解决了大部分性能问题，这从侧面说明制作组有不错的技术积累。其中最引人注目的就是三维人物的特别渲染效果。如果仔细研究，会明白设计者对游戏角色的投入其实不仅限在美术层面，他们也为角色设计了专门的任务线，非常多的台词以及背后的故事。这其实是二次元游戏中对角色立体化包装的设计方法。毕竟只有立体的角色营造，才会吸引玩家针对角色的移情，进一步的才会进行相关的消费。在此基础上，每个角色的服装、武器和配饰等等，都会成为游戏的核心消费点。而我们看到的诸多3D表现，也都是围绕着这些核心系统设计进行的。比如说最引人注目的人物外观设计，就在消费的交互节点上投入了非常大的资源量：角色的换装是以三维空间为主体的：购买弹窗本身也几乎就是一个3D动画，华丽的箱子打开，角色模型在镜子前无限旋转展示，这种极为华丽的效果使人很难控制双手：另外，在改变妆容的界面中，玩家可以清楚的看到高模模型的人物细节，本作特有的人物渲染效果在此处毫发毕现：这个系统如果有足够的丰富度，甚至可以变成“Saga暖暖”。可惜的是目前本作并没有特别丰富的人物服装设计。围绕角色的是一些拟人化的装备元素，如武魂和武器，除此外还有配饰。这些元素都需要通过抽卡获得，并且每个角色都有元素属性，它们与怪之间有元素相克的规则，这似乎在很多类似游戏中都比较流行。游戏内区分角色和装备的一个方法是看它们的表现形式，作为角色展现的都是3D动画形式，而武器和武魂都是2D动态立绘，如下图所示：这些元素也都被当作角色去塑造，有专属的声优以及较为复杂的周边设计，在每期活动或者BP中，也会为主推它们而设置专门的开场动画：每期BP的主推元素也都会被制作成影片，用于游戏登录界面的背景：同一套元素还会出现在“任务系统”界面中，其背景是一段随BP期数变化的视频：这是一种全方位的声画体验营造。在局内的角色武魂变身就是一种非常具有冲击力的3D过场动画：遇到高品质的道具，其获取过程也不只是简单的弹窗，而会配上专属的内嵌视频和对应的2D动画：类似的内嵌视频也会出现在特定的系统入口，如“无限书库”的每个关卡入场处：3D动画在召唤系统内几乎登峰造极，视觉效果冲击力极强。与其他游戏的抽卡类似，根据前序画面表现可以提前预知所得的物品的品质，但本作的预知元素比较有趣，分为NPC不小心摔倒、抱猫和正常几种样式：抽取“月照石”时，动画相对简约一些，但也很有趣：正如上文所列举的诸多示例，本作通过综合声画效果的营造，塑造出一种非常夸张的视觉效果氛围。除了那些特效和丰富的3D动画外，主要还是设计师对张力的掌握，非常善于设计强力的打击感。如下图所示的局内“Break”效果：首先是从普通画面转换的过程，这不仅是一个“Break”字样的出现，还伴随镜头的转换和场景的聚焦设计：接着是持续的强力输出，这种强力效果主要靠画面中动画和特效的烘托，同时，不停的跳字和血条上的闪烁效果也是这部分冲击力不可或缺的组成部分：结尾的退场伴随着长时间伤害输出后的最后一击来完成：开头的镜头转换和场景黑化是漫画式的叙事画面，中间的持续伤害输出是对此前蓄能的释放，而最终的一击让这个长久输出变成了另一种蓄力，它本身是这段蓄力的释放。这是一个由动画、特效和动效共同构成的，具备完整节奏的张力释放过程，因此才有我们所看到的夸张但富有打击感的效果。但是，如果玩家角色的级别不够高，这段输出所造成的实际伤害比较低时，这种打击感会很容易变得“刮痧”，从而起到反作用。另外一些富有张力的效果主要集中在升级、突破等处，其设计特点也非常经典。如下图所示的角色升级，就是综合了场景特效与界面控件的瞬间爆开效果设计而成的：下图的装备升星，则首先用一段极其夸张的特效（可能还综合利用了内嵌视频）来表现卡片合成的过程：然后切换到结果界面，一些突破后的属性再以逐个爆开的样式展示（需要结合声音效果）：这个过程有两个主要特点，一个是直观的表现相关的概念，如直接展示卡片的合并过程、所突破的星级和属性从封闭状态爆开；另一个是利用特效承接动画本体的剧烈动作，让原本的动作冲击更加剧烈。这两个特点是构成整体效果夸张和富有冲击力的根本原因。正如前文所述，这些设计特点是本作界面系统中一以贯之的，我们可以从很多相似的细节上品味到这种设计手法。从美术表现力来说，这是一款非常优秀的游戏。制作组显然投入了大量人力物力在相关资产的设计和制作上，这种投入的效果是显而易见的。动态设计的丰富度与动作张力，视觉上夸张的冲击力，其背后所体现出的设计手法，都有非常多值得同业者学习的地方。但同时应该清醒的意识到，也曾是我曾经提出过的观点，我们参与设计一款游戏时，应该因地制宜的，实事求是的考虑自己所应解决的问题。不能简单的因为某个项目成功而去盲目抄袭它的某种美术风格或元素。特定项目的成败一定是某种天时地利人和的综合性结果，而并非某个特定的设计特点、设计亮点甚至只是某个效果导致的。也并非通过增强其组成的各个部分，再进行重新组合，就可以简单的收获玩家的欢迎的。其中的关键变量是很难清晰的展露的。游戏产品的成功是综合实力的某种配比的成功，靠精美的美术制作也许可以火爆一时，但持久的经营还是要靠良好的玩法系统设计。学其所长而并非盲目的照搬，才真正是这种有价值的项目所带给我们的意义。以上就是本篇全部内容。请务必备注加群，为防止造成骚扰，无此备注者默认不会邀请进群哦~

书接上文，我们继续讨论特殊设计的运动规律中的“风雨雷电”。与通过模仿现实中存在的事物，并将这些事物组合起来形成新的人造物的设计方法相类似，“风雨雷电”类的动效元素也是这样设计和利用的。最经常会用到这类元素的动效风格主要是魔法类、玄幻类风格等，在其他类型中也都少量的普遍存在。比如在游戏《黑帝斯》的武器状态提示里，就用闪光的效果来表示状态冷却完成的提示，这是一种此处归为“雷电”类的效果：显然这是一个糅合了魔法元素风格的游戏。因此这种类型的效果在该作的其他界面中也非常多见。在游戏《黑潮之上》的活动弹窗入场动效中，可以看到有环状扩散的效果，这种效果可以被认为是一种光辉，也可以看作是主体动作冲击后形成的冲击波，也即“风”的一种：在游戏《王牌竞速》中出现了很多幻彩流光效果，这种效果可认为是“电”和“风”的一种组合形态，它们同时遵守这两种元素的运动规律：本文所述的“风雨雷电”究竟为何？在游戏界面设计中应用时又都遵守哪些运动规律？接下来，我们将分开讨论这些内容。所谓风，是一种空气流动的效果。在游戏界面动效内进行应用时，大致上可以分为两种具体的形态。一种是直接的风，用来表达速度或者某种元素的运动形态；另一种是间接的风，替某个运动去表现能量扩散。它们常常不会单独存在，并且所起到的作用更像炒菜时所用的葱姜蒜一类的元素。不可或缺但并不一定显著。现实中风的形态往往呈流线型。这是因为它们遵守一种“流体力学”的运动规律。有“闲散”的微风，也有“暴怒”的强风。有缓慢的散布状态，也会有急速的扩散状态。在具体应用场景里，两种形态的“风”元素都要遵守它们原始形态里的这些“流体力学”特点。比如，我们常常在一些动态场景中，利用粒子效果去烘托氛围。此时通常用到“闲散”的微风和“暴怒”的强风两种“风”元素。如下方示例：

科技感动效设计的核心元素是“闪切”和“生长”。在以前的文章中，我们曾经强调并反复提及过这个道理。落到实际项目中时，这种基本的核心元素是如何被应用，我们将用一定的篇幅展开讨论。总体上会有以下这些内容：第一个部分，我们会讨论风格的杂糅设计，以科技感为核心的那些风格中，风格之间关系如何设计。当下的游戏市场中很少有风格极为单纯的游戏，你很难指着某个游戏说这就是纯粹的科技感风格游戏。它们都会混杂一些别的风格元素进去。将不同的风格调配得比较好，就能产生比较高级的设计，但如果对多风格杂糅的把控能力过低，其产物可能会被认为是“缝合”。而单纯风格游戏的存在稀少之现实，就客观上要求我们提升不同风格元素的混合设计能力。但这其实不仅限于视觉化的组合能力，其背后是对不同世界观设定的深刻理解。如果你只是研究图形上的组合，眼光未免短浅。第二部分，会讨论以同样设计逻辑展开，却会产生不同设计结果的现象。最终探究其中的设计手法。虽然共用一套设计逻辑，但你也很难找到完全相同的两款游戏，即便有些游戏之间风格极为相似。比如我们看到过很多以赛博朋克设定为世界观的游戏，它们之间的差异还是很明显的。如果再具体到界面层面，其设计更是千差万别。这些差异是如何产生的，如果你也面临相似的竞品，是不是能找到合适的切入点去做到足够合理的设计，同时又有差异性？这也是有价值的问题。第三部分及后续，会以特定的演变规律为线索，谈论分析市场上一些优秀的案例。本篇将开始第一部分内容。风格的杂糅设计表面上看是一种视觉组合工作。但本质上是游戏特定世界观的一种视觉外现。或者可以说，它只是表征，一种末端体现。如果舍本逐末，未免过于形而上，其设计产出物就会显得笨拙而且不成熟。对玩家来说，就失去合理性，这种缺失最终会导致游戏成为“缝合怪”。沉浸感丧失，最终牺牲的是玩家的体验。我们可以看看《地平线》是怎么做的。原始风貌和科技感这两种风格元素，从字面上看完全属于两个极端，该如何圆润的组合在同一款游戏中。如果接到这样的设计需求，你会如何考虑？《地平线》在界面设计上主要是通过两种设计元素来体现这种风格概念的：残破细节与抽象化设计。它们一体两面，相当巧妙。如上图所示，《地平线：零之曙光》的“任务”界面里，一些控件的材质和造型特征都体现出这两种设计元素的具体应用。遍布界面中的轮廓型图标就属于抽象化设计，虽然刻画形式比较写实但轮廓足够简约和概括；同时，一些控件的衬底中有不少类似笔刷的毛刺细节，其质感也更像是龟裂的泥板，或者涂抹之后干裂的彩粉表面。这些残破的细节都让人想起原始社会相关的元素。这两种设计元素很巧妙的各自体现了“原始”与“科技”的风格取向。但是又同时存在于同一空间内，糅合效果非常自然。如下图所示，在一些尺寸比较大的控件内，这两种设计元素的共存效果更加明显。本作之所以有这样的设计，并且还会有比较好的设计效果。直接原因自然是受益于设计师的水平。但根本原因在于恰当的游戏世界观表现，这种恰当正是基于设计师对游戏世界观的贴切理解。游戏所讲述的内容，简单的说就是主角发现了千年之前的人类遗迹，并通过这些遗迹的线索探索世界的故事。这里的“千年之前”其实是比我们的现实更未来一点的时代，拥有极为先进的机器人和AI技术，但这个文明最终灭亡，即便最终人类仍有幸存者，但他们却过上了原始氏族社会的生活。这解释了游戏主角所在世界文明形态之原始，也解释了为什么这个世界遍布机械动物。这是这个世界未来科技元素与原始社会元素共存的最根本世界观架构。不过，本作的界面并没有在动效层面用到科技感风格所使用的必备设计手法，代之以一种通用型的设计。这表明，在这种特定的风格杂糅中，设计师对风格设计元素中特定组成成份是有必要进行取舍的。在《地平线：西之绝境》的“武器升级”效果中，可以看到少量的生长型动效，但这其实属于对笔刷效果的一种演绎：同作的一些局内提示也有类似动态类型，严格的来说，属于通用型动效的一种：对科技感元素的体现，其实大部分在局内特效上，比如我们很熟悉的，埃洛伊的头戴显示设备所投射的全息影像：其他大部分的操作，但凡涉及到界面，也都显得极为通用：我们可以设想一下，本作中的界面动效如果大量采用科技感的基本动态设计元素，会出现与残破元素结合的问题。我们不会在类似取向明显的界面设计上采用这种动态设计方向。这可能是设计师大量舍弃科技感动态元素的原因。不过更大原因在于这种类型的游戏，其实在界面上是很少有过多的刻画的。游戏开发者的大部分精力在画面和故事以及游戏玩法的塑造上。这不是一款典型的“玩界面”的游戏，这是叙事主机类游戏与大部分手游的最大差别。以上就是本篇全部内容。本系列的下一篇文章，我们将继续第一部分的内容，会讨论到并不舍弃科技类核心动态设计元素的风格杂糅是如何做到的，敬请期待。请务必备注加群，为防止造成骚扰，无此备注者默认不会邀请进群哦~

书接上文，本篇考古《百魂战记》。这虽是一款西式奇幻类型世界观的游戏，但很多设计手法比较通用，尤其适合用于不太好定性的风格中去。因此可被囊括在我们所说的“写实类”风格游戏动效中。这款游戏为韩国Hound

游戏界面的动效设计讲究适可而止。这其中，什么需要动，什么不需要。什么时候需要，什么时候不需要。即where

设计产出物的品质受到很多因素的影响。其中一种就是细节。平面设计和动态设计都被细节左右。细节和品质不一定是正相关关系，但是缺乏基本细节设计的产物，一定会影响设计品质。对游戏界面动效来说同样如此。一些基准设计因素的缺失，会使动效设计产生“未完成”、“低品质”或者“奇怪”的感觉。这些其实都是动效设计的细节。本文就来讨论一下，通过哪些方式可以让你的动效设计更有细节。想让动效体现出细节，往往最先需要从两个方面着手：静态丰富与层次细节。即丰富原有静态图形的表现方式。动效是基于静态设计稿去做进一步的动态设计的，除了要弄懂界面设计本身表达的功能含义外，在细节上要尊重原有的图形设计。我们在上一篇文章中提到过一点：复杂界面控件的动态设计要在读懂静态图形的运动趋势的基础上去做进一步的设计。但是这种设计绝不意味着原地踏步，而是要学会去演绎原有的图形。比如下图这样的一个面片，我们很明显能看到它的一些纹理特征。就可以从这些纹理特征入手去做一些动画设计，首先是最基本的伸缩动作，和表面上文字图标的随动动态：但是这样并不能延伸原本静态设计的风格特点，也就是那些斜切型体所应有题中之意。那么我们可以为它们也设计一些小细节，比如说闪动：又如这样一个独立的控件，具备层次比较丰富的图形设计。此时可以通过提取它的主要设计元素来参与到它的整个动画生命周期（蓄力→爆发→拖尾）中：这种基于静态去思考动态的思维并没有超脱出我们在《五种演绎法拯救单调》中提到的方法，最核心的思路还是补充它在时空上的前后关系。即增加多层细节表现。在上一个做法的基础上，如果控件的视觉层级很高，目前的方式不足以体现它的某种视觉层级时，就可以为它增加“滤镜”。上一点指的实际上是设计控件的结构细节，而这一点指的则是设计控件的样式细节。样式细节应该基于结构细节。除了某些特别的情况，一般先考虑结构细节再考虑样式细节。比如说常见的按钮动态细节，当我们有这样一个按钮时：如果需要设计动态让它更有视觉强度，应该先设计结构细节，比如像这样：如果这样的结构细节仍然不足以表达它的视觉层级重度，或者想体现某些特别状态，就可以考虑增加样式细节，比如粒子、光效等（为了更好观看光效，这一效果背景变更为暗模式）：基于以上两点，让动效的设计更加细腻的方式，还有另外两点。即元素互动与动画曲线。指的就是构成一整个动效的元素之间，应该有所互动，而非互相隔离。这同样是来自我们常提的“现实经验”。现实有几个特点，其中最主要的几个就是：没有完全静止的物体；没有绝对孤立的个体。第一个特点使我们在动效中模仿现实时始终需要保持动态物件是“活”的。如果保持呆滞的状态，就会让人感觉很假。第二个特点使我们在动效设计中，多注意各个元素之间的交互作用。这就是我们现在说的元素互动。比如我们有这样一个控件，需要设计它的入场动画。根据它的设计结构分析，绿色栏条是承载黄色箱子图标与黑色文字元素的底座。所以入场动画应该先让底栏入场，而后是文字和图标的入场。但它们之间的时间差不应太多。所以就可以设计出这样的一个基准动画：文字的入场方向遵守我们此前提到的图形逻辑关系：让它们和底栏的伸展动画保持同向运动。箱子图标的颜色和位置决定了它是这个控件中最重要的物品。为它设计一个由下往上飞动又摔在底栏条上的动画从而凸显它的重要性。这样的动画其实也能满足功能与视觉效果了，但是如果想让动画更加生动，我们可以尝试为它增加元素之间的互动。目前的效果中，显然是没有互动的，除了文字的入场方向受底栏伸展效果影响之外。这其中最明显的关系，就是箱子图标摔在底栏上的动作。如果能将它的力道传递给底栏甚至是文字，效果会大不一样：上图这个新的效果中，我们增加了底栏受箱子撞击的反应。文字也都相应加了一点相似的效果。是不是看起来更加生动了呢？这就是一点点元素交互作用带来的效果。曲线的重要性如何强调都不过分。它是构成动画最基本的元素。但这里的重点并不是告诉你什么动作应该设计什么曲线，想要了解这些，可以看下过往的相关文章。相信大家已经非常熟悉这一点。这里要说的是，动画曲线的微弱调整会影响动效在整体上的表现，尤其是一些细节的有无，非常影响整体动画的样子。其实这一点也和上一点有所联动，有时候一些微弱的曲线调整正是想要带给元素间互动效果的。比如我们有这样一个控件：它可以被设计成这样的动作：这看起来是个很平常的抖动红点效果。一般情况下应用起来是没有什么问题的。这时候它的运动曲线是这样的：但是如果我们需要在一个风格别致的界面里设计动效。比如说需要富有弹性的风格，这样一个“普通”的弹动效果可能就不足够生动了。这时可以将它的曲线进行这样的微调：可以看到，起始帧到第一个摆动角度的曲线是典型的慢入快出动作，这意味着一段“预备动作”。第二帧到第三帧也是一段慢入快出动作，意味着从这个角度回到另一个相对点的动作会有个漫长的加速过程。等它回弹回去到第四帧时，却是一个快入慢出的曲线，这意味着能量的爆发。这样的动作给了气泡本身很多弹性因素，而且相对之前的运动曲线，这个曲线的总时长也做了一些调整。这时候物体的运动状态看起来就会是下面这样：看起来是不是曲线的调整非常的微弱呢？但最后的效果是不是差别很大？这就是曲线微调的威力。这只是个很简单的小例子，但在实际工作中，我们会遇到结构更加复杂的情况。我们就需要对其中一些部件或者元素的运动进行详细的分析，认清它们互相之间的关系，对它们应有的“生动”运动进行“还原”，这是动效设计中最有趣的部分。动效的细节设计应注意塑造更合理的图形动作。图形动作的合理性是从图形结构上来的，遵守图形结构的动画会更“好看”。因为符合客观规律的设计本身就会带给人以美感（引自《游戏UI设计原则与实例指导手册》P032

上篇我们讨论了动效时长设计的前两种情况，本篇继续另外三种情况：3.仪式表现动画这是一种氛围极为浓厚的界面动效，一般会有漫长的时间设计。造成它们长时长的原因有：第一，复杂的氛围设计客观上的需要。如下视频所示：如果加上最后的两个循环，这个动效长度达到了10多秒。其中结合了界面层和3D层多个表现元素。它们共同组成了一个有漫长前奏的内容，这块内容有短小的情节演绎：首先是期待着特效的枪械入场，是我们局内可见的视角。接着模仿镜头推进的效果，画面推到瞄准镜上，此时通过准星可以看到远处的人影。随后开枪，可以看到子弹飞过去，一阵特效光效的晃眼术后，画面切换至弹窗主体内容的入场，此时前奏才算结束。最后才是弹窗的内容展示，这时它进入到持续循环的效果中，保活的同时，不停循环展示该弹窗要推荐的枪皮特效，吸引购买。一直到玩家关闭它。这种演绎没可能缩短到常见动效的长度；前奏之后的主体入场则可看作是典型的界面动效长度，这块的确被设计得很短。这两者之间有承接关系，所以为了整体的效果展示，从而表达出特定的含义，一整个画面或者界面的动效时长不可能被设计得特别短。这种类型的动效已经复杂到需要演绎一段剧情，或为讲述一段简短的故事，或就纯粹视觉化展示商品的特性。尽管如此，仍应该注意到其中融入的转场与入场衔接点，都仍然遵守典型游戏界面动效的时长设计规则。第二，很多纯界面构成的仪式表现动效，习惯上模仿升格动作。即在主体动作完成后有一段漫长的拖尾动作。如下视频所示：这个视频是《机动都市阿尔法》2022年S7赛季的入场系列闪屏。其中有多个展示本赛季奖励的界面展示。它们大部分都用了入场后升格的效果，尤其最后一屏压轴的赛季LOGO入场界面：这个界面最明显的是左右两侧的起始时间动作。为了围绕赛季LOGO塑造强大的气场，这个画面用的是一个中心布局构图，两侧的时间在主体绚丽的入场动作完成后，以非常缓慢的速度逼近主体。这种设计里，本身的主体动作仍然遵守界面中动效的普遍时长设计规律，有非常短暂的演绎时间，其大部分时间都“花在了”漫长的拖尾上。这种拖尾对整个氛围的塑造是不可或缺的，所以这类动效的时间都会比较长。第三，为了构造极端的视觉冲击，游戏中会结合视频等元素共同演绎仪式感。如下方视频所示：这是《使命召唤手游》国际版的BP入场效果。这个效果就结合了漫长的视频画面前奏，其中间或展示了BP的主要人物皮肤与枪皮等主要奖励物品。用的也是入场加升格动作设计。视频本身的情节设计就比较耗费时间。视频后插入的几个闪屏则是纯界面形式画面，可以认为是与上例相似的设计结构。两者叠加，整个入场时长接近一分钟。但这种设计结构保证了BP这种付费类设计有极为充足的，接近电影的视觉冲击力。第四，结算类。游戏中的结算是除了付费类外，仪式感最强的界面了，这里的动效一般也会有比较长的时间设计。如下图所示《蛋仔派对》中夺冠之后，对人物的一种盲盒设计演绎：由于它特殊的包装设计，这段动画设计没办法以经典动效时长去设计。第五，开箱抽卡类。比如十连抽等节点的动效，也是类似的设计手法，其动效时间也非常长，我们过去举过很多实例，比如下方视频中《花亦山》的抽卡：和《GranSaga》的抽卡：4.静置保活动画这种动效，我们在以前的文章《动效保活的五种方法》中专门讨论过，可以点击标题回顾。这是一种无限循环的动画，但与提示类的循环不太一样。它们更接近升格动画，即单个循环的长度本身就很长，而且通常是一种满画面展示的形式，如下图所示《使命召唤手游》国际版的加载界面：这种画面的特征除了升格风格外，在结构上，不同部位的循环时长不太一致，导致想要截取一整个画面的整体循环基本不可能，也就说以整体画面为单位去计算单独的循环长度时，时间会特别长。但它的目标就是两个：第一，保持画面活跃，不至于被判断为死机或者BUG；第二，利用升格风格塑造特定氛围。比如上图中的画面元素与BP售卖物品挂钩，各项特效元素也与其相关，利于整体元素一致性。总体上，这显然也是这类动效时间设计漫长的根本原因。5.特殊功能动画特殊功能动画在广义上也属于普通的界面动效，只是有功能上的特殊性，或者出现频次较低，而有特别的时长设计。主要的包括以下几种：第一，特殊运营玩法。典型的如抽卡、大转盘甚至是盲盒机一类。如下图所示《蛋仔派对》的盲盒机抽奖：凡遇此类特别玩法的，整个流程就会比较长，但其中单个模块的动效依然按照经典类型的时长去设计。第二，特殊趣味设计。比如我们在《花亦山》一文中提到过的，该游戏的折纸书细节设计：这类小趣味内容展示，根据不同的节点，有不同的含义。但一般都兼具小的情节演绎和后台数据加载的功能。但外在视觉表现上，通过有趣的小故事情节，事实上变成了一段段的小动画。这种时间长度就可以根据实际上的需要来设计了。以上就是本篇全部内容。

本篇继续讨论写实类动效的设计手法。考个不是很古的古，看下写实竞速类游戏中的一个例子。关于写实竞速类的游戏界面和动效设计，我们在之前的文章《王牌竞速动效简析》中有简单的提及。基于以下原因，这类游戏的界面设计往往极为扁平和简约：1.写实类画面匹配“无风格化”的界面，视觉上更加一致；2.为了尽量展示画面中精致的车辆设计，界面等其他视觉元素要相对让位；3.个别时尚感的设计，需要简约的设计方式来构成整体的调性。本篇的这款游戏是《极限竞速:

Sports系列的第四款作品。与《Wii运动》不同的是，本作以任天堂Switch的Joy-Con代替Wii遥控器操作，可联机对战。背景设定在一个名为“Spocco

对时间长度的精准把握，是动效设计的核心规则。动效是一种时间轴形式的事物，其时长设计非常重要。我们以前的文章中说过，动效的时间不能过短或过长，但具体多短为短，多长为长，如果想一言以概之，并没有一个准确的定论。因为不同维度，不同类型的动效，其时长设计都各有特点，但是只要在特定规则下，就会有一定的设计规律。从表象上来看，动效可被视作诸多线性动画的非线性集合。它们以片段的形式，呈点状分布在各个交互点位上。与游戏中的其他动画形式，如人物动画、战斗特效等等有不一样的时间表现特征。在这种维度下，动效都是一些呈小片段状的动画，这里包括了比较大块的如一整个界面的出入场动画、弹窗的出现、列表的入场等，以及小块的如各种形式的反馈动画等。这些动效的时长通常都比较短，一般在2S以内。这样的时长设计根本原因在于这些动画的设计目的。绝大部分情况下，它们为承接界面的转换关系而生。这种转换关系的目的则是以尽量快捷的表现形式，来为玩家呈现界面的相关信息。这些信息包括但不限于图像、文字等。所以作为转换的过程中的一段时间轴形式内容，这些片段状的动效不需要太久的时间。只需要给玩家留下一定的“印象”即可。也是因此，动效给很多人，尤其是很多不太熟悉动效设计的人以不太重要的印象。这符合人们的直觉，占比太小的部分，甚至不直接呈现在人们面前的东西往往显得不太重要。但仅凭直觉去判断某项事物的重要程度，是一种反智行为。显而易见的，我们看不到代码，不代表游戏的运行不需要程序。类似的道理，动效在大部分情况下表现出的短小精悍特点，不意味着这部分不重要，更不意味着它很容易被设计出来。单独看来是一段短小的线性动画，但总体上以非线性的形式有机组合在整个游戏的体验系统中。这本身就意味着动效有比较复杂的时长设计逻辑。我们可以把这些时长设计按照几种情况进行划分，以便大家理清这套逻辑的思路：1.连接功能动画我们曾经有文章专门讨论了动效的连接功能（点击这里回顾）。动效的连接功能在整个动效的设计体系中占有非常大的比重，这也是上文“它们绝大部分情况下为承接界面的转换关系而生”的说法来源。基于此一特征，我们发现这种承接关系本质上是一种在时间维度上转瞬即逝的变化过程。虽然目的是承上启下，但这一过程本身也足够重要，我们需要在这样一个过程中给玩家留下一定的印象。这一印象可能就承担着表达世界观甚至是特定情绪的作用。这意味着在这种情况下，动效设计在时间受限的情况下也要有一定的表演功能。转瞬即逝，就要很短，不要耽误承上启下的“正事”。内涵丰富，就要在很短时间内将各个元素的表演进行巧妙压缩，这就需要用到时间错层以及特定的节奏设计。所以，可以总结出这种动效的时长特点：第一，短，一般不超过1.5S；第二，时间错层设计，有限时间内保证足够多的内容。比如，游戏《真三国无双霸》的人物详情界面中，一个简单的页签切换效果：这是个典型的“连接”型动效。为了表示页签的切换，左侧有直观的挪动效果；为了表示右侧信息的刷新，右侧的新入面板信息有比较细致的入场动画，但这些内容都在1S内完成，它们显然做了时间错层处理。如果按照首尾相接的方式设计，将没办法同时满足两个需要。2.反馈功能动画反馈也是动效的很重要功能。一些动效是专门设计来承担反馈功能的。以被动反馈动效为例，这种反馈往往是对操作的直接反应，所以时长通常是最短的。如下图，《漫威超级战争》中的页签点击反馈效果：这种效果是点击操作的瞬间反应动画，大约只有0.5S时长，但囊括了多层次效果设计。不同的风格氛围中，这种动画的长度差异不大，最主要的差异在具体的效果设计，如动画曲线和美术元素。比如当处于卡通化的风格氛围内时：这个动画是《恶果之地》商城界面中的页签点击反馈，它的时长也在0.5S左右。处于一个国风氛围内时，则可能是这样：这是游戏《花亦山心之月》中的一个新系统开启的提示动效。是一种典型的主动反馈动效。它的持续时长有国风氛围下的优雅绵长特性，但如果仔细观察，可发现主体动作依然是在0.5S内完成，后续的动作都是通过延长“拖尾”来填充的。这也是特定情境下，拖长时间但动作不拖沓的一种设计方法。主动反馈动效还经常被设计成循环动画。如待领取状态：这种状态是单位动画的不停重复，视为整体时它是一种无限时长的动画。不过讨论到设计时长时指的是单位动画。这种动画需要持续性活动，因此单位动画时长比被动反馈型动效长一些，此例为2~3S长度。这种状态与静置保活动画有一定的相似性，后文详述。另外，还有仪式表现动画、静置保活动画和特殊功能动画三种情况，我们下篇继续。以上就是本篇全部内容。

这是一个随便聊游戏的栏目。主要说一些好看的游戏，和浅聊它们的界面和动效。通常只看界面，不太有玩法讨论。更新时间随机。《Wild

最后一种是特殊设计的运动规律。这种运动规律一般指两种东西，一个是从人造物中模仿而来的运动。典型的如科技感风格；另外一种是自然事物“风雨雷电”，即我们常说的特效类表现。本篇先讨论人造物模仿。这种类型的运动是非现实产物的运动，它们本身的产生与发展都有自己的规律，本质上也是对现实产物的模仿，但更不遵守现实的一些规律。以科技感的元素为例，我们在以前的文章《如何设计科技感风格》（点击标题回顾）中提到过，科技感类型的动态设计主要有两种动态元素构成，即闪切和生长。这两种动态形式其实就是模仿的人造“高科技”事物中的一些表现。具体就而言就是与高科技相关的显示设备上的图形元素运动规律。在一些古早的显示设备上，信息刷新的形式受机能影响，就会出现类似闪切和生长的动态：这种动态样式给人们留下了非常深刻的印象。它们本身就是当时高科技事物的组成部分，就会自带“科技感”的风格属性。以至于到现在，我们想表现类似风格特征的事物时，都要模仿这种古早的动态风格元素。即便现今的设备上，信息刷新形式已经可以完全摆脱这种样式。另外一种人造物是魔法事物。这类元素也有超自然属性，是那种现实中不存在，但被人创造出来体现特别感受的东西。但是人无法创造，甚至无法想像现实中不存在的东西。所以和科技感的元素一样，魔法类的元素其实也是将现实元素进行有机重组后产生的元素。比如下图所示手游《尼尔：转生》中的“技能升级”界面：这个页面内的溶解、烟雾和流体效果，都算是魔法类的元素。这种组合，在现实中是很难看到的。但是单个元素则还算常见。所以从本质上来说这些元素也是现实物件，其运动形式都要尊重现实的运动规律，并且只有在此基础上做的合理夸张才更能被人接受。这些元素也正好是我们后边会讲到的“风雨雷电”，所以本篇暂不展开。还有一种人造物是卡通化表现中的“伴随元素”。我们在《动效风格化设计》（点击标题回顾）中提到过，动效风格中的一个关键元素就是“伴随元素”设计，并且也列举了不少卡通风格中这类元素的设计。这类元素和魔法类元素极其相似，也属于现实中存在，但被重新利用来组合在具体场景中使用的一类东西。比如下图《恶果之地》中点击按钮里的伴随元素：它是一种类似液体溅射（或者别的你认为现实中类似的什么物体）形态物体。在漫画和卡通类的静态和动态表现中，这类元素常被用来表现力道，或者标识在角色脑袋旁，表达一种“震惊”、“注意”的含义。类似的元素还有速度线，在《恶果之地》中也同样有用到：这些经过特殊排版和构图设计的排线最早被用在漫画中，表现速度，有各种方向的排布形式，表达不同的运动方向。这些看起来是纯粹虚构出来的元素，我们在现实中很难找到实体对应物。但其实都有端倪，比如我们可以有“速度线是对运动模糊的模仿”这类理解。总体上，这类元素都被用在适当的时机和位置上，以便设计师更精准的、完整的表达相关的含义。它们对应的运动规律，就要从它们各自的来源去考虑。鉴于这些元素已经非常多见，你也可以不用考虑它们最原始的运动规律来源，但多考虑一层，总会有利于对它们进一步的利用和创新。以上就是本篇全部内容。

效果与密度构成也属于游戏界面动效的基本元素。这是基于整体布局和节奏设计上来讲的，不仅关乎设计层面，还涉及到流程层面，总体上的原则是以尽量少的效果达成尽量完整的表达。前提是依据动效三元素去进行判断，即检查你所设计的动效有无起到“连接”、“反馈”和“表达”三者之一。如果没有，那么就无需设计。具体细节上，在不同的情况下又有不同的要求。1.在“通盘考虑”的维度上，需要整体规划。简单的说就是要将整个项目的所有界面进行规划，区分不同的强度。而不同的强度也就意味着效果密度的分布不同，这也是我们此前聊过的游戏界面的节奏排布设计。如下图所示的抽卡获得人物的界面就会有很多细节表现：而类似下图这样的设置或者列表页，就省略很多细节：2.在风格设定的维度上，则又有不同的设计规律。在项目初期进行的动效预演设计，可以有非常多的细节设计，这有助于对关键元素的风格设计进行探索，也是一种“压力测试”，即动效的细节做到什么程度是可接受的。除了这样的原因导致需要这样的密度设计外，还在于初期的风格设定阶段，设计师所凭借的素材过少，可能只能依赖有限的几个界面去表现尽量多的风格细节，许多在落地阶段不需要的细节就会被设计进去。在动效落地和铺量阶段则一般需要遵守本文开头的原则，以尽量少的动效完成尽量完整的信息传达。3.根据界面的设计风格，也有不同的密度规律。一般情况下，界面设计越简约，所支持的动效密度也就越高，反之亦然。比如我们曾经聊过的《The

Menchiari作为游戏制作人的第三部作品，此前的两款游戏作品分别为四色像素风格的独立游戏《The

这是一个随便聊游戏的栏目。主要说一些好看的游戏，和浅聊它们的界面和动效。通常只看界面，不太有玩法讨论。更新时间随机。MOBA类游戏还有第三人称射击的形式？是的，而且第三人称这种形式早已有之。早点的如《SMITE》，《Paragon》及其后续《Fault》以及利用它的尸体重生的《Predecessor》，都是这类游戏的代表。下图是《SMITE》，即《神之浩劫》的局内界面。可见它的厚重写实化风格，会有比较老旧沉重的感觉：而《OVERPRIME》的卖相，乍一看像极了过去的《Paragon》和今天的《Predecessor》。他们都属于魔幻但极简的界面设计风格。下两图是《O》的局内界面：下图为《Paragon》即《虚幻争霸》的局内界面：下图为《Predecessor》的局内界面，继承《虚幻争霸》的衣钵，两者之间有明显的风格继承关系，甚至可以说几乎完全一样：如果仅看界面，你几乎无法在三者间做出明显区分。但真的要认真区分的话，还是能看到它们之间的明显差别的。《Predecessor》的界面设计更加成熟，而《O》的界面则在动效层面上更细腻一些。这倒并不能证明《O》的动效达到了多高的高度，对比同类它可能好一点，但放到大盘里它仍然是比较简陋的。游戏目前还未正式发布，我们可以理解它在这上边的缺陷。本作的亮点目前集中在两个重要的交互点位。一个是赛前匹配的界面流程表现，另一个是开箱的界面表现。这两处都深度结合了3D动画层面的美术表现。是目前版本里最为亮眼的视觉表现。在赛前匹配界面中，我们可以首先看到这样的画面：几个圆筒状的物体从暗色的背景深处渐次出现，结合选人的功能，我猜这似乎代表着承载人物的某种舱体。随着它们落定，前景的界面出现，在界面的左右头像集合体中，玩家就可以选择商场的英雄了。此时背景的舱体会打开。选定英雄，选定英雄的特定皮肤，倒计时结束后，会进一段没有配音的动画，这个舱体被从一个通道内释放。从通道的出口，我们可以看到星体，这似乎表达了将英雄投送到战场的意思。整个过程形式感很强，尤其是选人的过程里，整个画面的对称布局设计，3D动画和界面动效的配合动作，都是为烘托英雄角色的效果而来。下面是整个过程的视频：这类游戏的整个系统并没有特别复杂的东西，战前匹配时选人的过程之所以被设计得足够有形式感，或者说仪式感，就是因为这种玩法本身就是围绕英雄以及英雄的皮肤作为卖点的，跟英雄有关的展示形式，应该尽量朝高品质的，高视觉冲击力的方向去设计。下图中，玩家收藏的英雄列表，在切换时的小细节就属于这种设计目标的一种体现：每个人物的大小与视觉重心不一定一致，但切换时都会以镜头推拉摇移的形式重新定位至视觉重心：本作界面上的另一个亮点在开箱。开箱是另一个付费点，它的形式设计，在拥有类似功能的游戏里，通常都会被设计得很强。不过一般都是以下几个过程，首先是箱子入场：然后是通过某种操作开箱：一道炫光过去，物品被开出：可以从下边的视频看到完整的过程：除此之外，该作界面内的动效还很不完善。这与本作的界面量较少也有很大关系。大部分的动效都是一些比较基础的动作，如下图所示的设置界面的出入场：从设计的角度来看，《O》的美术品质确实较高，但界面设计的成熟度欠缺，目前的版本里只是在上文提到的两个亮点处做得不错。期待这款游戏能够获得长期的成长，界面上的相关设计品质能得到长足提升，毕竟这类玩法本身就不太好做。以上就是本篇的全部内容。

上回讲了游戏界面动效中的普遍运动规律。基于普遍的运动法则，游戏界面动效中有一套通用的形式。这些形式利用了普遍的运动规律，从而为界面动效创造更细腻的合理性。1.结构动画。结构动画是将抽象控件的图形逻辑进行动态展示的动画形式。虽然组成动效的元素都是抽象的，但它们的运动都是模仿的现实中的某个物件。利用这种规则，我们可以为界面或者某个界面控件设计合理的动效，尤其当元素之间有交互时。比如最简单的框体呈现动画，就是将框体本身视作现实中的容器，并考虑内容物与容器之间的逻辑关系。如下图所示：黑色的底框代表界面控件的框体。它从中间展开，这展示了一个容器的出现过程。绿条和黄条指代条状的图形或者文字信息，蓝块指代图标。底框出场时，其内的其他控件的出场动作，应该随着它的运动趋势进行。按照这种规则，绿条就是从下到上，而黄条是从上往下的运动。中间的蓝块则可以从中间放大出现。如果调换它们的位置，则可以按照下方形式：上边的两个色条都是以从下到上的趋势运动，而蓝块依然以从中间放大的形式出现。

这是一个随便聊游戏的栏目。主要说一些好看的游戏，和浅聊它们的界面和动效。通常只看界面，不太有玩法讨论。更新时间随机。《The

写实类的游戏界面设计概念，就当下而言，已经不再专门用来描述那类厚重质感范畴的风格了。你会发现，很多游戏的界面设计风格已经逐步往更扁平和简约的方向发展。在这种情况下，那些材质表现和世界观的表达方式，都与以往有了巨大的差异。比如传统上我们认为的厚重写实质感的《暗黑》系列的界面设计，在《暗黑3》里是这样的：但是根据最新的露出视频来看，《暗黑4》已经调整了风格方向，不仅色调对比度上更加柔和，质感上也削薄了许多：这还是传统上就比较注重厚重质感描绘的魔幻类题材游戏，更不要提传统上就相对比较轻薄的现代化，甚至是科技感类的游戏了，它们在扁平化的方向上走得更远。于是，我们需要面临为更加扁平，质感描绘更加收敛的游戏界面设计对应动效的局面。以往的文章中，我曾提出一个观点，一款游戏界面中的动效设计，其风格是由关键点位的风格特征决定的，而不是由其底色决定的。这些“底色”即“通用型设计”。当一款游戏的世界观并没有特别突出在界面表现上，或者界面的表现过于扁平时，这种“通用型设计”的占比就会越多。这一点可以从近期的一些游戏里看出端倪。具体的，我们先看下《重返帝国》里是怎么做的。这款游戏的世界观混合了中西方古典英雄，整体上可以认为是一种中古时代设定。但是界面设计的风格整个是偏向西式的古典设计的。所以此处可以认为它是一种西式古典风格。传统上这种西式古典风格必然会是一种重质感的设计，不过这款游戏走得是一种极为扁平的设计风格。在一些系统型界面中，设计样式由极简线框与收敛的纹理修饰构成，套用通用型的动效设计，构成古典与现代感融合的风格：这种风格除了界面本身的扁平化外，还有通用型动效的配合，共同组成了这款游戏“风格化”的底色。但这样显然是不够的，因为一款游戏的界面无论如何简约，都是需要风格取向的。该游戏的风格，除了显而易见的界面配色、细节纹理设计外，还需要动效层面独一无二的设计来凸显。它是通过一些特有的元素来做到这一点的。这些元素包括：雾状，粉状流光、特殊动态纹理设计。而且这些纹理统统为金色设计，目的是配合界面上的暗金色主色调设计，并且适当提亮原本的关键纹理色彩和造型设计。如下图所示的弹窗中，框体周边的金色雾状流光设计，以及周围环境中的相似色调粒子与烟雾：以及界面中强度靠前的“繁荣等级提升”提示，这里最明显的风格特色是底层的特殊网格纹理流光设计：同样的流光纹理也出现在“恭喜获得”界面中，这个界面的整体框架设计可以认为是和上一界面相同的，只是由于内容表现的不同而设计稍有不同：作为一种关键元素，这种网格纹理还出现在通用弹窗的入场动画中：侧边的浮层入场也有类似的表现：金色流光作为另外的辅助设计，出现在几乎所有提示性较强的控件中，它们有很多形态，如下图中的絮状：配合粒子表现的条状：以及带有衬底图案的白色页签流光：除了一般页面中的这些点缀型设计，该游戏界面中自然也有一些特别设计的动效，如下图这样与3D元素结合了的，配合可一定镜头运动的效果：类似的效果也可以在抽卡界面中看到，此处不再列举。从这个游戏的整体界面设计，以及与它的动效设计，我们可以看到一个典型的风格化设计特征，通用型底色加关键点位设计；也可以看到一款“写实类”风格游戏的界面动效设计如何展开，以通用型设计为底，将关键元素巧妙结合在通用型的底上。如果通用型设计无法做到及格，那么即便界面设计本身非常成熟稳定，其本身的风格表现，甚至只是品质表现都会大打折扣。也有观点认为，界面越扁平，则越需要动效去加持。这是一种典型的“动效是界面的提升”的认知。实际上动效与界面扁平与否没有正相关关系。最重要的是看游戏本身的设定是否需要。就本文列举的这款游戏而言，它的动效并没有极为夸张或者极尽华丽繁琐的表现，它想要体现的是一种严肃和写实的感觉。界面的扁平化是为了体现这一点，而动效整体上体现出的通用型，也是为了体现这一点。倘若只是因为界面的扁平而将动效表现得过于复杂，则很有可能远离游戏整体调性设计的初衷，出现非常大的风格偏差。由此说来，任何设计都得是怀着一定的目的，将“原本存在于石块里的形象挖掘出来”，而不是狗尾续貂的生造。以上就是本篇的全部内容，本系列下一篇，我们将继续列举一款游戏，敬请期待。

很长一段时间内，人们有一个固有的偏见，认为游戏界面必然是重写实质感的。这种偏见一方面影响到业内设计师对自身的定位，也让我们忽视了扁平化设计在游戏界面设计中的重要性。本文针对这一问题，简单分析下扁平化设计的一部分，矢量化图标，对于游戏界面设计的重要性，以及相应的设计注意点。图标对游戏界面之重要性毋庸置疑。通常大家会认为正经的图标是这样的：这样的：或者这样的：从视觉层面上讲，能够设计出这种重质感的写实风格，就会被认为是能力很强的游戏界面设计师。大家更愿意去观赏和模仿这种风格的图标，将这种“很体现功底”的美术风格默认为是高水平设计师的必备素质。这种风格的确非常考验设计师的能力。但认为设计师的能力主要靠这种风格来体现，其实有失偏颇。游戏界面设计师所需要的能力点有很多，如果仅仅以某一种风格的作品为判断维度的话，可能会偏离设计师能力核心点。设计师的工作是为产品“画皮”，这项工作不仅是为美术表现，还为功能表达。这个“表达”指的就是将产品的“灵魂”用视觉元素来进行表现。而美术风格只是产品灵魂的需求之一，因而不能仅以单一美术风格维度去评判。或有或无的，在这种观点的影响下，很多设计师可能会忽视掉另外一个能力点，那就是今天要聊的矢量图标。本文的矢量图标指的是：使用面，线抑或阴阳对比来表现自己含义的一类图标。这类图标的主要特征是：简洁明快，抽象，指代性强。美术表现上，按照所处情境(这些情境可以是游戏世界观，界面整体风格设定等等)，可以有纯色，渐变甚至投影高光的表现。一般也会称呼这类图标是扁平化图标。由于这类图标通常是使用矢量软件或者矢量工具所设计制作，所以本文称之为矢量图标。它们通常有以下几种：1.线型图标，图标的型体全部通过线条来表现。2.面片图标，通过不同块面来表现更复杂的层级结构。更进一步的，使用多色块面，较少间隙区分（由于色块可区分不同区域故无需间隙）方式的形式。上图，如果通过特定的色彩规范，可以让一组图标拥有更统一的色彩表现。上图，统一色彩规范和严格图标展现范围，通过色块来表现丰富的内容的矢量图标。上图，加入简单的渐变和浅浅的纹理，形体上加入透视表现。上几图，使用这种表现方式后，甚至可以是一幅幅意境优美的插画。

上篇我们分析了游戏界面动效设计中，运动规律所起到的决定性作用。本篇开始，我将渐次展开游戏界面动效设计中的运动规律相关内容。人们用虚拟的物件模拟现实中物体运动的方式，最早是从传统二维动画开始的。这一时期人们对运动规律的理解尚属粗浅。其中一种处理方式就是先进行实拍，而后在实拍胶片的基础上进行描绘，从而实现动画中的物体（包括人和动物以及场景物件）与现实物体相同的动画。这种方式在早期的迪斯尼动画和国内古早动画电影中都有实践。下图所示的中国第一部动画长片《铁扇公主》中的画面，就是一种非常写实的动画风格。其制作方法中，有很多是先实拍演员，再在演员动作上逐帧描绘出来的。下图中，年代更久远的1929年迪斯尼米老鼠动画里，也用较为写实的动作来表现动画人物：这可以看做是现实与虚拟空间的初始结合状态。随后，它们开始分道扬镳。随着制作工艺和设计水平的提升，迪斯尼的动画师发明了一种专属卡通风格的设计方法。这种方法简单的说就是为卡通人物设计夸张的动作。它们会大幅度的预备动作，作为辅助，这种动作有不同于现实人物运动过程中的明显抖动。这种设计方法走出了虚拟人物运动规律基于现实的夸张的第一步。下图中，当代的迪斯尼米老鼠动画。相比前辈，动画上多了很多细节设计，比如柔顺的动作处理，夸张的预备动作等。已经与早期的“写实”动画设计方法差别巨大。这个演进规律实际上吻合了我们说过的动画运动规律的两种特征的演变：“对现实物理规律的模仿”和“符合想象的合理性”。两者是一种递进关系。即先对现实进行刻板模仿，后在这个基础上进行合理夸张。这实际上是界面动效中动画的基本逻辑出发点。如果将这种经验运用在游戏界面动效中，就会显著提升我们对较为抽象图形运动的逻辑理解。以下简单示例说明。依然是出场率很高的小球。如果想要模拟现实中小球的运动，比如从左到右运动，它会是这样：这是个比较普通的左右运动。

以下为本号往期“动效理论类”文章的合集，可以点击图片直接访问相应文章。本类文章为基于多年实际项目中的动效设计工作经验，对游戏界面动效设计进行的理论性总结。目前的动效理论文章主要包括“游戏界面动效基础理论”系列三篇，其中第一篇已经完成，第二篇即将发布。另外有一篇“游戏界面动效风格化”的内容即将被重新整编为前述系列三篇的第三篇。完成这一系列之后，本号将继续完善这一理论系统，比如可能会有“中级理论”系列和“高级理论”系列。请各位读者和粉丝耐心期待，并且接受相关的批评与建议。俗话说，理论来源于实践，也应用于实践。这些理论同样都来源于工作实践，它们属于抽象化的、概括性的理论指导，再将其应用于实际工作实践才能发挥它们的作用。并且理论并不总能覆盖实践的全部，因此需要在实践中灵活应用且逐步修正，千万不要刻板应用，以至出现不可预知的问题。本文会随文章的新增而进行更新，目前版本为1.2（发布于2022年04月13日）。如您发现无法在此找到最新的文章，请点击本号最新文章中的底部下方链接入口，即可打开最新版的合集。您也可以在公众号主菜单中检索这类文章。

以下为本号往期“动效分析类”文章的合集，可以点击图片直接访问相应文章。本类文章聚焦于已上市游戏产品。主要是对这类产品的界面动效设计进行分析。目的是期望从优秀的，或者成功的产品中，进行反向分析或者拆解，然后在相关设计分析中提取出有用的设计思路。从这些设计思路出发，更好的指导我们在实际项目研发中的相关工作。最终起到行业交流与学习的目的。这类文章一样秉持本号的行文宗旨，期待为各位读者与粉丝带来真实的、可实操的、可公开传播的、可被诚恳批评的意见、建议及设计方法。我们偶尔会基于设计和技术的角度对一些产品进行正向或负向评论。这些评论仅限于技术角度的探讨，这并不意味着对产品相关的公司、组织或个人的支持或批判，请读者在阅读过程中仔细甄别，请勿对个别词句进行过度解读。为保持行业交流目的的纯洁性，任何此类文章都不会涉及到相关产品的商业化运作。我们对相关产品、组织、公司或者个人，均不持有特定立场。即便偶尔出现倾向性明显的正向或者负向评价，也仅限于设计角度和技术角度的探讨，请勿对号入座或者过度解读。本文会随文章的新增而进行更新，目前版本为1.2（发布于2022年04月13日）。如您发现无法在此找到最新的文章，请点击本号最新文章中的底部下方链接入口，即可打开最新版的合集。您也可以在公众号主菜单中检索这类文章。

在动效开发流程中，一些成文（形成文档和详细的指导手册类）的设计规范可以辅助整个流程参与环节搞清楚品质的下限。但是脱离开具体的执行流程，一切都会成为泡影，所有的文档都会成为一纸空文。因此团队的协作过程需要约定俗成的流程规范。尤其在开发量极大，工作量极多的阶段，依赖成熟的流程规范，可以节省大量沟通成本，在保证品质的基础上，可以成倍提高团队协作效率和开发效率。具体到游戏界面动效的开发流程中。我们主要基于几个环节的客观工作流转的需要，制定相应的工作流程。这种流程在具体的执行层面有很大的不同。但是可以根据客观需要总结出可套用的模式如下：所有的版本内界面都是以界面设计稿为基础开始的。所以动效开发流程的第一步就是界面的进版。界面进版需要规范的切图，基于前端的基本逻辑架构去“拼界面”。高效的工作流程中，进版是由专门的岗位完成的。但当下依然有很多项目中的进版由界面设计师或者前端去完成。不管是哪种非专门岗位去完成这项工作，都会造成效率折损。界面设计师兼任时会占用界面设计师的时间和精力，前端去兼任时会造成还原度大幅下滑，需要配合后续的走查去纠正这一问题，这会造成额外的工作流。此后前端会检查界面进版后的问题，如有无节点影响程序逻辑等。检查无误后就会交给动效设计师去进行动效进版的工作。动效根据相应的设计规范或者现成的预演，将动效进版之后，再次交给前端检查。此时检查内容与界面第一次进版时类似，额外增加检查因为动效进版而修改新增的内容。偶尔情况下，在动效进版时或者之前，需要动效根据设计效果去给TA提请相关的材质需求。这一般涉及一些特殊效果或者项目初期的一般效果，如流光材质、粒子效果等。如果进版速度过快，TA验证相关方案不及时时，可以动效先行，待TA问题解决后再行解决剩余问题。前端检查无误后就需要运行游戏，进一步检查进版的界面和动效有无其他问题。这时除了涉及一些设计预期与实际操作体验之间的差距，从而需要一定程度修正设计方案之外的基本问题外，还可能涉及性能问题。但一般性能类的问题综合了前端、TA和其他技术类岗位的工作，且都一般集中在项目的前期。如果遵循固定的工作模式、相关规范，则越到后期这类问题越少，大家越能集中精力在具体的小细节修正上。整体的效率会越高，流程就会越来越通畅。如果此一阶段检查出相关问题，就需要将相关问题打回重新处理。还有问题就继续循环此一流程。以上流程的跑通，乃至于进一步形成流程规范，需要基于以下基本设施建设：1，标准的提单流程。这一点由PM全程掌握，且需明确各环节的处理时间与产能上限，以便据此安排环节时间节点。任何问题都可以提单进入相应岗位排期，也即可以自动化流转需求与问题单。无形中提高协作效率。2，单个环节排期有序。这是非常基础的要求，单个环节内应按照需求优先级进行合理有序的排期，以便以此为单位处理项目级海量需求。如果单个环节的需求管理是混乱的，不仅需求处理人自己会手忙脚乱，还会造成整体项目混乱。3，验证类先行。包括效果方案、性能基准要求，都要在项目初期有完整验证，并提出规范和详细的要求文档。这些细则会成为相关环节有关规范的指导性原则。若与其他需求并行，在不影响基准效果或功能时，可滞后入版。4，遵守细则规范。流程的畅通是保证效率的，但高效率不能基于低质量产出物，不然工作都是白费。高质量的流程化工作依托的正是各个环节上制定好的规范。举例来说，界面进版就至少需要遵守严格的切图规范、动效进版则需要遵守严格的动效设计规范等等。5，迭代思维。严格的流程规范并不代表每项任务都必须在单次流程中完全完成。必要的时候，需要根据实际情况优先完成一部分。可以是主体的部分，也可以是当前可以实现的部分。对动效来说，遇到的最多的情况是某些未经验证的效果暂时无法进版，那么就需要在客观条件允许的情况下进版一部分，这个部分往往是纯动效的部分，剩下的特效或者需要特别技术支持的、需要特别技术验证的部分可以进行切割后，在后续流程中再行进版。从整体上讲，这可以视作是动效进版的一个特点，即可能需要多轮打磨后，最终才能呈现理想的效果。以上就是本篇全部内容，请关注动效开发流程模型系列的后续文章。

West）是一款沉浸式模拟世界游戏（模拟沙盒游戏）。官方称其为“重构现实的暗黑幻想史诗”，这是由WolfEye

游戏界面动效从本质上来讲是一种动画。这一点从过去我们的文章中都可以找到端倪。比如说我会经常把某个动效描述成“动态”甚至直接用“动画”这个词来评论某个元素的动态样式，而不止是单纯的描述为“动效”。因为动效其实是由基本的动画构成了一定的动态逻辑后，最终从整体上形成了我们称之为“动效”的东西。从这个层面上来讲，作为一个动效设计师，想要设计出合理合规，又符合界面设计意图的动效，最根本上要掌握的就是动画的逻辑。游戏界面动效中，动画的逻辑主要基于两点：“对现实物理规律的模仿”和“符合想象的合理性”。对现实物理规律的模仿用另外一个词汇来总结就是“运动规律”。而符合想象的合理性其实指的是基于运动规律的合理夸张与演变，本质上是对运动规律的熟练掌握和运用。运动规律是我们对现实物理世界中物体运动过程进行观察后总结出的一些规律。我们通过运用这些规律，来赋予虚拟物件以类似的运动特诊，给予它们一定的“合理性”。当我们将虚拟物件的运动设计得符合日常经验常理时，用户才会认为它们的运动是合理的。为什么呢？还是老生常谈的一句话，我们使用所有人造物时所依赖的经验都来自“现实的映射”。这也是为什么在很长一段时间内，软件的界面设计都要用一种非常写实的手段去表现。早期，作为一种新兴事物，软件的界面设计者需要有一段很长的“对用户教育”的阶段。让他们形成虚拟空间与现实空间的映射。下两图所示为iOS4时代的写实风格系统界面设计：当这种培养基本完成，用户形成了固有印象和认知习惯后，原本作为映射工具的写实化界面就完成了历史使命，逐渐演变成更扁平化和抽象化的风格。界面本身的目的是作为一个媒介，根本目的是传递信息。如果不需要担负额外的“教育”使命，那么主要设计目的就会变成单纯的“传递信息”，视觉信息也是一种信息，但写实的信息在没有其他使命的情况下，显然过于累赘。下两图，iOS15时代的扁平化简约系统界面设计：这基本上可以解释过去那些年应用界面从写实演变为扁平的原因。如果注意观察的话，你也可以注意到近些年游戏界面内也在发生类似的变化。只不过游戏界面上要传达的情感化信息更多，各种风格化的、世界观的东西依然是很重要的信息。所以短期内游戏界面不太容易变得极端扁平和概括。上图是游戏《炉石传说》的游戏截图。这种重质感的游戏界面设计风格，在很长一段时间内都是游戏界面的一种固有印象。尤其是西式魔幻类型的游戏品类中，这种风格极为流行。上图是游戏《重返帝国》的“任务系统”界面。这显然已经是一种极为简约的设计风格。但与其他类型软件的简约所不同的是，这种简约依然附加了很多风格化的设计，如富有特征的细小图形设计以及恰到好处但极为收敛的材质和纹理设计。这种偏向扁平和简约的设计越来越多的出现在游戏界面设计领域中。在静态的层面上，这套“基于现实映射的经验”发挥了这样的作用，也产生了这样的演变。在动态的层面上是否有同样的规律？答案是否定的，甚至是相反的。也就说动态设计在虚拟层面上不仅不会变得概括，反而会越来越精细。写实化的动态会越来越接近物理世界的形态，而夸张的动态设计则会出现越来越丰富的风格。造成这种现象的原因主要有两点：首先，动态形式的东西是设计合理性的根本来源，是事物之所以运行的一种根深蒂固的、固有的印象。我们从出生起的现实生活经验全部建立于现实的物理世界。而物理世界是全时段全动态的。如果问谁对现实世界的运动规律最为了解，恐怕没有人能够胜出。只要我们处于清醒状态，目之所及，所看所知，所闻所听都是动态的。我们对这些动态的东西实在是过于了解了。在这种情况下，虚拟世界中任何不符合现实运动规律的物件都会被任意意识清醒的人认出。这就是所谓动态形式是设计合理性的根本来源。你可能在这里产生两种疑问：其一，当年的写实化界面设计其实也是现实物理世界的模拟，而现实中的物件显然都是写实的，这一点难道不是根深蒂固的印象？为何会在虚拟世界发生转变？其二，如果任何意识清醒的人都非常熟悉现实物理世界的运动规律，那为什么不是每个人都能设计出合理的动态设计呢？第一个问题的答案实际上表明了人对动态设计合理性与静态设计的合理性的容忍程度。如果将我们的讨论范围扩大化，可以看到两者的容忍度基本是相同的。我们也可以欣赏抽象、的没有任何道理可言的静态设计，一如那些抽象艺术。动态设计层面上也是如此。我们可以接受没有任何合理性可言的抽象动态艺术作品。但如果局限在用户体验层面，我们对两者的容忍度则大不相同。你需要意识到，用户界面设计是一种实用工具，其操作过程需要一种完全流畅的体验。这种体验在静态层面上已完成基本的用户教育的前提下，是不需要再次重复物理世界的视觉表现的。但物理世界的运动则依然需要发挥作用，这是这个虚拟物件最低线的“合理性”所在。举个非常简单的例子，现实中点击按钮，它一定会有某种反馈，否则会被认为失效。这是一种现实经验。如果这个经验可以顺利套用在虚拟世界（即我们此处讨论的界面）中时，我们的体验就是流畅的和不假思索的。在界面中时，这个体验所提供的基础就是由静态的、平面设计的按钮和反馈时动态的、有物理规则的按钮构成的。如前文所述，静态的按钮设计可以简约到只有文字和框体。这并不影响用户将它识别为按钮。因为我们已经经历过一段写实化的教育阶段。但是如果按钮的反馈不模仿现实，是一种完全抽象和诡异的动态设计，比如点击后随意乱晃、翻转、跳跃等等，就是完全无法被接受的设计。这种无法接受，并不直接表现为直接拒绝，而通常表现为理解混乱，使用受阻。又有人会质疑，在很多游戏里的按钮就是这样的，点击以后会发生爆炸、流光等现实按钮不会出现的状态。这难道不是一种非现实模仿的状态吗？为啥我们会觉得合理？因为这属于基于现实的夸张，即“符合想象的合理性”，我们会在后文展开。第二个问题。所有人都有完善的现实经验，都非常了解物理规律。但并不是每个人都是专业的研究者。人的经验可以是完备的，但并不是每个人都理解事物的内部规律。就像每个人都会有美食鉴赏能力，但不是每个人都可以真的做出美食。每个人都可以去评判美食，但不是每个人都需要会制作美食。作为动效设计师，其与素人最大的不同之处在于，他是一个专业的研究运动规律的人，是一个专业提供美食给食客的人。他接受食客的评判，会有更有效的方式去提升食客的体验。其次，技术的发展会让人更贴近我们创造的虚拟事物。当你的设备不支持120FPS时，不支持高清贴图，没有足够的机能容纳更多的面数，无法制作出足够拟真的效果时，大家都会容忍当下的设备表现。这是时代的局限性。你只有在回头看时，才会发觉当年的某些视觉效果简直无法容忍，但面对当代的顶尖效果时，它们往往不会给你造成这样的印象或者感知。因为你无法想象出不存在的事物，自然无法产生对比满意度自然会处于极高状态。这是直接造成动态设计层面，写实的愈加写实，夸张的愈加丰富的原因。另一个层面上，基于前人的创造，后浪们有越来越多的创造性，在某些细分领域的垂直深入，也会形成更加丰富的创造性。于是，根据第一点的逻辑，动态设计层面的演变会更加深入和丰富而不是向极简和概括的方向发展。这是动态设计与静态设计最大的不同。综上所述，运动规律是动态设计领域，尤其是游戏界面设计中的动效设计，所需要的最根本素养。接下来的文章中，我会展开讲述游戏界面动效设计中的运动规律，深入分析“对现实物理规律的模仿”和“符合想象的合理性”两种递进关系的内容。在此之前，需要提请各位注意的是，所有动态形式的设计都是基于现实运动规律的，但是进入垂直领域之后，又会有各自的特点。我们的分析将专注在游戏界面动效设计领域，其规律和准则未必适合其他动态设计领域。以上就是本篇全部内容，敬请期待后续内容。

Victory／니케：승리의여신／胜利の女神：NIKKE，中文名暂称），由韩国知名插画家金亨泰领军的SHIFT

我们在本系列的前几篇文章中提到。项目初始阶段的动效工作主要集中的动效预演设计上。这种预演设计并不是空中楼阁，而是为后续的动效工作做准备的。这些准备主要包括两点：动效风格探索和动效规范的制定。其中动效的规范制定又包括两个方面：纯设计向的规范与进版规范。纯设计向的规范包括当前所定风格中的细节。将感性的设计转化为理性可复制的元素，确定边界并且保证品质的稳定。这类规范根据项目的具体情况和设计组自己的习惯，具体形式多变，但大致上都包括以下内容：1.基本控件的动态形式；基本控件包括了常见的和通用型控件，它们的动态形式比较固定，因此可以指定固定的动态样式。比如“返回按钮”的进出场形式、弹窗、tip的入场形式等。由于这些控件并不一定是由单独的元素构成的，因此这类控件的动态规范往往相对复杂，也会涉及相关构成元素的动态次序以及对应的动态曲线等属性。2.基本曲线使用规范；与通用控件比较类似的，常用的和通用的动作曲线也可以作为一种规范元素。这样做的好处是可直接复用，从而节省重新探索的成本。但动画曲线的使用情境极为复杂，基本曲线的规范不可能完全覆盖系统内所有界面中所有元素的所有使用情境。这类规范一般只覆盖到通用的情境，可以与通用控件（基本控件）的动态规范混合制定。3.基本布局动态形式；界面的不同的布局形式本质上是由界面的交互功能决定的。因此类似的界面布局理论上有类似的功能需求。由类似的功能需求生发的动态设计也是相似的甚至是完全相同的。为这类相似的布局形式制定动态规范也是必要的。实际上，除了一些极为特殊的案例之外，游戏界面系统内的界面布局基本上是固定的几大类构成的，如顶栏构成、左右布局、左中右布局等等。通过制定这些比较通用布局的动态规范，可以覆盖到绝大部分的布局形式动态设计。4.转场形式与使用要求；游戏界面系统内的转场形式与各自页面间的跳转关系、功能表现以及情绪表达都有直接关系。这些都生发自原本的功能设计。因此一个游戏内绝对不止一种转场形式。但是一定是分属不同类型的，动效的设计规范就一定需要去严格根据不同的功能设计去制定对应的转场形式。不管是项目初期的铺量还是后续的延展，依据这样的设计规范，即可有理有据的展开设计。5.全局使用禁止项。在一些特殊情况下，设计师可以在设计规范的范畴外进行自由发挥，创造出特殊类型设计。典型的如活动类界面、BP的外围包装等。但整体上应该符合游戏本身的调性。这种调性是由游戏本身的美术风格、动态层面的曲线与节奏设计共同构成的。因此严格来说，这种自由发挥也是在设计规范的范畴之内的。但如何区分设计规范的边界，就需要指定一些全局禁止项。进版规范则根据项目不同有很大的差异。包括但不限于程序侧的节点规范（甚至有比较详细的节点命名规范）、材质命名规范、资源路径规范以及跟具体落地技术强相关的一些细则。通常来说进版规范不会形成规模庞大的文档系统，而是会被分散在不同职能部门的相关工作规范中。进版的规范目的有两个，一个是保证设计还原度。这需要根据纯设计规范中提到的相关元素去把控。如曲线和节奏次序，在引擎内就需要严格按照设计规范提到的数值进行设置。另一个是保证项目的资产管理有序，提高基于此的工作效率。有些项目中会严格规定相关资产的路径，如贴图、材质和预设等都有固定的路径。这一方面会方便查找，另一方面，程序会设置一些固定的引用脚本，这里边的路径一旦发生改变，甚至只是没有按照规范去对相关资产进行命名，都会导致引用失效，从而报错。对应的，节点的命名规范也是类似的道理。既方便检索，又方便程序按照固定的命名方式去引用。即便出现问题，也可根据命名去定位问题。具体的规范制定是一个逐渐演化的过程。也是项目内部人员磨合的一个过程。从来不存在一个一蹴而就，瞬间完成的规范。因此在这种事情上，设计师们也应该有一定的心里准备，这是一个持久战，而且是需要足够细心的持久战。以上就是本篇全部内容。

在各种动效（动画）制作工具中，粒子系统都是一个不可或缺的功能模块，而且它们的功能设置都极其相似。在常用的动效设计软件，如AE和Unity中，由于功能结构、属性数值设置都非常类似，所以粒子的设计方法也极为相似。通常来说，游戏界面动效中出现的粒子形态主要有“炸”、“飘”和“流”三种。其中“炸”通常用来辅助一些爆炸效果的外围碎片飘散效果；“飘”则大部分应用于场景氛围烘托；“流”则是最不像粒子的粒子，可以认为是“飘”的变种形态，通常用在特殊形态纹理效果上。如下图所示的《WonderBox》中的经验提升界面动效里，就出现了粒子“炸”的形态，不过，与经典的中心炸开不同，这是一个类似彩带的由下往上喷发的粒子形态。下图所示的《有杀气童话2》弹窗里，则是一种“飘”形态的粒子。这里的粒子还使用了序列帧动画的单个粒子效果。这里的粒子就起到了场景氛围烘托的作用。下图《斗罗大陆魂师对决》的“斗罗之路”界面里，关卡图标掉落后的光效中，有少许粒子，可以认为是一种“流”形态，它们和图标落下时的流光拖尾一起，组成了整个动画掉落时的完整动作节奏。下图《机动都市阿尔法》里的恭喜获得弹窗中，在标题处使用了多个粒子，有些是“炸”形态，有些是“飘”形态，它们分别起到了打开与持续阶段，动效中的动作节奏烘托作用。类似的，在下图《月神的迷宫》的获得类弹窗中，可以看到更明显的“炸”形态粒子与后续“飘”形态的粒子，其中碎玻璃效果也显然是一种序列帧粒子。基于前文所说的，由于诸多软件中粒子有着类似的特性，所以在动效设计过程中，我们可以几乎完全依托设计软件设计出最终进版的粒子的形态设计。在AE中，目前最好用的粒子插件是RG

上一篇我们提到“写实类”动效两个层面的概念，其中狭义层面的概念，包括了非卡通类、非科技感类、非国风类的风格化设计；而广义概念，包括所有风格化设计中的通用型设计。这类游戏包括的范畴非常广泛。总体上包括了不夸张的、运用与现实运动规律相似的动态设计的风格。今天讨论的游戏，它的动效就属于广义概念上的写实类动效。《美洲新世界（New

游戏界面的动效预演设计过程与引擎内还原过程，都需要注意的一个问题就是各个元素的层级关系。我们将预演设计称之为设计过程，引擎内还原称之为落地过程。在这两个过程中都需要谨慎的处理各个元素之间的层级和切分关系。它们的这些关系统称为“节点布局”。这里的“节点”引用自Unity中预设体中的概念，形同PS中的图层与AE中的图层。节点布局在动效中的影响因素，主要有几点：第一，影响设计方案；第二，影响流程配合；第三，影响取巧形式。第一，节点布局如何影响最初的设计方案。在设计过程中，所有的设计基准，除了其他设计本身之外的因素外，主要需要考虑的是最终还原度的因素。动效设计师在设计过程中不能无限的使用各种效果和极度复杂的层级关系。因为这些效果或者复杂结构所对应的节点布局，在引擎内未必支持，或者引擎内做到同样的结构会非常麻烦。用更巧妙的方式，但更简洁的节点结构做出同样的效果，是一种经济的做法。比如有些情况下，一些游戏中需要非常强的视觉效果时，会摈弃引擎内节点还原，而直接使用视频的形式（或者两者结合），这可视作是在包体与效果之间取得的一种平衡：在引擎内还原对应设计效果时，也应该将已经考虑了一遍的节点结构，用引擎内特有的形式进行布局。另外还需要与前端进行配合，使设计效果既吻合设计初衷，又吻合其背后的程序逻辑。第二，节点布局如何影响动效开发流程。这两个层面是影响落地效果的关键因素。在动效开发流程模型中，我们提到，界面拼接的工作需要在前端将界面结构处理出一个基本的布局之后开展。动效工作则在界面拼接完成之后开展。由于界面的逻辑结构涉及到程序逻辑与动效逻辑两个层面，因此在每个界面的工作流里都应有充分的提前沟通，否则在动效拿到拼接好的界面时，如果发现其结构不支持自己的设计方案，会导致一些修改成本，有时候这个修改成本还会比较大。比如最简单的，设计效果中做了结构拆分：但引擎节点中未做拆分：这时就需要拼界面工序重新对预设进行处理，之后才能继续动效工作。这种情况还只是未涉及到挂载逻辑的节点，如果一个动作或者多个动作涉及到程序逻辑判断，则情况会更复杂，返工成本也会更高。但是很多情况下我们并没有那么多时间去提前沟通，这就需要在项目前期培养出各个环节的配合习惯。如果有预演最好，但并不是每个人都可以通过观察预演来明确界面结构的细节的。最终还是落到一对一或者一对多的实际沟通。对系统界面来讲，由于已经有很多通用样式和设计标准，因此这块的沟通量可能只会集中在前期。后期约定俗称之后的沟通量会降低很多。但对于特异性的界面，尤其是临时性活动等界面，则需要根据具体情况进行充分沟通。虽然很多游戏的后期运营阶段，其活动类界面的基本框架是确定的，但仍然会有一些特别设计的结构需要去注意。第三，节点布局如何影响取巧形式。前文我们提过，在引擎中和在设计软件中实现同一种效果的方法大致相同，但很多情况下不尽一致。这也是前期设计效果时，设计师在制作某一个效果时需要同时考虑的事情。也就是说在设计软件中设计某个效果时就应该想到将来落地时对应的方案。如果落地时无法通过取巧的形式来达成，那么就不能设计对应的效果。当然，这只针对偏后期阶段的预演设计。参考我们在动效开发流程模型中所提到的阶段，在“探索动效风格”第一阶段的第一步中是不用考虑这个因素的，在第二步需要逐渐开始考虑，第三步就需要处处考虑了。这直接决定着设计方案是否有落地的可能性。具体的，在引擎中的取巧形式有很多。常见的有利用空节点、父节点旋转等。比如在AE中实现一个这样的效果：我们会用两个空节点去取巧：对应的，在Unity中，可以利用两个空节点来实现：又如，AE中实现一个斜向运动，但我们又需要单维度控制移动时，同样利用空节点来取巧：对应的，也可以在Unity中用一个父节点去做类似的事情：类似的取巧方式直接和节点的布局形式，比如是否可以增减节点相关。这都需要提前与前端进行充分的沟通，建立好规范（包括但不限于节点的命名、规定可增减节点的部位等），避免轻易更改节点造成的未知风险。综上，为本篇全部内容。

风格指的是在整体上呈现出的具有代表性的独特面貌。这一概念适用于一切视觉化的美术作品、艺术品、电影、游戏等等。对于游戏界面来说，其特有的风格是被刻意设计出来的。游戏界面的设计需要根据不同游戏的不同世界观，去进行特有的美术风格设计。这些设计来源于游戏世界观的文字描述，以及相关的美术资料，包括但不限于游戏原画、场景等资料。通过提炼这些材料，析出游戏界面可用的美术元素，色彩，特有的排版方式等。对这些元素进行有机的组合后就能形成一款游戏特有的游戏界面设计风格。

本篇开始，像讨论卡通类游戏界面动效设计那样，我们做一个写实类游戏界面动效设计的讨论，这次我们将根据局部表现的维度来讨论。所谓写实类游戏界面动效设计，在这里的定义分成两层，第一层是狭义层面的概念，包括了非卡通类、非科技感类、非国风类的风格化设计；另一层面则是广义概念，包括所有风格化设计中的通用型设计。这类游戏包括的范畴非常广泛。总体上包括了不夸张的、运用与现实运动规律相似的动态设计的风格。这种动效设计风格的主要特点有以下几点：第一，对现实运动规律的相对严格模仿。这种设计方式同样来自其各自世界观的严格约束。如下图所示的《美洲新世界》的动效风格，与其界面设计风格保持了比较强的一致性。界面设计有一定的材质描绘，同时保持非常轻量的风格设计特点。在此基础上的动效设计，体现出一种更通用型的特点。第二，在不同的独特氛围营造下有各自的夸张特点。如中古类的特别材质体现、现代类的现实材质体现等。如《花亦山心之月》中的折纸书元素动效，可以认为是一种写实化的表现形式：它通过模仿现实中的折纸书结构，来决定动效的展开次序以及空间关系，基本逻辑合理，这样的动效才有可信度。第三，对场景交互的体现更加依赖，不过这一点并不局限在风格上，基本上任意风格都有可能采用这种方式。只是写实类的游戏更方便这么做。比如说下图所示《黑潮之上》的一个场景化交互，通过镜头在真实的3D场景中穿梭来体现两个界面层级的跳转。本篇着重在第三点进行讨论。在写实类型（或具备写实元素的）游戏中，我们往往有更多真实的立体场景可以用来体现这种交互特点。富有视觉冲击力的同时，有时也可以用来解释特别的用意。比如我们曾经专门讨论过的游戏《绝对演绎》中，虽然使用了非3D的场景，但是通过2D面片的巧妙组合，也可以设计出镜头穿梭的转场样式，同时解释了从“家”里“出门”的含义：在韩国游戏《七骑士2》中则有类似的转场形式：这种形式本质上与前两种，尤其是《黑潮》中的示例比较，并没有本质的区别，它们都是镜头的穿梭效果。《七》的效果少了对镜头轨道运动上更柔滑的处理，但是增加了许多人物动画，有比较多与相应的界面布局相配合的设计，不过动作细节上和节奏上的处理依然有不小的问题。类似的处理，在这类游戏里其实非常常见，如游戏《奥丁：瓦尔哈拉崛起》的“选人界面”中。这款游戏的世界观也同属“西式奇幻”，色彩、调性上与上一例稍有不同，不过在这种场景化的设计上有着极为类似的形式。游戏的人物选择场景被设置在一间有篝火的昏暗房间内，这种设定一方面让人物处于照亮状态，同时背景压暗，更容易凸显人物的视觉特性。另一方面各个人物的不同姿势看似随意，实则是排排站的待选模式。可谓又符合形式又满足功能。此时的选择操作激活镜头动作就极为合理，我们从全景进到中景，这是个符合逻辑的画面变化。可以说但凡是有场景化交互的设计形式，就一定会有相应的镜头动画设计，不论是推拉摇移还是曲线穿梭。这种镜头变化的交互形式一定是一种层级跳转的视觉化外现，与框体跳转并没有本质不同。只是说我们现在所讨论的“写实化”动态设计，所依赖的正是“写实”的具体物件和环境。这种写实可以是对现实的完全模仿，也包括逻辑自洽的虚拟空间构造。不管这种写实是不是真正的现实模仿，它们的动作都一定严格遵守现实经验带给我们的合理性。镜头的穿梭，乃至面片构造的结构逻辑，这都是现实经验的合理性的体现。因此我们才称呼这种设计手法是写实化的设计。在此基础上，进一步的夸张与演绎，才会有合理性的基底。像《花亦山心之月》中的战斗开场里，几个勾结缠绕的金属圆环的动作设计，令人眼花缭乱的同时，极具视觉冲击力。如果仔细去观察思考，不难发现这是现实中不会存在的东西。但金属圆环的运动形式，以及与之配合的镜头动作，则都可以从现实中找到对照。甚至于整个动画的节奏设计，也都是我们潜意识里可以得到满足的节奏感的诉求。可以说所有的虚拟与夸张都是从现实中来，有的设计夸张一些，我们为它们赋予特殊含义，就形成了各种风格。有的不那么夸张，甚至直接对照现实去做，我们叫它们写实化。这些最终还是传导给现实中的我们，形成综合性的感受，我们称之为某种体验。对写实类型的动效的研究可以促使我们理解一些夸张设计手法的最初来源，也可以发现一些实际上是夸张而被误认为是写实的设计方式。就好比有些写实风格的美剧里大量使用了看不出来的“特效”一样，是一件非常有趣和有料的事情。接下来我们会继续就此展开，后续会有几个游戏的示例分析，敬请期待。以上就是本篇全部内容。

本篇聊一下游戏动效进版中极为基本的元素：时间轴和曲线。大家要秉持的最基本的思路就是，所有动画软件的时间轴与曲线都是共通的。一旦习得了其中一个软件的基本动画操作，就可低成本掌握其他动画软件。这就是俗称的软件的共通性。这是因为在当前的世代，甚至在可以想见的未来某一个阶段内，所有的软件动画方案都离不开最基础的两个概念：时间轴和动画曲线。本文简单的聊一下AE、Unity和UE4中的曲线，以便让你对此有个直观快速的理解。首先是动效设计首选入门软件AE（Adobe

这里的流程指的是最小需求单位内的流程。这个流程是构成整个项目周期内动效开发流程的最小单位。如果这个流程一直没办法确立，将会导致全局更加混乱。根据动效工作的客观需要，我们可以推导这一最小需求单位的流程模型为下图所示：毋庸置疑的，动效的工作需要以拼好的界面为基础来展开，因此动效的工作流程应该以“拼界面”的起始点为起始点。客观上每个界面都需要前端进行基础设置，并将界面设计师设计好的设计稿“进版”，整个界面进版的过程简称为界面重构。而后才能交予动效进行界面动画的引擎内制作。如果我们倾向于将整个流程设计为最高效的模式，那么上图所示的整个流程中，理想的情况下，拼界面应该由专人负责。原因在于：其一，拼界面需要将设计稿进行合理切图，这是一个需要理解设计稿和切图规范的工作，由界面设计师去做最好，但通常界面设计师的工作量较大，并没有余力去高效得做好这个工作；其二，拼界面需要对游戏引擎有比较多的了解，甚至是非常深度和专业的了解。但游戏引擎的功能庞杂，每个岗位的理解深度都是基于各自岗位的需求的。也就是说前端、重构和动效所使用的功能块面完全不同。这也是让界面设计师去拼界面所面临的一个学习成本。为解决这一问题，通常会有几个解决方案，这些方案也可以看作是从低效到高效逐渐演进的几种模式：第一种是界面设计师切图，然后由前端进行拼接。这种模式好处在于切图的规范出问题的概率极低，我们会默认为界面设计师在这方面是非常专业的。但它的问题在于，前端对设计的不敏感。这会导致界面还原度偏低。设计师一侧需要输出大量辅助材料，如标注图甚至是图层结构示意图。在后续的走查并修复还原度上耗费大量成本；第二种是由界面设计师或者交互设计师自己去引擎内拼接界面。这样做是对第一种模式的修正，界面和交互对视觉的敏感度高，可以大幅提升界面重构的还原度，但问题是需要两者花费时间去理解和学习引擎。并且在日常需求处理的基础上，额外增加了进版流程，会让他们的工作压力更大，这可能直接影响他们的单位时间产出质量；第三种是设置专门的界面重构岗位。事实上我们在很多厂商的招聘名单上可以看到这类岗位的兴起端倪，如“蓝图工程师”这类岗位。这种岗位的基本要求就是既理解界面，拥有对界面设计的视觉敏感度，又具备比较高超的引擎操作基础（仅限界面这一模块）。也就是说他需要具备界面设计师在切图方面的专业性，也同时需要具备前端在界面进版方面一部分的专业能力。是两者过渡部分的一个完美衔接。目前看来第三种方式是解决界面重构质量和效率的最佳解决方案。但很多公司限于开发和人力成本，依然大量驱使界面和交互去做拼界面的工作，这使得有些公司或者项目中的动效流程有很大不同。正如本文开篇所展示的理想动效工作流程所示。拼界面只是动效的准备工作，虽然其自身也要考虑还原度和程序逻辑挂接问题，但最主要的，那些视觉上不可见的，拼接的节点结构会影响动效设计的表现。最简单的，当你设计为拆分了的图形被以一个单独切片拼到引擎内后，动效就需要等待拼界面环节重新拆分拼接后才能开始工作。这也是整个流程内加入“check”环节的主要原因：在一定的条件下，需要打回重做。当我们预备建立一个高效流程时，就应该假设这种打回重做是频次较高的行为。此时如果不是一个专职的人员在执行拼界面的工作，那么他在高频次打回重做的过程中面临的不仅仅是大量沟通成本，还有极高的心理负荷。这对整体流程的提升是没有任何益处的。当然，如果客观条件限制，动效不得不经常与非专门岗位的人去沟通类似的问题，就需要考虑去建立符合自己实际情况的流程。比如，可以在界面重构开始之前就讨论好具体的节点结构，或者制作好动效预演，让大家直观的看到你所期待的界面层级拆分方式。甚至于，动效可以参与到界面重构的流程中去。但是本文依然倡导的是专人专事，这样有利于整体效率的提升。只有效率的提升，才能给各个垂直岗位留出足够多的时间去打磨出更好的质量。虽然每个环节的质量提升加总不一定等于项目整体的质量提升，但至少我们可以快速落地方案，也就为快速试错准备好的前提条件。这也是整体项目取得较高质量或者获取市场成功的基础。另外需要明确的一个事情是，在每个项目的初期，尤其是在开发经验不足的团队中，这种基本的流程是不存在的。流程其实是靠打磨形成的。所谓的打磨其实就是依照理想的模型，在现实运作过程中去摩擦、沟通，通过数次失败逐渐建立的成本最小、效率最高的工作方式。动效本身就是一个沟通上下游的工作，这个过程中需要去跟界面设计师沟通界面设计的含义、去跟策划了解整个系统的功能、去跟前端聊低成本的实现方案、去跟PM协调时间安排等等。在不同的岗位和环节中去协商，本身就对动效设计师的沟通能力有很大的要求。不仅要对流程设计的初衷，即高效，有所坚持。也要深刻领会各个岗位的工作特性、基本逻辑。更要能够长袖善舞，根据每个人的性格特性，去推进你的工作。当然，流程是否能够落地还要看各个环节是否因此受益。如果你的流程并没有让每个人感觉事半功倍，那不仅无法推进，反而应该考虑下方案是否周全，以及这一切是不是大家协商的结果。关于这些，你有哪些苦恼？留言或者入群说说。以上。

这是很久以前，我从著名插画师阿曦那里要来的图。大概墨迹了两年吧，总算有个交代，不晓得他本人还记得不。原图是这个样子的：最终效果如下：这个图很有特点，图形核心是披着死侍的皮的皮卡丘，所以人物部分要做得有趣一些，需要有丰富的肢体动作，那就上Spine！首先是拆图。此时先上PS，根据想要动的部分进行拆分，不用讲那么多，看视频吧：接着将弄好的图导进Spine里，自动搞好面片，绑好骨骼，一顿暴调，一个循环的动作就出来了：这个比细节更多的二次元小姐姐图好拆很多，动作上也好调很多，基本上按照整体有个循环呼吸态，再配合开枪动作去调整动画即可。然后将这个动画导出成透明背景的视频，我一般选择MOV格式。导好了扔到AE里，配合着其他部分动画，继续“打磨”。除了主要人物之外的其他部分也按照同样的逻辑，先在PS中按照自己的构思拆好层，扔到AE中：这块的构思是这样的：1.人物和文字在图形上是交错的，这部分应该进行协同处理。2.背景的烟雾，前景的石块和大师球都要有入场和持续动作。3.增加一个开场动画。原本这只是对静态海报的一个动态设计。但是作为动效设计师，习惯上就喜欢设计一个出场。此时假想这个图是一个拍脸图的话，那么整个入场动作会讲究时间迅捷和视觉冲击力，以及与后续循环动作的衔接。按照这样的思路去设计的话，很容易就想到模拟镜头推拉摇摆的动画动作设计，最后就设计出场效果为这样：想先从角色的眼睛特写入场，然后摇到它的手上，接着有开火动作。这某种程度上可以构建出一些神秘感：从特写镜头开始总会引人好奇，好奇于全局是什么。之后就是镜头拉出到最终画幅，展示刚开始所构建好奇之答案。配合着对人物的“运镜”动作，画面内的前景、后景也都有相应的动作。并且整个入场动画与最终的循环动画需要被设计一个完美的衔接。最后，整体上的效果，加上配音之后是这样的，看视频：幸亏只是玩一下，不然拖了两年这么久，岂不是被那啥。想看更多图？可以点阿曦的公众号，插画方面的内容非常丰富。如果你想他的哪副图动起来，我去搞搞。以上。

本篇我们开始聊一下引擎内的东西，也会形成一个系列。先从最常见和简单的东西讲起。引擎内还原动效时候，跟预演时期最大的不同在于很多效果实现方式的不同。虽然表面上的技术手段可能有比较大的差异，但实际上的逻辑还是一致的。引擎内实现动画软件中的同类效果，主要利用两种形式的技术手段：一种是时间轴形式，另一种是材质形式。时间轴形式与AE等大多数时间轴式的动画软件基本相同，都利用关键帧、动画曲线等类同属性设计来实现动画，只在具体操作手段上有所差异。这些内容我们会在后续文章中进行分析。材质形式则是游戏引擎内解决大部分规律性、程序化生成类效果的方法。在AE中设计的一些纹理和一些规律性动画，都可以在引擎中借由特定材质来实现相同或类似效果。由于不同的引擎，不同的公司甚至不同的项目组内，引擎的版本、类型都不甚一致，其材质的内部构造也有很大差异。所以本文没办法用一种特例去泛指所有的通用类型。但是好在不管材质的构造如何不同，其内在逻辑也是相通的。所以就按照基本共通逻辑的方式去展开讨论。首先涉及到的问题就是普遍共通的，即大概率会在每个项目中出现的材质。这些材质之所以具备普遍共通的特质，在于每个项目都会需要一些通用的基础效果，这些效果包括粒子、光效、文字流光等。如下图所示的《机动都市阿尔法》中的通用获得弹窗：“通用获得”字样出现时周围的粒子上，就使用了带add模式的材质，这样才使得每个粒子上的贴图有比较耀眼光亮的效果。下图的《月神的迷宫》中的通用获得弹窗中也出现了使用类似材质的粒子效果：下图所示的《幻书启世录》中的战斗结算中，“战斗胜利”极其下方图形上的流光，则使用了带通道的的add模式材质：下图所示的《有杀气童话2》中的弹窗里，下部边缘出现的蝴蝶和蝙蝠飞动的粒子效果，则用了序列帧贴图的材质：因此，抛开特别的风格要求，一般来说，游戏项目中，应用在界面上的材质都会包括以下几种：第一种，Add模式材质。这种材质用于制作界面上的光效。这种材质一般会有一张可替换贴图。有时候会在这种材质的基础上继续延伸出自带动画的，如无尽旋转的材质。第二种，Add带通道贴图材质。这种材质用于需要特定外轮廓的光效。典型的如文字的流光效果。通道贴图的作用是为流光贴图制造一个“遮罩”，用来吻合下方图形的轮廓，从而制作出特定的流光效果。这种材质也延伸出自带动画的和可K帧两种形式。第三种，序列帧贴图材质。这种材质的贴图为n*n的序列帧阵列图，材质本身的运算形式最终会让材质中的贴图，也就是序列帧阵列图，首先按照设置为暴露数据的横竖向划分数量，将贴图划分为n*n各区域，然后按照从左到右从上到下依次播放单位区域内的画面。由此形成帧数较少的序列帧动画。这种材质常用于短小的动画，如鸟的飞行、金币翻转、人物行走等，通过固定面片以简单的基础动作无法实现的动画。这种贴图可通过别的软件制作，导入引擎内使用，好处是损耗低效果高。这类贴图的使用需要注意尺寸大小，通常来说512像素见方是能接受的最大尺寸，根据项目的要求不尽相同。其他就根据项目各自的需求，会有各种特异性材质。这里提到的常见材质往往是项目初期最首先应用到的基础材质。是在项目初期提给TA的最初一批材质需求。随着项目的进展，逐渐才开始根据具体的效果，对TA提出更多种类材质的需求，情况就变得复杂了，篇幅所限，本文不再展开讨论。以上。

动效的细节可以影响整体效果，不信你看。咱以前写过几篇关于动效制作的细节，可以点这里回顾一下。这些内容概括起来就是如何通过注意一些细节上的设计，让参与动效的各个部件的运动方式更为合理。从而让动效看起来更可信，在此基础上可以进一步设计出更加生动、活泼和具备舒适节奏感的界面动画。这种对于细节的调整，不仅需要非常熟练的掌握运动规律，还需要合理的拆分参与动效的部件，根据它们的“角色”，为它们在恰当的时间点分配合理的动作。“角色”之间更需要有符合常理的互动。这种动效原理当然不止适用于游戏界面动效中，还适用于应用类的动效里，可以说尤其适用于应用类的动效。相比于游戏界面环境，它们的存在环境往往更“干净”或者“简洁”。动效的作用更加“突兀”，用户拥有更多的精力去观察到动效的细节。这不，最近使用“剪映”比较频繁。当加载一堆的素材视频时，该应用会进入到一个加载界面，素材越多加载得越久，让我注意到一个小loading动画做得不错，但是总感觉它的动作比较“粘滞”：这是一个根据电影场记牌（上半部分的夹子叫打板）为原型设计的小图标。作为一个视频剪辑应用，利用这种元素做加载图标是情理之中的。原版图标的运动方式可以划分成两部分：场记牌整体的上下动作和打板动作。我初步观察后认为，动效中的“粘滞”感缘于两个动作的同时发生，即两个动作没有太考虑先后响应关系，没做出时间错层的设计。当然，也许原版的设计师考虑到更多的情况才设计成现在的样子，下文内容仅是我根据看到的部分进行拆解分析和进一步的“优化”。通过复刻和逐帧模拟，我大概还原了一下原版图标和它的动画：上两图中的下图所示即为大概还原的原版图标动画的主体运动：红色层是整体的上下动作；粉红色层是打板动作。这两层的关键帧布局基本上印证了我的猜想，两组动作并没有做错层处理，从而使得总体效果“粘滞”。这里要稍微说明一下所谓“粘滞”的含义。这是我经常拿来形容“张力被抵消”效果的形容词。我们在设计一个物件的动作时，会通过预备动作，或者长时间的蓄力动作为它的主体动作增加张力。就像射箭之前的拉弓动作一样。但是如果此时别的动作与这个动作同时发生，如果不仔细规划设计，就会有概率使其他动作抵消掉这种预备动作所产生的张力，最后整体产生的效果就是“粘滞”。这里一定需要错层设计吗？不一定，但是我所考虑的情境下，就是必须的。所有的物品运动都需要一个能量源。也就是产生运动的能量策源。发生在一个或者一组物品上的运动都将围绕这一能量源，否则运动将极不合理。能量源当然可以不止一处，但对单个运动来说一般只有一个。对这个场记板的运动来说，它的能量源在我看来就是打板动作。这个能量的终极来源是我们虚构的看不见的人，并不出现在画面内。这个物品在这个情景下一定是人驱动的，所以人不出现并不会影响整个运动的合理性。如果以打板为能量源，打板动作应该是所有运动的最初始运动：上图是我修改后的动作中，打板动作和整体动作的关键帧关系，它们之间做了微弱的时间错层设计。将打板动作的值曲线展示出来就如下图所示，总共分为3个区间，代表三个不同的动作：区间1，是夹子张开的动作，这里的曲线被调整为“快入慢出”的一个变种版本，而且持续时间较长，会体现出一种更灵活展开但有蓄力过程的一个动作；区间2，是停顿过程，这要配合整体动作去看，稍后解析；区间3，是“慢入慢出”曲线，这个曲线可以让夹子迅速合上，以便使区间1所蓄张力得到有力释放。整体动作的值曲线分两个部分，一个是Y轴的上下运动，如下所示：它也分成三个区间：区间1，一个变种的“慢入慢出”动作，入动作稍微延长一点，以便有响应夹子动作的观感。这个区间的起始点是和夹子一样的，因此可以在曲线设计上做出一点迟缓来达成时间错层的作用；区间2，回落动作，一个变种的“缓入缓出”动作，更接近“快入慢出”动作，模拟重力效果；区间3，回落后抖动的动作，这个比较常见，就不再详细说明。另一个是整体上因为夹子的运动而产生的角度变化响应动作，它的值曲线如下所示：它可以划分成4个区间：区间1，因为夹子的运动而迟滞2帧的旋转，是个“慢如快出”的曲线，如果你注意到的话，这种表示响应其他动作的动作一般都会用到这种曲线；区间2，停滞，等待其他动作完成，稍后综合分析；区间3，夹子迅速合上后的响应动作，这个动作在整个过程中都很快，所以也用的“快入慢出”曲线；区间4，一个来回的抖动。这里如果加上过多的抖动会显得动作过于杂乱，所以设计成只有一个来回。最后我们把这几个曲线合起来，看下整体动作是按照什么思路制作的：该图中，青色线是打板旋转值，绿色是整体位移值，紫色（经过了处理）是整体旋转值曲线。可以看到打板动作区间1和整体位移区间1同时发生，但打板区间1首先在图中“1”点处关键帧结束。这意味着夹子完成了张开动作，但整体位移还没有结束。一直到打板区间3的夹子合上，另外两个值才发生响应动作。即图中“3”点处以及红框内发生的值变化。但它们的响应发生在打板区间3结束点的图中“2”点关键帧处之前，即“3”点处，这是因为打板区间3的动作是一个“慢入慢出”动作，主体动作的（视觉观感）完成时间要早于区间结束点。另外可见紫色值曲线，即整体的旋转响应动作曲线，在图中黄框内（即整体旋转值曲线区间1，即上文第三个值曲线的区间1）与打板区间1之间的关系：后于后者发生，并且幅度较小，持续时间较短。这都是模拟现实中类似响应动作的特征。整体上的效果如下所示：从直观的角度上，我们能明显看到打板动作是最先发生的，这个“向上趋势”的动作“拉扯”整体向上运动。此后，等待一点时间，夹子猛然合上，促使整体向下运动。同时，夹子合上时的剧烈角度变化也促使整体发生角度上的扭动响应。另外，外围的星星效果也配合打板工作，设计成了“炸开”的效果。通过这样的修改，改善了我在观察原版设计时感受到的“粘滞”，整体上更加灵动合理，顺便也让它耐看了一丢丢。不过我不是剪映的设计师，并没有通览整个应用的情况，这一点小修改也只针对这一局部感受出发，欢迎在留言区提出你的看法和意见。以上。

本系列话题的上一篇“半周谈-48

逻辑交代动效的逻辑交代指的主要是图形逻辑的交代。即动效在展开的过程中，参与动态演绎的图形元素之间的演化关系。它也有两个层面的含义，主要建立在“连接”这一概念上，其次建立在自身的结构解释上。动效逻辑交代的第一个层面：连接游戏界面的最基本单位是框体。无论框体以什么形式存在，无论它是否直观可见。界面之间的逻辑关系，均是通过框体之间的衔接来体现的。连接就是动效功能交代的视觉外现。连接的概念，我通过《半周谈》系列有过比较深入的讨论，可通过“动效如何构成连接”系列，即“半周谈”的020、021、022、029、033和037，或者该系列合集“【半周谈-系列合集】动效如何构成连接”了解更多。作为基本层面的组成部分，动效的连接是动效节奏设计的基准点之一。下图所示的《飙酷车神2》中，车辆场景与车辆切换界面之间的切换就是一种连接。这种连接基于功能去进行设计，不仅体现了在前后不同场景中的同一物件的连贯性，还通过这种特别的连贯设计，赋予整个动态效果以令人舒适的节奏。下图中，《刺客信条：起源》的道具相关操作动效，也有着类似的效果。以“全局至局部”的基本功能思路，配合层级、空间感的视觉感受，赋予类似动效中不同的节奏体验。