动画不仅仅是看起来酷炫——它们还能增强用户体验。无论是引导注意力、创造流畅感，还是让交互更直观，恰当的动画和互动性可以将一个静态页面转化为一个能激励用户并促发行动的体验。
为了激发您的下一个项目，我们从 Framer 作品集中收集了一系列令人惊叹的网站动画示例。探索不同类型的动画——例如悬停效果、滚动触发的过渡和背景动画——如何突出您的品牌、增强用户体验并提高转换率。
1. 背景动画
添加背景动画能让您的网站充满活力和互动性。这些效果可以是微妙的，例如渐变动画；它们也可以是页面设计的核心，就像许多视差背景一样。无论哪种方式，背景动画都是一种增强网站视觉流畅性并为访客探索网站奠定基调的方式。
示例 — Yuna
Yuna 是一款应用程序，可让您根据孩子的年龄创建个性化的互动儿童故事。家长们说它能培养阅读爱好，帮助孩子练习创造力和想象力。Yuna 的网站通过故事书般的动画，出色地传达了这种奇妙的感觉。
视差背景在这里发挥了重要作用：三层以不同速度移动，展示了一位家长给孩子读书的场景，前景是色彩斑斓、缓慢飘动的叶子和云朵。当您滚动浏览网站时，其他视觉功能——例如进入动画和弹跳图标——强化了这种玩乐感。
2. 悬停效果
通过使用悬停效果，您可以向用户发出信号，表明哪些对象是可点击且重要的。此外，它使浏览您网站的体验更具动态性和吸引力，同时让您有机会强化您的品牌。悬停效果可以是微妙的，例如调整按钮和菜单的颜色、大小和方向，也可以更明显。
示例 — 日本统一者
“日本统一者”是一个高度风格化的网站，充满了令人印象深刻的动画。虽然它的亮点可能是将日本历史人物动态地转变为武士，但该网站在将品牌融入用户体验的每个细节方面也做得引人注目。
例如，菜单由两种悬停效果构成。首先，当您将鼠标悬停在“菜单”一词上时，会出现一条细微的线条。其次，将鼠标悬停在每个菜单项上时，菜单项会平滑地被图形替换。这些小交互的每一个都使网站对用户需求做出响应，同时为品牌体验增添了光彩。
3. 页面过渡
在正常情况下，从网站的一个部分导航到另一个部分并不会引起太多关注：您只需点击一个链接，下一页就会加载。页面过渡——例如让下一页平滑地淡入或滑入——为通常例行的体验增添了精致和专业性。
示例 — Dynex
Dynex 是一家专注于量子计算的区块链公司，其网站涉及您能找到的一些最技术性的话题。（神经形态计算，有人需要吗？）如果有一个网站需要看起来特别“技术”，那就是它了。
幸运的是，Dynex 在细节上做得很好。其时尚、未来感十足的美学与品牌相符。即使是页面过渡也经过精心设计：当您点击菜单项时，一个平滑的从左到右动画会使新页面淡入。在启动网站项目时，页面过渡通常不是首要考虑事项，但访问者确实会注意到它们（即使是潜意识地），并且它们会增加您网站的整体品牌体验。
4. 入场动画
当您进入一个满是文字的网站时，可能会感到不知所措。虽然用留白和图片来分解信息是一个很好的第一步，您还可以使用入场动画来巧妙地引导用户的注意力，并逐步引导他们浏览您的网站。常用的入场动画包括滑入、淡入和弹出效果。
示例 — Tellet
当您加载 Tellet 的网站时，所有首屏组件都会向上淡入，包括标题、图片、描述和行动号召。当您向下滚动时，它变得更加动态：图形和统计数据以从右到左的动画从产品中弹出，让用户有机会吸收每条数据而不会感到不知所措。
如果过度使用，入场动画可能会让人觉得俗气，但如果以审慎的方式应用，它们会感觉像是您品牌的延伸。Tellet 的品牌——充满鲜艳的霓虹色和友好的语言——与网站使用的有趣入场动画完美契合。
5. 加载动画
网站访问者没有耐心：根据 Google 的说法，当页面加载时间从一秒增加到三秒时，跳出率会增加 32%。随着页面加载时间延长，更多的用户会转向其他地方。加载动画通过减少感知等待时间来提供帮助。它们可以是简单的，比如显示网站加载速度的进度条，也可以是复杂的，比如“骨架屏幕”动画，它显示网站的粗略轮廓，然后填充细节。
示例 — 设计师编程
我们都见过带有不起眼旋转轮的样板加载屏幕。“设计师编程”，一个在线教育机构，采取了不同的方法：它的加载屏幕通过动画信息“学习、设计、编码！”来强化其品牌。加载完成后，加载屏幕平滑地向上滑动，露出网站。
与标准的加载屏幕不同，这个带有品牌标识的版本让访问者知道他们来对了地方。（它几乎感觉就像 YouTube 频道在视频开始前的短片介绍。）它完全不具破坏性，并且完全符合品牌形象。
6. 滚动触发动画
当您浏览一个静态网站时，您需要自己引导。但有了基于滚动的元素和过渡，网站更像是互动式幻灯片：每一次向下滚动都会有目的地将您的注意力引向一个新主题。这是一种更沉浸式的体验，避免让用户不知所措，因为他们可以分小块地获取信息。
示例 — tinyPod
还记得初代 iPod 上的经典点击轮吗？显然 tinyPod 的创作者也记得：他们的产品是一个 Apple Watch 保护壳，它将手表的外形转换为类似于 Apple 2001 年 iPod 的微缩版本。这是一个引人入胜的创意，需要一些解释，这使其成为一个由滚动触发动画驱动的“讲故事”式登录页面的完美候选。
当您加载页面时，首先看到的是 tinyPod 从云层中降落，并在一系列基于滚动的动画中旋转。然后，它展示了其功能并突出显示了电话、音乐和消息等应用程序。最后，tinyPod 降落在用户手中，旁边有消息解释了您可能为什么想购买它。
7. 微交互
微交互是用户操作触发的小型、通常是微妙的动画。工具提示、手风琴菜单、悬停效果、密码强度指示器和验证消息都是微交互的形式，因为它们提供指导并让用户知道他们的操作已被识别。微交互的主要目标是提高可用性，但它也是为设计增添个性的机会。
示例 — Ozone
Ozone，一款人工智能视频创作工具，充满了微交互，其主页的一个部分就提供了三个示例。有一个视频编辑动画，当您将鼠标悬停在它上面时，它会改变您的光标；一个小部件，向您展示产品在不同格式下的输出；以及一个微妙的图标缩放动画，强调了该工具的协作功能。
8. 鼠标触发动画
鼠标触发动画为您的网站增加了额外的互动层。通过鼠标跟踪效果，元素会根据光标位置做出反应；其他常见的鼠标触发动画包括 3D 对象旋转和视差效果。
通过直接响应用户输入，鼠标触发动画可以创造更沉浸式的体验，鼓励用户在网站的某些部分停留，并为功能的新层次打开大门。
示例 — GitBook
GitBook 是一个很好的例子，它在基础方面做得很好——简洁的设计，充足的留白，精心设计的配色方案——同时又使用了时髦的动画效果来增强体验。
GitBook 登录页面的每个部分都有相应的图片来展示产品功能；更好的是，图片是 3D 的，并随着您在页面上的导航而跟随您的光标。除了感觉高科技之外，这种交互性吸引了用户的注意力，并帮助他们参与到每个部分中。
9. 交互式产品动画
您可以通过互动式产品动画，在几秒钟内展示您产品的价值，而无需用户安排演示或观看产品演练。无论是逐步引导用户了解产品功能，还是以动手方式演示单个核心功能，产品动画都能帮助用户理解您的产品并提高转化率。
示例 — Cradle
Cradle 是一家生物技术公司，允许您“只需点击几下即可设计改进的目标蛋白质序列变体。”这是一种具有高度专业性和技术目的的产品；虽然 Cradle 的目标受众是生物技术团队，无疑对该主题很了解，但通过演示来揭秘复杂产品总是很有帮助的。
在 Cradle 的网站上，您可以与产品的一个模拟版本进行交互，其中包含目标蛋白质序列和其他变量。点击标有“生成变体”的按钮后，一个动画将模拟生成变体的过程。这个动画作为一个简单的迷你演示，帮助用户在几秒钟内理解产品——并增加信任。
10. 文字动画
与入场动画一样，文字动画不仅是 stylistic 工具，也是引导用户注意力，让他们在浏览网站时感到舒适的方式。它们使得用户更容易在浏览网站时参与其中，同时也开辟了设计、品牌和讲故事的可能性。流行的文字动画包括打字效果、文字淡入和文字滑入。
示例 — Biograph
Biograph是一家提供个性化健康服务的公司，服务起价7,000美元。因此，其设计充满了高端感——而精致的文字效果也为此增色。当您加载首页时，标题文字会缓慢聚焦。随着您向下滚动页面，其他标题会从模糊变为清晰，增添了一种神秘和奢华感——并促使访问者放慢速度，仔细关注。
11. 3D 效果
如果您真的想给人留下深刻的第一印象，可以考虑在您的网站中添加 3D 效果。为物体应用深度和旋转可以帮助吸引用户的注意力，并使您的网站更具沉浸感。例如，在电子商务网站上，为用户提供使用鼠标旋转产品的选项是一种标准做法。其他流行的 3D 网站动画包括交互式信息图表、翻转卡片和 3D 图片库。
示例 — Tim Quirino 的作品集
产品设计师 Tim Quirino 使用引人注目的三维效果——使用 Framer 和嵌入式 Spline 动画构建——这让他的作品集更像是一个科幻视频游戏，而不是一个网站。（他设计的太空主题动画是基于电影《沙丘：第二部》。）当您探索网站并导航到不同的行星和月球时，您的光标会变成代表 Tim 不同项目的图像。点击每张图片都会打开一个新页面，详细描述该项目。
追逐绕行的月亮是浏览作品集最有效的方式吗？也许不是。但这种对 3D 动画和悬停效果的创意使用，成功地在用户刚到访时就让他们惊叹不已，并为用户浏览作品集的其余部分奠定了大胆的基调。
如何通过网站动画提升用户参与度
使用 Framer，您可以轻松添加提升参与度的动画，同时平衡创造力、可用性、性能和可访问性。以下是一些实用的入门技巧。
1. 给每个动画一个目的
动画很容易被过度使用。如果弹跳的徽标和视差背景不适合您的品牌，您可以保持简单——不要仅仅因为可以就给您的网站添加动画。
相反，请确保每个动画都能改善您的用户体验，增强您的品牌体验，或两者兼而有之。首先使用微妙的动画，例如悬停效果，这有助于用户了解网站的哪些区域是交互式的。稍后，添加高级效果，例如滚动触发动画，以管理用户看到的信息流。
2. 通过微交互保持用户参与
Framer 的动画功能允许您使用微交互来提升用户参与度，并使您的品牌贯穿整个设计。
从加入根据用户行为而改变颜色、放大或闪烁的互动行动号召开始。例如，一个脉动的“立即购买”按钮可以吸引注意力并促使用户采取行动。您还可以添加微妙的动画，在用户完成任务或正确输入信息时提供反馈。
3. 优先考虑性能和加载时间
Framer 提供轻量级动画和屏幕外内容的延迟加载，即使有多个动画，也能帮助您的网站流畅运行。
但检查页面加载时间以确保用户体验不会受到影响仍然很重要。如果您遇到性能不佳的问题，请考虑切换到轻量级 CSS 动画、启用延迟加载并优化您上传的任何图像和视频；您可能还需要减少使用的动画数量。
4. 确保可访问性
有些用户在观看网站动画时会感到晕动病。避免过度的闪烁和快速移动；视差滚动、自动播放视频和变换动画也都可能触发此问题。您可以通过指示您的网站在用户在浏览器设置中表示偏好时提供减速运动来包含动画——同时仍能满足所有用户。
Framer 使这变得简单：只需前往“站点设置”→“辅助功能”，然后点击“如果用户偏好减速运动，则禁用运动动画”。这将消除变换和布局动画，同时保留更微妙的不透明度和背景颜色动画。
5. 利用动画讲述故事
动画可以引导用户通过叙事，使体验更具沉浸感。使用Framer，您可以创建顺序动画来引导用户完成您的故事，保持他们的参与度，并帮助他们理解您的价值。
正如本文前面 tinyPod 示例所示，滚动触发动画是理想的讲故事工具，因为它们允许您编排文本、图像和对象，以配合用户旅程的每个步骤。微交互也可以成为重要的讲故事工具，尤其是在它们在故事的关键部分推动参与度时。
使用 Framer 的动画让您的网站栩栩如生
借助 Framer，您可以超越静态设计，将您的网站转变为一个动态体验，从用户登陆页面的那一刻起就吸引他们。
通过整合悬停效果、滚动触发过渡和其他动画，您可以增强网站的美感，引导用户行为，并提高转化率。
准备好让您的网站通过动画栩栩如生了吗？从我们的Framer 动画库中的最新示例中获取灵感，使用我们的模板之一启动您的设计，并注册 Framer 帐户，立即开始为您的网站添加动画。