赞助商
立即赞助

花两个月时间做的动画宣传片,为你揭秘制作全过程

UI设计3年前 (2021)更新 流光
10.1K 0 0

有一个 UI 设计师,了两个多月时间做了一 Element 动画宣传片,他到底经历了什么?

花两个月时间做的动画宣传片,为你揭秘制作全过程

△ 击查看宣传动画

项目背景

1. Element 简介

Element 是一套为开发者、计和产品经理准备的基于 Vue 2.0 的面端组件库。从 2016.01.20 开始启动,2016.03.03 被大前端认为是 Element 的诞生日。

经过不断优化,迄今为止已有 42 个组件,开后被翻译成 44 语言,Github Star 33,317+,JavaScript 全球第 13 名,Vue.js 全球第 4 名,累计 2,646,082 下载。

花两个月时间做的动画宣传片,为你揭秘制作全过程

2. 项目启动

为了对 Element 的诞生、发展和程碑作一次阶段性的回顾,同也为了引导更多的计和开发者关注并使用 Element 组件库,饿了么 UED 中台设计组决定 Element 动画宣传项目。

担任了此次动画宣传片的编剧、镜、导演、动效、成等角色。以下是关于做这个「殊」项目的一些经验享和心得想。

流程建立

流程

项目沟通 > 剧创 > 分镜头脚 > 插画设计 > 音乐音效 > 动画 > 合成导出

花两个月时间做的动画宣传片,为你揭秘制作全过程

剧本创作

剧本是纯字的方式描述故事情节,包括时间、场景、对白/旁白、作等要素。

1. 剧本主题

对 Element 的诞生、发展和里程碑做一次阶性的顾和宣传,为 Element 3.0 版本的发布预热。

2. 故事构思

故事的开端、发展、潮、结尾为结构思路,将整个 Element 宣传画剧本划分为大分:缘由、诞生、成就、生。

3. 叙事大纲

第一分:缘由,讲述饿了么中后台各个产之间的生态链系,及设计师和工程师使组件时的困扰。

二部分:诞生,讲述各方对统一组件的情达成一致,并分工合进行设计和开。

第三部:成就,讲述首版 Element 网站的上线,以及后期迭代优化中达成的成就程碑。

第四部分:新生,引出即将更新 Element 3.0 版本,唤起用户好奇心和期待。

4. 剧本编写

镜头1

元素:饿么 App Logo。

内容:Logo 由变大,持续 1.5 秒后,深色背景一同缩消失,画面转过渡浅色背景。

旁白:用户在饿了么 App 下单后。

镜头2

元素:饿么 App 页面、饿么家版 PC 页面、风神 PC 页面、骑手 App 页面。

内容:各产品页面依次出现,并排列成四宫格,一条虚线依次将它串。

旁白:商家在「饿了么商家版」会收到订单知,接单后,风神系统会知骑手前往取餐。

镜头3

元素:轩辕 PC 端等众台系统页面。

内容:各产品页面依次出现,并排列成行三列。

旁白:此,有轩辕等后台系统,在个生态发挥着要作用。

分镜头脚本

镜头脚本是剧本的形象化版本,简来说就是「用图像讲故事」,是体现动画的叙事风格、故事逻辑、节奏韵律的重要环节(类似产品计中的型草图阶段)。一镜头脚本格式包括:镜号、景别、画面、内容、间、对、备注等。

花两个月时间做的动画宣传片,为你揭秘制作全过程

镜一是在专门的镜纸上绘制。为了便于修改和复制,使用数位板在 Photoshop 中绘制了版,绘制完成后将其印出来,供队伙伴查和交流。

Element 宣传动画分镜经过不断调和优化,从最初 20 个分镜头精简到了 17 个,从 4 页竖版 A4 纸浓缩到了 1 页版 A4 纸,完画内容和叙事逻辑目了然,为下阶段插画设计提供灵感和依据。

花两个月时间做的动画宣传片,为你揭秘制作全过程

插画设计

1. 风格选择

在进插画设计之前,考虑到要选择合适的表现效果,也要兼顾成(时间、难易度、人力),我对各种视频风进探索和分析,包括 3 种类型:图文视频、人视频、MG 动画。

