动效设计学习总结

一、动效是什么

动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计与动态设计的结合。

而在Material design 设计规范中，将动效设计这一章命名为「Animation」，意思是动画，活泼的意思。好的动效设计可以帮助引导、取悦用户，减少等待焦虑，是拉近用户与产品之间距离的有效手段。

二、动效分类

动效的分类并没有明确的界限，根据其作用大致可以分为3类：

1. 功能型动效

此类动效一般用于产品设计，通过动态图形向用户传递信息，其中加载/刷新和进度条应该是我们平时接触最多也是最早的动效了，此类动效最开始只是为了告知用户产品的页面状态。随着社会上产品数量的快速增长以及竞争日益激烈，产品的有趣和差异化显得愈发重要，于是便看到越来越多的产品将自己的品牌因素融入动效当中，设计也越来越生动有趣。除了加载、刷新和进度外，功能型动效还被广泛的运用在产品的其他各种状态当中，如信息报错、二维码扫描等。虽然具体表现不同，但都是通过动态形式帮助用户理解和使用产品。

2. 交互型动效顾名思义，该类动效的核心是“交互”，其主要的作用是帮助用户理解界面的层级逻辑关系，让产品的使用更加符合现实生活中的认知习惯，从而降低使用成本，提升产品体验。要注意的是此类动效不能脱离用户的认知模型，只是单纯的炫酷对于整个产品来说是有害的。其实交互型动效是用户在产品使用中接触最多的一种动效，因为产品的使用是通过不同产品元素串联而完成的，而负责元素串联的就是交互型动效。一般可分为「单页面交互动效」和「多页面交互动效」。

「单页面交互动效」：就是在当前页面发生的交互动画，比如tab切换、左滑删除、二级菜单展开、返回顶部等等。

「多页面交