腾讯干货！轻松5步教你有理有据做MG动画

动态图形设计在我们日生中无处在，藉由项目来告诉大我是如何有有据的做态图形设计，希望我的设计方法对你有帮助。

腾视频直播答题《百万脑力时代》动态图形设计合集：

△ 点击查看视频

一、动态图形设计的起源

态图形设计，英 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