有一个 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 价值和作用传递了更多。
欢迎关注作者的微信公众：「彭彭设笔记」
浙公网安备33011002017549号