动效中的细节丰富感

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
1424 1 2 2018-09-05

终于忙过了一阵子,也有些想给大家说的关于我自己个的想法和实践所行的东西啦~ 


2018年截至目前我可做了好多部关于公司产品宣传类的MG动画,以及一些UI上的交互相关的工作,累P了,也看了些文章,关于动效的文章,真的是太多太多了。巴拉巴拉都是些动效多么的重要,多么的有用之类的,其实吧,我就觉得吧,这些东西只要与工作相关,设计师情之所至的就确实需要学学,其余的都是浮云~UI中动效表达确实是心之所向,技术所至,至美设计的需要~ 所以不要掉队~ 我们一起UP UP~


言归正传,敲黑板,下面说的东西或许对正在学习动效设计的小伙伴很有帮助,就是动效设计的丰富感表现。


为啥别人的动画那么流畅?为啥别人的动画那么酷炫?为啥这么花里胡哨的东西我搞不出来?很难吗?


其实设计都是有技法可行的,只是这个技法有些感性,需要脑洞,需要处处留心,需要积累。


比如做一个圆环的加载动效,如下图原始-加载效果,其实整体来看没什么问题,就是个普通的加载,规规矩矩但毫无亮点,应付差事其实是OK的,但是对于个人提升和产品的性格表现来看,just so so~ 还不如程序员哥哥搞的有水平。

0


下面我将告诉大家丰富动效细节的小技法:


1.丰富对象形态。动其实是个关联性的行为,单一的动理论上没有问题,但是视觉上表现出来就会使得画面有些空旷感,适当的增加对象关联性的装饰元素,可以增添细节的丰富感,画面也会有些生动的气息,比如下图改造-1:

1


2.为对象建立主从关系,制造时间差。画面中的主要元素是动画含义的表现主体,它直接决定了动画的性格和内容,红花需要绿叶的衬托,在动效设计中,主要元素增加些“绿叶”的装饰,有时可以事半功倍,彰显生命活力。但是注意,绿叶终究是绿叶,不管怎么装饰都不能抢了主角的光环,避免乱花迷眼。比如下图改造-2:

2


3.使画面增加层次感,透视/光影等表现。简单的透视效果可以很好的营造出空间感,Google推出的设计语言-Material Design教科书般的讲述了动效元素如何营造空间感,如何表现多维度等设计理念。简单的加些投影,便可以使简陋的元素充满层次感,比如下图改造-3:3



4.反向思维,打破规律的动态表现。预动作的加入,使其形成一个虚拟的反向作用力,再加上夸张的惯性表现,和关联的裙带动作。另外为这个圆环加些特殊效果,有一点性格成分。一个简单的加载便可以俏皮起来了,比如下图改造-4:4



5.夸张的动作,有趣的剧情。小时候看猫和老鼠很容易上瘾,哈哈傻笑,额,暴漏年纪了,里面过于夸张的动画表现不仅搞笑更能为剧情的发展注入情绪,也许这就是动画的魅力,可以接受太多的不可能,可以任由设计师情绪性的表现,更能够实现那些反人类的运动,并且居然看着很合理。一个渐生长的小圆环,加入了Y轴的旋转,貌似不合理,但动画就是可以这么夸张而充满想象。比如下图改造-5:5



最后想总结的是:设计师是一个太牛逼的工种,是创新和潮流的践行者,是社会精神文明建设的引领者,丰富的想象力和走心的观察力是设计职业生涯不可或缺和停止的,也只有保持不断的学习,不停的想象,生活才能够处处新奇和美好,我们看到的事物才能够充满爱和趣,这样,我们呈现的作品才能够更加的美好。加油吧,每个战斗在一线的小伙伴们,希望每天都有好运气~ 

酷


全部评论:1

  • 一阵清风吹我心

    2019-06-22 19:32

    我是初学者 我能问一下行业的薪水大概有多少吗 如果不方便就算了

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票