有一個(gè) UI 設(shè)計(jì)師，用了兩個(gè)多月時(shí)間做了一部 Element 動(dòng)畫宣傳片，他到底經(jīng)歷了什么？

△ 點(diǎn)擊查看宣傳動(dòng)畫

項(xiàng)目背景

1. Element 簡(jiǎn)介

Element 是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。從 2016.01.20 開始啟動(dòng)，2016.03.03 被大前端認(rèn)為是 Element 的誕生日。

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

2. 項(xiàng)目啟動(dòng)

為了對(duì) Element 的誕生、發(fā)展和里程碑作一次階段性的回顧，同時(shí)也為了引導(dǎo)更多的設(shè)計(jì)師和開發(fā)者關(guān)注并使用 Element 組件庫，餓了么 UED 中后臺(tái)設(shè)計(jì)組決定發(fā)起制作 Element 動(dòng)畫宣傳片項(xiàng)目。

我擔(dān)任了此次動(dòng)畫宣傳片的編劇、分鏡、導(dǎo)演、動(dòng)效、合成等角色。以下是關(guān)于做這個(gè)「特殊」項(xiàng)目的一些經(jīng)驗(yàn)分享和心得感想。

流程建立

制作流程

項(xiàng)目溝通 > 劇本創(chuàng)作 > 分鏡頭腳本 > 插畫設(shè)計(jì) > 音樂音效 > 動(dòng)畫制作 > 合成導(dǎo)出

劇本創(chuàng)作

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

1. 劇本主題

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

2. 故事構(gòu)思

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

3. 敘事大綱

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

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

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

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

4. 劇本編寫

鏡頭1

元素：餓了么 App Logo。

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

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

鏡頭2

元素：餓了么 App 頁面、餓了么商家版 PC 頁面、風(fēng)神 PC 頁面、騎手 App 頁面。

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

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

鏡頭3

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

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

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

分鏡頭腳本

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

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

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

插畫設(shè)計(jì)

1. 風(fēng)格選擇

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

圖文視頻

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

真人視頻

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

MG動(dòng)畫

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

2. 插畫繪制

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

插畫設(shè)計(jì)思路

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

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

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

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

矢量軟件選擇

起初，我們對(duì)使用 AI 還是 PS 繪制插畫方面比較糾結(jié)，兩款軟件對(duì)矢量圖形的處理都非常強(qiáng)大。

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

音樂音效

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

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

動(dòng)畫制作

1. 動(dòng)畫制作思路

前期準(zhǔn)備

接下來，進(jìn)入動(dòng)畫制作階段，使用軟件 After Effects。開始制作之前，需要先建立一個(gè)工程管理文件夾，便于項(xiàng)目的存儲(chǔ)和素材的管理，個(gè)人習(xí)慣是：

• Audio 用于存放音樂、音效等聲音相關(guān)的文件。
• Comps 用于存放工程文件，保存不同階段的項(xiàng)目工程。
• Footages 用于存放視頻素材、序列幀或其他源文件。
• Images 用于存放 jpg 或 png 等圖片素材。
• References 用于存放參考視頻、案例等參考素材。

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

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

設(shè)定分段時(shí)長(zhǎng)

以「開端、發(fā)展、高潮、結(jié)尾」的故事結(jié)構(gòu)，把整個(gè)動(dòng)畫的時(shí)間線切分成四段。根據(jù)前期分鏡頭草圖階段設(shè)定的時(shí)長(zhǎng)，0:00-00:28 左右是第一段──開端，00:28-00:54 左右是第二段──發(fā)展，00:54-01:22 左右是第三段──高潮，01:22-01:36 左右是第四段──結(jié)尾，對(duì)應(yīng)時(shí)間線打上標(biāo)記。

設(shè)定分鏡時(shí)長(zhǎng)

每段動(dòng)畫中，又包含不同的分鏡，比如第一段有 5 個(gè)分鏡，第二段有 6 個(gè)，第三段有 6 個(gè)，第四段有 3 個(gè)。根據(jù)不同的分鏡內(nèi)容，合理分配鏡頭時(shí)長(zhǎng)，每個(gè)分鏡時(shí)長(zhǎng)在幾秒到十幾秒不等。

