最近在设计终端APP，为了新方案在宣传时有亮点我设计方案要求增加动效，但我只会描述由大到小过渡转场动画，开发就在网上找了一个效果用上后总觉得哪里不对，又说不出来。于是找了一堆资料学习，底气十足的告知哪些地方哪里不对为什么不对，哈哈哈，以此文记录学习成果。依旧采用Q&A的方式来解答。
1、什么是动效，为什么做，作用是什么，怎么做动效？
2、结合淘宝网实际案例从范围层／结构层／框架层／表现层的角度去讲解动效的作用与应用。
阿里：小支点，撬动大价值 http://www.woshipm.com/pd/948924.html
3、结合iOS7讲解动效作用，并将动效应用分类
网易：创造流动的瞬间—探讨移动端交互动效设http://uedc.163.com/10999.html
4、material design 创始动效一整套成体系的设计规范，值得仔细研读。包括动效的身体语言时间要求等详细的内容，看完基本就可以去找开发改动效了。
material design 中文版：https://www.mdui.org/design/motion/material-motion.html#material-motion-how-does-material-move
5、动效样例网站且可以实时调试工具的网站合集，没事多看看，找灵感，比较偏前端开发
让你无所不能的75款动效工具（上）http://www.uisdc.com/75-web-animation-tools-1
让你无所不能的75款动效工具（下）http://www.uisdc.com/75-web-animation-tools-2
6、动效的作用及交互设计师动效设计工具
超走心！APP 动效设计必备知识https://www.jianshu.com/p/99b93e7061a8
哈哈哈，从科普、案例、规范、工具前辈们都写的很清楚了，希望如上整理对你有效，但我还是想从自己的角度去消化下动效内容。
iphone多任务效果
什么是动效？
动画效果，以动画方式呈现目标效果。狭义上是指界面动态交互效果，界面空间折叠、转场、退出、入场时采用的动态过渡方式。如提示消息的显示与消失方式，iPhone多任务界面切换时滚动的卡片，iOS打开App时渐进放大的首页。
为什么要引入动效及动效原则？
1.动态界面是静态界面在时间维度的叠加。可以解决界面空间不足或界面内容太多的问题。节省界面空间同时达到界面信息分层效果。
2.动态的东西静态的更容易吸引人的焦点，如应用在提醒消息中，很好的解决了反馈问题。引导空间关系，比如淘宝加购物车动效
3.人都喜欢新鲜的东西，在大部分界面是静态时，动态界面所表现的新颖、提升增加系统气质
material design 中文网动效作用截图
基于如上动效作用，推导出动效是锦上添花的交互效果，必须保证界面本身的体验再引入动效，进而再次推导动效的基本原则：1、必须快速响应，动效加载时间不能比本身loading的时间长，动效需给人快速灵动的感觉。2、形状运动轨迹需符合自然规律，且动效需有明确目标，单个物体与多个物体的运动效果。
如上对概念与基础原则了解后就可以根据设计经验去发挥了，至少可以去发现欣赏纠正模仿已有动效，对于只是偶尔应用动效的交互设计师差不多够用了。但是如何从无到有且设计动效就需要对动效再进行深入学习，比如运用软件工具自己且尝试设计，多去观察大自然对现象，理解事务运行的规律。
——20180503 by 兰哥
网友评论