动效设计如何应用在UI实战中 动效教程 动效基础

炫酷，炫酷，炫酷…小明在站酷网看到大神的最新动效作品后接连惊呼了三声，然后他满怀激情的打开AE，新建了工程。然后他愣住了…我该做什么，我该怎么做，我做完后如何使用？然后，他默默的关闭了AE…

这个场景肯定发生了千百万次。我该做什么，我该怎么做，我做完后如何使用？这是初学者进入任何行业都必须面对的问题。对于动效设计这个建立在扎实视觉基础上的行业更是如此。

趁着开年的空闲时间，我来给大家说说动效设计如何应用在UI实战中，抛砖引砖…注意文章中每一个问句哦…

 

1、你该做什么

    （1）扎实的学习视觉设计

      动效设计是建立在视觉基础上的一门学科。没有好的视觉素材任凭你动效再炫酷也无济于事。在动效设计中流传着这样的一句话：视觉对了，随便动一动就有了60分。

 

    （2）深入学习一个你喜欢的动效软件

      工欲善其事，必先利其器。没有一款顺手的动效软件你是没法将你的想法变成现实的。对于初学者，你需要系统的学好一个动效软件。考虑到设计软件之间的兼容性问题，还是推荐大家学习AE。虽然上手较慢，可一旦掌握，你便可以和之前已经掌握的PS,AI无缝对接了。

 

    （3）了解各个平台实现动效的条件

      PC端浏览器与移动端浏览器的差别在哪里？各个浏览器直接的差异又在哪里？各个浏览器的各个版本对动效的支持情况如何？iOS与安卓中动效实现的方式是什么？这些都是你需要了解的知识。你可以不必精通，但必须要熟悉。

2、你该怎么做

    （1）充分吃透每个需求的前因后果

      这个需求是谁提出来的？这个需求的目的是什么？需求提出者希望达到什么样的效果？他有没有心目中的案例？适度的交流可以让你充分吃透需求的因果，能大大节省整个需求的设计时间。想想你加班三天三夜做出来的动效，需求方瞟一眼后说这不是我们想要的效果…如果你想避免这种情况，那就充分吃透每个需求的前因后果吧。

 

    （2）根据实际需求设计合适的动效

      尺寸做多大？做几个尺寸？这个动效会用在哪个平台或者哪几个平台？如果只用在PC端，是否需要支持Retina屏幕？如果同时应用在PC与移动端，两个平台各需要怎么实现？搞清楚这些以后，那么打开软件开始设计吧!

3、你该怎么用

    （1）直接输出可用文件

      GIF是动效设计师的好伙伴，只要文件容量不过大（上限一般500K）和尺寸不过小（下限一般16px），它可以完美地适用于所有平台。

当文件量过大或者尺寸过小的时候，你还可以选择输出PNG序列达到降低文件容量和降噪的目的。

 

    （2）输出动效的限制条件

      显然GIF与PNG序列不能万能的，当无法使用这两者的时候是不是动效软件就失去了作用了呢？当然不是！其实动效设计软件最主要的作用在于向开发人员提供动效的限制条件。限制条件多如牛毛，但可以把所有的限制条件归为两类：时间和间距。记住这一点，所有动效的本质属性只有两个，那就是时间和间距。时间代表动效的发生时间，间距代表动效的韵律。将这两个元素有效的传达给开发人员，你就成功了。