专栏名称: 微交互
分享交互经验,提升产品用户体验。帮助您打造优秀产品。细节设计成就卓越产品。
目录
相关文章推荐
庞门正道  ·  到底是AI抽象,还是人更抽象? ·  3 天前  
庞门正道  ·  帐篷界的虫王争霸! ·  3 天前  
设计上海  ·  关注年轻设计力,TALENTS AWARD ... ·  昨天  
designwire设计腕儿  ·  【首发】上海地标风貌别墅:中海·恒昌玖里! ·  2 天前  
designwire设计腕儿  ·  【首发】上海地标风貌别墅:中海·恒昌玖里! ·  2 天前  
51好读  ›  专栏  ›  微交互

超全面!产品动效设计全方位科普手册

微交互  · 公众号  · 设计  · 2017-11-18 14:55

正文

请到「今天看啥」查看全文


△ 动效灵感来源

1. 结合产品去设计

要结合产品进行思考,思路设计要符合提升的产品体验,要经过细致思考不要盲目。

2. 了解基本常识

这些常识包含,动效设计的基本常识(如,基本的运动规律,节奏,动画如何),开发的基本常识,什么样子的动效果大概如何实现,实现成本大概是多少。确保能够顺利落地。

3. 观察生活

人们对于美的认知,大部分来自于日常的生活经历。比如什么样的运动是温柔地,激烈的,具有震撼性的。当我们对于我们需要构思的动效有性质定位的时候,可以从生活中这些相同的,定性的自然事物中寻找灵感,截取精华。

4. 看并思考

就是除了观察生活,我们还需要多看一些优秀的动效设计,时刻作为积累。同时,也需要对于「看」的事物进行细致思考。要思考他为什么这么设计,怎么完成这套动画设计的(是通过那些技巧构成这个动效设计的,整体节奏是怎样的一种感觉)。时刻与自己对类似事物的想法进行对比,找差距,补不足。这就是经验技巧积累的过程。

5. 学会拆解

web,app中大部分的动效设计,都是通过基本的变化组合而成的。我们要通过多看多观察,慢慢学会怎么去拆解别人复杂的动效设计,从中总结经验。而后,通过合理的编排设计出自己的动效设计,你就是这场动效设计的导演。

6. 关注流行

这个很简单,就是大家要保持对于设计行业,或者说是web,app动效设计领域的关注。了解当下新的设计手法,设计趋势以及设计方式。不要做一个落伍者,也不要把自己永远定义为一个跟随者。

前面我们说大部分我们在web&app中看到的动效设计,都是由一些基本的变化组合而成的,那这些基础变化是什么呢?(见下图)

△ 动画的基础变化

基础变化主要包含:移动,旋转,缩放以及属性变化。前面几点都很好理解,在此就不在详细解释。解释一下最后一个属性变化,它其实就是指透明度,形状,颜色等这些属性的变化。所有的这些变化形式,经过合理的编排在配合上合适的运动节奏,就是一个完整的动效设计。

简单来说就是:你要确定你要发生什么样的运动,这个运动要以何种节奏运动。贝塞尔曲线,就是将速度与时间的关系,用图形的形式展现出来,使其表意更直观。

△ 变化节奏

上图就是一些常见的贝塞尔曲线,右边就是我们在AE设计过程中,运动曲线调节界面。

为什么运动需要配合合适的节奏呢?

因为自然界中运动都不是线性的匀速运动,而是按照物理规律,呈现出的曲线的变速运动。这就是之前说的基本常识,基本规律。人们对于一个运动形式产生的情感反馈,大部分也来自于生活中看到的类似的运动形式。所以我们要符合物理规律,这样才能准确的专递我们动效设计的情感。当然可以适当根据需要夸张,精简。规矩是死的人是活的。活学活用。

http://easings.net

这个网站上归结了基本全部运动形式的贝塞尔曲线,并且有预览。还能直接使用js代码,很方便,很直观。

说了如何构思,接下来就要想想怎么实现你的想法:

△ 实现动效设计

如上图所示:

实现想法基本就是技术与技巧的问题,这需要学习与积累,怎么学习积累呢?

1.  动手尝试,熟能生巧

不断尝试才能不断锻炼自己的技术技巧。只有尝试了才能真的验证你的设计。

2. 临摹作品

学习任何东西,尤其是设计这个行当。临摹都是很有效的入门办法,之前的写实图标,现在的动效设计都是如此。临摹的过程其实就是你与优秀设计者交流的过程,从中你能仔细了解和学习他的设计思路手法,也能在临摹过程中对于原有设计手法结合自身经验进行优化升级,是很好的提升技巧的方法。

3. 注重细节

这个很简单,就和做单纯的视觉设计一样,一定要注意细节,细节决定成败,尤其是动效设计。要认真,多想,想全面。







请到「今天看啥」查看全文