网站建设之使用动画提高网站的用户体验

最初，动画被视为一种美学，但现在它们已成为使用户交互顺畅的非常强大的工具。

然而，基本原理没有改变，由于有了更好的技术，我们有了更好的实施。

创建动画一直被认为是Web设计中最复杂的方面之一。许多设计师（仅作为设计师阅读）正在After Effects中创建动画，然后将其发送给与他们合作的开发公司。毫不奇怪，许多人没有晋级。我们稍后再会说明原因。

动画到底是什么？

动画不仅用于卡通。从小型悬停效果到全屏运动图像，到处都可以找到动画的触感。它很时髦，很有趣，而且用户友好。

这个词实际上来自拉丁语“ Anima”，意思是“灵魂”。基本上，这是将生命呼吸到静态人造物体中的尝试，这种现象在数千年前的皮格马利翁（Pygmalion）试图唤醒他的Galatea雕像时就出现了。

当您拥有最初以2D或静态形式制作的东西时，动画实际上就是发生的事情，并且它按照物理定律被赋予生命并以某种方式运动。

这是应用程序图标在加载时像球一样弹跳的方式，或者是卡通人物在屏幕上行走的方式。最重要的事实？如今，动画已根植于网页设计中，实际上是对许多网站元素的重要补充。

动画趋势

在网页设计领域，动画是您每天都会看到的越来越多的东西。关键是要适度，因为小的，简单的动画可能会引人入胜且有趣，而用户甚至根本不会考虑它。

另一方面，大型动画可以用作吸引您进入设计的有趣视觉效果。但是，如果您混合了太多的移动效果，则会导致完全混乱。

动画崛起的一个影响实际上是更多工具的可用性，这些工具将极大地改善UI生产工作流程以及设备和浏览器中的性能。

动画实际上是使用JS和CSS代码制作的，当它们向其中添加移动元素时，它们不会使网站过载。

而且，更重要的是，这些动画并不是仅仅为了娱乐而已，而是它们实际上改善了用户体验。对于网站设计师来说，这是一个很好的工具，可以帮助他们使网站更好，更易于使用。

使他们变得时髦的是现实主义。当今的设计环境具有许多最小化和扁平化设计，并且用户需要更多提示来告诉他们该怎么做。

一些动画可以指导他们，而不会过多改变外观。动画实际上可以帮助向方案添加顺序和指令，这些指令和方案可能有点过于简单，或者可能无法为用户提供足够的指导。

在这种情况下，动画将在可用性和精简的简单性之间创造一个快乐的媒介。例如，看一下金融科技应用程序。他们需要具有最大的可用性和最少的动画，以便对所有目标受众都适用。他们做的很棒。

为什么在网页设计中使用动画？

像那些横幅广告一样，动画是设计师玩的另一件事吗？还是它们是设计师可以使用的真正必要工具，就像他们使用颜色，网格和流程一样？

动画的主要用途是提高可用性。一个简单的动画实际上可以是一个很好的指导工具，可以帮助人们了解他们应该单击哪个按钮，或者他们应该在网站地图中的下一步。许多设计师会将简单的动画与用户工具配对以单击或滚动。

如果正确使用动画，可以为用户提供有价值的反馈。您以错误的方式填写了几次表格，并且显示了一个消息框，突出显示您的错误并告诉您如何解决这些错误？

经过深思熟虑的动作可以指导用户并为他们提供背景信息，您甚至有机会给用户一个惊喜，使事情变得更加有趣和引人入胜。

在网页设计中，动画是一种动作，如果您不以纯粹的装饰方式使用它，则实际上非常有用。优秀的UX和UI设计人员通常会使用动画来改善整个工作流程。

显然，动画的第二种用途是美学。动画可以用作很好的装饰。通常，动画的目标是纯粹的视觉效果，并且在一定程度上是可以接受的。

装饰性动画可以帮助在用户和界面之间建立情感联系。动画还可以激发视觉兴趣，并确保您的用户在更长的时间内与您的网站保持互动。

当创建纯视觉效果的动画时，请考虑该怎么做。考虑一下您希望用户拥有哪种连接。

应该是有趣还是令人惊讶？您是否想放置一些应该共享的独特内容？即使是纯粹视觉的东西也应该有某种目标。

使用动画的另一个原因是传达某种功能。动画可以是一个很好的工具，可以以直观的方式向用户显示特定内容的工作方式。不要因无故过度使用视差滚动效果而犯某些错误。

