重要的动画——为你的界面增加价值

在产品设计中，好的动效设计能够提升数字产品的用户体验，并与其他因素一起共同打造一款好产品。

我们花了很大精力来提升数字产品的用户体验，而动效设计往往更容易被忽略。在实际工作中，我们在制作动画时大多依靠个人的感觉，但是感觉是否合适取决于它有没有很自然的模仿我们与现实世界的日常互动。

另外我们可能没有过多的思考就为数字产品添加动画，或许它看上去很酷炫，我们也坚信他会为用户带来价值。产品服务于用户的时候，是否有助于用户更好的体验产品功能，是否会增加用户操作经验值？

那么我们怎样才能设计出更有意义的动效服务于我们的产品？我们如何确保我们的动效能够增加产品的用户体验？

答案就是通过 科学与原则。

什么是动画？

动画是一种将单个图像组合在一起，使它们看起来像一个平滑的奇异运动的方法。你今天看到的每一个动画都是由多个图像（或者一个处于多个状态的图像）组成的。

一秒钟动画内的帧数称为帧速率或每秒帧数（FPS）。人眼需要至少24帧才能将动画视为流体运动。

在Web中CSS动画的帧速率很大程度上取决于浏览器和计算机的速度。如果你的计算机速度很慢，你可能会看到动画卡顿或滞后，这通常表明帧速率已降至24 帧每秒以下。

游戏是另一个很好的例子;当你的电脑无法以24 帧每秒的速度运行游戏时，游戏显得比较迟钝 - 尽管大多数游戏玩家会坚持认为60帧每秒以下的任何东西都是滞后的。

物理基础

1. 时间和节奏

时间是对象移动所需的时间或帧数。如果球需要5秒钟才能落到地面，其动画时间将为120帧（5 x 24 FPS）。

时间在动画设计制作中起着巨大的作用。

在产品中我们不需要计算应用程序中设置按钮动画所需的帧数，但是我们可以确定设置按钮的动画时间长短。

节奏感是运动发生的速度快慢。如果你的动画太慢，它可能会让用户厌烦沮丧。如果它们太快，你的用户可能会忘记他们所在的位置或他们正在做的事情。

我们知道，现实世界中的大多数物体都有大小和重量。这些尺寸赋予了一个物体所谓的重心，这对它的运动和旋转方式有影响。

组件还具有大小和重量，而这反过来又用于确定层次结构。与现实世界相似，我们的自然选择是使用组件的中心作为其重心。这既实用又现实。重心也可能随着其尺寸的变化而改变。

by Wouter Raateland

2. 重力

重力是一种自然发生的力，它将我们锚定在地球上，并对海洋的潮汐负责。它会对物体运动产生巨大影响。

在我看来，我们的设备有两个重力作用它 - 首先在Y轴上从上到下，其次是在Z轴上的UI界面深度。Google很早就意识到我们的设备具有Z轴上的深度，并且已经建立了大量的材料设计理念。

以同样的方式，我想知道我们把设计元素往下掉的趋势是否是我们对y轴重力的解释的结果。下拉列表、选择框、手风琴等所有这些组件都会在应用程序的底部显示动画。

by Ildiko Ignacz

3. 阻力

这是我们每天都经历的事情（就像你不愿下床一样），是一种物体在空间和时间中移动时在大自然中所发现的一种力量的结果。

界面设计中经常使用阻力。苹果的3dTouch（Rip）就是一个很好的例子，它的界面几乎“抵制”了一个动作，直到你用力按下。然后通过动画演示此阻力，根据应用的压力，图标或多或少突出显示。

下拉刷新是另一个很好的例子，在这个例子中，用户必须下拉界面来显示最新的内容。使用者必须下拉产生一些阻力，达到页面重新加载出动画。

by James G

4. 作用力和反作用力

每一个物体都保持静止或匀速直线运动，除非它被施加在物体上的力强迫改变这种状态。

牛顿定律与UX和动画有着惊人的关系。当你按下一个按钮，你会有反应。在某种程度上，重力迫使你移动鼠标，按钮会显示悬停效果，做出剧烈的反应。

这一切都很科学，不是吗？

对于每一个动作，相互作用的两个物体之间的作用力和反作用力总是大小相等，方向相反，作用在同一条直线上。

——艾萨克·牛顿爵士

牛顿第三定律与界面中的动画息息相关。当涉及到数据、大小、颜色、背景等方面的变化时。动画的作用是创建可视化的视觉提示，让用户知道他们在哪里，他们在做什么。当用户点击下载图像时，希望看到一些进展、失败或成功的迹象。

by chashi

动画的12个原则

1981年，两位迪士尼动画师奥利约翰斯顿和弗兰克托马斯提出所有动画都包含 [十二个基本原则]。这些原则遵循前面提到的物理定律，并作为创造现实运动的指导。

这些原则可以应用在用户体验和设计时具有卓越的价值。

我已经列出了这些原则以及下面的Dribbble最好的例子。

1. 挤压和拉伸

在自然界中，物体具有可塑性 - 它们的形状随着它们与世界的相互作用而变化。它们能够根据自己的成分进行挤压和拉伸。同样，我们的界面可以在与它们交互时挤压和拉伸。部件的重量和重心不会改变，而只是移位。

by Scott Brookshire

2. 预备动作

