設計教程

Element動畫宣傳片制作教程

2637

有一個UI設計師，用了兩個多月時間做了一部 Element 動畫宣傳片，他到底經(jīng)歷了什么...

視頻地址：https://v.qq.com/x/page/h08625kl53q.html

? ? ?項目背景

? ? ? ?Element 簡介

Element 是一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的桌面端組件庫。從 2016-01-20 開始啟動，2016-03-03 被大前端認為是 Element 的誕生日。

經(jīng)過不斷優(yōu)化，迄今為止已有 42 個組件，開源后被翻譯成 44 種語言，Github Star 33,317+，JavaScript 全球第 13 名，Vue.js 全球第 4 名，累計 2,646,082 次下載。

? ? ? ?項目啟動

為了對 Element 的誕生、發(fā)展和里程碑作一次階段性的回顧，同時也為了引導更多的設計師和開發(fā)者關注并使用 Element 組件庫，餓了么UED 中后臺設計組決定發(fā)起制作 Element 動畫宣傳片項目。

? ? 流程建立

? ? ? ?制作流程

項目溝通 > 劇本創(chuàng)作 > 分鏡頭腳本 > 插畫設計 > 音樂音效 > 動畫制作 > 合成導出

一、劇本創(chuàng)作

劇本是以純文字的方式描述故事情節(jié)，包括時間、場景、對白/旁白、動作等要素。

? ? ? 劇本主題

對 Element 的誕生、發(fā)展和里程碑作一次階段性的回顧和宣傳，為 Element 3.0 版本的發(fā)布預熱。

? ? ? 故事構思

以故事的開端、發(fā)展、高潮、結尾為結構思路，將整個 Element 宣傳動畫劇本劃分為四大部分：緣由、誕生、成就、新生。

? ? ? 敘事大綱

第一部分：緣由，講述餓了么中后臺各個產(chǎn)品之間的生態(tài)鏈關系，以及設計師和工程師使用組件時的困擾

第二部分：誕生，講述各方對統(tǒng)一組件的事情達成一致，并分工合作進行設計和開發(fā)

第三部分：成就，講述首版 Element 網(wǎng)站的上線，以及后期迭代優(yōu)化中達成的成就與里程碑

第四部分：新生，引出即將更新的 Element 3.0 版本，喚起用戶的好奇心和期待

? ? ? 劇本編寫

? ? ? ?鏡頭1

元素：餓了么 App Logo

內(nèi)容：Logo 由小變大，持續(xù) 1.5 秒后，與深色背景一同縮小消失，畫面轉(zhuǎn)場過渡到淺色背景

旁白：用戶在餓了么 App 下單后

? ? ? ?鏡頭2

元素：餓了么App頁面、餓了么商家版PC頁面、風神PC頁面、騎手App頁面

內(nèi)容：各產(chǎn)品頁面依次出現(xiàn)，并排列成四宮格，一條虛線依次將它們串聯(lián)

旁白：商家在「餓了么商家版」中會收到訂單通知，接單后，風神系統(tǒng)會通知騎手前往取餐

? ? ? ?鏡頭3

元素：軒轅PC端等眾多后臺系統(tǒng)頁面

內(nèi)容：各產(chǎn)品頁面依次出現(xiàn)，并排列成兩行三列

旁白：此外，還有軒轅等后臺系統(tǒng)，在整個生態(tài)中發(fā)揮著重要的作用

......

二、分鏡頭腳本

分鏡頭腳本是劇本的形象化版本，簡單來說就是“用圖像講故事”，是體現(xiàn)動畫的敘事風格、故事邏輯、節(jié)奏韻律的重要環(huán)節(jié)（類似產(chǎn)品設計中的原型草圖階段）。一般分鏡頭腳本格式包括：鏡號、景別、畫面、內(nèi)容、時間、對白、備注等。

分鏡一般是在專門的分鏡紙上繪制。為了便于修改和復制，我使用數(shù)位板在 Photoshop 中繪制了電子版，繪制完成后將其打印出來，供團隊小伙伴查看和交流。

Element 宣傳動畫分鏡經(jīng)過不斷調(diào)整和優(yōu)化，從最初20個分鏡頭精簡到了17個，從4頁豎版A4紙濃縮到了1頁橫版A4紙，完整的畫面內(nèi)容和敘事邏輯一目了然，為下一階段的插畫設計提供靈感和依據(jù)。

三、插畫設計

01 風格選擇

在進入插畫設計之前，考慮到要選擇合適的表現(xiàn)效果，也要兼顧制作成本（時間、難易度、人力），我對各種視頻風格進了探索和分析，包括 3 種類型：圖文視頻、真人視頻、MG動畫。

