APP动效设计

什么是动效

动效，在APP中比较常见了，简单的如加载loading，列表下拉刷新，复杂的如应用删除时图标闪动（苹果系统），图书的翻页效果，商品放入购物车的动画效果，删除文件回垃圾箱的效果等，相信碰到过类似动效的读者，都觉得这些动效挺有趣。好的动效设计，能使操作更加逼真，更加贴近现实生活，让用户对操作更容易理解。

动效的分类

如果说之前在移动端UI设计中，动效可有可无的话，iOS7的设计明确宣告了动效设计已经不容忽视。在移动产品交互设计中，我们可以把动效分类更深入地归结为以下几点：

页面转场动效

如果说界面布局可以组织UI元素的静态位置，那么动效可以组织UI元素在时间维度上的演进。每一个毫秒里界面元素如何出现和消失，它的大小、位置、透明度和颜色如何变化，通过动效的诠释，用户与产品的交互过程会更加顺畅。在Zaker中，界面元素的出现，菜单的停靠，都伴随着富有节奏感的动画效果，让整个使用过程一气呵成。

状态反馈动效

状态反馈可以说是移动应用最原始的需求，其通过动效让用户了解程序当前状态，同时对用户操作（平移、放大、缩小、删除）做出及时反馈。譬如说在用户点击下载按钮后，我们需要给用户展示程序当前的状态（未下载-下载中-下载完成），如果我们不把反馈给用户，用户可能就觉得“手机卡死了吗？”，同样的对平移、放大等操作，及时友好的反馈也是必要的。

增强操纵动效

一些动效通过动效对现实世界的模拟并且不需要任何提示，迎合用户的意识认知。使产品的交互方式更接近真实世界。用户通过对现实世界的认知来理解动效，增强了用户对应用的操纵感和带入感。像Paper的设计，可以让用户感觉到纸面的翻动，再如iOS中删除的动效，一阵雾霾散去。

操作引导动效

移动应用不比PC应用，移动应用可用的空间就屏幕那么大点儿，很多功能的入口可能都是隐藏的，此时动效的作用就来了。其通过动效对功能的方向、位置、唤出操作、路径等进行暗示和指导，以便用户在有限的移动屏幕内发现更多功能。譬如说，iOS7锁屏界面的动效提示用户向右滑动；百度手机输入法的熊头菜单滚动提示用户翻页；微信的朋友圈引导用户一步一步操作。

信息展现动效

随着移动应用越来越复杂，承载的功能越来越多，原来的三层结构原则已经不能完全适用，合理清晰的结构层级对用户理解应用和使用应用有着至关重要的作用。具体的方式为：通过焦点缩放、覆盖、滑出等动效帮助用户构建空间感受。就像iOS7一样，通过动效上来构建了整个系统的空间结构，Appflow的页面跳转也是同样的道理。

好了，现在对本文开篇提到的几个动效做下分类，加载loading，列表下拉刷新属于状态反馈动效；图书的翻页效果、应用删除时图标闪动（苹果系统）、商品放入购物车的动画效果、删除文件回垃圾箱的效果都属于增强操作动效；

#本文同步发布到pm263.com，pm263为你提供更多更全的产品经理干货，欢迎大家访问。