type
tags
category
icon
password
Multi-select
优先级
重要度
状态 2
预计结束时间
添加日期
URL
状态
分类（人工）
总结（AI 摘要）
status
您花费巨资开发了一个精美的网站或功能强大的应用程序。但问题是：当用户进入主页时，参与率就会下降。用户的点击、探索或互动不如你预期的多。界面看起来很棒，但感觉......静止不动。
这就是 用户界面动画的作用 所在。网页之间的微妙过渡、像明胶一样弹跳的滑入式操作按钮、悬停时会变色的网站按钮、让用户参与其中的加载指示器，或者提供即时反馈的微互动--所有这些元素共同作用，让你的界面充满活力。
什么是用户界面动画？
Peerpoint管理合伙人莫莉-安塞尔（Molly Ancel ）将用户界面动画定义为 "动作驱动的设计元素，通过为界面组件添加视觉效果，让用户体验感觉更自然、更流畅。它们可以是引导用户使用 移动应用程序的复杂上机序列 ，也可以是 在网页加载过程中让用户保持注意力的弹跳球等简单动画"。
这些动画可将您的网站或应用程序转变为一个动态、互动、吸引人的平台--吸引用户的注意力，鼓励用户留下来探索，并引导他们采取行动。
可使用的用户界面动画类型
用户界面动画的种类繁多，但您只需要几种关键的动画就能为您的界面增添活力。让我们快速浏览一下。
- 微交互： 这些是帮助用户进行交互和接收反馈的小型功能性动画。这包括按钮悬停效果、切换开关和聊天应用中的打字指示器。
- 加载和进度动画： 让用户在页面或功能加载时保持参与。进度动画包括旋转器、加载器、骨架屏幕、进度条和百分比计数器。
- 导航过渡： 负责将用户从一个页面或部分顺利引导到另一个页面或部分。例子包括滑入式菜单、页面转换（渐变、轻扫、缩放效果）和基于滚动的动画。
- 反馈和确认动画： 与微交互类似，它们能强化用户的操作。例如，表单提交后的成功/失败动画、密码输入错误时的 "晃动 "效果，以及动态显示的复选标记或错误图标。
- 吸引注意力的动画： 这是最常见的动画，通常用于突出重要元素。它们包括脉动的行动召唤（CTA）按钮、闪烁的通知或徽章，以及悬停时出现的动画工具提示。
- 上机和教程： 入门动画通过引人入胜的 动作 引导用户使用新的应用程序或网站 。这包括动画演示、移动应用程序的手势以及分步式用户界面单元。
- 视差动画和滚动动画： 这两种动画在现代设计中名列前茅，有助于创造深度和参与感。背景元素的移动速度比前景元素慢、用户滚动时出现的元素以及基于光标移动的 3D 倾斜效果都是可用的示例。
- 转换和变形动画： 这些动画通常涉及从一种形状到另一种形状的转换。例如，图标在点击时会改变形状、面板会展开或折叠，以及动画调整元素大小。
用户界面动画如何帮助参与？
具体方法如下
吸引用户注意力
用户界面动画通过吸引人们对基本要素的关注，帮助人们打破杂乱无章的局面。一个脉动的 "行动号召 "按钮、特价商品周围的微妙光晕或悬停时出现的工具提示，都能自然地将用户的视线吸引到他们需要的地方。
为用户操作提供清晰的视觉反馈
"我们可能都有过这样的经历--反复移动鼠标到按钮上，观察它的颜色变化。这种微妙的变化让我们确信按钮是互动的，可以点击"， Claro客户服务副总裁 Stanislav Khilobochenko 说。
同样，当密码输入错误后表单抖动或成功提交后出现复选标记时，这些动画会提供即时反馈，减少不确定性并提高可用性。
如果没有这些视觉提示，用户可能会感到迷茫或不确定他们的操作是否已被注册。
引导用户顺利完成复杂的工作流程
如果只是突然弹出一个菜单，用户就不会有任何上下文和方向感，在多功能应用程序中尤其如此。过渡箭头、花哨的滑入或平滑的渐变效果等用户界面动态提示有助于解决这一问题。
这些提示自然地引导用户，向他们展示元素的来源和去向。
增强故事性，强化品牌形象
RapidDirect首席执行官 Leon Huang 认为："动画视觉效果可以为网站叙事增添活力。例如，旅游网站可以使用微妙的动作来展示旅程--飞机起飞、地标出现或机票滑入数字钱包。这比文字更能表达细节，让网站访客或应用程序用户目不转睛地盯着屏幕"。
同样，用户界面动画可以反映品牌形象并加强一致性。跳动的按钮、夸张的流行语和动画吉祥物都描绘了儿童学习应用程序应有的样子。另一方面，流畅、未来主义的运动元素和视差滚动动画则更能体现科技初创公司的价值。当这种方法与交互式数据体验（如 数字产品护照）相结合时，就会变得更加强大 ，后者利用透明度和详细的产品叙述来建立信任并提高用户参与度。
使用正确类型的动画最终会与用户产生共鸣，降低他们跳出的几率。
使加载时间感觉更短，性能明显提高
你可以使用多步骤骨架加载器、分层进度指示器或游戏化视觉干扰来做到这一点。
两个动画均耗时 6 秒，作者： José Torre
上述两个动画的加载时间都是 6 秒。不过，第二个动画是分层的，对时间感知的影响更大。
最大化网站和应用程序用户界面动画的 6 个技巧
如果使用不当，用户界面动画会降低参与率。让我们来看看如何避免这种情况并最大限度地利用它们的好处。
保持动画的目的性和预见性
Intermedia营销传播副总裁罗布-戈尔德（Rob Gold） 说："用户界面动画不应该只是愉悦，还应该具有功能性。要做到这一点，方法之一就是确保它们不是设计过程中的事后考虑。
这意味着它们应该是线框的一部分，并在头脑风暴阶段就发挥作用--无论是讲述故事、反映品牌形象、调整时间感知，还是执行其他任务。这样可以确保与应用程序或网站的其他组件无缝集成。
优先考虑性能并优化速度
动画固然精彩，但 如果不加以优化， 也会降低 网站的运行速度 。为避免出现这种情况，请确保在上传每个组件之前对其进行压缩，或减少使用的动画数量。您还可以使用 LottieFiles 压缩器 等平台 ，在不影响质量的情况下优化 JSON 动画。
使用动画引导用户注意力，而不是分散注意力
"网站和应用程序的每个页面上应该有多少 UI 动画并没有硬性规定。但是，过多的动画会让用户不知所措，而不是提升用户体验。 FlowSavvy创始人雅各布-巴恩斯（Jacob Barnes ）建议说："因此，关键是要取得平衡，使用用户界面动画来增强设计，而不是主宰设计 。
您还应避免使用过多的干扰元素，如持续闪烁、快速移动或不必要的跳动。它们会让用户的体验感到混乱和沮丧。
实施微互动，提高参与度
微交互式用户界面动画的一个例子是，当你与朋友交流时，在 Whatsapp 聊天栏中看到的打字指示器。这些元素与用户操作相关联并提供反馈，最终提高了参与度。在网站上，您可以在按钮上实现悬停效果、颜色变化以及点击时的响应转换。
确保动画符合品牌个性
Your Doctors Online创始人兼首席执行官 Raihan Masroor 说："就像应用程序和网站设计的其他组成部分一样，动画的选择也能传达或反映您的品牌形象。一个时尚、简约的品牌可能会使用平滑、微妙的过渡效果，而一个俏皮、充满活力的品牌则可能会采用跳跃、动态的效果。
除了这些例子，你还可以做其他任何事情，但你必须确保每一个用户界面动画都让人感觉是有意为之，并与你的品牌调性保持一致。
跨设备测试动画，确保性能流畅
"您需要交叉测试您的用户界面动画在不同屏幕上的性能。这包括移动设备和台式机的加载速度、首次出现的显示效果、 长宽比和帧速率的一致性，以及对用户交互的响应速度。 Stairhopper Movers 创始人兼总裁 Adrian Iorga 认为："在高端设备上看起来流畅的动画，在低功耗硬件上可能会出现滞后或卡顿 。
您还应该进行 A/B 测试，看看哪种动画能吸引更多的参与。
总结
与静态设计相比，用户界面动画为网站和应用程序增添了活力，这对提高参与度至关重要。要想取得最大效果，除了提供美观的好处外，还要确保您的用户界面动画是经过深思熟虑的、有目的的。优先考虑性能并优化速度，防止访客跳出。
实施微观管理以提高参与度，并确保每个用户界面动画都符合您的品牌信息和形象。最后，在不同设备上测试您的动画，以保持在所有屏幕上的一致性。 从头开始创建优秀的用户界面动画需要大量的工作和资源。或者，您也可以通过 LottieFiles 获取预先设计好的可编辑动画，以满足您的互动需求。
- 作者:xingyan
- 链接:http://blog.xingyan.me/article/23864cad-d821-8073-9a58-ec9019596980
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