圖文視頻

即添加多個不同的圖片、多種不同的特效組合，最后生成視頻。這種類型的制作成本也很低，但顯得較為死板，視覺效果也很簡單粗暴，無法滿足品質(zhì)的要求，也將其排除。

真人視頻

即采用真實的人物、場景、道具，對拍攝和后期等有一定的要求。雖然這種類型的轉(zhuǎn)化率最高、建立信任最快，但相對來說制作難度偏大、投入較高、周期較長，資源有限，也將其排除。

MG動畫

全稱 Motion Graphic（運動圖形），是最近很火的一種動畫風格，融合了電影與圖形設計的語言，基于時間流動而設計的視覺表現(xiàn)形式。MG動畫具有信息量大、短小精悍、節(jié)奏感強、畫面豐富等特點，非常適合 Element 宣傳動畫的表現(xiàn)形式。

02 插畫繪制

這里說的插畫其實是指高保真分鏡頭，為避免二次繪制，提高效率，下一階段會直接用它來制作成動畫。

插畫設計思路

風格：根據(jù) MG 動畫風格，插畫在設計上也是采用的矢量扁平風格，輕松有趣，易于繪制和調(diào)整動畫，是大多數(shù)宣傳片常用的風格類型。

圖形：由于 Element 是基于桌面端的組件庫，各類頁面和組件將會是視頻里出現(xiàn)最多的元素，所以在圖形設計方面，以高度概括性為主，只保留頁面基本的結構框架，減少細節(jié)的干擾，使觀眾快速接受和理解所表達的信息。

顏色：顏色方面以 Element 品牌色為主色調(diào)，衍生出深藍和淺藍兩種顏色作為基底；輔助色來源于各類后臺產(chǎn)品的主題色；多以鄰近色和對比色搭配，使畫面保持豐富、活潑的同時，又不失統(tǒng)一、和諧的感覺。

構圖：構圖方面不拘一格，以突出每個鏡頭的主體元素為主，輔助圖形作為襯托和點綴，保持畫面的主次分明、平衡穩(wěn)定。

矢量軟件選擇

起初，我們在使用 AI 還是 PS 繪制插畫方面比較糾結，兩款軟件對矢量圖形的處理都非常強大。

經(jīng)過多次調(diào)試，我們最終選用了 PS，原因是：AI 文件導入 AE，雖然能導成分開的圖層，但圖層不是矢量的也不能編輯；而 PSD 文件導入 AE 后，可以保持畫面中的每個元素都是獨立分層、并且是矢量可編輯的，方便在 AE 里調(diào)制動畫。

四、音樂音效

背景音樂的選擇，應與動畫的調(diào)性和傳遞的情緒感受相匹配?？旃?jié)奏、沖擊力強的動畫，適合搭配節(jié)奏強、速度快的動感音樂；節(jié)奏慢、畫面溫和的動畫，適合搭配舒緩、輕松的音樂。

為了表達 Element 輕快、高效、友好的使用體驗，我選擇了一段輕松愉悅、又有些靈動的聲音作為背景音樂，使畫面活潑不呆板，富于變化，同時當作控制動畫節(jié)奏的一個重要參考。另外，也可以加入一些自然音效，如嗖嗖聲、滴滴聲等，來使整個視聽體驗更加真實和豐富。

五、動畫制作

01 動畫制作思路

前期準備

接下來，進入動畫制作階段，使用軟件 After Effects。開始制作之前，需要先建立一個工程管理文件夾，便于項目的存儲和素材的管理，個人習慣是：

Audio 用于存放音樂、音效等聲音相關的文件

Comps 用于存放工程文件，保存不同階段的項目工程

Footages 用于存放視頻素材、序列幀或其他源文件

Images 用于存放 jpg 或 png 等圖片素材

References 用于存放參考視頻、案例等參考素材

串聯(lián) / 預覽分鏡

將插畫 (分鏡) 以靜態(tài)圖片的形式導入AE，調(diào)整好分鏡的先后順序。這樣做的好處是，能快速串聯(lián)和預覽整體視頻內(nèi)容，方便及時修改完善分鏡，大大降低加入動畫后修改的成本。

設定分段時長

以“開端、發(fā)展、高潮、結尾”的故事結構，把整個動畫的時間線切分成四段。根據(jù)前期分鏡頭草圖階段設定的時長，0:00-00:28 左右是第一段-開端，00:28-00:54 左右是第二段-發(fā)展，00:54-01:22 左右是第三段-高潮，01:22-01:36 左右是第四段-結尾，對應時間線打上標記。