图文视频

即添加个不同的图、种不同的特效组合,最生成视频。种类型的成也很低,但显得为死板,视效果很简单,无法满品质的要求,也将其排除。

人视频

即采用的人物、场、道具,对拍摄和期等有一定的要求。虽种类型的转化率最高、建立信任最快,但相对来说难度偏大、投高、周期长,资源有,也将其排除。

MG动画

称 Motion Graphic(运动图形),是最近很火的一种动画风,融合电影与图形设计的语言,基时间流动而设计的视表现形式。MG 动画具有信息量大、短小精悍、节奏感强、画面富等特点,非常适合 Element 宣传动画的表现形式。

花两个月时间做的动画宣传片,为你揭秘制作全过程

2. 插画绘制

这里说的插画实是指保真分镜头,为避免二次绘制,效率,一阶会直接它来制作成画。

花两个月时间做的动画宣传片,为你揭秘制作全过程

插画设思

风格:根据 MG 动画风格,插画设也采用的矢扁平风格,轻松趣,易于绘制调整动画,多数宣传片常用的风格类型。

花两个月时间做的动画宣传片,为你揭秘制作全过程

图形:由于 Element 基于桌面端的组件库, 各类页面组件将会视频里出多的元素,所以图形设方面,以高度概括性主,只保留页面基本的结构框架,减少细节的扰,使观众速接受理解所表达的信息。

颜色:颜色方面 Element 牌色为色调,衍生深蓝和浅蓝两种颜色作为基;辅助色来源于各类后台产的题色。多邻色和对色搭配,使画面保持丰富、泼的同时,又失统一、和谐的感觉。

构图:构图方面不拘一,以突出每个镜头的主元素为主,辅助图形为衬托和点缀,持画面的主次分明、平衡稳定。

矢量软件选择

初,我们对使用 AI 还是 PS 绘插画方面比纠结,两款软件对矢量图形的处理非常强大。

经过多次调,最终选用了 PS,因是:AI 文件导入 AE,虽然能导成开的图层,但图层不是矢量的也不能编辑,而 PSD 文件导入 AE 后,可以保持画面中的每个素都是独立层,并且是矢量可编辑的,方便在 AE 调制动画。

音乐音效

背景音的选择,应动画的调性和传递的情绪受相匹配。快节奏、冲击力的动画,适搭配节奏、速度快的动音;节奏慢、画面温和的动画,适搭配舒缓、轻的音。

为了表 Element 轻快、高效、友好使用体验,我选择了段轻松愉悦,又有些灵动声音作为背景音乐,使画活泼不呆板,富于变化,时作控制动画节奏个要参考。另,也可以加入些自然音效,如嗖嗖声、滴滴声等,来使个视听体验更加真实和丰富。

花两个月时间做的动画宣传片,为你揭秘制作全过程

动画制作

1. 动画制作思路

前期准备

接来,进入画制作阶,使软件 After Effects。开始制作之前,需要先建立一个工程管件夹,于项目的存储和素材的管,个人习惯是:

  • Audio 用于存音乐、音效声音相关的文件。
  • Comps 于存放工程件,保存同阶的项目工程。
  • Footages 用存放视频素材、序列帧或其他源文件。
  • Images 用于存放 jpg 或 png 等图片素材。
  • References 用于存放参考视频、案例等参考素材。

串联 / 预览分镜

将插画(分镜)以静态图的形式导AE,整分镜的先顺序。样做的处是,能快速串联和预览整视频内容,方便及时修改完善分镜,大大降低加动画修改的成。

花两个月时间做的动画宣传片,为你揭秘制作全过程

设定分时长

「开端、发展、潮、结尾」的故事结构,把整个画的时间线切分成。根据前期分镜头草图阶设定的时长,0:00-00:28 左右是第一──开端,00:28-00:54 左右是第二──发展,00:54-01:22 左右是第──潮,01:22-01:36 左右是第──结尾,对应时间线打上标记。

花两个月时间做的动画宣传片,为你揭秘制作全过程

设分镜时

每段动画中,又包含不同的分镜,比如第一段 5 分镜,第二段 6 ,第三段 6 ,第四段 3 。根据不同的分镜内,合理分配镜时,每分镜时几秒到十几秒不。

