网站设计中的动画简介——全球百科

动画不再只是卡通。从全屏移动图像到小型悬停效果，动画元素随处可见。动画时尚、有趣且用户友好。

使用动画的障碍已经开始减少。由于大多数用户都使用高速连接，并且可以轻松创建从简单的动作或愚蠢的 gif 到几分钟的动作的任何内容，动画已成为实用且有用的网页设计工具。

让我们深入了解一下吧！

当以静止或二维形式创建的某些东西被“赋予生命”并且看起来以遵循物理定律的方式移动时，动画就会发生。这是卡通人物在屏幕上行走的方式，或者应用程序图标在 Mac 桌面上加载时如何像球一样弹跳的方式。

迪士尼几乎是动画的代名词之一。20 世纪 80 年代初，该公司的两位顶级动画师写了一本书，详细介绍了动画的 12 条原则。弗兰克·托马斯和奥利·约翰斯顿的《生命的幻象：迪士尼动画》至今仍然为动画提供了框架。

1. 挤压和拉伸

2. 预期

3. 分期

4. 直行动作和姿势到姿势

5. 跟进和重叠行动

6. 慢进和慢出

7. 弧

8. 次要行动

9. 定时

10. 夸张

11. 实体绘图

12. 上诉

Web 动画通常保存为 GIF、CSS、SVG、WebGL 或视频。它们可以是任何内容，从将鼠标悬停在单词上时出现的简单下划线到全屏视频或背景图像。与任何其他设计技术一样，动画可能很微妙，也可能就在您面前且难以避免。

对于网页动画来说，什么有效，什么无效，看起来比解释起来容易。你只知道这个动作是正确的，并且当它发生时它会起作用；反之，速度太快或太慢，您也立即知道。

为了帮助指导您的动画决策，您可能希望避免一些更流行的元素并坚持动画设计中一些更永恒的元素。这些技术提供了基本指南，可以帮助您创建可用且视觉上有趣的东西。

• 导航：使用微动画向用户显示何时在单击或点击之前激活元素或菜单项

• 悬停状态：另一种微动画，可以通过提示可操作的内容来促进用户体验

• 视频：这个主要动画可以是一种引人入胜的内容类型，有助于通过设计讲述故事

• 滑动过渡：这种方法在英雄标题中很流行，通过滚动或自动操作移动图像或插图（这里的技巧是使每个过渡尽可能平滑）

• 滚动：从视差效果到更复杂的动画过渡，滚动是添加微妙运动以表示内容变化的好地方

• 背景动画：微妙的运动元素可以使静态图像变得更加有趣，并为用户提供惊喜元素

• 欢迎或加载动画：许多欢迎页面动画隐藏了加载问题，但如果做得正确，动作就足够有趣，不会令人烦恼，也不会分散用户对延迟的注意力

• 讲故事的动画：动画可以帮助设置其中内容的场景，并可以帮助用户在了解手头的故事时在网站上停留更长时间

当谈到网络动画时，它分为两个同样容易理解的类别：大动画和小动画。小动画中还有另一个类别——微动画。

大型动画是有比例的动画。大型动画通常以带有运行时间的视频形式出现，占据屏幕的很大一部分，是短片的特征。这些动画是整体设计的焦点。用户通常无需执行任何操作即可观看运动动画。如果您在 Studio Meta 网站上仔细观察，您会发现每个大图像都会在您阅读副本时放大。

小动画是您开始与网站交互时发现的小片段。这些草皮可能以悬停状态、微小的装饰或可用性指南或工具的形式出现。小动画是有助于整体美感的重点，但不太可能成为设计的焦点。在亨利·布朗的网站上，简单的动画是，如果你仔细观察，插图中的眼睛实际上是眨眼的。

并且不要忘记微动画。这些是与用户界面相关的超短动画元素，可帮助人们完成网站之旅。它可以是任何内容，从悬停操作到表示滚动的闪烁箭头。最好的微动画是用户体验中几乎不可见且无缝的一部分，但如果您需要它们来获取帮助或信息，它们就在那里。

动画对于您的设计工具包来说是一个很棒的小技巧，但并不适合每个项目。动画应该流畅、无缝，而不是跳跃或机械。它需要为用户服务，而不是妨碍内容。

使用动画的主要原因是提高可用性。简单的动画可以成为很好的指导工具，帮助人们了解要单击哪些按钮或下一步要去网站地图中的哪里。许多使用复杂滚动效果的设计人员将简单的动画与用户工具配对以滚动或单击。（这包括从简单的弹跳图标到弹出的“向下滚动”文字等所有内容。）

可用性有几种形式：

• 通讯功能或网站的使用方法

• 将用户吸引到整体设计或特定元素

• 增加互动和参与

• 显示更改，例如正确填写表单或突出显示某个元素可单击

• 建立更好或更牢固的情感联系

• 创建流程或引导用户采取号召性用语

• 改善整体用户体验

动画也可以是很好的“装饰”。有时，动画元素的目标纯粹是视觉效果，这是可以接受的用途。这种装饰性动画可以帮助讲述故事或在界面和用户之间建立情感联系。动画的目的可以是激发视觉兴趣并让用户更长时间地与您的网站互动。

创建纯视觉动画时，请考虑它应该做什么。考虑一下您希望用户拥有的连接。它应该是有趣的还是令人惊讶的？是为了分享而设计的一些独特内容吗？即使是纯粹的视觉也应该有一个目标。

说到动画，经验法则是：好的动画会让用户体验更好。这可以是情感联系的形式，例如有趣、积极的体验，也可以是让网站更易于使用。

动画是一种有趣的技术，它已成为各种应用程序的更加标准。如果您正在寻找灵感，请务必回顾本文并单击通篇视觉示例的链接，访问网站并体验其中的动画功能。玩得开心！