设计，需要做加法，也需要做减法。

有时候在dribbble上会看到设计师们做的很多酷炫的交互动画，而且一直觉得这些动画对于产品来说，是一种提升。

然而，最近看到这篇文章对于我以往的想法倒是有一点颠覆，因而想分享一下。

下面是关于这篇文章的译文内容。

交互动画也需要”有的放矢“

下面是一个很酷炫的例子，设计师使用了很酷的衔接，整个看起来也很流畅。

app编辑动画

但，这样的动画会有什么样的潜在问题呢？

如果将动画的步骤分解一下：

1. 最明显的可能就是照片的3d旋转了。其实我理解，作者这样子制作有可能是考虑到一种物理的动势。但如果这个效果可以去除的话，可能整个画面会更简洁一些，因为目前的3d旋转与”下拉滑动“这个功能关系不是很大。

2. 第二，你可能注意到在普通展示的时候，照片是被裁剪的。那么编辑状态下，照片就是完全展开的状态。这样两个操作出现的照片，在用户看来可能是不同的。这种不同又可能会带来操作的不连续。

3. 第三，你可能会注意到顶部的导航。顶部的导航需要比较长的时间来切换。他们看着很棒，但之后的等待就有点长了。微交互需要迅速，在300到400毫秒内进行。需要有更加简洁的移动轨迹。

4.当浏览编辑状态的时候，会看到下方的两个icon出现的时间并不一样。不同步会造成心理的负担。当然作者可能想要强调更加重要的操作，但这是一种不太必要的强调。

这节主要是想要强调”限制“。就像是打理花园一样，去修剪一些不太有明确意义的细枝末节，看一下它们是不是冗余，是不是增加了用户的认知负担。

不要把”叙事“变成”宣泄“

在用户体验中，叙述性在某些方面是很重要的。叙述性与”期待“、”连续性”与“认知负担“都有关联。另外，叙述性还与我们的思想组织，与形式的理解有关。叙述性还关系到我们自身的心理模型，与我们自己本身对于事物的看法有关。

在下面这个例子里，设计师将操作流程一步步地叙述了出来。动画效果也是很炫的。

登录页面动画

但还是来分解看看。

用户会期待文字在线的上方直接出现。但是实际上，这条线变成了一个方框，而这个方框相对于线又是更加“重”的元素。因此用户在使用的时候，这个元素的转换因为与用户的预期有点差别，会造成操作的一点中断，这个时候，用户会去更新自己的心理模型。这个中断很微小，但是也会造成心理的负担。

有时候，设计师想要发挥创意的时候，就有可能会产生一些小的问题。酷炫的效果可能会掩盖掉一些本质的体验需求。

与上图比较，下面这两个例子就更加符合操作的预期。好的微交互是简单而流畅的。

波浪输入框

标签移动的输入框

在这两个例子中，叙述的流程很简单，最重要是紧凑。左边的例子有一个波浪状的弹力，它的形式很微小，所以不会影响到整个流程，同时令人愉悦。

如果一个动作不能完成，可能就...

很多优秀的动效是只包含一个，或者一个突出的特效的。

在下面这个例子里，从关闭到汉堡包的跳转就有点生硬，其中一个原因便是因为里面包含了两个动作：

1. 线条的转换

2. 图标的旋转

而且两个动作的地位相近， 出现的时间也差不多，使得图标略为失去主次。

汉堡包图标与关闭的切换按钮

与其让两个动作同时发生，其实也有其他的办法。再看看下面的一些例子练习一下眼睛。

图标运动对比

左边和右边的图标其实也违反了“一个运动”的原则，所以看着有点生硬，而中间的运动相比起来，则是很迅速明了。

所以，单一运动，或者突出运动，也是很重要的一点。

动画本身不是问题，设计才是

看下图的这个例子。

购物卡片动画

实际上，这是一个很棒的动画，但是问题不在于动画，在于设计本身。图中的“add to chart”按钮点击之后，扩展开来，覆盖住了卡片的整个底部。然而这样的扩展与覆盖其实与功能的相关性不大，所以可能会增加用户的认知负担。

在电影里，有时候也会说，问题不在于场景，在于剧本。也是同样的道理。

不行动，等于放弃

设计一个300-400毫秒的设计，有时候会遗漏掉很多的细节。这些细节其实都是提升动画的机会。

在下面的图中，至少有四个可以改进的机会点。

网站交互动画例子

1. 右上角按钮。“返回”与“汉堡菜单”的转换可以设计得更加流畅。

2. 中间的黄色箭头。旋转与伸缩动效与整体功能的相关度不大。

3. 文字内容的动效与整体左右滑动的效果不一致，目前的文字是通过渐变透明度出现的。

4. banner被裁减了。比起裁剪，banner效果可以通过其他动效，更加与大图贴近。

下图是一些微交互动画的好例子。很清晰，也清楚了讲述了每一个步骤，而且没有遗漏掉什么改进的机会。

hello world动画

提交动画

拨打电话动画

所以，注意细节，细节就是机会。

小结

五个原则也许可以更加提高对于交互动画的鉴赏：

1. 限制

2. 叙述性

3. 单一运动

4. 好动画与好设计

5. 细节就是机会

本篇文章虽然指出了很多设计动效的问题，但是设计本身真的都还是挺吸引人的。

酷炫的动画吸引眼球，也因此我们有时候在浏览的时候会宽容一下，忽略它的一些潜在问题。但设计，需要做加法，也需要做减法，而且我觉得做减法是更加难的。因此多浏览多看看，多磨练眼睛，也未尝不是坏事吧。

原文链接

https://medium.com/ux-in-motion/5-mistakes-to-avoid-when-designing-micro-interactions-a6f638ee6a86