近期完成一些視頻制作，表現(xiàn)形式著重在 MG 動畫和產(chǎn)品的運營宣傳方向，在設(shè)計階段遇到一些困惑，同時在摸索中不斷擴充這方面的知識體系，通過工作中的實戰(zhàn)，總結(jié)出來 4 步搞定視頻設(shè)計的方法，分享出來，不知道你們是否喜歡呢？

一、概念

動態(tài)設(shè)計是指在一定的時間范圍內(nèi)，靜態(tài)圖形連續(xù)的運動變化。英文名稱 Motion Design，有的時候會使用 MotionGraphics 英文名稱，一般引申為動態(tài)圖形的設(shè)計。從呈現(xiàn)形式上可以劃分為交互類動態(tài)設(shè)計和展示類動態(tài)設(shè)計，此次文章分享的設(shè)計方法，主要聚焦在展示類動態(tài)設(shè)計。

二、動態(tài)設(shè)計的意義

1. 設(shè)計特點

動態(tài)設(shè)計具有的三大通用優(yōu)點，對用戶的影響力比較巨大。

2. 為什么做動態(tài)設(shè)計

我們之所以傾向動態(tài)設(shè)計是因為動態(tài)設(shè)計可以為產(chǎn)品和用戶帶來很多的優(yōu)勢，包含以下五類：

三、如何進(jìn)行動態(tài)設(shè)計

近期一直在支持的產(chǎn)品宣傳視頻設(shè)計，均是通過以下思維模型進(jìn)行設(shè)計呈現(xiàn)。

1. 前期分析

① 了解需求，收集素材

首先了解需求、用戶、產(chǎn)品、場景的信息，在初步了解后，可以從用戶的預(yù)期目標(biāo)，內(nèi)容素材的設(shè)計方向以及動畫的表現(xiàn)形式等維度收集核心關(guān)鍵詞；同時確認(rèn)文案，配音，音效，等視頻元素是否添加，以便確認(rèn)視頻動畫設(shè)計的節(jié)奏；

② 匯總結(jié)論，歸納主題關(guān)鍵詞

通過信息收集階段，提煉出以下設(shè)計目標(biāo)和導(dǎo)向：

使用場景：應(yīng)用于可以支持視頻的會場，互聯(lián)網(wǎng)平臺（如微信朋友圈，抖音）；

設(shè)計目標(biāo)：用戶群為企業(yè)用戶，希望通過視頻，向用戶闡述產(chǎn)品的功能特色，解決的問題，帶動用戶的興趣，進(jìn)一步了解和溝通，提升線索量，促成交易；

設(shè)計導(dǎo)向：視頻生動有趣，突出核心優(yōu)勢和價值點，清晰快捷傳遞；

2. 提煉設(shè)計方向

圍繞核心關(guān)鍵詞，視覺設(shè)計的可視化，通過情緒板輸出設(shè)計可執(zhí)行方向，包括品牌風(fēng)格，動畫節(jié)奏，畫面元素，排版設(shè)計；

動畫節(jié)奏：以逐步引導(dǎo)深入的方式，展開視頻的故事描述；

品牌風(fēng)格：京東云品牌的輕盈、微質(zhì)感的淺色科技風(fēng)格為基因進(jìn)行設(shè)計；

排版設(shè)計：以文本為主，圖形為輔的畫面設(shè)計；

畫面元素：運用互聯(lián)網(wǎng)元素，比如鼠標(biāo)，界面，穿插 2.5Dicon 和紅黑雙色扁平 icon 使用；

3. 設(shè)計執(zhí)行

① 腳本

一個豐富的成片效果，是通過多組分鏡動態(tài)呈現(xiàn)。而分鏡畫面的前后關(guān)系，則是通過腳本布局搭建，在做腳本設(shè)計時，是按照以下思路進(jìn)行；

內(nèi)容結(jié)構(gòu)拆解

比如這次的產(chǎn)品宣傳視頻，通過文案邏輯進(jìn)行拆分，形成分鏡畫面的設(shè)計思路。

