實戰(zhàn)總結(jié)!輕松4步搞定動效視頻設(shè)計
近期完成一些視頻制作,表現(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)。
- 直接生成代碼:利用軟件轉(zhuǎn)化成對應(yīng)的代碼格式,現(xiàn)在市場上通用的是 lottie 所生成的 json 進(jìn)行;
- 提供動效標(biāo)注圖:還有一部分無法直接轉(zhuǎn)化為代碼語言,這時候我們可以提供動效的標(biāo)注圖,通過研發(fā)實現(xiàn),標(biāo)注圖規(guī)范一般包括,觸發(fā)條件,對象、變化屬性、曲線數(shù)值、持續(xù)時間等,可以參照以下模板給到具體屬性參數(shù);
五、最后
很高興您閱讀到這里,以上是我的一點思考,希望能給在看的你帶來一些小思路。
最后祝愿大家在工作中收獲美好,困難少一點,開心多一些。
作者:JDTDA
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)