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

编者按：对于一个没有经验的动态新手来说，如何制作？「正确」而不是「华丽」动效？今天的Medium 好文章从五个方面附上案例分析：约束、互动叙事过程、一步完成、非动态效果错误和掌握细节，帮助您学习基本的动画制作技巧。

首先，我认为每个人都会有这样的问题：什么是微交互？ （micro-interaction)？

来自 UXPin(在线可交互原型制作工具) Carrie Cousins 给出了以下定义:“微交互是优化交互设备上单一交互过程的细节。”

也许不太容易理解，那就多看几遍吧。

在进入主题之前，我想先声明一点，然后我想分析一下 UI 动态效果来自伟大的神。我非常尊重他们和他们的作品，他们愿意分享他们的经验和未完成的手稿。然而，当我分析这些作品时，许多设计师的态度都很差。这不是我的风格。我总是从严肃的角度看待设计，但我会以娱乐的方式表达我的观点。如果我碰巧说了一些不愉快的话，请原谅我。

让我们开始吧！

首先，为了手绘板，克制自己

设计师需要精华，就像一朵含苞待放的花（Jin）心（Qian）但是在设计高质量的微交互时，在你完成手稿之前，它充满了破坏。

动态设计是尝试新想法和验收结果的好方法。以下作品来自 Sergey Valiukh(一个在字型、排版、色彩、动效等方面特别牛逼的人)一起来看看。

让我们一帧一帧地分析：

1、首先，最直观的感觉是图片的“3D翻转”效果，这在我看来是完全不必要的，甚至是非法的（开玩笑，只是为了确保你还在看）。在这部作品中，去除任何额外的动态效果都是一个好主意。

2、其次，您可能会注意到预览流中的图片已经被切割，而在编辑界面中是原始图片的大小。这在实际应用中显然是不可行的。

3、第三，可以注意到，顶部导航栏的图标过渡时间特别长。第一次看会觉得很棒，但是看久了会觉得很烦。微交互要快速、简洁、速度变化明显，最多持续300~400毫秒。

4、看完这些，我们来看看底部。这里的两个图标不是同时出现的，这意味着一个错误的交互叙述过程(多余的强调)和理解时间的延长。

总结：

在动态设计中会有很多这样的参数需要考虑。你需要弄清楚哪些可以使用，哪些不能使用，哪些可以简短，哪些不需要花费太多的精力，并获得清晰和易于使用的经验。这并不是说你不能无拘无束地添加一些有趣的细节，只是说这些细节可能会让整体看起来非常麻烦。

小技巧：

去掉多余的部分。时刻提醒自己，这些细节的动态效果是保持了简单的微交互，还是让交互体验变得更糟？

关键词：

克制

第二，不要为了效果而牺牲叙述

互动叙述过程（narrative）在用户体验中非常重要，一部分是因为这与使用者的预期相关，连贯的互动叙述过程不会超出使用者的认知负荷；另一部分是因为这与我们大脑收集和理解信息大致模式相关。此外这还与我们的心智模式有关联。总之，互动叙述过程很重要。

SrikantShetty(强大的动画设计师)这部作品给我们举了一个非常“好”的例子。

看到这种动态效果的第一感觉是否很奇怪，认为它是在线上输入文本，但弹出了一个隐藏的文本框。这个点按-弹出-输入的交互叙述过程非常令人不安，也许你想看起来有点酷。然而，这个交互叙述过程打断了我们输入信息时的预期过程。我们必须停下来面对这样的事故，并在继续操作之前调整我们的心态。

当设计师有“灵感”时，他们大多会设计这种奇怪的交互叙事过程。他们往往不太关心交互的核心叙事过程，以达到下半天的效果。事实上，这使得交互过程看起来一团糟。

好的微交互叙述过程清晰流畅。看下面的作品，顺便和上面的对比一下:

互动叙事过程非常简洁自然。虽然左边的动态效果有线框弹跳的效果，但它起到了细节优化的作用，而不是画蛇添足。

小技巧：

保持简洁流畅的交互叙事过程。

关键词：

互动叙述过程

接下来，让我们跳出理论进入实践：如何分割动态动态动作。

这是由 Sam Thibault 完成的动态作品，作品中“加入购物车”（add to cart）图片下方的空白填充了按钮令人费解的转换和形状的变化，但这似乎是多余的，也增加了用户的认知负荷。

在电影制作过程中，有一种说法：如果有问题，那一定是剧本问题，糟糕的剧本是糟糕的电影，设计也是如此，糟糕的设计是糟糕的微互动。

小技巧：

确保你的设计在挑动效问题之前没有问题。

关键词：

不是动效的错

五、不遗漏任何细节。

“如果你不接球，你肯定会错过射门。”这是真的 Wayne Gretzky(冰球运动员)说。显然，他擅长在冰上跳舞，同时避免冲击。仔细想想，用这句话来形容交互设计师进行微交互设计是多么恰当:细节太多了。大多数设计师不习惯设计300~400毫秒的动画，所以很容易敷衍。

这部作品由下面的作品组成 Ivan Bjelajac 设计，在这部作品中，我发现有五个细节可以优化。

1、菜单按钮和返回按钮可以增加简单优雅的过渡效果，菜单按钮与页面滑动不太协调。

2、右箭头的黄色方块收缩和旋转效果不是很必要。这看起来很奇怪，它应该随着内容而改变。

3、事实上，没有必要逐渐隐藏正文段落。

4、从左到右滑动的标题，如果从内容上淡入淡出，会比滑动好很多。

5、当图片转换为顶部横幅时，角色的照片被切割。最好在这里重构图片，呼应内容。

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

小技巧：

不要放松对待细节，不要遗漏任何细节。

关键词：

把握细节

总结

在这里，我想说的是，即使你没有任何动画经验，只要你总是记住以下几点，你也可以做出精致的微交互设计。

克制

交互叙述过程

一步完成

不是动效的错

把握细节

虽然这不能保证你能做出牛逼的动作，但这是正确的方向。