更好的用户体验之路涉及多种因素，包括网站设计和功能，产品质量，客户服务，电子商务等。尽管大多数用户体验计划都需要进行广泛的研究，测试和全面的计划，但我们可以使用的一些最佳工具是小型，简单的东西，它们可以给人留下深刻的印象。功能动画就是其中之一，它在UX中扮演着更大的角色。

尽管由于成本限制，放置问题和网站性能，许多Web设计师可能会不考虑合并动画，但现在将动画添加到任何类型的网站中变得更加可行且负担得起。网络专业人员必须了解潜在的动画可以在网站上拥有并欣赏其价值，这一点至关重要。

动画头像上传UX，作者：Miguel OlivaMárquez。

玩人类生物学与自然

人是视觉驱动的动物，而图像是建立联系的最佳方式之一。动画使视觉兴趣进一步发展，并融入了运动。人眼自然会在运动中磨练，因此视觉动画自然会比静态显示吸引更多的兴趣。

极简主义是现代设计中持有最广泛的宗旨之一，即通过尽可能少的设计元素来创造视觉吸引力。花哨的，过分的设计有损于预期的信息。通常，由于忙碌，混乱或难以快速评估有价值的信息，他们使人们完全不了解消息。

虽然合并动画可以提高参与度，但不要过度参与至关重要。与现代设计的大多数其他方面一样，少即是多。

微互动奖励用户

向网站添加功能动画的最好方法之一是通过微交互。这是植根于人类心理学的另一个概念：人们喜欢知道何时成功完成了一项动作。

Twitter收藏夹

考虑一下Twitter：当您“收藏”一条Tweet时，小小的心形图标开始呈灰色，一旦按下它，它就会以红色快速亮起，并带有一小段快速的颜色。这个小动画是一种有趣且在视觉上很有趣的方式，可以使用户知道他们已成功“收藏”了一条Tweet。当他们在滚动时不小心轻按了“收藏夹”按钮时，它还可以帮助他们注意。

如何将动画整合到您的网站中

有无数种方法可以将功能动画整合到微交互中。查找您要访问者单击的网站部分，或信息最有价值的部分。每个站点都是不同的，因此由您自己决定如何在设计精美的网站页面上产生更多的视觉兴趣。

寻找访问者可以操纵页面内容的区域。如果部分扩大，请考虑使该过程动起来的方法。如果您希望用户提交联系信息，请确保其中有一个小动画，以使他们知道自己已正确发送了信息。

AdriánSomoza的作品集探索。

如果要使功能动画成为网站上真正有价值的方面，则需要使用动画作为向访问者传达反馈的一种方式。让他们知道自己在做什么，在正确完成动作后向他们展示，或者使用经过精心设计的动画引导他们与您的品牌一起前进。

为手机设计

如果您尚未采用移动优先的网站设计方法，那您将处于落后状态。移动设备上的互联网流量每天都在惊人地增长。越来越多的人使用智能手机和其他移动设备上的互联网来进行各种活动，从看电影，付款，购物到浏览自己喜欢的品牌和媒体的内容。对于现代公司而言，设计对移动浏览具有良好响应的网站至关重要。

由于人们使用拇指而不是鼠标来导航移动网站，因此在计划动画时记住拇指导航非常重要。人们在打算滚动时错误地点击链接或提交表单的情况并不少见，因此请确保您的移动网站易于浏览。一旦确定访问者在您的移动网站上滑动和滑动不会有任何麻烦，就可以寻找添加功能动画的地方。

功能动画的最佳做法

小型动画可以使您的网站对访问者更有用。通过一些周到的计划，即使是很小的添加也可以将平淡的页面变成更有趣的内容。某些网站具有导航按钮，当用户将鼠标指针悬停在它们上面时，这些按钮会更改大小或颜色。这些简单的动画不仅在视觉上更有趣，而且还使用户知道它们将要去的地方或单击该点会发生什么。

Google的《材料设计运动指南》

确保动画不会花太长时间也很重要。记住，少即是多。与引人注目的复杂动画相比，快速，引人注目的动画将变得更加有趣和引人入胜。我们需要注意注意力不集中，所以不要添加会延长完成动作的动画。访客应将这些动画视为有趣，有趣的小动作，以指示成功完成的动作。

保持动画简短有趣的另一个原因是页面加载时间。人们不喜欢等待，大多数现代消费者没有耐心等待网站加载缓慢。如果大型笨拙的动画文件使您的网站加载时间陷入困境，那么网站的访问者将迅速失去兴趣并探索竞争对手的网站，而不是与不稳定且加载缓慢的页面竞争。

当心一些常见的动画陷阱

除了减慢网站的加载时间并关闭注意力集中时间短的访问者之外，过多的动画还会使您的页面看起来过于装饰和故意浮华。大胆的，闪烁的字幕和冗长的动画旨在吸引潜在客户的时代已经一去不复返了。

今天，动画的目标应该是增强网站的功能和吸引力。不要仅仅为了装饰而制作动画–确保您合并的每个动画都有目的，并且不会减损页面的内容。

考虑入职也很重要。如果您启动一个新网站或开发一个新的移动应用程序，则需要向新用户展示如何导航他们并充分利用他们的时间。

上野的Dropbox / Guide。

开发一个教程过程，向用户显示您的应用程序或新网站的所有功能和控件，并考虑在过程中为每个步骤添加动画效果。这不仅会增加视觉上的趣味性，而且客户还将欣赏到乐趣，吸引人的此类附加内容，并且他们将更有可能享受在您的应用程序上花费的时间。

取得平衡

最终，功能动画的成功结合取决于可用性。如果您正在考虑是否将动画添加到网站的任何部分，请考虑是否添加动画会增强用户的体验。如果答案不是肯定的“是”，则可能不值得进行更改。尝试在创造更多视觉兴趣而不显得过于忙碌或浮华之间找到平衡。

功能性动画应使您的网站访问者感到满意，并使他们对您的网站和内容的体验更加令人难忘和引人入胜。通过关注极简主义和响应式设计的基本原则，您可以创建更具视觉冲击力的网站，以保持访客的兴趣。

作者： Paul Andrew