三思而后行！真正优秀的动效应该是隐形的

毫无疑问，在UI和网页中使用动效已经成为大趋势。这种趋势是如此之明显，以至于越来越多的应用已经不是为了提升体验而设计动效，更多是为了强调动效本身。设计师 Pasquale D'Silva 在2013年的 Web Direction South 上曾这样说过：

好的动效是隐形的。(作为用户的)你不应该注意到你正在看一个动效。

这是一个很好的建议，我们作为屏幕背后的设计和开发团队，事先在脑中设定几个原则：动效的存在必须提高可用性，令人觉得自然，含蓄，是给予用户反馈的一种机制。

好的界面也是一样隐形的：《优秀界面的终极形态：隐形的界面》

在过去的一年里，我一直忙于Email Builder的工作，在这个过程中我对于网页中的动效设计有了比较深入的了解，和本地的APP不同，它所面临的挑战更大，不仅需要考虑行距、间距、布局等等因素，而且所有设备和浏览器上动效的显示效果都不一样，这也使得我们在力图创造最好的用户体验过程中，不得不妥协。事实上，我们在27寸iMac上实现了许多漂亮而实用的特性，但是因为在其他设备上运行生涩迟滞，使得我们在最终发布的版本中未曾将它们放进去。

在概念和设计阶段，我们索设计的所有动效和交互原型，在最终释出的产品中，我们只保留了最实用效果最好的那部分。对我们而言，这样可以亲手挑选出最有用的动效，并且将它们放在最恰当的地方——那些提升用户体验的细节之处。下面是我们我们精选的一部分动效设计：

新增布局下拉框动效

当用户单击“Add layout”按钮的时候，下拉框会从按钮处淡入淡出显现出来，这个时候动效可以凸显下拉框和按钮之间的从属关系。

侧边栏折叠框

当你点击某个折叠框的时候它会展开，其他的框会折叠起来，动效令内容和标题之间自然形成关联。而“image”的标签页是稍微迟滞一会儿才逐渐显现的，这使得动效有了层次，也让用户注意到这些内容的所在标签页。

按钮状态

当你在等待某些事物的时候，你会觉得时间变慢了。所以，当用户在等待接收邮件的时候，我们会借助动效向他们展示后台正在发生的事情。在实际邮件发送时长不变的前提下，我们让用户的注意力不再空置，而是转移到动效上来，让他们感觉时间“变快了”。

添加或复制布局

当用户新增或者复制某个布局的时候，我们借助动效先创建一个空白区域，然后新布局或者控件会从这个空白区域中淡出显现，越来越清晰，从而暗示了“创建”的概念。

删除布局

当你的整个邮件布局中包含太多相似的区块，删除就不可避免了。当你删除某个区块的时候，下面的区域会向上滑动顶替这个位置，从而强调了删除的概念。

布局控件

当用户鼠标移动到某个布局的附近的时候，布局控件会显现。小控件会从对应的布局区域逐渐淡出到旁边，暗示了从属关系，让用户明白这些按钮所操控的布局是哪一块。

我敢确信，真正优秀的动效设计师能够轻松指出这些动效的应该如何提升。遗憾的地方在于，设备平台和浏览器的分裂以及性能问题，使得我们不得不放弃许多动效和精致的细节。值得安慰的是，至少我们确定现有的动效已经提供了足够优秀的跨平台用户体验。

越来越多的人开始探讨动效、设计动效、撰文总结并不意味着你得为每一个变化和细节设计动效。如果作为设计师的我们真正履行了我们的职责，那么用户是不应该注意到这些动效的。

优秀的动效，应该是隐形的，就像那些优秀的界面一样。

【少年，来搞动效设计吧！】

不能不知道的动效分类知识：
《来点惊喜！APP动效设计分为哪几种？》

做有意义的动效设计：
《设计师的必备技能！你需要学会设计有意义的动效》

不是只有AE可以做动效：
《SKETCH+KEYNOTE双剑合璧！教你5步快速制作移动动效》

原文地址：medium
优设译者：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量91万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的"福利"吗？添加优设哥微信号：youshege