首先根據(jù)文案邏輯劃分為四大模塊，然后圍繞文案提煉出核心內(nèi)容，視覺元素，動畫節(jié)奏等，如以下分析結(jié)論：

封面點題：點出所推產(chǎn)品，繼承京東云品牌風(fēng)格，強調(diào)產(chǎn)品視覺特征，使用幾何元素構(gòu)成標(biāo)題核心，微質(zhì)感背景烘托主題氛圍；

用戶痛點：分析現(xiàn)有痛點，通過一些常用場景和用戶共情。可以使用問號彈跳引導(dǎo)出搜索，輸入問題尋找答案，凸顯現(xiàn)有問題，面臨的痛點，使用圖形符號，互聯(lián)網(wǎng)元素，進(jìn)行視覺傳達(dá)；

總結(jié)問題：通過痛點分析，匯總出企業(yè)存在的問題。可以利用鼠標(biāo)移動逐個收起，引導(dǎo)出產(chǎn)品解決方案的優(yōu)勢特征；

解決方案：提出解決問題的方案，這是用戶所需要的，也是視頻中的重點。以展臺+互聯(lián)網(wǎng)界面的元素呈現(xiàn)，運用鏡頭的推拉轉(zhuǎn)移，使用戶的視線始終能夠聚焦在所展示的內(nèi)容；

產(chǎn)品政策：落腳在產(chǎn)品的優(yōu)惠政策，以及聯(lián)系方式，運用收尾呼應(yīng)的方式進(jìn)行，迎合產(chǎn)品主題，呈現(xiàn)優(yōu)惠方式和聯(lián)系方式；

腳本規(guī)劃

經(jīng)過了畫面思路的整理，這一步主要是梳理文案和畫面的映射關(guān)系、畫面視覺表現(xiàn)，以及動態(tài)效果的編排。根據(jù)設(shè)計思路和故事主題，以配音的時間線為索引，制定分鏡腳本；

分鏡畫面實現(xiàn)

前期可以利用手繪方式，通過文字排版和元素設(shè)計的簡單排布，將畫面快速呈現(xiàn)；

② 文案內(nèi)容

口播文案

如果視頻需要使用配音，前期就需要收集口播文案，根據(jù)口播文案的邏輯，定義分鏡元素的時序；

畫面文案

畫面文案是需要依據(jù)視頻的表現(xiàn)形式進(jìn)行搭配，比如文本為主或圖形為主的畫面。

文本為主：文字內(nèi)容為主要表達(dá)形式，貫穿畫面之中，此類表現(xiàn)形式是需要和需求方確定分鏡畫面的核心文案；

圖形為主：圖形為主的分鏡畫面，可依據(jù)配音進(jìn)行圖形故事設(shè)計，文案則為輔助呈現(xiàn)，文案內(nèi)容可依據(jù)畫面給予自主發(fā)揮；

③ 畫面設(shè)計

風(fēng)格探索

參照制定的設(shè)計目標(biāo)和方向，以腳本框架為引導(dǎo)，進(jìn)行靜態(tài)畫面的實現(xiàn)。也可出 1-2 個靜態(tài)視覺和需求方溝通，如無問題，其他分鏡效果依此完成?；蛘呖梢灾谱鞑糠之嬅娴膭討B(tài)效果，以便判斷腳本最終呈現(xiàn)的視覺效果。

畫面調(diào)性

風(fēng)格：首先遵守品牌風(fēng)格規(guī)范，傳遞品牌價值，強化品牌基因；其次要提煉產(chǎn)品視覺基因，營造差異性，比如在這次的視頻中所運用的色系、畫面元素的設(shè)計、文案的排版，均以品牌的視覺基因貫穿在各個畫面中，并營造產(chǎn)品的個性。

色系：依據(jù)京東云品牌風(fēng)格調(diào)性，以及產(chǎn)品色系搭配，可以定義出以下色彩搭配規(guī)范：

灰色：輔助色系，主要是進(jìn)行氛圍渲染、畫面轉(zhuǎn)場、視覺層級塑造中使用；