值得一的是,由于元素和方式的同,可会导致画制作阶的分镜时长,与分镜头草图阶设定的时长,存在一定的误差(即多或减了几秒),这个环节需要反复打磨,导演根据最终效果做取舍。

花两个月时间做的动画宣传片,为你揭秘制作全过程

控制动画节奏

整动画的节奏概:部分节奏较平缓,不过多细节表;发展部分节奏逐渐变,镜变;高潮部分节奏、时间、动画细腻;结尾部分趋于平缓,后形版。

2. 动画效果类型

遮罩动画

片头背景转场采用了遮罩动画,使场景变化过程具有连续性。

花两个月时间做的动画宣传片,为你揭秘制作全过程

缓入缓出

三个页面的出加入了缓入缓出效果,显得更然,观众预期相符。

花两个月时间做的动画宣传片,为你揭秘制作全过程

偏移与延迟

卡的出现方式加偏移与延迟,表现卡间错落有致的关系。

花两个月时间做的动画宣传片,为你揭秘制作全过程

弹性画

V 字 Logo 的场使了弹性画,模拟物世界的弹性效果,显得更轻盈友好。

花两个月时间做的动画宣传片,为你揭秘制作全过程

滑动变焦

镜拉近展示细节,用连续的空间描述,引导画面元素,表空间关系。

花两个月时间做的动画宣传片,为你揭秘制作全过程

值变动画

元素值发生变化时,用连续动态表前后关联,突出数值增长。

花两个月时间做的动画宣传片,为你揭秘制作全过程

形变动画

用贯的动作,表达素前后状的改变,模拟开门效果。

花两个月时间做的动画宣传片,为你揭秘制作全过程

合成导出

当动画和音乐完成,最一步就是合成导出视频。我使用 Media Encoder 款工具,它是 Adobe 司一款优的视频音频编码器,以按适合种设备的式导出视频。

考虑 Element 宣传动画主要是放在网站和机上播放,导出格式选择为 H.264,该编码格式有高压缩比的同还拥有高质量流畅的图像,在网络传输过程中所需要的带宽更少,也更加经济。

花两个月时间做的动画宣传片,为你揭秘制作全过程

总结

做动画是一个非常耗时耗力的项目,尤其在时间紧、人手少的情况下,不仅是对业技能的摸底,更是对耐心、细心、决心的考验。

作为 UI 计,跨专业制作宣传动画,本身就是一件非常有挑战性的事情。可能有些制作流程、步骤或法,专业的动画队相比存在一定的差距,但在有限的资源和条件下,队也在努力追求尽可能的卓越。

个项目过程,我遇到过很多困难,甚至想过放弃。本着为团队和部贡献价值出发,我将其视作挑战自我和成长会,不断克服困难,步步去成个小目标。1 分 36 秒动画宣传片,历时 2 个多月,最终是完成了,我们也将 Element 价值和作用传递了更多。

欢迎关注作者的微信公众:「彭彭设笔记」

花两个月时间做的动画宣传片,为你揭秘制作全过程

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

作为2019年第一个爆款刷屏 H5 项目,「网易云音乐2018年度听歌报告」除了走心的文案、精美的页面,也包含了不少有意思的动效...
UI动效
MG 全称是 Motion Graphic(动态图形),是一种现在非常流行的动画分支。它更像是介于平面设计与动画片之间的一种产物。动态...
MG动效
化繁为简,是解决难题的好办法。今天的文章将会教你如何拆分一个动画,以及如何使得动画符合一般物理学规律而变得生动。 ...
AE动效
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion ...
UI动效
编者按:本文总结了微交互的基础知识和三大作用,作者用大量优秀的微交互案例演示让你直观感受到微交互的强大,适合对微交互...
交互设计
阿里作为中国互联网企业的标杆,不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业,在各个专业领域,给专业人员...
UI动效
编者按:本文由负责Material Design 动效设计的谷歌设计师撰写,帮助大家深入理解动效的作用,才能做出更好的动效设计。 有...
UI动效
写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年,其中提到:「我不认为 ...
AE动效