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 图标,比如云,鸟,羽毛,茶杯,仙人掌,苹果,头盔,魔术棒,相机,马,英国国旗和铅笔。

原文链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容