UI设计的动画制作流程

我想说说一些有关动画制作的东西，包括视频，demos，HTML或UI的高保真动效demo，软件，建议等。

在开始说之前，我从回答这三个问题开始。

第一个问题：动画在哪里展示？

有很多种情况下。为某个音频制作样片，或者将动效上传到Dribbble，与交互的高保真动效demo，制作视频教程，制作广告等，都是不一样的。

这里您要知道您的作品将在哪里展示，因为它决定着使用哪些软件甚至和制作流程。一般都是在网络，app，电视，视频，特殊仪表板，广告牌等展示。

第二：如何建立它？ 准备使用哪些软件？

一旦您知道在哪儿展示，您就应该想想您将如何去做。其实您也可以在这之前就开始（ 问题三 ），这些都看你自己准备怎么去做。

例如，如果您正在制作一则电视的广告，您可以使用Final Cut Pro，Adobe Premiere或Adobe After Effects。如果您正在为您的作品集做demos，或许您可以使用Flinto或Principle。如果您要做一则广告，您可以选择Google Web Designer， Adobe Animate CC或仅使用代码。如果您要为一个网站做微互动系统，您最好使用CSS transitions。

这里不是为软件打广告也不是一定要用这些软件。但是，如果您在做网页动效设计，当一段交互的视频或者动效没有达到最理想效果的时候，一开始的时候其实您就应该与开发人员多多交流，看可以用什么方法来最好的解决。

第三：您的制作流程是什么？分为几个阶段？

这也是一个悬而未决的问题，所以要看你怎么想了。以我的情况来举个例子，我的流程分为三个阶段，起手稿，绘画和动画。笔和铅笔对我来说非常重要，对我进行UX（用户体检设计）尤其重要。

示例：Ironhack UXUI课程样片

这是一个演示学生参加Ironhack课程的demo。 它只需要放在网页上展示。我在第一版中，软件使用了Adobe AnimateCC。我认为我还可以用代码（例如GSAP或类似的库）和Principle来做，可以比较各个软件做出来的结果有什么不同。我先用iPhone8建立了画布。

手稿

我最开始先回想怎么动起来。关于动态效果，我首先想到，如何变化的？观看整个动画制作需要多长时间？它应该要像旋转木马一样在转动，从左到右，并显示出不同的画面。我在思考动画的节奏，它应该一次显示一个画面出来。

我画的动画运动手稿图

其次我想的是画面。举例来说，一个动画有10个画面。在每个画面中，我会展示一个角色和一些文字。我联想到Ironhack Bootcamp上的一个描述我的小伙伴的动画。是以这种方式来展示每个画面的。

• 一个角色

• 一幅背景（可能是纯色）

• 一段描述性的文字

• 或许角色有第二种状态，所以它不是静止的

这个工作中的手稿

如何制作每个画面的动画呢？可以这样制作：先是角色出现，然后文字出现，还有一些动画（我觉得这要有点搞笑），最后角色慢慢从右到左离场，这是一个角色的序列。

工作中的手稿

现在让我们来好好想想每个的角色。我可以引入哪些元素来吸引用户的注意力呢？我想到了用10个不同的角色和一个让动画更加好的元素，比如可以给角色带上头盔，改变发型，让角色生气等等。

动画角色手稿

绘图/设计

这里我直接进到Sketch里，只是为了用来绘图画。因为我不是插画家，所以我就使用Paul Stanley 的 Avataaars。我有10个角色和差不多20个画板（包括初始状态和最终状态）。将它导出到 InvisionApp，出现的画面如下所示：

InvisionApp中角色的最终状态的图片

然后我去制作模型并下载所需资源。

这是inVision构建的。

这样做的原因是：我使用Adobe Animate CC 制作动画，因为Sketch不是Adobe旗下的，所以我会去InvisionApp获取资源（当然，也可以使用 Adobe Illustrator 制作角色），我的资源如下。

动画资源

动画

然后转到 AdobeAnimateCC 并导入所有资源。 我打算使用 Canvas 制作一个简单的时间轴，这可能不太简单，因为我的动画有950帧，差不多有40秒。我有一个背景和元素进出的图层。用来调整动态效果，加不透明性以及转换。

AnimateCC动画时间轴

如您知道的，您可以将它导出到代码中，这样您就可以在这里看到动画是如何制作的（Run Pen！）：

用于动画制作的 Codepen

如果你直接用 Adobe AnimateCC（CreateJS库）过滤转换，后果会很严重，因为一旦将其转换为代码后，它们就不能显示出来。您可以将这个动画与从同一文件导出的视频进行比较，您就会发现不同之处。

视频如下：

https://www.youtube.com/watch?v=EQgnSJr372E

直接从Adobe AnimateCC导出的视频

而且我还可以使用代码或Principle做出同样的效果。这样可以让背景栩栩如生。

不管怎么样，可以让您的角色哭泣，跳舞，喝咖啡，装扮成印度人，用一个苹果使人醍醐灌顶，让您的头发被一匹马吃掉，把其中一个变成哈利波特等等动画，这都很有工作。

同样，也可以增加使用一些 flaticon 图标，比如云，鸟，羽毛，茶杯，仙人掌，苹果，头盔，魔术棒，相机，马，英国国旗和铅笔。

原文链接