该练习基于星星（
G站ID：
逃跑的星星
，站酷ID：
逃跑的星星
，该界面设计作品可在她的上述两个网站个人页中看到
）的同名界面设计稿。我的动效设计遵循了原稿的风格，并按照动态规律对其进行了动态上的延伸。该设计稿参与了GGAC2021年度游戏界面设计大赛，并获得优秀奖。
本文所展示内容均得到星星本人授权，且仅用于学习交流之用，请勿擅自盗取其中一部甚至全部用于商业用途，如有相关行为，请自负法律责任。
下方视频为完整预演效果：
本预演流程所展示的内容是一个典型的游戏项目最小闭环循环系统流程。即辅助最小可玩模型的界面系统操作循环，外加一个微型外围系统（人物详情和道具列表）。
这个模拟流程展示了从登录界面进入主界面，而后进入人物详情界面，由此进入武器列表后，连续后退至主界面，再由“开始战斗”按钮进入关卡界面，点击该界面的跳转按钮后进入战斗内界面，此后衔接结算界面，最后从该界面返回到主界面后，整个预演流程结束。
流程示意如下所示：
设计稿整体风格为二次元向，且静态元素中出现多种科技感设计元素。如扁平化的图形表现形式，锐利的元素造型以及包括斜向图纹等。
因此这一预演中，动效设计就以二次元、科技感为关键元素进行设计。
这里的科技感以两种图形变化为出发点，一个是图形的生成演绎，另一个是闪动切变。整体上配合更加柔顺、劲道的动画曲线设计。
生成演绎出现在很多细节之处，如下图所示主界面中的“战斗按钮”：
这一“图形生长”过程是一个典型的本游戏风格生成样式，由两部分构成，一个是颜色框的扩展，以及随后生成的按钮框本体。在这个过程中配合闪切过程，可以呈现一种由内而外生长，同时伴随科技元素感知的效果。
这种生长样式普遍应用在界面的各个角落里，常用于类似的框体造型物件，如下图所示的主界面玩家头像控件部分：
和下图所示的人物界面左侧选中态的页签底：
以及下图所示的人物界面右侧技能图标出场效果：
在下图所示的关卡界面右侧面板中，类似的框体也一样套用类似出场效果，我让它们用这种形式保持了风格上的特点与一致性：
这些常见的纯色框上所用色彩则是提取自该设计稿的其他地方，并加以提纯，作为动态辅助之用。这种色彩的提取方式需要建立在对设计稿色彩设计的理解之上。切勿提取与整体风格不搭的色彩。
这种纯色伴随元素的使用还存在另一种情况，它们以色块的形式存在，主要目的依然是体现出科技感，所以用横向扩展加透明度闪切的动画方案。如下图所示的主界面左侧页签控件，就包含了这一效果：
上图中还有一种常见元素，斜纹动画。在本效果中属于非常细节的地方，这种设计保证了相应的图形在界面中不那么呆滞。所用的设计方法是遵照原图形的动作趋势，即横向移动的方式。入场后保持一定时间的拖尾动作。在本预演的其他部分也可以看到类似效果。
一般来讲，在实际工作中，动效预演里不会包括人物原画相关的设计。但在一些情况下需要动效设计师去为这些素材增加一些细节。比如游戏人物确实如设计稿那样是2D人物，且最终进版效果也是2D动画的样式；或者人物保持静置会影响到整个预演效果。
这些情况下动效设计就需要让这些原画有一些效果，比如可以找到引擎内已经做好的3D人物动画，录制视频放在预演中，最大化的模仿最终的进版效果；有时候就需要利用其它工具去制作2D动画。
如果将本预演所展示的项目想象为真实的项目的话，设计稿中的人物原画大概率是一种3D效果。但本预演依然想要最大化逼近完整的进版效果，在找不到合适的3D人物视频的情况下。我决定用Spine来辅助实现2D人物动画效果。
这样做的好处有两个，一个是Spine可以制作出流畅且效果一流的2D人物动画；另一个是，如果这是项目实操，且人物最终确为2D（比如结算界面这样的场景里），Spine动画是可以直接导入引擎内使用的，转换成本很低。
下两图所示的就是使用Spine制作出的人物循环呼吸效果，动图做了加速处理：
第一个是主界面中出现的人物，但它在实际项目里大概率是3D人物：
第二个是结算界面中出现的人物，通常结算内出现人物立绘大概率会保持预演中的2D效果，所以这个人物的动作设计相对设计得细腻一些：
而第三个人物，由于结构相对单一，动作相对平稳，仅用AE直接进行了处理：
这个人物有两次入场效果，一次是主界面的“活动”控件，一个是“关卡”界面中的入场。上一图所示为后者，而下图所示为前者，两者在入场形式上利用块状生成的动态样式保持了某种联系：
动效预演里的转场效果直接反应了操作流程的顺畅度。从技术角度上讲，转场需要根据设计稿的结构去构思，同时需要考虑完全可实现性。
登陆界面的入场，就被构思为一个探照灯照射，之后全亮的过程。这是该界面LOGO字体的长投影给我的灵感。并且这一过程中伴随了镜头的拉出以及长投影的变化细节：
这个界面的背板上，与系统内其他界面的背景相似，都充满了各种科技感元素的装饰，它们同样在动效层面上有非常多贴合科技感的细节设计。
登录与主界面的衔接，整体上延续了镜头推拉的效果，在此基础上让登录界面拉进，而主界面入场时拉出，伴随人物的穿梭出现效果，试图营造一种冲击力：
此后的几个界面中，也尽量在操作逻辑与图形空间合适的情况下，继承了主界面的镜头推拉效果，以使多个界面在整体风格上保持一致。
主界面是进入所有系统的枢纽，可在主界面开始演示最小可玩循环。此时点击人物即可进入人物详情界面：
之后，点击人物详情界面的武器栏，进入到武器列表界面：
这两个界面背景相似，但使用了不同的转场形式：主界面进入人物详情时只替换界面元素，将人物和场景只做镜头推进动作；人物详情进入武器列表时则执行新场景盖住旧场景的操作。因为我们认为武器列表是一个次级页面，而主界面与人物详情则通过共同元素贯穿，通过来回的推拉镜头，使人物串起两个界面，这样的效果会让切换的感知比较弱，同时区分出不同等级页面的层级关系。
武器列表中的物件很多，入场速度快，但依然为其设计了按照棋盘式列表入场的动画次序：
另外，这个页面还有一个简单的武器切换演示：
进入武器详情页面时，虽然没有整体的镜头穿梭效果，但依然用武器图标本身作为串起两个页面间联系的元素，这在上文它的入场效果与下图的退出效果里都有同样的表现：
同样的，从人物详情页退回至主界面时，也是其入场效果的反推：
此后，从主界面点击“战斗”按钮就正式进入到核心玩法循环了，先进入的是“关卡”界面，这个界面的背景与人物都与主界面不同。也需要营造进入战斗之前的整体气势，因此它的入场被设计为一个彻底刷新的效果：
整个入场效果里，我为中间偏左的人物的入场设计了漫长的前奏动画，这赋予了它所代表的整个玩法循环的仪式感。背景的图案动态亦配合人物的入场节奏。
点击“作战”按钮进入到局内界面：
原设计稿上对局内并无过多描述，只是一个简单的场景和几个面板、图标，玩法并不明确。这是这个预演与实际工作中的预演的最大差别。实际项目里我们会在预演中将核心玩法的基本操作全部演示一遍，或者至少放入局内玩法的视频演示，以与整体的预演效果相配合。
此后自动进入到结算界面。结算分为三步，第一步是出现获胜字样，字样自动演绎后归位，陆续入场的内容展示了最佳玩家：
第二步则是展示同局的其他玩家精简信息。这一步一般来说会自动播放，但是是第一步的长拖尾动画，一般会持续比较久，因此也设计为赋予玩家点击跳过。在这个预演中也显示为点击跳至第二步：
第三步就是第二步入场完成后的长拖尾，其模式也与第一步至第二步时相同，此处展示了较长时间的循环动画：
在结算最后一步界面中点击任意一处，就退回到主界面，整个预演结束：
预演过程中特意设计了点击效果：
这个点击效果的作用有两个，一个是为预演的操作指明手指点击的点位；另一个是可用作项目落地后的“手指点击特效”。
这是一个相对完整的、比较典型的游戏项目动效预演。在实际项目中，这种预演的主要目的是研究特定项目的真实操作流程，以及通过对细节和整体上的全部界面进行动态设计，摸索出特有的动效风格。是动效进版流程的初始工作步骤（关于动效的进版流程，请关注《半周谈》后续关于动效工作流程的内容）。
这种预演越完整，整个项目的动效风格就越趋明确，就越方便去做相关的规范以及后期的进版工作。
但是它并不是囊括的东西越多就越好，同时也可能会面临多次修改。
预演的存在目的本质上就是为了更高效的摸索出设计风格、规范以及最快速最有效果的看到项目高保真的、最接近最终模样的效果。只要达到这个目的就可以，没有必要刻意追求大而全的效果。
进入到项目中后期时，一般情况下这种预演将不必再存在。它的历史使命就完成了。借助预演而逐步产生的成熟设计风格和动效设计规范将接过使命，继续辅助动效设计师。他们的绝大部分精力将投入在引擎进版以及各种问题的修复当中去。
以上。
欢迎点击下方名片关注本号
往期推荐：
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
