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！）：
https://medium.com/@fernandocomet/ui-design-animation-process-13953d2bd215
用于动画制作的 Codepen
如果你直接用 Adobe AnimateCC（CreateJS库）过滤转换，后果会很严重，因为一旦将其转换为代码后，它们就不能显示出来。您可以将这个动画与从同一文件导出的视频进行比较，您就会发现不同之处。
视频如下所示：
https://www.youtube.com/watch?v=EQgnSJr372E
直接从Adobe AnimateCC导出的视频
而且我还可以使用代码或Principle做出同样的效果。这样可以让背景栩栩如生。
不管怎么样，可以让您的角色哭泣，跳舞，喝咖啡，装扮成印度人，用一个苹果使人醍醐灌顶，让您的头发被一匹马吃掉，把其中一个变成哈利波特等等动画，这都很有工作。
同样，也可以增加使用一些 flaticon 图标，比如云，鸟，羽毛，茶杯，仙人掌，苹果，头盔，魔术棒，相机，马，英国国旗和铅笔。
结论
动效设计这几年如雨后春笋般的流行起来，不管是大公司还是小公司都会专门聘请专门的动效设计师，在Google最近就I/O大会上概述了Google产品线上对于产品的标准化动效语言的规范。
而从ui设计师转型到ui动效设计师的我了解到，作为设计师已经不仅限于静态的设计，动效是很强大的设计工具，和有意思的工作，能轻松自然的引导用户，以及在看似单调的操作中产生不一样的惊喜和品牌记忆感。
通过动画，充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面，而让他们更直接的触达任务，增加用户体验感。
本文翻译来自Medium： https://medium.com/@fernandocomet/ui-design-animation-process-13953d2bd215
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
可以加我微信一起讨论设计问题：
我的微信二维码，警告：非诚勿扰！
设计作品：
Dribbble：https://dribbble.com/LINA_
站酷链接：http://www.zcool.com.cn/work/ZMjI2NjM2MTI=.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
