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

有一个 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 的价值和作用传递给了更多的人。

欢迎关注作者的微信公众号：「彭彭设计笔记」