网络动画的基本规则

Web动画可以提升网站的设计，但是实现的动画可能会严重损害用户体验。常见的陷阱包括毫无意义的动画，不适当的持续时间和不合适的动画类型。即使使用技术正确的动画，整体样式也可能与网站的设计或其他动画发生冲突。此外，最佳动画策略在不同的数字平台上有所不同。营销网站的动画将与产品网站或移动应用程序的动画不同。尽管基本运动原理保持一致，但内容类型和屏幕尺寸会影响动画设计的细微差别。

例如，将引人入胜的动画添加到经常使用的表单上似乎很吸引人，但是重复的动画可能很快变得令人讨厌。

有效的动画需要仔细的计划和考虑。本文着重于将动画整合到产品网站上，建立指导原则而不是严格的规则。

何时有效使用动画

执行良好的动画通过提供上下文并指示进度来增强用户的理解。以下是一些理想的情况：

UI块过渡

动画有效地强调了UI元素的添加，去除或重新定位。

内容加载

加载动画，无处不在，在网络设计中充当视觉占位符，使用户放心，内容正在加载，同时又可以防止震撼内容回流。事先知道内容块高度时，这些最有效。

视觉提示

微妙的动画（如发光或涟漪）可以指导用户了解复杂的UI，突出显示关键功能或动作而不会过于侵入。

微交往

微交往为用户操作提供了立即的视觉反馈，确认完成并增加了愉悦感。这些可以简单而有效地传达响应能力。

何时避免动画

相反，在这些情况下，动画可能有害：

路线过渡

尽管在移动应用程序中常见，但由于动画区域较大，全页路线过渡通常会在桌面网站上破坏，从而导致更长的等待时间和运动灵敏度用户的潜在可访问性问题。

初始页面加载

虽然适合营销网站引起人们的注意，但在初始页面上使用动画来用于产品网站可能会变得重复和烦人。

意外动画

动画应与用户期望保持一致。意外动画会引起混乱，而不是增强体验。

表演问题

并非所有设备或浏览器都平等地处理动画。考虑使用prefers-reduced-motion ，以允许用户选择退出动画，以确保不同平台上的可访问性和性能。

目的不清楚

动画应始终有明确的目的。多余的动画会分散注意力，并对用户体验产生负面影响。

动画持续时间指南

动画持续时间至关重要。太长了，动画感觉迟钝。太短，详细信息丢失或用户迷失方向。

距离和持续时间

通常，较长的距离需要更长的持续时间，但是应避免持续时间超过400ms。智能动画设计也可以最大程度地减少感知的持续时间，即使有重大的过渡。

用户触发与系统触发的操作

用户触发的操作受益于较短的持续时间，而系统触发的操作（如工具提示）可以使用更长的持续时间。

异步持续时间

输入和退出动画可能具有不同的持续时间。例如，子菜单可能会迅速进入，但退出更慢以避免中断。这并不总是适用于较大的UI块，其中可能需要更长的时间。

一致性和品牌

在产品中保持一致的动画持续时间，与整体品牌个性保持一致。

动画复杂性

动画复杂性应与使用频率成反比。经常遇到的动画应该更简单。

虽然复杂的动画在少量使用时可以有效，但过度使用可能会令人难以置信。考虑在涉及加载或处理延迟的情况下使用更复杂的动画。

放松功能

适当的宽松功能应遵守物理定律。对于输入动画，请使用弹跳效果立即注意或平滑加速/减速，以更自然的感觉。

结论

非凡的动画需要注意细节。这些准则是创建有效且可访问的Web动画的起点。请记住，掌握动画需要时间和练习。优先考虑用户体验和可访问性，以避免创建损害整体网站可用性的动画。

以上是网络动画的基本规则的详细内容。更多信息请关注PHP中文网其他相关文章！