動態圖形設計在我們日常生活中無處不在，藉由項目來告訴大家我是如何有理有據的做動態圖形設計，希望我的設計方法對你有所幫助。
騰訊視頻直播答題《百萬腦力時代》動態圖形設計合集：
△ 點擊查看視頻
一、動態圖形設計的起源
動態圖形設計，英文 Motion Graphics Design，簡稱 MG。是將原本靜態的平面圖像經過動態的設定，呈現出動感，賦予其生命力。動態圖形的應用十分廣泛，從電影片頭，電視包裝、MV、廣告，到APP、移動游戲、廣告牌、場景布置等，幾乎無處不在。
在20世紀50年代，John Whitney 利用他的機械動畫技術為電視節目和商業廣告創造序列。1952年，他導演了有關導彈項目的工程電影。這一時期他最著名的作品之一是與平面設計師 Saul Bass 合作的 Alfred Hitchcock 1958年的電影《Vertigo》的動畫標題序列。
1960年，他創立了 Motion Graphics 公司，該公司使用他自己發明的機械動畫技術來創建電影和電視標題序列和廣告，下面的影片解釋了這點，并突顯了圖形設計師 Saul Bass 和 Elaine Bass 的貢獻（The Title Design of Saul and Elaine Base）。作為劇情片片頭的先驅者，其作品包括《The Man With The Golden Arm》（1955）、《Vertigo》（1958）、《Psycho》（1960）、《Advise & Consent》（1962）。Saul 和 Elaine 的作品的核心是使用簡單的圖形來傳達電影的情緒。
圖形天然有著比文字、聲音更高的傳達效率，因為人類的大腦視覺信息處理相關腦區占統治地位，所以對于圖形更敏感，印象更深刻。而人對靜止不動的事物，通常不會注意到，而這些事物一旦動起來，我們的注意力就會被吸引到動的事物上面。所以動態圖形比靜態圖形更有吸引力，能傳達更深層次的信息，觸發情緒。
在互聯網蓬勃發展的時代，設計師們的技能也越來越全面，而我建議大家應該多掌握一門技能——動態圖形設計。在設計中利用動態圖形設計來提高傳達效率，調動用戶情緒，在 UI設計、運營設計、交互設計上都能廣泛的應用。
在設計動態圖形時，并非簡單的讓靜態圖形動起來就可以了，進行設計時有一個很重要的核心——故事，所有的圖形的運動、銜接、消失都應該圍繞著故事來進行，故事是動態圖形設計的骨，運動形式是肉。有骨有肉，才是一個完整的動態圖形設計。
那么如何才能做出一個相對完整、有理據、有創意的動態圖形設計，下面我想告訴大家我是怎么做的。
二、個人總結的動態圖形設計方法
5步法：確定主題 → 了解趨勢 → 競品分析 → 設計構思 → 執行落地
- 確定主題：前期需要跟大家討論/自己決策選擇1~3個最優信息點，動態圖形設計圍繞著1~3個最優信息點進行。
- 了解趨勢：收集和了解目前比較流行的動態圖形設計是怎么樣的，這樣一方面能使你做出來的動態圖形設計更符合大眾審美，另一方面也確保能讓自己學習到最新的動態圖形設計的敘事、銜接、運動形式。看看頂尖的動態圖形設計工作室是如何做的。像 ManvsMachine、we are seventeen、Buck、Animade 等等。
- 競品分析：了解分析競品的動態圖形設計，找到市場的空白區進行切入，做出差異化。
- 設計構思：圍繞「1~3個信息點」+「趨勢」+「市場空白區」，進行故事構思和視覺定調。強調構思要多想幾個，好讓自己有對比進行優化的余地。
- 執行落地：Let's do it！解決落地過程遇到的所有阻力。
三、有理有據的動態圖形設計
1. 確定主題：百萬、腦力、時代
2017年8月，競答游戲APP《HQ - Live Trivia Game Show》在美國掀起了一股熱潮，同年12月，《沖頂大會》和《芝士超人》把這股熱潮從美國帶到了中國，并且在中國迅速躥紅。
騰訊視頻首個答題贏百萬節目正式開戰，聯合企鵝影視出品的《腦力男人時代》把名字定為《百萬腦力時代》。
名字定下來后，我們首先做一個拆解，提取此次要傳達的3點：百萬、腦力、時代。
2. 了解趨勢：收集和了解目前比較流行的動態圖形設計是怎么樣的
這樣一方面能使你做出來的動態圖形設計更符合大眾審美，另一方面也確保能讓自己學習到最新的動態圖形設計的敘事、銜接、運動形式。看看頂尖的動態圖形設計機構是如何做的。像 ManvsMachine、we are seventeen、Buck、Animade 等等。
3. 分析競品視覺、動畫風格往單色方向做出差異化形成記憶點
在進行設計定位前，我們分析了市場上比較熱門的答題類產品的視覺和動畫，發現都是使用多彩+立體的設計，看起來比較娛樂化。
而我們希望從中做出差異化，為什么要做差異化？當然是希望用戶能夠在眾多直播答題中記住我們。
從品牌傳播角度來講
如果我們的相關設計與其他品牌相關設計一樣的話，很容易讓消費者產生印象混淆，并削弱這個品牌的特征，所以我們希望從品牌的角度出發，讓我們的直播答題符合我們品牌的特征，并且和別家的不一樣，將我們的品牌區分開來，形成差異化。
從視覺傳達角度來講
首先，我們的直播答題想要傳播的是百萬腦力時代，主題是腦力的比拼，跟別家想要傳達的信息也是不同的，除了傳達信息不同，我們也希望從視覺表現形式上做出區分，讓用戶在首次使用時從視覺上讓用戶感覺不一樣，制造新鮮感，提升吸引力。
從用戶使用角度來講
每個用戶都希望自己是與眾不同的，從日常行為到使用產品，都有這種傾向性，人的心理有這種訴求，所以我們可以通過滿足這種心理訴求來增加用戶的好感度和認同度，營造用戶在印象上認識到我們是與眾不同的來記住我們。
接著用四象限圖劃分競品進行分析，從中找到目前仍然空置的板塊——抽象平面、單色純粹，我們將從這個板塊切入去進行視覺設計，做到差異化。
4. 圍繞信息層百萬、腦力、時代和表現層娛樂元素純粹、抽象平面進行構思
圍繞剛提取的百萬、腦力、時代，用發散思維去把主題重點分解成元素，這些各種各樣的元素就像樂高積木，我們進行設計構思的時候能把樂高積木拼成一個完整的玩具，并且確保這個玩具在表達我們的主題，讓我們走在正確路上。
接下來就是拼樂高積木的時候了！這個過程你可能會有一些好想法、壞想法，需要重復組合、排序來獲得你最終滿意的設計方案。
緊接著把故事、演繹過程串聯起來，形成一個完整動態圖形設計。這能讓我們更清晰的認識到自己所做的動態圖形所傳達的意思，同時跟產品/開發/運營/設計人員溝通能更完整的傳達整個動態圖形設計背后的故事和設計，增加說服力和吸引力。
不過要提醒大家的是，我在這里也踩到了一些坑。在時間緊迫的情況下，在設計構思的時候很容易受到錨定效應的影響，想法不知不覺就被剛分析過的視覺和動畫影響。
如何更快的跳過錨定效應，我的訣竅就是推翻重來：
- 構思（不怕犯錯）
- 推翻（知錯就改）
- 再次構思（再次犯錯or搞定？）
直到獲得滿意的設計構思。
走偏的初稿，沒有故事，純視覺移動，陷入錨定效應中，構思的故事和視覺風格都偏向多彩+立體。
走偏的初稿2，把視覺風格拍平后，發現仍然不妥，缺乏故事導致沒有說服力，無法吸引人。遂決定重新構思。
《開場》故事：參與百萬腦力時代競答的過程中，腦電波從平穩到激蕩，競答過程在腦海搜尋答案猶如迷宮中尋找出口，從一個個信息中篩選出正確答案。最終找到出口，接著強調百萬腦力時代，最后成功打開百萬腦力時代的大門！
《獲勝者》故事：給還在腦力激蕩中的最終的獲勝者戴上屬于 TA們的皇冠。
《決勝題》故事：貫穿 UI視覺、動態圖形的三角出現，帶出第12題決勝題，接著巧妙的變成兩個交叉的旗幟，一決勝負。
有了手稿以后，在電腦上畫出來，更細節的部分，如：敘事、銜接、視覺風格會在這里變得更加清晰，在這一步想好做好，在動態設計的時候就不用反復嘗試，節省時間成本。
5. 把想法實行，并進行細節打磨，尋找合適配樂，及落地到直播當中
最終落地情況是采用720p的MPEG2格式來保證用戶使用流暢度和節省帶寬成本，雖然缺點是動畫整體變模糊了，從750x1334px到720x480px，但是在用戶體驗上沒有出現卡頓問題，切實完整的落地了。
最后放一個《創造101》閃屏動態圖形設計收尾，我也在進一步摸索如何更科學又有趣的做動態圖形設計，期待下一次跟大家分享，也希望我的設計方法對你有所幫助。
△ 點擊查看完整視頻
作者：
葉益輝@騰訊視頻TVD
歡迎署名和標記來源轉載 : )
騰訊視頻TVD是一個很年輕的團隊，組內氛圍好，不無聊，歡迎投簡歷或前來勾搭~
歡迎關注「?騰訊視頻TVDesign」公眾號：
圖片素材作者：Mantas Gr
「動效設計精選」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 2 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