关注动画比较久，在Dribbble上能经常看到炫酷浮夸的动画效果，这些作品往往对一些设计师形成误导，忘了动画的功能与作用。CampaignMonitor的产品设计师Steven Fabre发表在Medium上的文章，用产品设计实例阐述了在设计动画时的经验与取舍。
————————译文的分割线————————
毫无疑问UI动画是不能阻挡的潮流。然而重点往往放在动画本身，而不是通过优雅的动画来提升用户体验。Pasquale D’Silva在2013年Web Direction South上的演讲给出了很好的建议：
牛逼的动画是隐形的，你不应该注意到在盯着动画看。
我们（Campaign Monitor的Email Builder团队）已经尝试一些原则：
动画必须提升可用性
自然细微
给用户以反馈。
在Email Builder过去一年的工作中，我们意识到网页中的动画不同于原生应用，在时间、空间、姿态以及动画曲线方面会遇到更多挑战。同一动画在不同的浏览器中渲染不同，渲染的不一致性让我们为了创造出友好的用户体验而做出一些妥协。实际上，一些在我们自己强大牛逼的27寸iMac上表现漂亮有用的交互细节并没有放在最终的产品里，因为在我们用户通常使用的设备上却变得奇怪与缓慢。
在概念与设计阶段尝试过的动画与交互原型中，只有最有用与性能最好的进入最终的产品。对于我们来说，意味着挑选最有用的动画并花费大量的时间把它调整到刚好（在提升用户体验的各个方面）。下面是挑选的一些动画：
添加布局的下拉菜单
当用户点击“Add layout”按钮，下拉菜单从按钮下方渐显，说明了与按钮相关联的操作。
侧边栏手风琴菜单
通过其他菜单向下的滑动，容易把内容与菜单标题联系起来。并且，标题右侧的选单稍微延迟渐显出现让用户更明确的知道在“Image”类型下设定。
按钮状态
等待的时间往往是漫长的。当用户在等待通过邮件接收文档时，我们把背后的事情展现给他们。这个动画让等待过程更迅捷，即使在接收邮件时间不变的情况下。
添加或复制布局
当用户添加或复制一个布局，首先在界面中出现一个空间随之把新的布局渐显。这样让添加新内容更加明确。
删除布局
如果邮件里有大量相似甚至相同的布局，这个动画就体现出来作用了。当前布局删除后邮件的其他内容会向上滑动。
布局控制器
当鼠标划过某一块布局时，控制器从中滑出，清晰的说明操作会影响当前鼠标滑过的布局。
我（原文作者）相信动效设计师能轻易的指出这些动画可以如何改进。我们不得不去掉那些高度细腻的细节来解决动画在不同设备上的表现问题，这样下意识的决定以确保在跨平台上为用户提供最好的体验。
越来越多的设计师在讨论、撰写、设计具备动画效果的界面，但这不意味着要让每个元素都会动。如果我们做对的话，你不会在使用Email Builder的过程中注意到之前所罗列过的动画效果。
隐形，那是一个合格动效需具备的特质。
更多推荐
God is in the details — Buzz Usborne
Transitional Interfaces — Pasquale D’Silva
Improve the payment experience with animations — Michaël Villar
原文2015年4月11日发布于旧博客