UI界面设计 ·

掌握这6种动效设计思路,你也是APP动效设计大神

据说在互联网行业的做动效,这两种人会比较吃香:

1、动态图形设计能力一流,随便给你个元素你就能做出花来,如下图:

APP UI动效为什么那么受欢迎

2、原型设计能力强,能快速帮UED Team实现可交互原型,并且有优化交互设计的能力

扩展阅读:http://www.ui.cn/detail/41420.html

 

而且最近这几年,会动效设计的设计师的薪资和受欢迎的程度都会比UI设计师吃香一点。

 

所以,要想成为动效设计师 或 全栈设计师,动效设计是必备一项技能。

今天学堂君就传授大家6种动效设计思路,让你们分分钟成为app动效设计大神。

 
第1种、属性转换法
这是最为普遍也最为简单的一种icon切换思路。

属性包含了位置、大小、旋转、透明度、颜色等,在这些属性上面做动效,若运用恰当,可以做出令人眼前一亮的动效。

2a400a8505eff60f5405684e57e6eab0

现在绝大多数icon动效都离不开属性变化,运动恰当,这个简单而强大的方法大有可为之处。

第2种、路径重组法
这可能是看惯了属性变换的动效之后,又一个让人眼前一亮的动效思路。

将icon的路径(笔画)进行重组,构成一个新的icon,这期间考验着更多的东西,比如观察两个icon笔画之间的关系,这个思路最近相当流行,同时也具有挑战性。

第3种、点线面降级法
这是一个相当有用的思路。

面和面进行转换的时候,可以用线作为介质,一个面先转换成一根线,再通过这根线转换成另一个面。同理,线和线转换时,可以用点作为介质,一根线先转换成一个点,再通过这个点转换成另一根线。

这么说有点抽象,我们来看几个例子。

第4种、遮罩法
两个图形之间相互转换时,可以用其中一个图形作为另一个图形的遮罩,也就是边界,当这个图形放大的时候,因为另一个图形作为边界的缘故,转换成了另一个图形的形状。

思路很简单,却又一点局限性,两个图形必须是包含关系。

在谷歌的Material design规范中也出现类似的动效。

6dx20151206
第5种、分裂融合法
打个贴切的比方,就是把一把剑融成铁水之后,铸成一把新刀。

分裂融合法尤其适用于其中一个图标是一个整体,另一个图标由多个分离的部分组成的情况。由分裂融合法做出来的动效也相当有趣。

第6种、图标特性法
以上的五种思路只是停留在如何让icon动效有趣的层面上,那么如何让icon动效不仅有趣而且有意义呢?这就需要考虑不同icon之间的特性来设计动效。

图标特性法,顾名思义就是利用图标表达的实际意义,做出与之吻合的动效,需要很强的思维发散性。

2dx20151206

1dx20151206

 

以上6点就是最基本的图标动效设计方法。掌握好这6种动效设计思路,还需要你了解一些图形运动方面的知识。才能做出令人愉悦的icon动效,这个时候需要大家更多的去学习,比如考虑的方面有缓动、弹动、拖尾、时差、随机、层次感、运动修饰等等。

更多关于APP动效的知识和干货如下:

1、国外酷炫的手机UI动效设计,鸡皮疙瘩都起来了

2、9张超全面的非常酷炫的APP交互动效设计案例欣赏

3、APP交互设计鸡汤:10条非常实用的UI动效设计原则

4、APP UI动效设计中六个基本原则与最高原则

 

 

参与评论