©FlowMapp

我们来总结一下要遵循哪些规则，来开发具有动画元素的出色的用户界面，以及创建酷炫动画UI的网页设计。

- 从原型制作开始

- 遵循物理定律

- 挤压和拉伸动画对象

- 保证运动顺畅

- 准备用户在屏幕之间切换

- 加点剧情

- 再重复一次动画

- 记住层次结构

- 仅在必要时使用动画

- 为用户提供视觉提示

- 运用自己的智慧

- 确保动画持续时间与目标受众相匹配

- 选择最佳运动速度

- 考虑运动的语言

- 试着想象50年后的动画

01

从制作原型开始

02

遵循物理定律

03

挤压和拉伸动画对象

只要记住物体在外部因素的影响下在现实生活中的行为——它们可以收缩、膨胀、改变重心，或者做其他事情来响应用户的任何操作。记住这一点，以使我们的动画尽可能逼真。

04

保证运动顺畅

在现实生活中，物体平稳运动，往往不是直线运动，而是抛物线运动。此物理属性可用于使交互界面更接近我们习惯于在 3D 空间中看到的内容。这只是普通用户难以察觉的功能之一，它使最终解决方案看起来专业而简洁。

05

准备用户在屏幕之间切换

与其突然从一个屏幕切换到另一个屏幕，不如让用户为即将发生的事情做好准备。最简单的例子出现在旧版本的 Windows 中——一个翻转的沙漏。但是，我们可以发挥所有的想象力，使这种转变不仅更有创意，而且更有趣。

06

加点剧情

为了让最终用户清楚地了解下一刻将要发生的事情并让他们集中注意力，我们可以让这种等待变得更令人兴奋。在描述错误的用户操作或等待界面内任何操作的确认时，此规则尤其适用。例如，我们可以使用跳动的感叹号或“x”符号向用户指示出现问题并且界面希望他们采取特定操作。

07

再重复一次动画

屏幕转换的另一个不显眼的“技巧”是重复用户刚刚看到的动画。这将帮助他们了解他们所做的一切都是正确的，并且他们采取的步骤使他们更接近完成目标行动。

08

记住层次结构

事实上，运动可以相当可靠地反映出哪些对象更重要，哪些对象是次要的。通常，最重要的元素是由动画提出或转发的。

09

仅在必要时使用动画

我们可以对动画界面元素着迷，并为自己设定目标，让尽可能多的对象移动。然而，将一个普通的用户界面变成高大上的迪士尼工作室的作品，绝对不值得。

事实上，过多的动画会分散用户的注意力，无法完成他们的预期操作，并且你会显着降低你正在从事的项目的可用性水平。

10

为用户提供视觉提示

根据我们产品的用途，对于一些新用户来说，入职流程可能非常困难。动画可以显着降低入门门槛。特别是，我们可以使用动画工具提示向初学者解释如何处理界面元素。

11

运用我们的智慧

一个成功的动画界面需要设计师的智慧。如果它不引起最终用户的任何情绪，我们的作品很难被称为高质量。

因此，正如我们上面所说，即使我们正在从事世界上最严肃的项目，也不要忘记为动画元素添加一些幽默和乐趣。

12

确保动画持续时间与目标受众相匹配

考虑动画应该持续多长时间，这样用户就不必等到它结束。同时，结束得太快的动画对于最终用户来说可能是无法理解的。因此，在启动最终版本之前，请在项目目标受众的真实代表身上测试几个持续时间不同的选项。

13

选择最佳运动速度

保持动画速度的平衡也很重要。移动速度太慢的动画对象，以一秒或更长时间的速度渲染每个新帧，会使我们的最终用户感到厌烦。相反，如果将它们移动得太快（少于 100 毫秒），它们根本无法理解发生变化的位置。

一般来说，独立测试的结果表明，最佳的界面动画速度是 200 到 500 毫秒。

14

考虑运动语言

动画元素的运动性质应与我们正在处理的项目的风格相匹配。例如，弹跳元素不太可能适用于企业应用程序，反之亦然，过于不引人注目、严格的动画会使娱乐应用程序变得乏味乏味。

15

试着想象未来的动画趋势

尽管网页设计趋势以光速变化，但重要的是要尝试创建一个将在未来许多年成为典范的产品。要做到这一点，请尝试想象我们的动画对于半个世纪后决定使用的产品的用户来说是否会显得可笑。

今天科普的炫酷动画的15个技巧将帮助我们成为好的网页设计师。如果我们今天做错了什么，不要气馁，多亏了这次经历，明天我们将能够提高自己的技能，更专业地完成自己的工作。

文中信息来源：

https://medium.com/@FlowMapp/15-interface-animation-rules-what-does-each-ux-ui-designer-must-know-9f5f118a47b3

侵权告知即删