实例详解六种图标动效设计思路分享

2016-02-16 19:30 26 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的实例详解六种图标动效设计思路分享,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - 平面设计 】

动效未来有多火同学们都感受到了,之前发的AE教程都是实战型,软件得会,思路更不能少。如何做出有意思有趣的动画设计,今天作者正越升以图标动效为例,把高手常用的6种动效设计思路都总结出来,非常值得收藏的干货。

现在越来越多手机应用和web应用都开始注重动效的设计,恰到好处的动效可以给用户带来愉悦的交互体验,是应用颜值担当的一大重要部分。

icon,也就是图标。在交互过程中,应用各种icon都会跟随不同的事件发生不同的转换。举两个例子,一个音乐播放器的播放模式改变和充电时电量图标的改变。

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

过去,icon的转换都十分死板,而近年来开始流行在切换icon的时候加入过渡动画,这种动效给用户体验带来的正面效果十分明显,给应用添色不少。

然而面对icon动效,我们应该如何设计?今天分享几个设计icon动效的思路。在此说明一下,配图的动效有些是临摹有些是原创,只为了统一样式方便阅读。

一、属性转换法

这是最为普遍也最为简单的一种icon切换思路。

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

二、路径重组法

这可能是看惯了属性变换的动效之后,又一个让人眼前一亮的动效思路。

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

三、点线面降级法

这是一个相当有用的思路。

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

四、遮罩法

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

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

五、分裂融合法

打个贴切的比方,就是把一把剑融成铁水之后,铸成一把新刀。

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

六、图标特性法

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

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

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

实例详解六种图标动效设计思路分享,PS教程,图老师教程网

要做好一个icon动效,光有思路是不行的,还需要了解一些图形运动方面的知识。如何做出令人愉悦的icon动效,可以考虑的方面有缓动、弹动、拖尾、时差、随机、层次感、运动修饰等等。

对了,欢迎同学们关注作者的微信公众号:坏打印机。

来源:https://www.tulaoshi.com/n/20160216/1572386.html

延伸阅读
标签: 营养价值
冬季寒冷越发严重,人们做相应的御寒措施也是百种。总结一下也就是分为三大类,其一是外部的御寒,其二就是饮食上的大补,其三就是锻炼。以上的任何一种御寒措施都会出现相应的误区,毕竟科学的御寒方法对于人们来说还不是很普及,而以下的一种水,不但有御寒的作用,对于防治疾病的效果也相当不错。 天热吹空调易让人患上空调病...
腾讯同学的教程一向都是良心之作,今天这篇长文收罗了常见的UI动效设计方法,不仅有案例,而且分析透彻入微,从表现形式到动效的作用,对用户产生的影响,都有全面专业的解说。今年动效也是一大热门,想自我提升的同学可以放手来学习了。 概要 xavieryuan:UI是基于静态页面来设计的,页面之间通过跳转切换。在设计过程中,设计师很重视单...
这篇文章由江南大学设计学院研究生孙启玉翻译,主要谈手机App中的转场动效,强烈推荐原型设计师阅读学习,体验下动效的神奇妙用。他们把大量时间花在了像素级按钮,表单样式,设置类型以及如何让那些图标变得漂亮和精致。 但是关于如何设计衔接却很少有人考虑。你点下按钮表单就出现了?你滑动删除一个项目它就那么消失了?那也忒怪异忒不自然了...
今年iOS 7与Android L都将动效作为提升用户体验的利器,如果你还木有通读整一篇设计指南,就先来了解一下阿里同学今天的分享吧,通过案例剖析,帮你了解动效与设计原则的关系,来学习咯。 一个新的设计风格的确立一定会提出他特有的设计原则。而如今设计原则越来越多的关注到了动效的定义。甚至在Android L的Material Design中直接将动效写入...
怎样自拍更好看?自拍好看的六种技巧详解   随着现在智能手机手机的普及,越来越多的妹纸都爱上了自拍,可由于技术匮乏,效果总是不理想,那么怎样自拍更好看?自拍好看要考虑自拍tulaoShi.com角度、光线强、发型、颜色搭配、背景视野开阔问题,以下小编就为大家详解自拍好看的六种技巧,一起来看看吧! 方法/步骤 1、自拍的摄...

经验教程

599

收藏

34
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部