恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
同程一分钟-动画宣传片创作全流程揭秘
0.0°
2020-12-14 原创文章 经验/观点 举报 1006 2 4 0

大家好,这里是ATD体验设计团队,链接中的视频是我们为机票业务制作的服务内容化模块中的动画宣传视频。

今天就来为大家揭秘同程一分钟动画宣传片的创作全流程。

项目背景


1.服务内容化模块简介


我们机票项目的客服常常接到很多客户的投诉,特别是有关于机票价格波动过大,退票费用过高,退改签规则不清晰,退改流程过长等问题。这些问题常常会麻烦我们的客服同学解释处理。

基于寻找到一个通用的解决方案的想法,我们在我们APP机票页面的二楼新增了服务内容化模块。在服务内容化模块中,我们会通过文字和视频的形式解释用户经常遇到的一些问题。模块内容包括出行前需要了解的行前须知,应急指南,值机攻略,机场攻略等,以及行程有变时需要了解的改签攻略,退票攻略,航班变动,更改证件信息等内容。

同程app中的服务内容化模块

2. 动画宣传片模块


为了让用户少看些枯燥的文字,我们的想法是把复杂的流程通过可视化的、有趣的的语言呈现给用户,所以针对每个模块,我们都做了一段动画视频。用户在订票平台一定是想通过最短的时间获取到想要的信息,所以每个视频的时间我们都控制在了一分半之内,也就是现在的同程一分钟系列。

目前我们的同程一分钟系列包括三个视频,分别是极速换票视频、值机视频、值机问题解惑视频,以及正在制作中的登机教程等等。


项目流程


动画宣传片的制作流程从脚本的编写开始,大致分为以下八个流程:

动画宣传片的制作流程

脚本创作


脚本创作通常是产品先给出视频想要传达的信息,根据信息量拆分视频内容。通过与设计师沟通确定每一幕大致出现的内容和信息呈现。根据相互的讨论和增删,最终确定一个视频最终要传达的内容。


视频脚本

分镜脚本草图绘制


根据和产品沟通过后确定的脚本,我们会开始在PS中进行分镜脚本草图的绘制,这一步主要是为了确定每个页面的画面内容,可以减少后面修改的时间。

分镜脚本的草图可以不用十分详细,只要能让产品大概了解画面内容即可。

分镜头脚本

动画风格确定


动画风格的确定是在我们之前制定的插画规范的基础上,结合我们的品牌和受众人群进行一定的延展,主要针对小程序年轻的客户群体,采用了以绿色黄色为主,蓝色为辅的比较清新的颜色。视频中的人物使用了我们插画系统中的人物。

插画人物规范

插画绘制


插画的绘制是根据分镜脚本草图中的分镜在Ai和PS中进行绘制的,人物均使用Ai绘制,当背景和中景的元素需要使用到一些噪点渐变等特殊效果的时候,也会使用PS进行绘制。无论使用哪种软件,最重要的是在绘制的时候做好图层的分层,这样在导入AE的时候就可以快速进行动画的制作。

在插画绘制中,有三个小tips:

  1. 1. 我们可以先画所有的场景,再画人物。因为场景的变动比较小,修改的可能性不大,可以先画好,而人物和各种元素是修改比较频繁的,可以之后再绘制。

  2. 2. 在绘制场景的时候,可以绘制一些比较长幅的场景,这样让镜头摇移的动画更加自然。

3. 插画绘制中,收集可复用的元素,减少工作量。例如片头片尾的重复画面,背景图片,机场小元素等等,都能提高工作效率。

绘制好的画面

动画制作


动画的制作都是通过AE完成的,首先导入在Ai和PS中绘制并分层好的插画,然后就可以进行动画的制作了。我们制作的比较简单的动画视频,并不涉及到复杂的剧情和人物,所以通常一个画面出现的元素并不多。给画面中的元素加上简单动效和转场,是我们动画制作中的主要工作。

视频制作界面

  1. 首先根据分镜脚本,新建一个总合成,确定好视频中有几幕场景,将每一幕场景都新建一个合成,将每一幕的素材集合在一起,不同场景的视频分开制作,可以解决素材文件过多且杂乱的问题。

  2. 在Ai和PS中分好层,就可以一键按顺序导入图层,方便后面的动画制作。

  3. 合理使用插件motion3等插件,可以减少很多重复工作量,例如制作路径动画,文字动画,添加弹性效果的时候,使用插件都是一个不错的选择。

Motion插件

视频片段

音乐选择


在介绍音乐的时候,要先介绍一个概念,CC0协议:

什么是CC0?CC0在维基上的解释是知识共享许可协议,是一种公共著作权许可协议,其允许分发受著作权保护的作品。一个创作共享许可用于一个作者想给他人分享,使用,甚至创作派生作品的权利。简单的说如果作品标注了CC0,我们就可以毫无版权方面的顾虑,商用也是完全没有问题的。

这里推荐几个CC0网站:

FreePD  https://freepd.com 汇集了海量免版税的公共领域音乐资源

耳聆网  https://www.ear0.com/ 主要汇集了大部分视频制作时用到的音效,下载的时候会显示使用哪种协议,如下图中的CC-BY协议,就是必须要表明原作者

再推荐几个可以便宜购买版权的网站:

猴子音乐  https://houzi8.com/music/255 一首歌曲的商用C类版权在400左右,不贵

曲多多  https://agm.hifiveai.com/ 单曲价格99-480左右


查看音乐网站的协议

以上两个网站是我经常使用的网站。如果有更多好用的网站欢迎在下面给我留言回复~

字幕制作


字幕的制作可以在AE中手动输入,只要在视频添加文字图层,然后在每一帧句子开始的时候手动修改源文本就可以了,十分简单,这个方法适用于视频长度在两三分钟左右的视频。

关于如何制作三分钟以上的字幕,之前写了一篇几千字的文章研究了一下怎么加字幕,上周抖音的剪映mac版发布之后,这些字幕都可以通过软件自动生成了,普通用户直接使用即可。目前剪映只有mac版本,windows版本还需要等待一段时间。


合成导出与压缩


最后是视频的导出渲染与压缩,通常我导出的时候会使用AE的默认无损格式,这样导出的视频大小往往几个G,然后通过HandBrake进行压缩,选择h264格式,质量可以根据自己的视频大小进行调整,这样基本上可以保证输出的视频在30m以内,好处是软件体积小且压缩速度很快,质量也高。

HandBrake界面

总结


总的来说,动画视频的制作是一次难得的经历,而这次的视频制作时间紧任务重,三个月时间要完成六个视频,平均下来一个视频只有十天左右的制作时间,更加考验了我们的创作效率和精细度的平衡。

目前部分视频已经投放到我们的app平台了,希望我们的设计能够为业务和客户带来价值,让大家更加了解机票服务的相关流程,降低我们客服同事们的工作量,这也是设计存在的价值吧。



Powered by Froala Editor

更新:2020-12-14

收藏

2人已收藏

  • 1

    作品

  • 3

    粉丝

  • 0

    关注

    猜你喜欢

      2020-12-14 原创文章 经验/观点 举报 1006 2 4 0

      同程一分钟-动画宣传片创作全流程揭秘

      0.0°

      你确定要举报同程一分钟-动画宣传片创作全流程揭秘

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年12月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录