有一個 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 的價值和作用傳遞給了更多的人。

歡迎關注作者的微信公眾號：「彭彭設計筆記」