随着CSS3和HTML5网站技术的发展，动态效果在网页设计中的作用变得越来越重要。与静态界面相比，动态过渡更符合人们的认知系统，可以有效降低用户的认知负荷。这是因为在网站界面上使用动画效果可以使元素，界面更改和层次结构之间的关系更加清晰自然。在某种程度上，动画也是用户交互的基础。那么，什么样的动态效果是有效的？小飞浏览了很多网站，总结了五个核心标准。我们现在来看看吧。

　1、自然流畅

一个好的动画效果应该是自然而流畅的。在许多糟糕的网站设计中，我们可以看到页面或元素的状态变化非常生硬和尴尬，这会让用户感到困惑：为什么某个元素会突然出现或消失？一切都有转变的过程，人们这种认知规律已经在自然界和生活中形成。因此，当网站的页面有两个或更多状态时，您需要使用动画效果进行转换，您必须确保它自然流畅，以便用户理解原因。以下图片就是一个很好的例子。当用户选择列表中的项目并单击以查看它时，小卡片将扩展为大卡片并显示许多细节。这种动画有遵循的规则。

　2、层次分明

有效的动态效应应该是分层的。一方面，分层动态可以清晰地显示页面状态的变化，另一方面，它可以有效地掌握用户的注意力并确定用户注意的持续时间。例如，在下图中，圆形浮动按钮设置为动态，它被扩展为带有3个按钮的头部导航元素。导航界面与原始界面具有明显的分离级别。虽然第一次浏览的用户很难预测这种变化，但这种形式的动画可以很好地保持用户的注意力并引导用户进入下一步。

　3、关联性

网站页面上的大多数动画效果都涉及元素或状态之前和之后的变化。虽然我们也强调前面不同层次的不同元素和状态，但层次不能轻，动画效果也应该有逻辑感，能表现出一定的相关性，让用户知道界面变化的过程。这里有两个栗子，向您展示效果的相关性。

在第一个栗子中，新界面离触发点更远，这使整个界面看起来像一个错误，用户在浏览时不那么顺畅;

在第二个栗子中，新兴的界面从触发点延伸，这种动态形式在相关性方面做得很好。

4、快速精准

如果网站中的动画效果只有一个标准，那么它必须是动画的快速而精确的效果。当我们在网站上设计过渡动画时，动作速度绝对是一个需要考虑的因素。它不能太慢，浪费游客的时间，也不会太快，让游客感到难以理解。以下是负面教科书。动画效果太慢了。这种不必要的延迟会延长用户的等待时间并使用户感到恼火。

还有一个积极的栗子。当元素在不同状态之间切换时，运动的速度是合适的，足够快且足够准确以供用户理解。小飞建议，为了平衡动态效果的效率和用户的流畅理解，动态效果应在触摸后的0.1s内开始，并在300ms内结束，这是最佳状态。但是，本指南不固定，您可以根据您网站动画效果的实际情况进行调整。

　5、简单清晰

动画效果也应该简单明了。如果用户界面上有许多动态或交互元素，用户的注意力会分散注意力，我不知道要点击哪一个。这将在一定程度上给用户造成混淆。

因此，动态效果避免一次表现出过度的影响，特别是当动态效果发生多重复杂变化时。少即是多的原则也适用于动力学。如果简化动作可以使整个UI更清晰，更直观，请务必进行更改。此外，当效果包括形状，大小和位移的变化时，请务必保持路径清晰并使状态更改更清晰。

移动性本质上是一种视觉交流方式。在设计效果时，请务必专注于他们可以为用户做些什么。网站中使用的动态，无论是有趣的还是直接的，最好与您网站的风格相结合，为用户提供清晰一致的浏览体验。实际上，动画效果并不难。关键是要选择合适的工具。起飞页面自助平台（http://www.qifeiye.com/?t_wd=a5）是一个不错的选择。它提供了网页上的所有容器。不同形式的动画设置，快点摘下页面，制作一个响应迅速的HTML5动画效果的网站！