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

对一个全无经验的动效新手而言，如何制作出「正确」而不是「华丽」的动效？今天这篇Medium 上的好文，从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面，附上案例分析，帮你学会基础的动画制作技巧。

首先，我想大家会有这样的问题：什么是微交互 （micro-interaction)？

来自 UXPin（一款在线可交互原型制作工具）的 Carrie Cousins 给出了如下定义：“微交互是在交互设备上的单一交互流程的细节优化。”

可能不是太容易理解，那就多看几遍吧。

在进入正题之前，有一点我要先声明一下，接下来我要分析的 UI 动效都是出自非常牛逼的大神之手。我非常尊敬他们和他们的作品，他们非常乐意分享他们的经验和未完成的稿件。不过在我分析作品的时候不少设计师的态度都非常差。这可不是我的风格。我都是用严肃的眼光去看待设计的，但是会用娱乐性的方式表达我的观点。如果我碰巧说了些不中听的话，还请多多包涵。

让我们开始吧！

一、看在手绘板的份上，克制一下自己

设计师就像一朵含苞待放的花儿一样需要精（Jin）心（Qian）的照顾和呵护，但在设计高质量的微交互时，在你完稿前都充满着摧残。

动效设计是个尝试新想法并验收成果的好途径。下面这个作品出自 Sergey Valiukh（一位在字型、排版、色彩以及动效方面特别牛逼的人）之手，一起来看看。

下面我们一帧一帧地来分析：

1. 首先能最直观的感受到的是图片的“3D翻动”效果，这在我看来是完全没必要的，甚至是违法的（开个玩笑，只是确保你还在看）。在这个作品中，如果把任何一个多余的动效去掉来简洁的表述的话会是一个不错的想法。

2. 其次，你可能注意到了预览流中的图片是被裁剪过的，而在编辑界面中是原图尺寸。在实际应用中这显然是不可行的。

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

4. 看完了这些之后，咱们再来看看底部，这里两个图标并不是同时出现，这意味着一个错误的交互叙述流程（多余地强调）和理解时间的延长。

总结：

动效设计时会有许许多多这样的参数需要考虑。你需要明确哪些可以用、哪些不可以用、哪里可以再简短、哪里不用花太多精力，并从中获取清晰易用的经验。这并不是说你不能天马行空加上一些有趣的细节，只是说这些细节可能会让整体显得很累赘。

小技巧：

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

关键词：克制

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

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

SrikantShetty（一位强壮的动画设计师）的这个作品为我们呈现了一个非常“好”的例子。

看到这个动效的第一感觉是不是很诡异，以为是在线条上输入文字，然而却弹出了一个隐藏式的文本框。这种点按-弹出-输入的交互叙述流程挺让人心烦的，或许是想看上去酷炫一点吧。然而这种交互叙述流程打断了我们输入信息时的预期流程。我们不得不停下来去面对这样的意外，调整好心态后才能继续操作。

当设计师有所“灵感”的时候多半会设计出这种诡异的交互叙述流程。他们往往会为了吊炸天的效果下半天功夫，对交互的核心叙述流程却不怎么在意。这么做事实上让交互流程看上去像是一团糟。

好的微交互的叙述流程是清晰且顺畅的，看看下面的作品，顺便和上面这幅做个对比：

高下立现，交互叙述流程非常的简洁和自然。虽然左边的动效有一个线框弹跳的效果，它却起到了细节优化的效果，而不是画蛇添足。

小技巧：保持交互叙述流程的简洁和顺畅。

关键词：交互叙述流程

三、动效如果不能一步完成，那就干脆放弃

几乎所有出彩的微交互的动效都是一步到位或是步骤统一，那些不是很好的往往败在了过于复杂的动效上。

在这个例子中，Romain Passelande（他的 Dribbble 不要太屌）的动效让我“虎躯一震”。

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

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