花两个月时间做的动画宣传片，为你揭秘制作全过程
扫一扫 
扫一扫 
扫一扫 
扫一扫
有一个 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
镜头2
镜头3
分镜头脚本分镜头脚本是剧本的形象化版本，简单来说就是「用图像讲故事」，是体现动画的叙事风格、故事逻辑、节奏韵律的重要环节（类似产品设计中的原型草图阶段）。一般分镜头脚本格式包括：镜号、景别、画面、内容、时间、对白、备注等。
分镜一般是在专门的分镜纸上绘制。为了便于修改和复制，我使用数位板在 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。开始制作之前，需要先建立一个工程管理文件夹，便于项目的存储和素材的管理，个人习惯是：
串联 / 预览分镜 将插画（分镜）以静态图片的形式导入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 的价值和作用传递给了更多的人。 欢迎关注作者的微信公众号：「彭彭设计笔记」
手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
