赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
3.2K 0 0

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

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

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

△ 点击查看视频

腾讯干货!轻松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 的作品的核心是使用简的图形来传达的情绪。

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

图形然有着比文字、声音更高的传达效率,因为人类的大脑视觉息理相关脑占统治地位,所以对于图形更敏,印象更深刻。而人对静止不动的事物,通常不会注,而这些事物一旦动起来,的注力就会被吸引动的事物上面。所以动图形比静图形更有吸引力,能传达更深层次的息,触发情绪。

在互联网蓬勃发展时代,设计师们技能也越来越全,而我议大家应该多掌握技能——动态图形设计。在设计利用动态图形设计来提高传效率,调动用户情绪,在 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点:百万、脑力、代。

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

2. 了解趋势:收集和了解目前比较流行的动态图形设计是怎么样的

样一方面能使你做出来的动态图形设计更符合大众审美,另一方面也确能让自己学习到最新的动态图形设计的叙、衔接、运动形式。看看顶尖的动态图形设计机构是何做的。像 ManvsMachine、we are seventeen、Buck、Animade 等等。

3. 分析竞品视觉、动画风格往单色方向做出差异化形成记忆点

在进行设计定位前,我们分析市场上比热门的答题类产品的视和动画,现是使用彩+立的设计,看来比娱乐化。

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

而我们希望从中做出差异化,为什么要做差异化?当是希望用户能够在众直播答题中住我们。

从品牌传播角度来讲

果我们的相关设计与其他品牌相关设计一样的,很容易让消费者产生印象混淆,并削弱个品牌的特征,所以我们希望从品牌的角度出,让我们的直播答题符合我们品牌的特征,并且和别家的不一样,将我们的品牌区分开来,形成差异化。

从视传达角度来讲

首先,我们的直播答题想要传播的是百万脑力时代,主题是脑力的比拼,跟别家想要传达的信息也是不同的,除传达信息不同,我们也希望从视表现形式上做出区分,让用户在首次使用时从视上让用户感不一样,造新鲜感,提升吸引力。

从用户使用角度来讲

每个用户希望自己是与众不同的,从常行为到使用产品,有种倾向,人的心理有种诉求,所以我们以通满种心理诉求来增加用户的感度和认同度,营造用户在印象上认识到我们是与众不同的来住我们。

着用四象限图划竞品进行析,从中找目前仍然空置的板块——抽象面、色纯粹,将从这个板块切入去进行视觉计,做差异化。

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

4. 围绕信息层百万、脑力、时代和表现层娱乐元素纯粹、抽象平面进行构思

围绕刚提取的百万、脑力、时代,用散思去把主题重点分成元素,各种各样的元素就像乐高积木,我们进行设计构思的时能把乐高积木拼成一个完整的玩具,并且确个玩具在表达我们的主题,让我们走在正确路上。

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

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

接来就是拼乐积木的时候了!这个过程你可会有一些好想法、坏想法,需要重复组合、序来获得你最终满意的设计方案。

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

紧接着把故事、演绎过程串联起来,形成一个整态图形设计。这我们更清晰的认识到自己做的态图形传达的意思,同时跟产/开发/营/设计人员沟通更整的传达整个态图形设计背后的故事和设计,增说和吸引。

不要提醒大家的是,我在里也踩到一坑。在时间紧迫的情况下,在设计构思的时很容易受到锚定效应的影响,想法不不就被刚分析的视和动画影响。

如何更快的跳过锚定效应,的诀窍就是推翻重来:

  • 构思(不怕犯错)
  • 推翻(知错就改)
  • 再构思(再犯or搞定?)

直获得的计构思。

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

偏的初稿,没有故事,纯视觉移动,陷入锚定效应中,构思的故事和视觉风格都偏向多彩+立体。

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

偏的初稿2,把视觉风格拍后,发现仍然不妥,缺乏故事导致没有说服力,无法吸引人。遂决定重新构思。

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

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

《开场》故:参与百万脑力时代竞答的程中,脑电波从平稳到激荡,竞答程在脑搜寻答案犹迷宫中寻找出口,从一个个信息中筛选出正确答案。最终找到出口,接着强百万脑力时代,最成功打开百万脑力时代的大门!

《获胜者》故事:给还在脑力激荡中的最终的获胜者戴上属于 TA的皇冠。

《决胜题》故事:贯穿 UI视觉、动态图形三出现,带出第12题决胜题,接着巧妙变成两个交旗帜,决胜负。

了手稿以后,电脑画出,细节的部分,如:叙事、衔接、视觉风格会这里变得加清晰,这一好好,动态设的时候就不用反复试,节省时间本。

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

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

5. 把想法实行,并进行细节打磨,寻找合适配乐,及落地到直播当中

最终落地情况是采用720p的MPEG2格式来保证用户使用流畅度和节带宽成本,虽然缺点是动画整体变模糊了,从750x1334px720x480px,但是在用户体验上没有出现卡顿问题,切实完整的落地了。

最后放个《创造101》闪屏动态图形设计收尾,我也在进步摸索如何更学又有趣做动态图形设计,期待下跟大家分享,也希望我设计法你有所帮助。

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

△ 击查看完视频

作者:

叶益辉@腾讯视频TVD

欢迎署名和标来源转载 : )

腾讯视频TVD是一个年轻的队,组内氛围好,不无聊,欢迎投简历或前来勾搭~

欢迎关注「 腾讯视频TVDesign」公众号:

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

图片素材作者:Mantas Gr

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

无疑,坐拥10亿月活的微信极其成功,有人说微信的成功在于赛道的成功,然而即便把微信和国际上其他地区的同类应用 WhatsApp、...
张小龙
QQ 购物号是专门为 QQ 用户定制的购物平台,2020 年随着疫情过后,整体电商行业开始恢复阶段,QQ 购物号计划了今年双 11 大促...
QQ设计
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
前言 随着直播的发展,秀场直播出现了各种形式,在直播间里衍生出了越来越丰富多样的玩法,多人连麦直播则是近年来衍生出的另...
企鹅电竞
编者按:专业的设计流程是怎样的?本文从腾讯微保的实战案例出发,为你展现一个真实有效的设计过程,看高手是如何用设计做好...
保险类设计
每到过年,在外的游子都会不远万里回家与亲人团聚,这是一种中国独有的特色,也是一种别样的年味。我们期望在春节上线一款游...
3D游戏
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使...
AE动效
粤省事小程序是一个基于移动端的聚合式政务服务平台。作为一个平台型产品,它集成了广东省各地市、各部门的多项民生、政务类...
实战案例