和平建设网站：当在网页设计中使用动画是有意义的

和平建设网站网页设计师最常见的错误之一就是包含太多的动画元素。人们的想法是：“动画很酷，所以越多越好”。然而，太好的事情，如这可能会影响您的网站的可用性负面。

动画，就像其他的网页元素一样，需要实现一个实际的目的。在这篇文章中，我们将讨论一些最常见的动画类型，你可以在网上看到。然后，我们将分解四种情况，在您的设计中使用动画是合理的。

我们来看看！

浅谈网页设计中的动画

动画在网络上随处可见，尽管有时你可能没有意识到。在过去，动画要明显得多。例如，找到整个网站并不奇怪在Flash上运行每个元素都是动画。

谢天谢地，那些黑暗的日子已经过去了。如今，把动画作为整体设计的一部分，而不是核心设计，已经变得更加普遍了。网络上最常见的动画例子之一是滑动图库中的过渡。其他动画甚至更微妙。例如，当您在按钮上悬停时更改颜色的按钮：

另一个为目的服务的简单动画的例子是当您单击它们时突出显示的字段。这样，您总是知道您要输入哪个字段：

然而，并不是所有的网络动画都是如此的良性。仍然有大量的例子提供更多的闪光灯，而不是实质(例如，网站劫持你的滚动)。

在我们看来，在不使用动画的情况下构建整个网站是完全可能的，所以如果您选择添加它们，它们需要实现一个目标。也就是说，它们应该使您的网站更容易使用，就像前面提到的所有示例一样。然而，许多人陷入陷阱，想要动画的每个方面，他们的网站只是为了增加一些视觉天赋。

想要一个时尚的网站是没有错的。然而，太多的动画会导致视觉过载。在某些情况下，他们甚至可能放慢你的网站速度，取决于您如何实现它们，这是您想要的。不惜一切代价避免。考虑到这一点，让我们来谈谈在网页设计中使用动画确实有意义的一些情况。

在Web设计中使用动画是有意义的4种情况

记住-这并不是一个确定的情况下，你可以使用动画在网页设计。这只是从我们的经验中产生的一系列建议。如果有另一种情况，您认为动画可以提高您的用户体验，请随时尝试！

1。使用“微交互”突出显示操作

动画不需要浮华才能有效，因此就有了“微交互”这个词。

当我们谈论微交互时，我们指的是带有单用例的简单动画。以上面的例子为例，当您单击按钮时，您选择的按钮会突出显示它本身。这种类型的动画实现了两个目的，当您与元素交互时，它会为您提供视觉反馈，并向您提供有关如何使用它的信息。

理想情况下，您希望微交互是微妙的。它们不应该从它们突出的元素中窃取聚光灯，而应该简单地使它们更容易使用。但是，很难确定何时在站点上实现微交互。毕竟，即使是最直截了当的页面，通常也有数十个元素，您可以潜在地动画。以下是一些关于何时实现它们的快速提示：

· 在打开或关闭功能时突出显示。

· 作为一种让用户知道特定操作是成功的方法，例如通过联系人表单提交消息。

· 在突出显示特定信息片段时，例如表中的价格。

· 生动活泼网站上的图标.

至于多么，怎样要实现微交互，如果不执行了解如何绕过层叠样式表(CSS)。但是，Divi为您提供了内置选项使几乎每个模块上的许多元素动画化。我们以前也说过六种微观相互作用您可以使用主题实现。

2。使用动画显示隐藏菜单

隐藏菜单是一些有争议的设计元素。很多人认为菜单应该总是可见的因为它们是用户浏览网站的主要方式。我们会倾向于同意，但在某些情况下，隐藏菜单是有意义的，如果他们是容易访问。

如果您正在处理大量页面，也可以使用动画下拉菜单。在这两种情况下，使用动画都是有意义的，因为它有助于软化隐藏菜单的显示。没有它们，菜单就会立即出现在屏幕上，这可能太突然了。

至于如何添加动画到您的菜单，Divi包括几个选项，您可以使用。例如，您可以在淡出、展开、幻灯片和翻转动画之间进行选择。你的下拉菜单:

和平建设网站当涉及到隐藏菜单时，您也有几个选项。例如，您可以设置一个带有滑动显示的“汉堡包”菜单，这可以使设计非常干净：

无论您选择实现哪种类型的动画，请记住，您需要在桌面和移动设备。菜单是你的网站必不可少的一部分，所以你需要确保动画不干扰他们的功能。

3.使用Hover动画显示隐藏信息

简单的悬停动画是一个伟大的方式，包括更多的信息到更小的空间。

悬停动画是一个伟大的方式，以最大化您提供的信息，在可用的空间。例如，您可以向图库项目添加鼠标覆盖效果，以显示每张图片的名称或拍摄日期。

悬停动画的关键是添加访问者有兴趣阅读的信息。例如，使用divi，您可以创建一个节来介绍您的团队成员，并添加当人们显示的传记。鼠标移到他们的照片上:

如果你想保持简单，你也可以使用悬停动画作为微交互。这样，当来访者鼠标在元素上移动，他们会知道它的“工作”，或得到一个关于如何使用它的线索。

这两种类型的悬停动画都要求您使用一些CSS。然而，它们很容易实现，并且可以为其他简单的网站增加一些深度。

4。使用转换创建滑动图库

滑动画廊是优雅的，它们使你能够讲述一个故事。

在所有的方式添加动画到您的网站，滑动画廊可能是最常见的。事实上，大多数人可能没有意识到，当他们从一个图像滑到另一个图像时，他们看到的是简单的动画。

没有动画，图像之间的转换将是即时的，这可能是不和谐的。在这种情况下，动画主要是关于风格，但它们仍然可以使您的画廊更加用户友好。

确实有一大堆插件您可以使用添加动画图库到WordPress，每个都有自己的一套效果。但是，如果您使用的是Divi，那么首先不需要添加任何额外的插件。二.迪维滑块模块使您能够向任何页面添加滑动图库，并自定义它们的转换：

大多数网站在页面顶部使用“滑块”。但是，您可以在许多其他情况下打破模型并使用滑动图库，例如展示推荐信你的产品和服务。

结语

太多的好事往往结局不好，动画也不例外。当涉及到网页设计时，您希望添加到页面中的每一个元素都能实现一个目标，而不仅仅是看起来漂亮。此外，你必须记住动画可以减缓你的网站，这是你想要避免的事情。

和平建设网站如果想让你的网络动画得到很好的利用，这里有四个场景，在这些场景中实现它们是有意义的：

1. 使用微交互突出显示操作。

2. 使用动画显示隐藏菜单。

3. 使用悬停动画显示隐藏信息。

4. 使用转换创建滑动库。

你对何时在网页设计中使用动画有任何疑问吗？在下面的评论部分提问！