如何战略性地向您的网站添加动画

在网页设计中使用动画并不是什么新鲜事。

还记得旋转 3D gif 的早已过去的时代吗？

Flash的生死存亡如何？

在 Apple 禁止在所有基于移动设备的设备上使用 Flash 之后，设计师们很快就想出一种方法来让动画重新回到游戏中。 感谢 Web 开发人员和设计师的创造力，我们现在拥有了 CSS3 过渡、SVG 动画、高质量 GIF 的魔力，当然还有使用 After Effects 和 Blender 等程序创建的动画视频。

最近几年的趋势是设计扁平化网站。 值得庆幸的是，动画已经大行其道，现在已成为 2018 年及以后的最大趋势之一。

动画现在已成为一种期望。

动画对 UX 和 UI 设计的积极影响并不令人惊讶，因为人类是视觉动物，并且总是会被运动和运动所吸引。 动画可以将任何过程变为现实，将其变成一种体验。 动作让用户知道正在发生一些事情。

例如，表单单元格内的动画可以通知用户他们犯了错误或缺少信息。 或者当输入密码错误时，星号会变红，跳起舞会消失。

来自 Kinetic UI 的动画

或者这个有趣的登录动画怎么样？ 网页设计中动画的可能性每天都在增长。 为什么不在您的网站上添加一些战略动画呢？

Darin 在 Dribbble 上制作的动画

为您的网站制作动画

关于如何向您的网站添加动画的选项非常广泛，但这并不意味着它应该充斥着跳跃图标和旋转按钮。 您需要平衡设计中包含的动画数量。 更多地考虑“软动作”，而不是移动太多你不知道在哪里看的页面。 过度使用动画与过度极简主义一样痛苦！

使用 Adob​​e XD 之类的程序可以帮助您尝试不同的动画，以战略性地放置在您的网站上。 如果您喜欢直接在 WordPress 中构建，那么 Divi Builder 是一个不错的选择，它在每个模块中都带有许多动画可能性。

在文章的最后，我提供了一些链接，这些链接指向一些有助于将动画添加到您的站点的重要资源。

让我们来看看可以改善您网站的用户体验和整体视觉构图的不同类型的动画。

功能或美学

动画在网页设计中有两种用途； 功能性和美观性。

功能动画

动画可以帮助访问者完成他们在您网站上的用户旅程。 它们会引起您对行动号召或您不希望他们错过的重要部分的关注。 它们使流程更容易并且视觉上令人愉悦。

加载动画

加载动画是最常见的功能动画，也是网站设计中最常见的动画之一。 这些过去主要是在网站首次打开时发现的，但现在网站会立即加载，它用于加载视频、下载进度以及您的网站可能具有的其他过程。

为了使您的加载动画有效，它需要与您的品牌相匹配。 如果您的网站有趣且色彩丰富，那么您的加载动画可以是从弹跳球到彩色循环的任何内容。 另一方面，如果您的网站是严肃而正式的，那么加载动画应该遵循这种风格。

Sharon Yar 和 Dilys Lim 在 Behance 上制作的动画

来自 Tom Cole Architecture 网站的 UXPin 的动画

悬停

您应该考虑的其他常见功能动画是悬停。 我们已经很习惯看到悬停动画，大多数人都会期待它们。 让按钮在悬停时改变颜色是您绝对应该考虑使用的基本动画，无论是在菜单上还是在号召性用语上。

使用悬停的其他方法是用于看起来不像按钮的按钮，或者如果您想在单击之前显示悬停信息。

来自 Design Shack 的动画

滚动

具有滚动效果的网站不再是一种独特的现象。 视差滚动已经变得非常流行（说实话，而且变得有点累了）。 因此，如果您想使用动画滚动，请跳出框框思考。 包括从一个部分移动到另一个部分的元素，随着滚动逐渐出现的元素。 考虑功能和美学。

Youandigraphics的动画

审美动画

美学或装饰动画是那些使网站更具视觉吸引力但不一定有助于功能的动画。 从第一部沃尔特迪斯尼卡通片时代就有一个古老的比喻，动画是“生活的幻觉”。 动画对静态图像所做的就是让它栩栩如生，让它呼吸。

使用适量的美学动画，您的网站可以令人难忘。

就像功能动画一样，装饰动画也需要有一个平衡点。 问问自己这个动画背景是否真的有必要，或者它是否与你的品牌相匹配。 是每张照片都需要动画到屏幕上，还是需要那么多弹出窗口？ 确保您添加的动画足以让您的网站看起来不错，但又不会让人不知所措。

动画背景

现在最流行的动画背景是粒子背景，从简单的移动点到复杂的光效运动。 这些可以作为整个页面或部分的背景添加。 它们可以使您网站的区域更具个性。 请记住，趋势会发生变化，因此如果您确实使用粒子背景，请确保它确实适合您的网站。

蛇蝎美人的动画

无限创意

最后但并非最不重要的一点是，动画可以为您的网站提供无限创意。 由于您几乎可以为任何东西制作动画，因此创造的可能性是无穷无尽的。 从动画背景到屏幕上移动的事物，甚至是角色闪烁等微妙的动画。

一个网站可以非常依赖动画，以至于浏览页面是一种真实的体验。 以保时捷的新网站为例，它展示了这家汽车制造商多年来的历史。

或者将等距插图和动画滚动结合在一起，你会得到一个很棒的网站，比如 RollPark。

来自 Rollpark 的动画

始终针对移动设备进行优化！

我不提醒您应该始终在移动设备上查看动画对我来说是不公平的。 确保它们按应有的方式工作，如果没有，请进行调整。 如果您使用 SVG 动画，那么您应该不会有太大问题，因为 .svg 图形可以无限扩展。

无论哪种方式，始终检查移动设备并针对所有格式优化您的动画将使您的网站变得更好！

帮助您为网站制作动画的工具

以下是您可以在您的网站上使用的不同类型动画的实用文章的链接列表。

• 免费动画库的集合
• DIVI Builder 动画功能
• 粒子背景创建者
• 使用 CSS 创建简单粒子背景的两种方法
• 使用 SVG 动画

综上所述

在功能和美学方面保持动画平衡。 它们是使您的网站栩栩如生的工具，而不是让它不堪重负。 记住要有创意，跳出框框思考。

在构建您的下一个网站（或更新您现有的网站）时，您会在设计中添加一些动画吗？ 请记住：在将任何新代码永久添加到实时站点之前，最好在临时站点或本地站点上进行试验！

接下来您将尝试哪种类型的网站动画？

使用这些教程创建您自己的动画！

• 如何使用 CSS 创建 SVG 动画
• 如何使用 CSS3 过渡和变换来创建动画