动画还有助于引导用户。动画不仅是为了动画，还是与转换有关。它们可以帮助您的用户理解该页面，并将他们引导到应单击的特定位置。

您可以使用它们来显示信息。除了提示功能外，还可以使它们成为揭示辅助信息的好工具。

例如，您可以让用户将鼠标悬停在内容上，并显示其他选项。

而且，由于悬停内容的“隐藏”默认状态，您只想将其用作辅助信息，而对于想要浏览您的网站的用户而言，实际上没有什么是至关重要的。另外，请记住，悬停功能不适用于移动设备。

大型动画与小型动画

当涉及到动画时，有两个类别，而且它们很容易理解，您有大大小小的动画。

大型动画可以通过它们具有的比例来识别。它们通常采用带运行时间的视频形式，并且它们占据了屏幕的相当大的一部分，让人想起了一部短片。

您可以将它们用作整个设计中的焦点，并且用户实际上不必执行任何操作即可查看运动中的动画。

它们在当今很常见，视频背景就是一个很好的例子。如果动作很大，则也可以将其视为大型动画，例如整页的下拉菜单。

这些动画是您进入页面时首先看到的东西，因此，很难错过。

相反，只有在开始与网站进行交互时，您才会发现小型动画。它们可能是悬停状态，或者是可用性指南或工具。

它们更像是强调整体美感的口音，而不是设计的重点。它们不像大的那样明显，它们为设计提供了更多的支持作用。

示例包括简单的淡入淡出或尺寸略有变化。您可以将它们视为您不会注意到的动画对象，它们在添加总体体验的同时非常自然。

设计出色的动画

组合动画时，应考虑一些方面。

• 您想传达什么，但是您不能仅使用UI来传达？
• 用户需要了解什么？
• 绝对最微妙的效果是什么？
• 您想唤起什么感觉？
• 屏幕阅读器可以访问UI片段吗？

从小开始

当您将动画更多地视为设计工具而不是样式选择时，最好是从小做起。

小型，流畅的动画将表现更好，大型，华丽的动画必须绝对有目的，而且不仅美观。

您将意识到的另一件事是，一切都是角色。当然，乍看之下这似乎并不直观，但请考虑一些事项。网站无缝设计的关键是网站具有同情用户的能力。

• 是什么让您感到放心？
• 获取信息的最快方法是什么？
• 哪个元素最引人注目，您可以直接注意它吗？

动画应该或应该快速发生

我们如何与真实物体互动？有时我们走得更慢，有时走得更快。速度可能取决于大小，任务或我们是否正在处理不希望溢出的充满液体的物体。

通常，我们可以很快地拾取和移动物体，甚至单个动作甚至可能在几毫秒内发生。

这是我们要用于用户界面动画的相同度量。如果时间更长，人们将对您的产品或他们的机器或两者失去耐心。

如果应重复使用该产品，则尤其如此，因为即使动画既有趣又有趣，但如果有人必须多次查看它，它就会失去吸引力。

偶尔让东西弹跳

物理物体会反弹。有些不擅长此事，但是如果没有太大的空气阻力，如果在坚硬的表面上跌落足够远，任何东西都会反弹。

与UI元素进行交互就像与小的硬对象进行交互一样。当您将它扔到一侧时，它会弹起一点。如果将其放下，它会弹起一点。

因此，使动画反弹，尤其是在垂直移动的情况下，可能会有所帮助。保持幻觉至关重要。

您需要教动画自己生活，这是开发过程的很大一部分，这可以通过以下两种方法来实现：

• 动画应该朝着提供实际信息的方向发展，引导用户的注意力并吸引理性的行动。
• 动画的设计应采用与页面其余部分相同的方式进行设计– 调色板，情节提要和构图，所有内容都应匹配。
• 动画需要遵循品牌指导，吸引用户的情感，并成为生活风格指南的一部分。

 运动中的事物需要一点时间才能停止。而且，如果您将静止的对象置于运动状态，则将花费一些时间来加速运动。是的，物理学！

因此，当您使事物移动时，请确保它们有一点时间（当然，以毫秒为单位），以使它们放慢速度或加快速度。这被称为“缓动”，您实际上会发现它内置在CSS中的功能。

摘要

动画很重要，好的动画无疑会使用户的体验好得多。例如，这可以是情感联系的形式，也可以只是使站点更易于使用。

这是一种设计技术，不会很快就走到任何地方，因为它即使在最繁琐的任务中也能吸引用户，增加了设计的生命力，并使您真正脱颖而出。

如果要使情感从可用的网站跃升为理想的网站，动画是核心组成部分。