网页中交互画效果设计的方法和流程(3)

三、如何实现你的创意

这些概念设计在初期需要通过“动态转化”生成可预览文件便于后期程序开发。接下来为大家介绍一款提升动态设计表达能力的软件Adobe After Effects，可以把它理解为动态的PS，它是一个表达你“流动”概念的设计工具。它不需要编程，可以自由设置尺寸，操作界面直观通用。
在这里，我们以下面动画为例，从素材准备、逻辑整理、动态设计及优化、发布设置来讲解关键的制作流程。

01、 准备阶段：在PS中分好图层,将需要做动画的图层进行分解，梳理好图层间的前后关系。

02、逻辑整理阶段：在开始着手制作前，这一步至关重要！它可以帮你梳理动画间的流动层 次,估算制作的难度成本，是否需要插件来辅助完成等。

03、动态设计阶段：使用基本工具实现动态效果。对于这个动画案例，我们需用到AE中最基础的 功能：position、scale、opacity（下图左），具体的制作步骤这里不做赘述。大家可以去百度一下相关的AE基础教程。

04、 体验优化阶段：为达到最优化的体验效果，动态体验设计需要不断打磨推敲。必要时需要重 新回归到PS中，对素材进行调整，以便更好的配合动态设计。在AE中为了使动画更顺滑、有 层次感，软件提供了参数化的控制工具，在这里可以对动画速率和加速度等进行调整。（上图右）

05、 发布阶段，这里为大家介绍两种输出方案。

A: 在file – export中输出swf格式。首先在composition settings中设置输出文件大小，帧率建议保持在15-20帧，这样的文件相对较小且保证了画面流畅度。然后在swf settings中设置jpg品质，图像品质决定了你的文件大小，这里建议设为5。在下方的options勾loop continuously，可以让你的swf文件一直循环播放。最后点击OK输出即可。

B: 输出gif图片。首先在composition – make movie中输出avi格式。然后在PS中的文件-导入视频帧到图层，最后在PS中输出gif图。

gif与swf的区别在于前者文件较小，但是画面会有很多噪点；后者文件较大，画面基本没有损失。因此大家可以根据画面内容选择输出的格式，如：灰度图做动态演示时可以输出gif格式；如果画面色彩比较丰富，建议输出swf格式，然后通过swf品质设置，调整swf品质设计以达到最优效果。

四、小结

我们似乎已经习惯了“动态的世界”，动画以其独特的魅力愉悦了我们的感官体验。但是目前还没有相对科学完整的动态设计规范；因此，在保持“流动”思维的同时，要思考为什么需要它、何时需要出现它，如何保证它的一致性与可拓展性等。动画是为了解决某种功能需求而存在的，最重要的是它一定要服从用户体验。