如何在不破坏用户体验的情况下创建动画登陆页面

动画已经成为应用程序设计的重要组成部分。我们甚至可能没有注意到所有的微交互，如动画按钮、滑动条或加载屏幕，但它们都在那里，精心制作以增强用户体验。

说到网络，动画还没有普及。当然，网络制作机构利用网站动画——毕竟，它可以让他们向潜在客户展示他们的能力。

与此同时，大多数企业，即使他们来自创意产业，在将动画融入他们的网页设计方面也相当缓慢。

今天的登陆页动画是一个很好的脱颖而出的机会，是对你品牌的长期投资。它可以给你的网站访问者带来真正难忘的体验，然后他们会成为你的客户。

但要做到这一点，你必须纠正错误。

在这篇文章中，我们将简要介绍动画可以给你的网站带来的好处，将深入了解你可以使用的UX动画技术，最后将列出一些你在制作过程中可能遇到的陷阱。

废话不多说，让我们开始吧。

动画登陆页如何发挥作用

网站动画是一种多功能的工具，可以改变用户与你的网站互动的方式登陆页面在很多不同的方面。由于各种可用的动画技术，它可以是有趣的，功能或两者兼而有之-这一切都取决于你的目标。

添加动态和风格

动画可以超越任何着陆页，所以可以添加简单的页面动作，让你的登录页面看起来更漂亮，创造正确的情绪。

例如，去年冬天，SE Ranking为我们的节日祝福活动制作了一个雪花飘落的动画，让我们的登陆页面有一种真正的圣诞感觉。

你可以更进一步，让你的动画具有交互性。然后，当用户将鼠标悬停在着陆页面上的某些对象上时，它们就会开始移动。

移动可以非常温和或更明显，但它仍然会为您的登录页面添加动态。

根据整体页面设计和您选择的动画技术，这种美学动画可以成为一种点缀手段，带来一些乐趣或支持提供高端服务的一流公司的印象。

邀请用户玩游戏

动画是讲故事的有力工具，人们喜欢讲故事。他们更喜欢的是成为故事讲述过程的一部分，这是你可以在帮助下实现的游戏化．

你可以在某种程度上使用动画来邀请你的用户与你的登录页面互动，每一次这样的互动都会使故事发展。

在上面的例子中，用户必须点击登陆页面屏幕上的开始按钮，然后按键盘按钮多次，以跟踪一个苹果的轨迹，最终变成一个苹果酒。

因此，使用这种动画，你只需要发挥创意，思考如何让用户参与到产品的故事中。

如果你能想出一个原创的想法，这样一个有趣的登录页面一定会为你的用户创造一个真正令人兴奋的体验。

介绍你的产品

如果你提供的产品是软件，无论是云软件还是桌面软件，你可以使用动画让潜在客户在登录页面上测试它。

为你的产品创建一个动画原型，把它放在你的登录页面上，邀请用户进行现场演示。

通过浏览原型的不同部分并按下所有按钮，用户可以获得产品的感觉。它会对转化率产生巨大的影响。

让等待变得有趣

除了美观，有趣和吸引人，动画也可以是功能性的，并改善你的登录页面的用户体验。你只需要坚持原则语义的动画并将运动元素视为更大整体的一部分。

例如，没有人喜欢等待登陆页面加载。这就是动画预加载器存在的原因。如果执行得当，它们可以将等待时间变成愉快和娱乐的体验。

从简单的加载器到更复杂的动画解决方案，你有很多选择。在您做出选择之前，只需看看下面的两个加载动画示例。

第一个是一个装载转轮，是基于该机构的标志。

第二个更复杂:它包括旋转器和动画字母，基本上它包括位于着陆页面顶部的所有元素，并使它们逐渐加载。

所以，问问你自己为什么要在你的网站上加载动画?只是为了转移用户等待的注意力还是为了增强第一印象?

提示:不要使用十年前的加载器，比如在圆圈中移动的点——它们太基础了，不会分散用户的注意力，甚至会让事情变得更糟，因为这样的加载器与等待时间密切相关。

为了充分利用加载动画，试着用这几秒钟来开始讲述你的品牌故事。使用动画来展示你的品牌名称可以帮助你在网站开始加载的那一刻就做出声明。

用更少的空间展示更多

如果你有很多东西要告诉和展示给你的用户，但又想让你的登录页设计干净简单，动画也可以帮助你。通过使用动画，你可以在有限的屏幕空间内向用户呈现多种想法。

您可以使用动画文本将多个消息放入单个块中。根据你想传达的信息，你可以只用一个单词做动画…

.．.或者整个句子。

视觉元素也是如此——移动图片幻灯片可以帮助你一次展示很多图片，而不会占用太多空间。如果你有一个像下面这样的摄影项目，这可能真的会改变游戏规则。

在为此目的使用动画时，您给用户提供了一个选择:花一些时间阅读所有消息和观看所有图片或继续滚动。

以图片为例，除非图片本身真的很吸引人，否则用户很可能不会停留足够长的时间来观看所有的图片。毕竟，幻灯片并不是什么新鲜事物。

与此同时，动画文本看起来很新鲜，正因为如此，它们仍然很吸引人。因此，用户很有可能会把它们都读一遍。

提示:确保文本或图片相互转换的速度容易阅读/感知。

改进登陆页面导航

动画允许花哨的导航过渡。例如，当你向下滚动登陆页面时，每个新部分都可以以动画的方式逐渐加载其元素，从而以粗体显示。

这样的动画为登陆页面添加了动态，并允许您将用户的注意力集中在一些最重要的元素上。

