网站建设使用css动画提高网站的动态效果和用户体验

在网上购物可能是一种令人沮丧的体验。滚动浏览产品墙，了解购物车中的内容和不在您的购物车中，以及浏览无尽的结账屏幕令人筋疲力尽。

网页设计师和开发人员需要与电子商务网站合作，以减少分心，使转换路径无缝化，这将为他们的客户提供更愉快的体验。

对于很多人来说，网站上的动画等于分心。闪烁的广告，GIF和不必要的议案可能会令人沮丧，并阻止用户留在现场。然而，使用适当的限制来完成的动画实际上可以帮助改善用户体验。

动画作为可用性的工具，而不是分心

最好的网站动画既有目的又有风格。故意动画可以创造出接近人们在与现实生活中的物体交互时所经历的感受和感知水平。

考虑加拿大演员Ryan Gosling的这部动画。他接收信息和流程，然后不赞成地摇头。甚至没有听到发生了什么，我们可以理解他不同意他提供的信息。

右边是一个条纹结账表单。当用户尝试提交表单而未填写必填字段时，表单像人一样摇晃会在不赞同的情况下摇头。

这种交互可以帮助提升用户体验，因为理解表单没有提交的原因实质上是从他们的大脑上卸载到屏幕上的动画。用户花费更少的精力来理解网站的行为，并且可以将精力集中在更重要的事情上，例如现场购买产品。精心设计的动画可以减少不必要的认知负担，并有助于将注意力集中到手边的任务上。

理解的科学

认知负荷是指工作记忆可以处理的信息总量。每一天，你都会受到可以看到，感受，听到，味觉和嗅觉的信息的轰击。你的感官记忆会过滤掉大部分这些信息，但会让你留下足够长的时间传递给你的工作记忆。

当你的工作记忆获得的信息比舒适地处理更多的信息时会发生认知负荷过重，这会导致挫折和决策失败。

对认知负荷的研究可以帮助告知您何时以及如何使用动画，以便信息按照用户完全理解的步调和复杂程度呈现，而不会被淹没。

支持清晰，功能丰富的用户体验的三种战略方法是展示和讲述，连接上下文以及呼叫和响应。

减少认知负荷的策略

展示和讲述

电子商务网站的一种常见做法是在产品墙上显示所有产品。如果不提供重点，用户可以体验决策疲劳并分心。显示，而不是告诉你，你想让用户探索哪些产品，而不是将发现的主要责任放在用户身上。

1.辉煌的自行车

辉煌的自行车通过多个屏幕循环用户，以帮助他们决定哪种自行车最适合他们。在将用户导航到推荐的自行车的产品页面之前，每个屏幕询问用户关于他们的身高，骑行风格以及他们计划骑在哪里的问题。

这些动画屏幕还有助于教育用户了解购买自行车过程中的各种考虑事项，所有这些都是通过让用户完成旅程而不是通过文本解释。

2.漂亮的洗衣房

在尼斯洗衣店购买袜子的过程通过使用动画成为一种有趣的DIY体验。Nice Laundry可帮助用户在屏幕上选择选项时自定义包装。数字方块显示选定的袜子并为进度条设置动画，以显示用户剩下多少袜子可供选择。

用任何书面内容都可以解释的更多信息通过动画传达出来，使得创建定制包成为一个愉快的过程而不是一种负担。

连接上下文

随着设备和屏幕变得越来越小，脱屏模式和分层界面已经出现，以帮助保持用户体验的清洁和剔除。这些模式会在需要时在可视屏幕区域外面保留一段内容。动画通过视觉线索和转场连接这些屏幕。

创建电子商务网站时遇到的最大挑战之一是在产品添加到购物车时向用户显示。当人们无法快速识别他们已经将物品添加到购物车时，它会产生不必要的摩擦。

如果真实生活中的购物体验表现得像典型的在线体验，那么用户会在购物时将产品投入无穷无尽的空间，然后必须找到物理结账，希望他们选择的产品能够以某种方式那里。连接上下文解决了这个问题。

棉花局

棉花局通过其屏幕导航和购物车进出视线，从视觉上强化了位置。这些图标还通过指向屏幕所在的方向以及它将返回的位置来提供视觉提示。

保持动画的持续时间，缓动和移动一致有助于保持这些连接，因此体验感觉到预期并且不震动。

2.概念添加到购物车

另一种选择是让购物车始终在屏幕上可见。在此概念演示中点击“添加到购物车”后，产品的一个小图像将从卡片动画到购物车。这可以避免用户想知道项目的位置，并允许用户在页面上轻松编辑购物车。

保持用户在产品页面而不是导航到购物车可以鼓励继续购物。动画的另一个有趣用途是允许用户在不访问单独页面的情况下查看产品的多个视图。

呼叫和响应

视觉反馈对于任何数字体验都至关重要。它使用户感受到控制，控制意味着在任何给定的时间知道并理解他们在系统中的当前位置。在物理世界中，按钮，控件和其他对象响应我们与它们的交互。人们希望网站上的控件具有类似的响应水平。

当用户准备购买产品时，唯一的焦点应该是让他们通过付款过程以最小的摩擦。过多的结帐屏幕会减慢用户的速度，甚至会让用户感到困惑。通过向用户提供反馈，我们可以让他们知道发生了什么，现在发生了什么以及接下来发生了什么。让用户了解并确信他们正在按计划完成任务很重要。

您可能还会喜欢： 6个动画库以节省时间和WOW客户端。

1.为他

动画可以成为指导用户完成结帐过程的有用工具。对于他来说，显示通过描述性图标的步骤数量，以帮助用户在完成订单之前知道他们的期望值。他们的进度很容易跟踪，并提供了一个即将到来的暗示，使体验变得易于管理，而不是压倒性的。

2.概念性注册表格

许多电子商务网站希望用户在购买之前注册一个帐户。由于强制注册，35％的用户放弃购物车。要求您的用户在结帐前注册帐户是一件很难的事情。您可以将其变成一种有趣的体验，以便用户更容易这样做。在这个注册表单上，当用户输入他们的电子邮件地址时，一个雪人手表会在输入密码时被注意到，以便注意敏感信息。动画提供了展示个性和品牌气质的绝佳机会。

使用动画来帮助用户

通过遵循上述策略，您可以大幅降低用户的认知负荷，并确保他们的注意力集中在当前的任务上。使用正确的动画，您可以引导用户完成任务，提供视觉线索，甚至添加一点乐趣。