国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

Element 动画宣传片制作全过程

发布时间:2019/08/22标签:   动效设计    点击量:

原标题: Element 动画宣传片制作全过程

有一个UI设计师,用了两个多月时间做了一部 Element 动画宣传片,他到底经历了什么…本文囊括了从开始的背景介绍到整部动画片的完成,详细列出了动画的每一步。

项目背景 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 次下载。

项目启动

为了对 Element 的诞生、发展和里程碑作一次阶段性的回顾,同时也为了引导更多的设计师和开发者关注并使用 Element 组件库,饿了么UED 中后台设计组决定发起制作 Element 动画宣传片项目。

我担任了此次动画宣传片的编剧、分镜、导演、动效、合成等角色。以下是关于做这个“特殊”项目的一些经验分享和心得感想。

流程建立 制作流程

项目沟通 > 剧本创作 > 分镜头脚本 > 插画设计 > 音乐音效 > 动画制作 > 合成导出

人员分工

监制:@索而

插画设计:@Jennifer

资料整理:@鱼掌

编剧 / 分镜 / 导演 / 动画 / 合成:@彭彭

一、剧本创作

剧本是以纯文字的方式描述故事情节,重庆seo外包,包括时间、场景、对白/旁白、动作等要素。

剧本主题

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

故事构思

以故事的开端、发展、高潮、结尾为结构思路,将整个 Element 宣传动画剧本划分为四大部分:缘由、诞生、成就、新生

叙事大纲

第一部分:缘由,讲述饿了么中后台各个产品之间的生态链关系,以及设计师和工程师使用组件时的困扰

第二部分:诞生,讲述各方对统一组件的事情达成一致,并分工合作进行设计和开发

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

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

 

剧本编写 镜头1

元素:饿了么 App Logo

内容:Logo 由小变大,持续 1.5 秒后,与深色背景一同缩小消失,画面转场过渡到浅色背景

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

镜头2

元素:饿了么App页面、饿了么商家版PC页面、风神PC页面、骑手App页面

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

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

镜头3

元素:轩辕PC端等众多后台系统页面

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

旁白:此外,还有轩辕等后台系统,在整个生态中发挥着重要的作用

二、分镜头脚本

分镜头脚本是剧本的形象化版本,简单来说就是“用图像讲故事”,是体现动画的叙事风格、故事逻辑、节奏韵律的重要环节(类似产品设计中的原型草图阶段)。一般分镜头脚本格式包括:镜号、景别、画面、内容、时间、对白、备注等

分镜一般是在专门的分镜纸上绘制。为了便于修改和复制,我使用数位板在 Photoshop 中绘制了电子版,绘制完成后将其打印出来,供团队小伙伴查看和交流。

版权信息Copyright © IT技术教程 版权所有    ICP备案编号:鲁ICP备09013610号