本文将介绍功能性动画在增强用户体验以及如何将功能性动画合并到您的网站或移动应用程序中的作用。设计更好的用户体验涉及各种因素，包括网站设计，功能，产品质量，客户服务和电子商务。虽然大多数用户体验解决方案需要广泛的研究，测试和仔细规划，但我们可以使用的一些最佳工具通常是小而简单的事物，可以产生持久的印象。功能动画就是其中之一，它在用户体验中起着非常重要的作用。

虽然许多网页设计师可能不考虑动画的成本限制，放置问题和网站性能，但现在可以将动画添加到任何类型的网站，这是可行且经济实惠的。重要的是，网络专业人员可以理解和欣赏动画在网站上的潜在价值。

动画头像上传UX由Miguel Oliva Má rquez。

　在人类生物学和自然中

人类是视觉驱动的动物，图像是加强联系的最佳方式之一。动画融入运动，使视觉更有趣。人眼自然地移动，因此视觉动画自然比静态显示更具吸引力。

现代设计中最流行的原则之一是极简主义，或尽可能少地使用设计元素来创造视觉兴趣。花哨，过度的设计偏离了初衷。通常，人们忙碌，困惑，或者很难快速评估有价值的信息，并且他们完全从信息中删除。

结合动画可以增加参与度，但重要的是不要过度使用它。与现代设计的大多数其他方面一样，少即是多。

　微交互赢得用户

向您的网站添加功能性动画的最佳方式之一是通过微交互。这是植根于人类心理学的另一个概念：人们想知道他们何时成功完成了一项行动。

推特最喜欢推特。

考虑Twitter：当你“喜欢”推文时，警告图标以灰色开始，一旦按下它，它就会点亮一个小而快的裂缝。这个小动画非常有趣，它让用户以一种有趣的方式知道他们已成功地“喜欢”推文。它还可以提醒他们在滚动时不小心点击“赞”按钮。

　如何将动画融入你的网站

有许多方法可以将功能性动画融入微交互中。找到您希望访问者点击的网站部分，或找到包含最有价值信息的部分。每个网站都不同，因此您可以在设计精美的网站页面上找到更多感兴趣的视觉点。

查找访问者可以操纵页面内容的区域。如果某个部分扩展，请考虑如何为该流程设置动画。如果您希望用户提交联系信息，请确保您拥有一个小动画，让他们知道他们已正确发送了他们的信息。

Adriá n Somoza的投资组合探索。

如果您希望功能性动画成为您网站真正有价值的方面，那么您需要使用动画作为向访问者传达反馈的方式。让他们知道他们在做什么，表明他们已经正确地做了一个动作，或者使用精心设计的动画来指导他们与您的品牌一起旅行。

为移动设计

如果您还没有采用移动优先网站设计方法，那么您就会落伍。移动设备上的互联网流量每天都在急剧增长。越来越多的人在智能手机和其他移动设备上使用互联网，从观看电影，支付账单和购物，到探索他们喜爱的品牌和媒体的内容。对于现代公司而言，设计响应式移动浏览网站至关重要。

由于人们使用拇指而不是鼠标来浏览移动网站，因此在规划动画时务必记住拇指导航。人们在滚动时不小心点击链接或提交表单是很常见的，因此请确保您的移动网站易于浏览。一旦确定访问者不会在移动网站上刷卡，请查找可添加功能动画的位置。

　功能性动画的最佳实践

小动画可以使您的网站对访问者更有用。即使只有少量添加，经过深思熟虑的计划也可以让枯燥的页面更加有趣。某些网站的导航按钮可在用户将鼠标悬停在其上时更改大小或颜色。这些简单的动画不仅看起来更有趣，而且还让用户知道他们将去哪里或者如果他们点击那个地方会发生什么。

Google提供的材料设计动作指南。

确保动画不会花费太长时间也很重要。记住，少即是多。快速，引人注目的动画将比冗长和复杂的动画更有趣和吸引人。我们提倡短时间跨度，因此不要添加延长动作完成时间的动画。访客应该将这些动画视为成功完成动作的有趣且有趣的小指令。

保持动画短小精彩的另一个原因是页面加载时间。人们不喜欢等待，大多数现代消费者没有耐心等待缓慢加载的网站。如果庞大，繁琐的动画文件正在影响您的网站加载时间，您网站的访问者将很快失去兴趣并浏览竞争对手的网站，而不是不稳定，缓慢加载的网页。抗衡。

　注意一些常见的动画陷阱

除了减慢网站的加载时间和丢失不注意的访问者之外，太多的动画会使您的网页看起来过于装饰和故意浮华。大胆，华丽的角色和长形动画的日子已经一去不复返了，这些动画旨在让潜在客户大吃一惊。

今天，动画的目标应该是改善网站的功能和吸引力。不要只是动画——只需确保所有动画都有目的，而不会减少页面内容。

带上您自己的信息也很重要。如果您启动新网站或开发新的移动应用程序，则需要向新用户展示如何导航和充分利用他们的时间。

Dropbox /指南由上野。

开发一个教程流程，向用户显示应用程序或新站点的所有功能和控件，并在执行期间考虑每个步骤的动画。这不仅会在视觉上更有趣，而且客户也会喜欢有趣，引人入胜的内容，并且更有可能享受在您的应用上花费的时间。

打破平衡

最终，功能动画的成功整合取决于可用性。如果您正在考虑是否要将动画添加到网站的任何部分，请考虑添加动画是否会增强用户体验。如果答案不是明确的“是”，那么可能不值得做出改变。尝试在创建更多视觉兴趣点之间找到平衡点，而不是看起来太忙或太浮华。

功能性动画应该让您的网站访问者感到高兴，让他们感到更加难忘和迷人的网站和内容体验。通过专注于极简主义和响应式设计的基本原则，您可以创建更多视觉影响和访问者感兴趣的网站。