为了让用户清楚地知道一个对象(如图片或图标)是可点击的，您可以使用悬停动画。移动可以相当温和，就像下面的例子，当你悬停时，带有页面名称的面板开始略微向上滑动。

或者你可以让悬停触发更复杂的动画，就像下面的例子。

提示:在创建动画导航过渡时，确保动画元素不会加载太长时间，迫使用户等待。

同时，请记住悬停动画在桌面上工作得很好，但在移动设备上可能会有一些问题，因为我们没有游标，所有的动作都是由点击触发的。

这是你的开发人员需要注意的，这样手机用户在访问你的登录页面时才能获得不受阻碍的体验。

注意关键元素

动画可以用来吸引人们对重要页面元素的注意，并鼓励用户执行某个操作。出于这个目的，你可以让你想要用户关注的对象动画化，同时让它周围的所有对象都是非动画的。

您可以动画按钮、表单、它们的元素或任何其他对象，让用户注意到您想让他们注意到的东西。

在下面的例子中，只有CTA消息后的三个点是动画的，但当按钮被放置在粘性标题菜单面板上时，无论用户在网站上走到哪里，它都会吸引他们的注意力。

在下面的例子中，一个移动的宇航员形象鼓励用户玩演示reel。

提示:在引人注目和令人讨厌之间有一条微妙的界限，所以在为吸引注意力而制作动画时要记住这一点。

提供视觉反馈

如果你的登陆页元素鼓励用户执行某个操作——比如填写“联系我”表单或订阅一份时事通讯——动画可以帮助他们提供视觉反馈。

在下面的例子中，一旦您按下发送按钮的通讯订阅表单，按钮名称转换为处理提供视觉反馈。不错，不是吗?

但你可以更进一步。假设您为您的NPS调查创建了一个费率-我们页面。在动画的帮助下，如果您创建一个类似于Darin Senneff的评级小部件，您可以使评级过程具有交互性，甚至有趣。

因此，动画是一种创造性的替代标准视觉反馈，如“感谢您的注册”信息。它提供了更大的强化，因为它看起来新鲜而不寻常。

提示:这里不应该出现任何问题，只要想出一些与你的品牌产生共鸣的适当图像和动画风格。

动画登陆页原则要记住

现在，让我们来一点技术。问题是，上面所描述的所有技术只有在你从技术上正确地处理动画的基本原则时才会起作用。

违反这些规则会使动画对你不利，并杀死你的动画登录页面UX。

从遵循一些迪士尼的动画原则考虑到设备兼容性，以下是动作设计师需要牢记的内容，以使动画看起来有说服力。

让物体一次自然地移动一个

你希望你的动画看起来自然，这意味着你需要让你的移动元素遵守物理规则。其中一条规则就是避免线性运动，因为它们看起来很机械，很做作。

在物理世界中，一个物体要么开始缓慢移动，然后加速，要么开始快速移动，然后减速。

让你的动画对象以同样的方式移动，以获得更自然的外观——在动画术语中，这种技术被称为easing。

另一个来自我们周围物理世界的重要运动规则是沿着弧线移动物体。所以为了看起来自然，你的运动元素应该在它们移动时遵循一条弧线。

如果你的动画包含多个元素，不要让它们同时移动。因为如果您这样做，用户将尝试跟随所有从一个元素跳到另一个元素的移动对象。

因此，他们会遭受认知过载的痛苦，甚至可能无法理解你试图传达的思想。

现在，看看下面的动画示例。

它违反了所有三个规则，所有物体都以人为的线性方式同时移动。

这是同样的动画。对象是一个接一个的动画，这使得事情更容易掌握。这里的元素以弧线移动，缓慢进出。

这个动画是为SE排名设计的页面更改监控以更好地解释该工具的工作方式，多亏了适当的转换编排，它完美地执行了其功能。

以正确的顺序显示元素

当你制作多个对象的动画时，它们的运动应该被视为引导用户注意力向一个方向移动的流。

因此，如果在一行中水平放置了几个元素(如上面的例子)，或者在列表中垂直放置了几个元素，并且它们同样重要，这些元素应该以相同的速度一个一个地出现。

但是，如果您有一个大的对象集合，其中有几行，而且每行中都有几个对象，该怎么办呢?它更复杂，因为在这种情况下，用户的焦点应该指向对角线。

为了达到这种效果，让对象从左上角移动到右下角。

注意时机

另一个关键因素是动画动作的持续时间。它不应该太快，以免用户注意到转换，也不应该持续太长时间，以免强迫用户等待。

根据研究，最佳时间在100 - 500毫秒之间，因为人类大脑无法识别任何超过100毫秒的运动。

那么，在100ms和500ms之间，你应该选择哪一个呢?一般的规则是，物体和/或它需要通过的距离越大，动画就越慢。

说到距离，你需要记住复制动画的屏幕类型。

移动设备和桌面设备被置于天平的边缘，由于屏幕空间较小，建议移动设备使用最快的速度。

对于平板电脑，稍微慢一点的节奏更合适，当你为台式机制作动画时，你将不得不进一步放慢速度。

动画风格

最后一个规则并不是真正的动画原则。这是一种预防措施，要抵制一次性使用所有动画技能的诱惑。

正确的方法是选择最适合品牌标识的动画风格，并在整个网站上坚持使用。

在不同的登陆页面上使用不同的动画风格会让网站看起来不连贯，所以尽量避免这种情况。此外，并不是每个动画效果都适合每个品牌。

例如，Bounce动画看起来很棒，但在为保险公司的网站制作动画时使用它可能不是一个好主意。

创建自己的动画登陆页面

你是否在添加动画图形对于你的登录页面或将动画编码到你的网站中，在深入研究之前，考虑这些有趣的动画类型和动画原则。