预期是导致更大行动的小行动。在野外，猫可能会降低它的背部，拉回它的耳朵，期待着突袭它的猎物。预期也可能是完全没有动作，比如猫突袭前的戏剧性停顿。这种期待可以作为警告，用来诱惑或创造兴奋。

以非常相似的方式，我们可以使用小动画来为我们的用户创建预期。悬停效果就是一个很好的例子，因为它向用户表明这个对象（例如按钮）可以执行更大的操作。

3. 演出布局

界面设计中的分段原则的典型示例是加载图标。这不仅解决了技术问题，而且还让用户知道“阶段”正在被设置。此外，装载机的实际设计也可用于升级;让用户可以一瞥他们可以期待的内容类型。

舞台布置包括设置一个场景，以强调人物、对象或事件。这可以通过几种方式实现，如照明、音乐或摄像机移动。分段也可以用来构建预期。

界面设计中分段原则的一个典型例子是加载图标。这不仅解决了一个技术问题，而且还让用户知道“阶段”实际上正在被设置。此外，加载程序的实际设计也可用于升级；让用户了解他们所期望的内容类型。

by Su

骨架加载是加载器图标的扩展，被认为是更好的加载体验。将向用户显示要加载的内容的“骨架”，然后在内容加载时进行填充。

by UI8

4. 连续运动与姿态对应

这个原理指的是动画的绘制方式。从第1帧开始并绘制每个后续帧。这通常会导致更好的真实性和平滑性，因为您可以控制每个后续动作。

使用姿势构图，你可以绘制第一帧，然后绘制结束帧，只有这样才能填充中间的帧。

今天用户界面中的大多数动画都是摆姿势。作为开发人员，我们通常使用CSS编写静态组件，然后为动画状态编写CSS，然后我们使用类或关键帧切换此动画。

5. 跟随与重叠动作

现实世界中的物体通常由多个运动部件组成。汽车、人、动物、植物——都是很好的例子。由于它们的重量和大小，这些多个部分都受到重力等力的不同影响。因此，相同的物体可以具有以不同速度移动或以不同角度旋转的部件。由于它们的大小会影响加速或减速所需的时间，因此它们也可能具有不同程度的阻力。

以类似的方式，UI组件由多个部分组成，不管是排版、颜色、形状还是间距。如果要对同一组件的多个部分设置动画，则必须考虑每个组件的重量和大小以及它们之间的关系。属于同一组的组件应始终一起动画，但速度和加速度的细微差别会使它成为一种很好的体验。

也许最重要的重叠动作例子是古老的视差动画。

by Anton Skvortsov

6. 缓入缓出

“缓入缓出”实际上只是迪士尼的缓和期限。生活中的物体很少会瞬间停止——它们往往会逐渐失去动力并减速。

大多数设计师和开发人员已经在他们的动画中实现了缓和。但我们有时会落水吗？很容易弄乱宽松曲线，这会让用户感到有点不安。有很好的资源来获取预先构建的缓和曲线

7. 弧形运动

在自然界中，很少有东西是以直线运动的，仅仅是因为没有人能以精确的直线投掷一个球。自然界中的物体经常以弧形运动。弧线本质上是弯曲的路径，如果你扔球，球会在上面移动。

一般来说，接口是与某种网格系统对齐的，所以我们倾向于不为弧中的组件设置动画。在某种程度上，缓和是我们使用的弧线，因为它使我们的动画感觉好像是在弧线上动画。也就是说，在这些动画中实现某种弧形是有实际价值的，因为它们增加了自然流动感。这只是寻找合适机会的一个案例。

by Divan Raj

8. 次要动作

辅助操作是除主操作之外发生的任何操作。这些操作通常用于支持主要操作。一个真实世界的例子就是当自行车移动时转动车轮。

辅助操作非常适合向用户提供有关其操作的附加信息。按钮中的图标就是一个很常见的例子。

by Oleg Frolov

9. 节奏

动作的节奏就是速度的快慢，过快或者过慢都会让该动作看起来不自然，而不同的角色也会有不用的节奏，因为动作的节奏会影响到角色的个性，也会影响到动作自然与否。

过渡编排是一种协调的动作序列，可在界面适配时保持用户的注意力。-谷歌材料设计

组件动画的顺序是引导用户完成旅程的一个很好的方法。即使是在微观尺度上我们的眼睛会对运动的事物做出反应。

by Anton Tkachev

10. 夸张

夸张（加上素描和吸引力）是动画师变得更有创造力的地方。对象的大小、形状或移动被夸大，超出了真实性，以增加对对象的强调或兴趣。

by Voicu Apostol

11＆12. 素描和吸引力

这两个要素都很简单，都是指你的组件或体验对你的用户有多大的吸引力。这归结为良好的设计、良好的用户界面、良好的体验和精致的动画。

总结

这些原则帮助迪士尼创造了无数催人泪下的动画片，这些动画原则到了很大的作用。

我们如何才能把迪斯尼如此成功的东西应用到我们自己的项目中，我们中的大多数人已经在这样做了，但这种演变实际又是什么样的呢？大家可以根据实际项目进行多思考。

原文作者：Vernon Joyce

原文地址：https://uxplanet.org/animation-that-matters-adding-value-to-your- interface-65496fe4c182

编译作者：水手哥，公众号：水哥爱设计

本文由 @水手哥 翻译发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash, 基于CC0协议

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。


Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: