毫无疑问交互动效在ui设计中越来越流行。并且其风靡已经让大家把关注点都集中在动效本身，而不是在那些改善用户交互体验微妙而实用的动效上。Pasquale D’Silva 在他2013年Web Direction South的演讲上说：

“好的动效应该是无形的。 你不应该注意到自己正在看动效”

      这是一个很好的建议，让我们（原文作者是： Campaign Monitor中邮件设计软件的制作团队）把它归纳为以下几个原则：动效必须提高可用性，让人感觉自然而微妙，同时对用户行为进行反馈。

       去年在email builder的工作中，我发现动效在网页中和原生APP有很大的不同，将面临比合适的时间、位置、形态还有缓动更困难的挑战。动效在不同的终端和浏览器中表现得都不尽相同，因为这些不一致的表现，往往需要我们妥协对用户体验的追求。事实上很多在我27"5K-iMac上酷炫又实用的交互效果都没有放到最终的产品中，因为它们在大多数用户的终端中表现得卡顿又缓慢。

       把所有的动效和交互原型放到一起，并从中选出最为实用和高效的放到最终的产品里。对我们团队实际工作而言就是，一个一个的选出最实用的动效，然后再花时间把它们调试到合适的状态—所有的关注点都聚焦于用户体验的提升上。下面是从中挑选出的一些范例：

新增版块的下拉效果

       当用户点击“Add layout”按钮时，弹出框从按钮的位置下拉淡入出现。这样的出现效果使用户觉得弹出框和按下的按钮是有联系的。

侧边栏的手风琴效果

      当点击“logo”后，其他栏目标题自动滑到下方，让用户很容易分辨出弹出的内容是属于“logo”栏目中的。同时“logo”栏的子选项延迟在内容出现后的上方淡入，使用户一眼就能看明白目前是属于“image”选项的编辑区（注意那个分隔线上的指示三角是在子选项弹出后才出现的）。

按钮的状态改变

      当你在等待的时候，会感到时间过得灰常的慢。当用户在等待我们用邮件发送文件时，我们会通过改变按钮的状态，来让他们了解屏幕外正在进行的业务。这个交互动效让过程显得更流畅，尽管实际等待邮件的时间并没有得到缩短（好一个然并卵。。。）。

拖入或复制版块的效果

      当用户拖入或复制一个板块时，首先会在较短的时间里展开一个空白的区域，然后新的版面才会在展开的区域中淡入出现。让人很容易明白是有新的东西被加入进来了。

删除版块的效果

     当你的邮件中有多余的近似版块时，这个删除动效就变得很实用。通过在删除后，将其他版块上滑，能让你清楚的知道刚刚哪一个被删除了。

版块操作按钮的悬停效果

     当用户鼠标在一个版块的区域悬停时，会从该版块内容的右方弹出操作按钮，让用户一眼就能看明白这些按钮是用于操作当前版块的。

       我知道在优秀的动效设计师眼中，这些动效还有很多的打磨空间。但不得不憾地说，这些都是为了适配不同的终端，而放弃了一些精致优雅的细节。但这些都是我们为提供最好的用户体验而有意为之的选择。

       看到越来越多的人谈论，发表，在ui中设计动效，并不说明你就需要将所有的东西都加上动效。如果我们团队现在的设计是正确的，你就不会在使用email builder时提前注意到这些动效。

       因此，动效应该是无形的

扩展阅读

      God is in the details— Buzz Usborne

      Transitional Interfaces— Pasquale D’Silva

      Improve the payment experience with animations— Michaël Villar

--------------------------------------------------------------------------------------

译者的阅读理解

     第一次译，才发现这么麻烦，本来五分钟就读完的文章，生生的翻译了一个小时，不过真正译下来才发现自己对很多专有名词的理解还是不够，最大的障碍是调和专有名词和汉语语境间深深的违和感。。。楼主六级擦过所以大家不要多吐槽翻译水平了。

    原文标题是Invisible animation， 但是文章的举例中没有很直接的表达Invisible这个概念，因此楼主就寡廉鲜耻的来脑补一下，原文作者想表达的意思其实很简单：那就是自然并且符合用户思考逻辑的，能真正帮助用户理解业务的，只要视觉效果不过于夸张都是无形的动效。无形的动效并不在于是用户看不到的，而是因为动效的表现符合用户原本的思考逻辑，用户不需要去刻意理解动效的意义，能帮助用户理解交互的行为，实用且自然这就是无形。

---------------------------------------------------------------------------------------

原文作者：Steven Fabre

原文地址:https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5

拙劣的六级译者：twox

Dribbble:https://dribbble.com/twox

微博:http://weibo.com/zhongerxin

安利：Medium是个好地方,大家可以多去搬一般有用的东西回来