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

更多動效干貨：

一、概念

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

二、動態設計的意義

1. 設計特點

動態設計具有的三大通用優點，對用戶的影響力比較巨大。

2. 為什么做動態設計

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

三、如何進行動態設計

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

1. 前期分析

① 了解需求，收集素材

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

② 匯總結論，歸納主題關鍵詞

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

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

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

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

2. 提煉設計方向

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

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

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

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

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

3. 設計執行

① 腳本

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

內容結構拆解

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

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

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

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

總結問題：通過痛點分析，匯總出企業存在的問題。可以利用鼠標移動逐個收起，引導出產品解決方案的優勢特征；

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

產品政策：落腳在產品的優惠政策，以及聯系方式，運用收尾呼應的方式進行，迎合產品主題，呈現優惠方式和聯系方式；

腳本規劃

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

分鏡畫面實現

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

② 文案內容

口播文案

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

畫面文案

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

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

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

③ 畫面設計

風格探索

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

畫面調性

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

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

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

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

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

內容設計

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

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

④ 動畫實現

元素分層

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

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

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

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

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

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

動畫編排

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

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

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

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

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

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

背景元素：主要用于烘托核心元素，增加畫面氛圍。可以使用循環背景、循環流光、粒子襯托、動態背景等動畫效果實現。由于運動越快，越容易聚焦用戶視線，因此作為背景元素的動畫，在運動節奏上適當放慢，時間線拉長，循環使用；

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

元素動畫實現

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

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

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

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

⑤ 剪輯合成

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

音效：根據動態節奏，還會搭配音效的輔助，提升整體的氛圍和風格。

⑥ 動畫自查

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

四、如何交付

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

1. 生成成片

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

2. 代碼落地實現

如涉及到動效的開發，有一部分需要代碼語言實現。

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

五、最后

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

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

歡迎關注作者微信公眾號：「JDTDA」