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

一 概念

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

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

1、設計特點

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

2、為什么做動態(tài)設計

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

三 如何進行動態(tài)設計

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

1、前期分析

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

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

( 2 ) 匯總結論，歸納主題關鍵詞

通過信息收集階段，提煉出以下設計目標和導向：

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

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

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

2、提煉設計方向

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

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

品牌風格：京東云品牌的輕盈、微質感的淺色科技風格為基因進行設計；

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

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

3、設計執(zhí)行

( 1 ) 腳本

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

A. 內容結構拆解

比如這次的產品宣傳視頻，通過文案邏輯進行拆分，形成分鏡畫面的設計思路。

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

封面點題：點出所推產品，繼承京東云品牌風格，強調產品視覺特征，使用幾何元素構成標題核心，微質感背景烘托主題氛圍；

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

總結問題：通過痛點分析，匯總出企業(yè)存在的問題?？梢岳檬髽艘苿又饌€收起，引導出產品解決方案的優(yōu)勢特征；

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

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

B. 腳本規(guī)劃

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

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

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

( 2 ) 文案內容

A. 口播文案

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

B. 畫面文案

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

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

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

( 3 ) 畫面設計

A. 風格探索

參照制定的設計目標和方向，以腳本框架為引導，進行靜態(tài)畫面的實現(xiàn)。也可出1-2個靜態(tài)視覺和需求方溝通，如無問題，其他分鏡效果依此完成。或者可以制作部分畫面的動態(tài)效果，以便判斷腳本最終呈現(xiàn)的視覺效果。

B. 畫面調性

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

色系：依據(jù)京東云品牌風格調性，以及產品色系搭配，可以定義出以下色彩搭配規(guī)范：

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

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

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

C. 內容設計

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

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

( 4 ) 動畫實現(xiàn)

A. 元素分層

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

核心內容的敘事性：核心內容是主題含義的傳達，需要以動畫的故事主線進行屬性動畫的制作；

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

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

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

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

B. 動畫編排

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

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

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

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

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

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

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

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

C. 元素動畫實現(xiàn)

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

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

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

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

( 5 ) 剪輯合成

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

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

( 6 ) 動畫自查

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

四 如何交付

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

1、生成成片

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

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

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

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

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

五 最后

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

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