值得一提的是，由于元素和運(yùn)動(dòng)方式的不同，可能會(huì)導(dǎo)致動(dòng)畫制作階段的分鏡時(shí)長(zhǎng)，與分鏡頭草圖階段設(shè)定的時(shí)長(zhǎng)，存在一定的誤差（即多出或減少了幾秒），所以這個(gè)環(huán)節(jié)需要反復(fù)打磨，導(dǎo)演根據(jù)最終效果做出取舍。

控制動(dòng)畫節(jié)奏

整個(gè)動(dòng)畫的節(jié)奏大概是：開頭部分節(jié)奏較平緩，不做過多細(xì)節(jié)表現(xiàn)；發(fā)展部分節(jié)奏逐漸變快，鏡頭變長(zhǎng)；高潮部分節(jié)奏更快、時(shí)間更長(zhǎng)、動(dòng)畫更細(xì)膩；結(jié)尾部分趨于平緩，最后形成定版。

2. 動(dòng)畫效果類型

遮罩動(dòng)畫

片頭背景的轉(zhuǎn)場(chǎng)采用了遮罩動(dòng)畫，使場(chǎng)景的變化過程具有連續(xù)性。

緩入緩出

三個(gè)頁面的出場(chǎng)加入了緩入緩出效果，顯得更自然，與觀眾預(yù)期相符。

偏移與延遲

卡片的出現(xiàn)方式加入了偏移與延遲，表現(xiàn)卡片間錯(cuò)落有致的關(guān)系。

彈性動(dòng)畫

V 字 Logo 的出場(chǎng)使用了彈性動(dòng)畫，模擬物理世界的彈性效果，顯得更加輕盈友好。

滑動(dòng)變焦

鏡頭拉近展示細(xì)節(jié)，用連續(xù)的空間描述，來引導(dǎo)畫面元素，表現(xiàn)空間關(guān)系。

值變動(dòng)畫

當(dāng)元素的值發(fā)生變化時(shí)，用連續(xù)動(dòng)態(tài)的方式表達(dá)前后之間的關(guān)聯(lián)，突出數(shù)值的增長(zhǎng)。

形變動(dòng)畫

用連貫的動(dòng)作，表達(dá)元素前后狀態(tài)的改變，模擬開門效果。

合成導(dǎo)出

當(dāng)動(dòng)畫和音樂都制作完成后，最后一步就是合成導(dǎo)出視頻了。我使用了 Media Encoder 這款工具，它是 Adobe 公司一款優(yōu)秀的視頻音頻編碼器，可以按適合多種設(shè)備的格式導(dǎo)出視頻。

考慮到 Element 宣傳動(dòng)畫主要是放在網(wǎng)站和手機(jī)上播放，導(dǎo)出格式選擇為 H.264，該編碼格式具有高壓縮比的同時(shí)還擁有高質(zhì)量流暢的圖像，在網(wǎng)絡(luò)傳輸過程中所需要的帶寬更少，也更加經(jīng)濟(jì)。

總結(jié)

做動(dòng)畫是一個(gè)非常耗時(shí)耗力的項(xiàng)目，尤其在時(shí)間緊、人手少的情況下，不僅是對(duì)專業(yè)技能的摸底，更是對(duì)耐心、細(xì)心、決心的考驗(yàn)。

作為 UI 設(shè)計(jì)師，跨專業(yè)制作宣傳動(dòng)畫，本身就是一件非常有挑戰(zhàn)性的事情?？赡苡行┲谱髁鞒?、步驟或技法，與專業(yè)的動(dòng)畫團(tuán)隊(duì)相比存在一定的差距，但在有限的資源和條件下，我們團(tuán)隊(duì)也在努力追求盡可能的卓越。

整個(gè)項(xiàng)目過程中，我遇到過很多困難，甚至想過放棄。但本著為團(tuán)隊(duì)和部門貢獻(xiàn)價(jià)值的出發(fā)點(diǎn)，我將其視作挑戰(zhàn)自我和成長(zhǎng)的機(jī)會(huì)，不斷克服困難，一步一步去達(dá)成每個(gè)小目標(biāo)。1 分 36 秒的動(dòng)畫宣傳片，歷時(shí) 2 個(gè)多月，最終還是完成了，我們也將 Element 的價(jià)值和作用傳遞給了更多的人。

歡迎關(guān)注作者的微信公眾號(hào)：「彭彭設(shè)計(jì)筆記」