超实用的动效网页设计入门小手册节能

超实用的动效页设计入门小手册

这篇小册子的目的不是手把手教你如何做出一个动效，而是从基础动效、动效曲线、动效软件等方面从头梳理相关的知识点，串成一片，帮助你从整体轮廓上认识动效，适合零基础及新手阅读。

最近几年UI设计领域最大的变化便是越来越强调用户体验设计，而在Web或者App中使用动效也就成了一大趋势。这种趋势是如此强烈，以至于我看到越来越投资开发大型商业地产多的应用中所使用的那些动效已经不再是为了提升用户体验，而更多是为了强调动效本身了。

PrinciplePrinciple 可能是所有动效工具中最简单易用的。你只需要设置屏幕A和屏幕B，Principle就能自动地产生这两个屏幕之间的过渡动效。当然，你也可以通过设置不同的时间和动效曲线，来调整动效。Principle是一个桌面应用，它的界面和Sketch非常像，另外，你可以方便地将Sketch中的设计直接拷贝到Principle中使用。

FlintoFlinto 和Principle一样，也非常简单易用。特别的是，它提供了一个[Skech插件] ，能够直接将你Sketch中的Artbords和3D transform导出到Flinto中。

PixatePixate 是一个Web App，能够帮助你快速地制作原型。与Flinto或者Marvel不同，你可以区分层（layers）和嵌入的交互，如拖拽，点击，双击等。制作出来的原型保存在Web上，你可以使用一个iOS app来预览原型的效果。

OrigamiOrigami是一款免费的Quartz Composer的插件，Origami使QC的界面变得更加友好，更加适合进行移动App的界面设计。从2013年5月开始，Facebook的产品设计师们就开始开发这款QC插件。Origami的开发过程与Paper一同进行，随着Paper的功能越来越复杂，Origami也变得越来越强大，Paper上的每个动画效果都是由设计师首先在Origami上制作成型后，再由iOS工程师编写的。

After Effects未告知消费者使用这些用品将被收取费用After Effect简称称AE，是adobe公司开发的一个动效设计软件。对于那些不碰代码的纯设计师来说是非常理想的动画设计工具。在Dribbble上有很多使用AE制作的优秀动效作品。相比其他工具，AE是一个比较传统的工具，使用祯和层来定义动画。作为Adobe的产品，它的很多功能和Photoshop很像， 但针对动效有很多附加功能。