
動態(tài)圖形設(shè)計在我們?nèi)粘I钪袩o處不在,藉由項目來告訴大家我是如何有理有據(jù)的做動態(tài)圖形設(shè)計,希望我的設(shè)計方法對你有所幫助。
騰訊視頻直播答題《百萬腦力時代》動態(tài)圖形設(shè)計合集:

△ 點擊查看視頻

一、動態(tài)圖形設(shè)計的起源
動態(tài)圖形設(shè)計,英文 Motion Graphics Design,簡稱 MG。是將原本靜態(tài)的平面圖像經(jīng)過動態(tài)的設(shè)定,呈現(xiàn)出動感,賦予其生命力。動態(tài)圖形的應(yīng)用十分廣泛,從電影片頭,電視包裝、MV、廣告,到APP、移動游戲、廣告牌、場景布置等,幾乎無處不在。
在20世紀(jì)50年代,John Whitney 利用他的機(jī)械動畫技術(shù)為電視節(jié)目和商業(yè)廣告創(chuàng)造序列。1952年,他導(dǎo)演了有關(guān)導(dǎo)彈項目的工程電影。這一時期他最著名的作品之一是與平面設(shè)計師 Saul Bass 合作的 Alfred Hitchcock 1958年的電影《Vertigo》的動畫標(biāo)題序列。
1960年,他創(chuàng)立了 Motion Graphics 公司,該公司使用他自己發(fā)明的機(jī)械動畫技術(shù)來創(chuàng)建電影和電視標(biāo)題序列和廣告,下面的影片解釋了這點,并突顯了圖形設(shè)計師 Saul Bass 和 Elaine Bass 的貢獻(xiàn)(The Title Design of Saul and Elaine Base)。作為劇情片片頭的先驅(qū)者,其作品包括《The Man With The Golden Arm》(1955)、《Vertigo》(1958)、《Psycho》(1960)、《Advise & Consent》(1962)。Saul 和 Elaine 的作品的核心是使用簡單的圖形來傳達(dá)電影的情緒。

圖形天然有著比文字、聲音更高的傳達(dá)效率,因為人類的大腦視覺信息處理相關(guān)腦區(qū)占統(tǒng)治地位,所以對于圖形更敏感,印象更深刻。而人對靜止不動的事物,通常不會注意到,而這些事物一旦動起來,我們的注意力就會被吸引到動的事物上面。所以動態(tài)圖形比靜態(tài)圖形更有吸引力,能傳達(dá)更深層次的信息,觸發(fā)情緒。
在互聯(lián)網(wǎng)蓬勃發(fā)展的時代,設(shè)計師們的技能也越來越全面,而我建議大家應(yīng)該多掌握一門技能——動態(tài)圖形設(shè)計。在設(shè)計中利用動態(tài)圖形設(shè)計來提高傳達(dá)效率,調(diào)動用戶情緒,在 UI設(shè)計、運營設(shè)計、交互設(shè)計上都能廣泛的應(yīng)用。
在設(shè)計動態(tài)圖形時,并非簡單的讓靜態(tài)圖形動起來就可以了,進(jìn)行設(shè)計時有一個很重要的核心——故事,所有的圖形的運動、銜接、消失都應(yīng)該圍繞著故事來進(jìn)行,故事是動態(tài)圖形設(shè)計的骨,運動形式是肉。有骨有肉,才是一個完整的動態(tài)圖形設(shè)計。
那么如何才能做出一個相對完整、有理據(jù)、有創(chuàng)意的動態(tài)圖形設(shè)計,下面我想告訴大家我是怎么做的。
二、個人總結(jié)的動態(tài)圖形設(shè)計方法
5步法:確定主題 → 了解趨勢 → 競品分析 → 設(shè)計構(gòu)思 → 執(zhí)行落地
- 確定主題:前期需要跟大家討論/自己決策選擇1~3個最優(yōu)信息點,動態(tài)圖形設(shè)計圍繞著1~3個最優(yōu)信息點進(jìn)行。
- 了解趨勢:收集和了解目前比較流行的動態(tài)圖形設(shè)計是怎么樣的,這樣一方面能使你做出來的動態(tài)圖形設(shè)計更符合大眾審美,另一方面也確保能讓自己學(xué)習(xí)到最新的動態(tài)圖形設(shè)計的敘事、銜接、運動形式。看看頂尖的動態(tài)圖形設(shè)計工作室是如何做的。像 ManvsMachine、we are seventeen、Buck、Animade 等等。
- 競品分析:了解分析競品的動態(tài)圖形設(shè)計,找到市場的空白區(qū)進(jìn)行切入,做出差異化。
- 設(shè)計構(gòu)思:圍繞「1~3個信息點」+「趨勢」+「市場空白區(qū)」,進(jìn)行故事構(gòu)思和視覺定調(diào)。強(qiáng)調(diào)構(gòu)思要多想幾個,好讓自己有對比進(jìn)行優(yōu)化的余地。
- 執(zhí)行落地:Let's do it!解決落地過程遇到的所有阻力。
三、有理有據(jù)的動態(tài)圖形設(shè)計
1. 確定主題:百萬、腦力、時代
2017年8月,競答游戲APP《HQ - Live Trivia Game Show》在美國掀起了一股熱潮,同年12月,《沖頂大會》和《芝士超人》把這股熱潮從美國帶到了中國,并且在中國迅速躥紅。
騰訊視頻首個答題贏百萬節(jié)目正式開戰(zhàn),聯(lián)合企鵝影視出品的《腦力男人時代》把名字定為《百萬腦力時代》。
名字定下來后,我們首先做一個拆解,提取此次要傳達(dá)的3點:百萬、腦力、時代。

