动效不止于好看
这篇文章主要说的动效是指移动端的界面动效，界面动效不至于好看，还有交互、逻辑以及最重要的用户体验
在我看来，动效是有态度的
我最开始接触动效设计，就觉得眼前一亮，就像刚开始接触UI的心情一样激动，当初仅仅因为一个好看的icon就选择从平面设计转向了UI设计，可能当时很冲动，但现在我知道自己做对了，因为我做了喜欢的工作，但做久了知道的越多就明白，界面设计不是好看不是炫技，所以我对界面动效的浮躁只持续了几天，因为我知道，它有更多的东西需要我去探究，我需要用一颗更沉稳的心去接触它，我才能获得更多
好看，并不是界面动效设计的目的
当然说到这里，你可能会有疑惑，因为你喜欢的也可能是MG动画，MG动画英文全称为：Motion Graphics，直接翻译为『动态图形或者图形动画』。通常指的是视频设计、多媒体CG设计、电视包装等等。 动态图形指的是『随时间流动而改变形态的图形』，简单的来说动态图形可以解释为会动的图形设计，是影像艺术的一种。 动态图形融合了平面设计、动画设计和电影语言，它的表现形式丰富多样，具有极强的包容性，总能和各种表现形式以及艺术风格混搭。 动态图形的主要应用领域集中于节目频道包装﹝爸爸去哪儿什么的用的越来越多啦﹞、电影电视片头、商业广告、MV、现场舞台屏幕、互动装置等等。
△大神MG作品
而作为多学科交集的界面动效，其设计者可以是交互，也可以是UI，甚至很多时候是前端开发直接完成的。还有很多比较完整的设计团队，专门招的动效设计师，除了做界面动效外，还会做与产品推广相关的MG动画。而我所说的界面动效区别于MG最大的差别，就是『界面动效需要以用户体验与界面设计为大前提，来进行动效设计』
另一个区别是，界面动效在设计师设计完成后，需要开发实现才能与用户见面。而不像MG动画，直接由设计师输出。
什么是界面动效
总结一下就是，用户界面上所有运动的效果，也可以理解为界面设计（UI design）与动态设计（motion design）的交集。
可参考图：The Disciplines of User Experience Design
现在各种网站和 APP 上都可以看到动效的身影。只要用心就会发现，一个小小的滑动效果有没有动效，感受都是不一样的，设计师们想要通过运动的状态来吸引用户的注意力，从而实现其想要达到的目的。然而，有些动效仅仅是为了好看，并没有和界面的实际功能联系起来，因此有可能会造成用户的认知障碍。如何将动效运用在合适的地方，以及如何制作『适度』的动效成为了很多设计师们需要思考的问题，
切勿动画过载，动画效果的滥用也会让用户产生迷失感，失去焦点，甚至产生抵触的情绪，不同的产品适合不同类型的动效，有些产品适合复杂的动效，有些则不适合。切记不要把动效设计成华而不实的花架子，更应该将其视为提升用户体验的工具
△动画第一次出现 △动画第五次出现 △动画第一百次出现
为什么大家都爱使用界面动效
静态图片传达信息的有限性，很多动态效果需要设计师通过添加设计说明并口述交流才能表达其想要传达的东西。这样做的优点是有助于实现快速迭代，成本较低；但这样做的缺点是不够直观，很多细节存在于设计师自己的心中，仅通过静态图片和叙述没有办法完整地表达出来，超长的设计说明会让研发失去耐心，设计师心中的画面，往往到了研发时被理解成了另外的样子。
因此，如果在时间较为充裕的前提下，输出动态设计稿，才能确保将自己的设计理念用更直观的方式展现出来，跟研发的沟通也更加顺畅。
△设计稿『它是静态的』 △设计说明『说清楚不容易』 △开发后『全都不对!！』
动效大规模应用在扁平化设计之后，扁平化设计的好处在于用户的注意力可以集中在界面的核心内容上，将干扰的设计元素去掉，不被设计所分散注意力，使用体验更加纯粹自然。但是，过于扁平化的设计，也有新的问题，一些复杂层级关系并不容易展现，用户怎样才能被吸引，这与用户在现实世界中的实际感受并不一致。
之前Google推出了Material Design设计语言。Material design 设计风格，充通过利用Z轴以及动效与之配合的方式，在扁平化基础上提供给用户更好的理解方式。在Material design 设计规范中，将动效设计这一章命名为「Animation」，动词 Animate 是『赋予生命』的意思，『动效可以定义为使用类似动画的手法，赋予界面生命和活力』
好的动效是什么样的
国外一位设计师曾说，『好的动效应该是隐形的，好的动效应该是以提高可用性为前提，并且以令人觉得自然含蓄的方式提供有效用户反馈的一种机制』，举几个通俗易懂的:chestnut:就是，加载的画面不枯燥，跳转的页面不生硬，button的反馈不单调，但所有的前提是用户体验，如果你加了动画反而让用户的心情更不愉悦，岂不是适得其反，做到自然流露才是最符合物理定律的。
至于如何设计界面动效，我们不再只是去设计一个静态的画面。而需要思考怎样才能将用户从单纯的画面，引导到实际操作的内容对设计来说是非常重要的。优秀的动效不是只有漂亮的外表，必须具备优化交互和提升体验的作用。
界面动效的几种样式
▽出处忘记了
△ 变换 △ 视差 △ 滑动 & 缩放
△ 数值变动 △ 克隆 △ 遮罩
△ 叠加 △ 偏移 & 延迟 △ 父级关系
界面动效的实际应用
▽ 图中的动效是我把自己的UI界面做了下动态效果，为AE制作，导出插件为gifGun
△ 日历页面
△ 任务看板&任务详情
△ 注册登录流程展示
动效设计常见应用
1. Adobe After Effects
现在最常用的，上图也为AE制作完成
2. Adobe Photoshop
以前不会用AE，都是用PS 来制作简单的表情动画，逐帧动画等
3. Adobe Flash
以前完全超过了AE，风靡一时
当然还有很多，有新兴起的，也有专门画交互原型的等等，例如：
pixate（主要画交互原型）
Origami（功能强大的交互原型，最好懂点儿代码再用哟）
Hype（可以配合sketch，原生支持中文深得我心，我是不是暴露了什么/(ㄒoㄒ)/~~）
Flinto（界面和sketch很像)
Principle（也可以配合sketch，长得也像，会sketch会上手快一些）
C4D（不太会用，刚知道用C4D做出来的动效也是杠杠的呢)
感谢观赏，很高兴你在。
-
