美文网首页
UI设计的动画制作流程

UI设计的动画制作流程

作者: Liiizzy | 来源:发表于2019-01-04 23:00 被阅读25次

    我想说说一些有关动画制作的东西,包括视频,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 图标,比如云,鸟,羽毛,茶杯,仙人掌,苹果,头盔,魔术棒,相机,马,英国国旗和铅笔。

    原文链接

    相关文章

      网友评论

          本文标题:UI设计的动画制作流程

          本文链接:https://www.haomeiwen.com/subject/wrslrqtx.html