【UIPark编译】Animation Principles In UI. UI动画原理

越来越多的设计师认识到运动设计在用户体验中的重要性。运动不再仅仅是一种取悦用户的方式，而是一种让体验变得简单有趣的功能工具。我们中的大多数人都听说过好的设计就是讲故事。运动可以帮助我们在更短的时间内更清晰地讲述故事。

在用户界面内的移动使我们：

直接重点

建立对象之间的层次和空间关系

打造品牌品质

动画在用户界面仍然是一个非常新的领域。对于页面转换或显示加载屏幕，几乎没有资源来实践教授。我们所能做的就是通过研究传统的动画原理和学习如何将它们应用到抽象形状和模式（比如我们在数字接口中看到的）来开发一个可用的运动库。

“运动不再仅仅是一种取悦用户的方式，而是一种让体验变得简单和有趣的功能工具。”

动画技术最常用的参考资料之一，是由Frank Thomas和Ollie Johnston在20世纪80年代介绍的迪斯尼12原则动画。这些原则是用来指导在人物动画中创造自然运动的错觉。虽然运动设计师很清楚这些原则，但通过用户界面的镜头来观察它们，我们可以为这些原则添加一个以前不存在的方面：函数。在他们的指导下，我们可以提供反馈和清晰，以便更有效地与我们的用户沟通。

用pixar的22条讲故事规则改善用户体验，通过深入研究这些原则，我们可以获得关于如何在功能上利用这些原则为用户创造更好体验的宝贵信息：

实心绘图

这个原理或多或少是材料设计的基础。实心绘图是指把形状当作实心物体来处理，因此受物理学自然定律的约束。使用实心绘图的概念对于发展面板或信息之间的空间关系至关重要。所有物体都保持一定的重量和体积，并且受到重力、摩擦力和惯性等力的影响，所以任何运动的结果都应该反映这一点。

当物体遵守自然法则，对于用户来说，它们的归属和走向是更直观的，而简单的感觉更好。由于面板、阴影与层之间是互动的，所以速度根据物理定律变化。

弧

物体移动的方向是告诉对象的类型。通常只有机械物体以完全直线运动，而具有有机特性的物体以弧线运动。无论你希望你的产品被接受为技术的，愚蠢的，还是优雅的，改变弧状的运动可以让它感觉真实的品牌的性格。

直线运动保持这款应用程序的整洁和专业，而弧线让运动感觉更自然。

阶段准备工作就是为即将发生的事情做准备。在接口的情况下，良好的运动设计使我们看到了重要的内容。当它们通过屏幕进行转换时，分期动画会让人们关注下一步应该解决的问题，或者引起人们对可能启动的潜在交互的关注。这有助于建立层次结构，并为用户澄清操作流程。

提交按钮只出现在用户开始输入评论之后，它为下一步应该采取什么行动设置了舞台。

夸张

夸张正是它听起来的样子：为了引起人们对某事的注意或为了表明观点而制造更戏剧性的事情。这可以在振动的通知钟中显示，或者响应交互错误。夸张引导焦点，明确用户应该注意。夸张可以强调确认状态和错误状态。

二级动画

当涉及到转换时，如果转换太快或太突然，很容易让用户感到困惑；二级动画确保这不会发生。它重申了主要操作，这样用户就可以确定发生了什么。这是一个微妙的，有时是不明显的推动肯定。

吸引力

吸引力集中在快乐上。如果你的动画让一个用户睁大眼睛，转过嘴唇的角落，或者发出一声轻笑，那么你的互动就很吸引人。这给互动一个更令人难忘的体验，并为你的品牌塑造个性。吸引力把你的产品带到了一个新的层次——它不仅解决了一个问题，而且还有情感上的吸引力，这就是为什么人们会回来使用你的产品，而不是一个可以帮助他们实现相同目标的不同的产品。

知道这些原则只会让你走得更远

学习这些原则将会让你在用户界面动画的大门上有一个坚实的脚，但是有时即使你已经遵守了所有的规则，你的动画看起来仍然是不正常的。作为一名运动设计师，最重要之一就是培养品味的重要性——那是你大脑中的肌肉，能告诉你什么时候感觉对。密切关注现实世界中事物的运动方式可以显著改善你的运动眼睛。你最好的朋友走路怎么样？涨潮时是什么样子？

你周围的物体对自己的运动有何反应？开始吸收日常生活的运动，它将以令人惊讶的方式转化为你的数字作品。

 

“每一个移动都应该是有意的，并且在某种程度上有益于用户体验。”

结论

这些动画原理是永恒的，因为在设计用户界面的时候记住它们可以大大提高产品的功能。如果使用得当，动画甚至可以积极影响您的产品和品牌作为一个整体的成功。当为产品制作动画时，一定要记住动作的功能——每一个动作都应该是有意的，并且在某种程度上有益于用户体验。利用物理学的自然法则来指导物体如何移动和相互作用。

最后，保持乐趣！有目的的设计不应该是无聊的。设计是一个令人愉快的体验，你的用户会不断地回来寻找更多。

本文原链接：https://www.invisionapp.com/blog/animation-principles-in-ui/