在产品原型设计阶段，交互动画经常用于展示页面变化过程。相比单纯查看静态设计稿，动画能够表现点击后的反馈、页面切换方向以及元素出现方式。实际制作Principle原型时，很多问题并不是出现在动画设置本身，而是在设计稿整理、页面状态规划以及图层关系处理阶段。例如同一个按钮在不同页面中的状态没有对应，导入后的图层名称发生变化，都会影响最终预览效果。掌握基本制作流程的同时，也需要了解动画异常出现后的检查方法。

　　一、Principle怎么制作交互动画

　　Principle制作交互效果时，需要先建立页面状态，再让不同状态之间产生变化。相比单独调整某个元素，提前整理页面结构会让后续动画制作更加顺畅。

　　1、导入设计稿前先整理图层关系

　　很多动画问题在导入文件后才出现，原因通常和原设计文件的图层结构有关。

　　①、整理【设计文件】。

　　②、确认页面元素分组。

　　③、统一图层名称。

　　④、导入【Principle】。

　　⑤、检查导入结果。

　　例如按钮、文字和背景如果合并在同一个图层中，后续制作点击反馈时，就无法单独控制其中某个部分。

　　2、利用页面状态制作变化效果

　　Principle中的交互动画通常依靠页面之间的状态变化完成，而不是单纯播放一段动画。

　　①、复制【页面状态】。

　　②、修改元素位置。

　　③、调整显示效果。

　　④、建立交互连接。

　　例如制作列表展开效果时，可以先建立收起和展开两个状态，再通过点击操作切换。

　　3、调整动画中的细节表现

　　页面连接完成后，还需要调整元素变化过程，让交互表现符合设计意图。

　　①、选择【动画时间轴】。

　　②、修改移动距离。

　　③、调整变化时间。

　　④、设置缓动效果。

　　动画效果是否自然，通常和元素移动方式以及变化节奏有关。

　　二、Principle交互动画预览效果不正确如何调整

　　制作完成后的预览阶段，能够发现很多编辑状态下不容易看到的问题。遇到效果异常时，需要根据具体表现判断原因。

　　1、点击后没有进入目标页面

　　交互没有响应时，先检查触发条件和连接方向。

　　①、打开【交互设置】。

　　②、查看触发动作。

　　③、确认目标状态。

　　④、重新测试操作。

　　如果连接对象选择错误，即使页面和动画已经制作完成，预览时也不会产生对应变化。

　　2、切换页面后元素出现跳动

　　页面切换时出现位置变化，通常和两个状态中的图层对应有关。

　　①、查看【图层列表】。

　　②、比较前后页面结构。

　　③、检查对应元素。

　　④、调整图层关系。

　　⑤、再次预览动画。

　　例如两个页面中的头像使用了不同名称，切换过程中可能无法保持连续移动效果。

　　3、动画效果和编辑状态存在差异

　　有些动画在编辑窗口看起来正常，但运行预览后速度或者方向发生变化。

　　①、打开【预览窗口】。

　　②、重复操作流程。

　　③、记录异常位置。

　　④、检查动画参数。

　　⑤、修改对应设置。

　　这种情况需要结合实际操作过程判断，不建议只调整某一个时间参数。

　　三、Principle交互动画制作中容易忽略的问题

　　交互原型通常会经过多轮修改，第一次制作完成的动画，后续可能因为页面调整而出现变化。保持文件结构清楚，比单纯修改动画参数更重要。

　　1、设计稿更新后旧动画受到影响

　　产品页面调整后，新增元素或者重新分组都可能改变原来的动画关系。

　　①、打开【导入文件】。

　　②、查看新增内容。

　　③、检查图层变化。

　　④、调整交互关系。

　　重新导入设计稿时，需要确认原来的页面状态是否仍然对应。

　　2、页面数量增加后容易出现管理问题

　　原型页面较少时，交互关系比较容易维护。页面数量增加后，查找问题会变得复杂。

　　①、整理【页面列表】。

　　②、标记页面用途。

　　③、检查连接关系。

　　④、保存当前版本。

　　例如同一个按钮存在多个跳转状态时，如果页面命名混乱，后续调整动画会花费更多时间。

　　3、交互文件交付前需要重新测试

　　用于展示或者交付的原型文件，需要从使用角度检查，而不是只查看编辑效果。

　　①、打开【预览模式】。

　　②、按照操作流程测试。

　　③、检查页面跳转。

　　④、确认动画表现。

　　⑤、保存最终文件。

　　总结

　　Principle交互动画制作并不只是调整移动、缩放和时间参数，页面状态以及图层结构同样会影响最终效果。实际处理预览异常时，需要结合交互连接、元素对应关系和设计文件变化进行检查。对于需要持续维护的原型项目，保持图层整理和版本记录，可以减少后续修改时反复调整的问题。希望本文能够为需要制作Principle交互动画和处理预览异常的设计人员提供一些参考。