花了7天看了上千个交互动效神作，我总结出5个技巧

不太熟悉动画的朋友可能看不到我所看到的内容。这幅动效中有两个单独的动作：直线的转换和图标的旋转。这两个动作实际上可以合并为一个动作，然而实际上并没有这样，Romain把他们分开了。如果看的不是很明显，那么看一下这张对比图：

左右两边的动效就是把直线的转换和图标的旋转这两个动作分开进行的，中间的动效则是用一个动作整齐划一的完成，既不繁琐也不累赘。

小技巧：确保微交互的动效是一步完成的，如果有多个动作在不同时间和位置进行，那么干脆放弃吧。

关键词：一步完成。

四、问题不是出在动效上，而是在设计规划上

学习过 UI 精细动画的朋友可能深有体会：在静态样本做成拆分细节动作的时候往往会遇到困难。这个可以理解，好的微交互设计都会有这样的问题：把动作精确到每一帧非常难。然而糟糕的微交互设计让人更糟心。

下面这张表格是我对设计和动效的理论知识的总结归纳，你们拿去当做参考好了。

一般来说，大家都会往点点的位置努力。点点我用了紫粉色好让大家在项目中期赶时间的时候快速定位。

接下来让我们跳出理论进入实践：如何拆分动效的动作。

这是由 Sam Thibault 完成的动效作品，作品中“加入购物车”（add to cart）按钮那令人费解的转换和形状的改变填充了图片下方的空白，然而这显得很多余，也加重了使用者的认知负荷。

在影片制作过程中有这样一个说法：如果有问题那一定是剧本出了问题，糟糕的剧本就是糟糕的电影，设计也是如此，糟糕的设计就是糟糕的微交互。

小技巧：在你挑动效的问题之前先确保你的设计没有问题。

关键词：不是动效的错

五、不遗漏任何一个细节

“你不接球的话一定会错过射门。”这话是 Wayne Gretzky（冰球运动员）说的。显然他很擅长躲避着撞击的同时在冰面上翩翩起舞。仔细想想，用这话形容交互设计师进行微交互设计的时候是多么贴切：有太多太多细节了。大部分设计师并不是很习惯设计300~400毫秒的动画，所以很容易敷衍了事。

下面这个作品由 Ivan Bjelajac 设计，在这作品中我发现有5个细节还可以优化一下。

1. 菜单按钮和返回按钮可以添加简洁优雅的过渡动效，菜单按钮随页面上滑显得不是很协调。

2. 黄色方块的右箭头的缩放旋转效果不是很必要。这样看上去有些奇怪，它应该随着内容进行转变。

3. 渐隐渐出的正文段落其实没有必要。

4. 从左向右滑动的标题如果是从内容上淡入淡出的话会比滑动渐隐要好很多。

5. 在图片转换为顶部横幅的时候人物照片被裁剪了。这里如果将图片重构一下与内容相呼应会更好一些。

和下面的对细节严格要求的动效作品相比简直是天壤之别。

小技巧：对待细节不能松懈，不遗漏任何一个细节。

关键词：把握细节

总结

这里我想说就算你没有任何动画经验，只要时刻记住下面这些要点，你也有可能制作出精美绝伦的微交互设计。

• 克制

• 交互叙述流程

• 一步完成

• 不是动效的错

• 把握细节

尽管这不能保证你一定能做出牛逼的动效，但这是迈向正确的方向。

作者：Willenskomer

译者：Eric

来源：优设网

文章链接：http://www.uisdc.com/5-interaction-animation-skills

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!