2. 了解趨勢:收集和了解目前比較流行的動態(tài)圖形設(shè)計是怎么樣的
這樣一方面能使你做出來的動態(tài)圖形設(shè)計更符合大眾審美,另一方面也確保能讓自己學(xué)習(xí)到最新的動態(tài)圖形設(shè)計的敘事、銜接、運動形式。看看頂尖的動態(tài)圖形設(shè)計機(jī)構(gòu)是如何做的。像 ManvsMachine、we are seventeen、Buck、Animade 等等。
3. 分析競品視覺、動畫風(fēng)格往單色方向做出差異化形成記憶點
在進(jìn)行設(shè)計定位前,我們分析了市場上比較熱門的答題類產(chǎn)品的視覺和動畫,發(fā)現(xiàn)都是使用多彩+立體的設(shè)計,看起來比較娛樂化。

而我們希望從中做出差異化,為什么要做差異化?當(dāng)然是希望用戶能夠在眾多直播答題中記住我們。
從品牌傳播角度來講
如果我們的相關(guān)設(shè)計與其他品牌相關(guān)設(shè)計一樣的話,很容易讓消費者產(chǎn)生印象混淆,并削弱這個品牌的特征,所以我們希望從品牌的角度出發(fā),讓我們的直播答題符合我們品牌的特征,并且和別家的不一樣,將我們的品牌區(qū)分開來,形成差異化。
從視覺傳達(dá)角度來講
首先,我們的直播答題想要傳播的是百萬腦力時代,主題是腦力的比拼,跟別家想要傳達(dá)的信息也是不同的,除了傳達(dá)信息不同,我們也希望從視覺表現(xiàn)形式上做出區(qū)分,讓用戶在首次使用時從視覺上讓用戶感覺不一樣,制造新鮮感,提升吸引力。
從用戶使用角度來講
每個用戶都希望自己是與眾不同的,從日常行為到使用產(chǎn)品,都有這種傾向性,人的心理有這種訴求,所以我們可以通過滿足這種心理訴求來增加用戶的好感度和認(rèn)同度,營造用戶在印象上認(rèn)識到我們是與眾不同的來記住我們。
接著用四象限圖劃分競品進(jìn)行分析,從中找到目前仍然空置的板塊——抽象平面、單色純粹,我們將從這個板塊切入去進(jìn)行視覺設(shè)計,做到差異化。

