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

一 概念

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

二 動(dòng)態(tài)設(shè)計(jì)的意義

1、設(shè)計(jì)特點(diǎn)

動(dòng)態(tài)設(shè)計(jì)具有的三大通用優(yōu)點(diǎn)，對(duì)用戶的影響力比較巨大。

2、為什么做動(dòng)態(tài)設(shè)計(jì)

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

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

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

1、前期分析

( 1 ) 了解需求，收集素材

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

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

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

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

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

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

2、提煉設(shè)計(jì)方向

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

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

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

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

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

3、設(shè)計(jì)執(zhí)行

( 1 ) 腳本

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

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

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

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

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

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

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

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

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

B. 腳本規(guī)劃

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

C. 分鏡畫面實(shí)現(xiàn)

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

( 2 ) 文案內(nèi)容

A. 口播文案

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

B. 畫面文案

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

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

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

( 3 ) 畫面設(shè)計(jì)

A. 風(fēng)格探索

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

B. 畫面調(diào)性

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

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

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

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

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

C. 內(nèi)容設(shè)計(jì)

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

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

( 4 ) 動(dòng)畫實(shí)現(xiàn)

A. 元素分層

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

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

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

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

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

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

B. 動(dòng)畫編排

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

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

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

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

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

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

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

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

C. 元素動(dòng)畫實(shí)現(xiàn)

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

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

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

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

( 5 ) 剪輯合成

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

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

( 6 ) 動(dòng)畫自查

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

四 如何交付

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

1、生成成片

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

2、代碼落地實(shí)現(xiàn)

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

( 1 ) 直接生成代碼：利用軟件轉(zhuǎn)化成對(duì)應(yīng)的代碼格式，現(xiàn)在市場(chǎng)上通用的是lottie所生成的json進(jìn)行；

( 2 ) 提供動(dòng)效標(biāo)注圖：還有一部分無法直接轉(zhuǎn)化為代碼語(yǔ)言，這時(shí)候我們可以提供動(dòng)效的標(biāo)注圖，通過研發(fā)實(shí)現(xiàn)，標(biāo)注圖規(guī)范一般包括，觸發(fā)條件，對(duì)象、變化屬性、曲線數(shù)值、持續(xù)時(shí)間等，可以參照以下模板給到具體屬性參數(shù)；

五 最后

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

作者 | man man 京東科技設(shè)計(jì)聯(lián)盟設(shè)計(jì)師，分享一些在工作中的經(jīng)驗(yàn)沉淀、產(chǎn)品體驗(yàn)設(shè)計(jì)、視覺創(chuàng)意設(shè)計(jì)、設(shè)計(jì)方向探索、挖掘設(shè)計(jì)價(jià)值等方面的內(nèi)容。