对于一个没有动画经验的新手来说，如何制作出“正确”的动画而不是“华丽”的动画？今天的好文章《中等》从克制、互动叙事过程、一步完成、动态效果无过错、细节把握五个方面，配以案例分析，帮助大家学习动画基本技巧。
首先，我想大家都会有这样的疑问：什么是微互动？
来自UXPin(一种在线交互原型工具)的Carrie Cousins给出了如下定义：“微交互是交互设备上单一交互过程的细节优化。”
可能不太好理解，看几遍吧。
在进入主题之前，我想做一个声明。接下来要分析的UI动态效果，都是出自大神之手。我非常尊重他们和他们的作品，他们非常乐意分享自己的经历和未完成的手稿。然而，当我分析我的作品时，许多设计师的态度非常糟糕。这不是我的风格。我总是用严肃的眼光看待设计，但我会用娱乐的方式表达我的观点。如果我碰巧说了一些不愉快的话，请原谅。
我们开始吧！
第一，为了手绘板，克制自己。
一个设计师需要钱进的关怀和呵护，就像一朵含苞待放的花，但在设计高质量的微交互时，在你完成手稿之前，却充满了破坏。
动态设计是尝试新想法并接受结果的好方法。以下作品出自Sergey Valiukh(一个在字体、排版、色彩和动画方面特别牛逼的人)。让我们来看看。
让我们一帧一帧地分析一下：
1.首先最直观的感受就是画面的“3D翻转”效果，在我看来完全没有必要甚至是违法的(开个玩笑，只要确定你还在看就行)。在这项工作中，简单地表达任何不必要的动态效果是一个好主意。
2.其次，您可能会注意到预览流程中的图片已经被裁剪，但在编辑界面中，它们是原始大小。这在实际应用中显然是不可行的。
3.第三，可以注意到顶部导航栏的图标过渡时间特别长。第一次看会觉得很棒，但是看久了会觉得无聊。微交互要快速、简洁、有明显的速度变化，最大持续时间为300~400毫秒。
4.看完这些，我们来看看底部。这里两个图标不同时出现，意味着一个错误的互动叙事过程(多余的强调)和理解时间的延长。总结：
在动态设计中有许多这样的参数需要考虑。你需要明确哪些可以用，哪些不能用，哪些可以短一些，哪些不需要太多努力，从中获得清晰易用的体验。这并不是说你不能添加一些有趣的细节，只是这些细节可能会让整体看起来很累赘。
提示：
移除多余的零件。时刻提醒自己这些细节是保留了简洁的交互体验，还是让交互体验变差？
关键词：
抑制
第二，不要为了效果而牺牲叙述。
叙事过程在用户体验中非常重要，部分原因是与用户的预期有关，连贯的互动叙事过程不会超出用户的认知负荷；部分原因是因为它与我们大脑收集和理解信息的一般模式有关。此外，它与我们的心智模式有关。总之，互动叙事过程非常重要。
SrikantShetty(一位很强的动画设计师)的这部作品为我们提供了一个非常好的例子。
看到这种动态效果的第一感觉不是很奇怪，以为是在线上输入文字，却弹出一个隐藏的文本框。这种点击-弹出-输入的互动叙事过程相当烦人，也许是为了看起来酷一点。然而，当我们输入信息时，这种互动的叙事过程中断了预期的过程。我们必须停下来面对这样的意外，调整心态，才能继续运营。
当设计师受到“启发”时，大部分都会设计这种怪异的互动叙事过程。他们往往花半天时间试图炸掉天空，却不太在意互动的核心叙事过程。这样做实际上使交互过程看起来像一团乱麻。
好的微互动的叙事过程清晰流畅。请看下面的作品，并与上面的作品进行比较：
互动的叙事过程非常简洁自然。虽然左边的动画有线框弹跳效果，但是有优化细节的效果，而不是画蛇添足。
提示：
保持互动叙事过程简单流畅。
关键词：
互动叙事过程
第三，如果动态效果不能一步完成，那就干脆放弃。
精彩的互动几乎所有的动态效果都是一步到位或者步骤统一，不太好的往往会被过于复杂的动态效果打败。
在这个例子中，罗曼帕斯兰德的动态效果(不要太趾高气扬他的Dribbble)让我“抖虎身”。
不熟悉动画的朋友可能看不到我看到的。在这个动画中，有两个独立的动作：直线的变换和图标的旋转。这两个动作实际上可以组合成一个动作，但事实并非如此。罗曼把他们分开了。如果不明显，那么看这张对比图：
左右动态效果是将直线转换和图标旋转两个动作分开，中间动态效果统一做，既不繁琐也不麻烦。
提示：
确保微交互的动态效果一步到位。如果在不同的时间和地点有多个动作，那就干脆放弃。
关键词：
一步完成
第四，问题不在于动态效果，而在于设计和规划。
学过UI精细动画的朋友可能有很深的体会：用静态样本拆分细节时，经常会遇到困难。可以理解，好的微交互设计会有这样一个问题：很难让动作精确到每一帧。然而，糟糕的微博设计让人感觉更糟。
下表是我对设计和动态效果理论知识的总结。请作为参考。
一般来说，每个人都会为了这个位置而努力。我用紫色和粉色来帮助人们在项目进行到一半的时候快速定位。
接下来我们跳出理论进入实践：如何拆分动态动作。
这是一部由山姆蒂博完成的动画作品。作品中“添加到购物车”按钮的莫名变换和形状变化，填补了图片底部的空白。但这是大量的冗余，也增加了用户的认知负荷。
电影制作过程中有一句话：如果有问题，一定是剧本有问题。烂剧本就是烂电影，设计也是。糟糕的设计就是糟糕的微交互。
提示：
在你挑起效率问题之前，确保你的设计没有任何问题。
关键词：
不是动力效应的错。
五、不要漏掉任何细节。
“如果你没接住球，你会射偏的。”韦恩格雷兹基是这么说的。很明显，他擅长躲避撞击和冰上舞蹈。仔细想想，用这句话来形容微交互设计师的微交互设计是多么合适：细节太多。大部分设计师不习惯设计300~400毫秒的动画，很容易蒙混过关。
以下作品由伊万比耶拉雅克设计。在这项工作中，我发现有五个细节可以优化。
1.菜单按钮和返回按钮可以增加简洁优雅的过渡效果，当页面向上滑动时，菜单按钮不是很协调。
2.黄色方块右箭头的缩放和旋转效果不是必须的。这看起来有点奇怪。它应该随着内容而改变。
3.没有必要淡化文本段落。
4.如果标题从内容中淡出，从左向右滑动的标题要比滑动和淡出好得多。
5.当图片转换到顶部横幅时，该人的照片将被裁剪。如果图片被重建以匹配这里的内容会更好。
与后面对细节要求严格的动画作品相比，简直是天壤之别。
提示：
细节处理不要松懈，不要遗漏任何细节。
关键词：
把握细节
摘要
在这里，我想说，即使你没有任何动画经验，只要你时刻记住以下几点，你也可以创造出精美的微交互设计。
抑制
互动叙事过程
一步完成
不是动力效应的错。
把握细节
虽然这不能保证你一定能做出很棒的动态效果，但方向是对的。