白色：視頻的主要基調(diào)，結(jié)合其他色系，營造科技風(fēng)，輕量化實現(xiàn)，體現(xiàn)產(chǎn)品的溫度；

紅色：產(chǎn)品個性的打造，重要元素使用，凸顯層級，信息有力傳遞；

內(nèi)容設(shè)計

圖形設(shè)計：繼承京東云的品牌基因，利用光影效果，使用 2.5D icon，結(jié)合線面雙色 icon 進(jìn)行圖形設(shè)計，同時實現(xiàn)元素場景化，使畫面更具有沖擊力。

文案排版：圍繞核心主題，以故事傳遞內(nèi)容的思路，進(jìn)行文字的排版，運用卡片方式進(jìn)行編排，便于在畫面中對信息進(jìn)行層級塑造，利于信息傳遞。

④ 動畫實現(xiàn)

元素分層

將畫面元素進(jìn)行分層拆解，依據(jù)畫面的氛圍場景，和元素的主次關(guān)系，進(jìn)行拆分；

核心內(nèi)容的敘事性：核心內(nèi)容是主題含義的傳達(dá)，需要以動畫的故事主線進(jìn)行屬性動畫的制作；

輔助元素的說明性：輔助元素是幫助用戶理解產(chǎn)品，營造故事場景，串連分鏡畫面。比如流程模塊的時間軸動態(tài)效果，通過逐步呈現(xiàn)的政策趨勢，來說明政策演變的歷史；

背景元素的轉(zhuǎn)場連接和氛圍性：背景元素可以提煉出轉(zhuǎn)場元素和背景氛圍元素。

轉(zhuǎn)場元素：分鏡畫面之間建立層級，創(chuàng)建空間，流暢過渡，使內(nèi)容有序呈現(xiàn)；

背景氛圍元素：提高畫面的活躍度，渲染動畫的風(fēng)格氛圍；

動畫編排

在時序編排上可以利用入場、停留、延展、退場 4 個階段進(jìn)行元素動畫的設(shè)計，這樣可以保持元素動作的連貫性，元素之間的動態(tài)過渡流暢。

入場：一般指元素進(jìn)場，出現(xiàn)在用戶視線中，信息逐步呈現(xiàn)在畫面中。一般用于對用戶視線的引導(dǎo)，內(nèi)容的提前鋪墊。可以使用縱深動畫、鏡頭語言、生長動畫、組合構(gòu)建、多重迭代、抽象圖形轉(zhuǎn)換方式呈現(xiàn)。

入場時機：利用配音語義的上下銜接的時機，進(jìn)行入場動畫設(shè)計，平滑過渡到對應(yīng)的配音時間線上。配音的節(jié)奏快慢，決定了元素動畫的節(jié)奏，所以在配音語速上，要貼合動畫的整體節(jié)奏。

動畫速度：需要快速呈現(xiàn)，平均時長在 5-20 幀，畫面元素分層越多，屬性動畫設(shè)計越多，整體畫面的時間線則會更長。

停留/延展動畫：一般指元素在畫面中需要延時停留的運動過程，幫助信息語義傳遞更準(zhǔn)確。

核心元素：加深用戶對信息的理解，動態(tài)節(jié)奏連貫，不拖沓，時間線要保持足夠長，便于用戶快速瀏覽。在實現(xiàn)手法上根據(jù)故事場景進(jìn)行設(shè)計；

背景元素：主要用于烘托核心元素，增加畫面氛圍?？梢允褂醚h(huán)背景、循環(huán)流光、粒子襯托、動態(tài)背景等動畫效果實現(xiàn)。由于運動越快，越容易聚焦用戶視線，因此作為背景元素的動畫，在運動節(jié)奏上適當(dāng)放慢，時間線拉長，循環(huán)使用；