4. 圍繞信息層百萬、腦力、時代和表現(xiàn)層娛樂元素純粹、抽象平面進(jìn)行構(gòu)思
圍繞剛提取的百萬、腦力、時代,用發(fā)散思維去把主題重點分解成元素,這些各種各樣的元素就像樂高積木,我們進(jìn)行設(shè)計構(gòu)思的時候能把樂高積木拼成一個完整的玩具,并且確保這個玩具在表達(dá)我們的主題,讓我們走在正確路上。


接下來就是拼樂高積木的時候了!這個過程你可能會有一些好想法、壞想法,需要重復(fù)組合、排序來獲得你最終滿意的設(shè)計方案。

緊接著把故事、演繹過程串聯(lián)起來,形成一個完整動態(tài)圖形設(shè)計。這能讓我們更清晰的認(rèn)識到自己所做的動態(tài)圖形所傳達(dá)的意思,同時跟產(chǎn)品/開發(fā)/運營/設(shè)計人員溝通能更完整的傳達(dá)整個動態(tài)圖形設(shè)計背后的故事和設(shè)計,增加說服力和吸引力。
不過要提醒大家的是,我在這里也踩到了一些坑。在時間緊迫的情況下,在設(shè)計構(gòu)思的時候很容易受到錨定效應(yīng)的影響,想法不知不覺就被剛分析過的視覺和動畫影響。
如何更快的跳過錨定效應(yīng),我的訣竅就是推翻重來:
- 構(gòu)思(不怕犯錯)
- 推翻(知錯就改)
- 再次構(gòu)思(再次犯錯or搞定?)
直到獲得滿意的設(shè)計構(gòu)思。

走偏的初稿,沒有故事,純視覺移動,陷入錨定效應(yīng)中,構(gòu)思的故事和視覺風(fēng)格都偏向多彩+立體。

走偏的初稿2,把視覺風(fēng)格拍平后,發(fā)現(xiàn)仍然不妥,缺乏故事導(dǎo)致沒有說服力,無法吸引人。遂決定重新構(gòu)思。


《開場》故事:參與百萬腦力時代競答的過程中,腦電波從平穩(wěn)到激蕩,競答過程在腦海搜尋答案猶如迷宮中尋找出口,從一個個信息中篩選出正確答案。最終找到出口,接著強(qiáng)調(diào)百萬腦力時代,最后成功打開百萬腦力時代的大門!
《獲勝者》故事:給還在腦力激蕩中的最終的獲勝者戴上屬于 TA們的皇冠。
《決勝題》故事:貫穿 UI視覺、動態(tài)圖形的三角出現(xiàn),帶出第12題決勝題,接著巧妙的變成兩個交叉的旗幟,一決勝負(fù)。
有了手稿以后,在電腦上畫出來,更細(xì)節(jié)的部分,如:敘事、銜接、視覺風(fēng)格會在這里變得更加清晰,在這一步想好做好,在動態(tài)設(shè)計的時候就不用反復(fù)嘗試,節(jié)省時間成本。


5. 把想法實行,并進(jìn)行細(xì)節(jié)打磨,尋找合適配樂,及落地到直播當(dāng)中
最終落地情況是采用720p的MPEG2格式來保證用戶使用流暢度和節(jié)省帶寬成本,雖然缺點是動畫整體變模糊了,從750x1334px到720x480px,但是在用戶體驗上沒有出現(xiàn)卡頓問題,切實完整的落地了。
最后放一個《創(chuàng)造101》閃屏動態(tài)圖形設(shè)計收尾,我也在進(jìn)一步摸索如何更科學(xué)又有趣的做動態(tài)圖形設(shè)計,期待下一次跟大家分享,也希望我的設(shè)計方法對你有所幫助。

△ 點擊查看完整視頻
作者:
葉益輝@騰訊視頻TVD
歡迎署名和標(biāo)記來源轉(zhuǎn)載 : )
騰訊視頻TVD是一個很年輕的團(tuán)隊,組內(nèi)氛圍好,不無聊,歡迎投簡歷或前來勾搭~
歡迎關(guān)注「?騰訊視頻TVDesign」公眾號:

圖片素材作者:Mantas Gr
「動效設(shè)計精選」
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。




發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機(jī)派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
MJ+SD智能設(shè)計
已累計誕生 772 位幸運星
發(fā)表評論 為下方 2 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