退場動畫：一般指元素退出用戶視線，過渡銜接下一個元素的運動過程。用戶往往關(guān)注入場動畫而忽略退場動畫，因此退場動畫的設(shè)計可以適當(dāng)弱化，過渡引導(dǎo)到下一個動畫就可以?？梢允褂糜睬?，抽象過渡，搖擺鏡頭，蒙板遮罩等動畫效果實現(xiàn)。在節(jié)奏設(shè)計上最好卡點進(jìn)行，動畫形式可以根據(jù)下一入場元素的屬性動畫決定，也可根據(jù)整體節(jié)奏把握。

元素動畫實現(xiàn)

關(guān)鍵幀：一般指元素在運動中的關(guān)鍵動作所處的那一幀。關(guān)鍵幀與關(guān)鍵幀之間的動畫是軟件自動補齊，這種幀可以叫做過渡幀或者中間幀。關(guān)鍵幀的時間和位置，往往決定了內(nèi)容出場的次序，以及動畫呈現(xiàn)的密度和節(jié)奏的快慢，在設(shè)計制作中，做屬性動畫參數(shù)設(shè)置時，需要關(guān)注入場動畫的開始幀，以及退場動畫的結(jié)束幀。

屬性動畫：一般指元素的透明度、位置、大小、旋轉(zhuǎn)、形狀、顏色等屬性進(jìn)行的變化。參數(shù)的變化幅度，是根據(jù)幀速和時長進(jìn)行制定，參數(shù)幅度越大，動效越明顯，或同等參數(shù)下，時間短，速度快，時間長，速度慢。

時長：從元素動畫的開始關(guān)鍵幀到結(jié)束關(guān)鍵幀之間的時間線，稱為時長。單位上可以用幀表達(dá)，也可以用時分秒表達(dá)。時長的設(shè)置根據(jù)動畫風(fēng)格，運動距離作為參照，一般一個常規(guī)的動態(tài)變化持續(xù)時間在 200-500ms 以內(nèi)。

運動曲線：變換的速率曲線，也就是動畫中間幀的運動規(guī)律。物體的運動不是一直保持同等速度運轉(zhuǎn)，所以在做元素的屬性動畫時，需要遵照物理世界的運動規(guī)律進(jìn)行。根據(jù)元素的畫面場景，采用適合的運動曲線，如入場先快后慢，退場先慢后快，彈跳曲線，則是應(yīng)用在有彈跳物體的場景中。

⑤ 剪輯合成

剪輯：最終對分鏡進(jìn)行合成和剪輯，形成連貫的、有邏輯、有敘事的呈現(xiàn)，也可根據(jù)音效，配音做畫面轉(zhuǎn)場的處理；

音效：根據(jù)動態(tài)節(jié)奏，還會搭配音效的輔助，提升整體的氛圍和風(fēng)格。

⑥ 動畫自查

一般會從時間、運動，以及元素三個方向，結(jié)合物理世界的運動規(guī)律，結(jié)合用戶視覺感知習(xí)慣進(jìn)行畫面走查。

四、如何交付

動畫的交付實現(xiàn)，一般會有兩種方式實現(xiàn)，代碼落地和成片交付：

1. 生成成片

根據(jù)使用的場景的不同可以區(qū)分為 MP4 和 GIF 動畫交付，可以應(yīng)用在平臺廣告或者抖音快手等短視頻平臺上傳播。

2. 代碼落地實現(xiàn)

如涉及到動效的開發(fā)，有一部分需要代碼語言實現(xiàn)。

1. 直接生成代碼：利用軟件轉(zhuǎn)化成對應(yīng)的代碼格式，現(xiàn)在市場上通用的是 lottie 所生成的 json 進(jìn)行；
2. 提供動效標(biāo)注圖：還有一部分無法直接轉(zhuǎn)化為代碼語言，這時候我們可以提供動效的標(biāo)注圖，通過研發(fā)實現(xiàn)，標(biāo)注圖規(guī)范一般包括，觸發(fā)條件，對象、變化屬性、曲線數(shù)值、持續(xù)時間等，可以參照以下模板給到具體屬性參數(shù)；

五、最后

很高興您閱讀到這里，以上是我的一點思考，希望能給在看的你帶來一些小思路。

最后祝愿大家在工作中收獲美好，困難少一點，開心多一些。

作者：JDTDA