在通往更好的用户体验设计道路上涉及到各种因素，包括网站设计、功能、产品质量、客户服务和电子商务等等。虽然大多数用户体验方案都需要广泛的研究、测试和周密的计划，但我们可自行支配的一些最好的工具通常是那些小的、简单的东西，来产生持久印象的。功能性动画就是其中之一，而且它在用户体验中扮演着很重要的角色。

虽然许多网页设计者可能因为成本限制、放置问题和网站性能而不考虑使用动画，但现在在任何类型的网站上添加动画都是可行的和负担得起的。重要的是，网络专业人士能够了解并欣赏动画在一个网站上拥有的潜在价值。

Animated Avatar Upload UX by Miguel Oliva Márquez.

在人类生物学和自然中

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

现代设计最受欢迎的原则之一是极简主义，或者尽可能少地使用设计元素来创造视觉趣味。花哨、过分的设计偏离了本意，通常情况下，由于人们忙碌、困惑，或者只是很难快速地评估那些有价值的信息，而会被它们完全从信息中抽离出来。

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

微交互赢得用户

向网站添加功能性动画的最好方法之一是通过微交互。这是另一个根植于人类心理学的概念：人们希望知道他们什么时候成功地完成了一个动作。

Twitter Fav by Twitter.

考虑一下推特：当你“喜欢”一条推文的时候，小心形图标开始时是灰色，一旦你按下它，它就会亮起小而快速迸裂的红色。这个小动画很有趣，并且它通过有趣的方式让用户知道他们成功地“喜欢”了一条推文。它还可以提醒他们在滚动时不小心点击了“喜欢”按钮。

如何将动画融入你的网站

将功能性动画融入到微交互中有无数种方法。寻找你希望访问者点击的网站部分，或查找最有价值信息的部分。 每个网站都是不同的，所以取决于你能够在你设计精美的网站页面上找到生成更多的视觉兴趣点的方法。

寻找访问者可以操纵页面内容的区域。 如果一个部分扩展开，想想如何使过程动画化。 如果您希望用户提交联系信息，请确保有一个小动画让他们知道他们已经正确发送了他们的信息。

Portfolio Exploration by Adrián Somoza.

如果你想让功能性动画成为你网站真正有价值的方面，那么你需要使用动画作为向访问者传达反馈的一种方式。让他们知道他们在做什么，显示他们正确地完成了一个动作，或者通过使用精心设计的动画来引导他们与你的品牌一起旅行。

为移动设计

如果你还没有采用移动优先的网站设计方法，你就落后了。移动设备上的互联网流量每天都在惊人地增长。越来越多的人在智能手机和其他移动设备上使用互联网，从看电影、付账单和购物，到探索他们最喜欢的品牌和媒体的内容。对于现代公司来说，设计响应良好的移动浏览网站是至关重要的。

由于人们使用拇指而不是鼠标来浏览移动网站，所以在规划动画的时候，一定要记住拇指导航。人们在滚动的时候，错误地点击链接或提交表单是很常见的，所以要确保你的移动网站易于导航。一旦你确定访客不会在你的移动网站上滑动，寻找可以添加功能性动画的地方。

功能性动画的最佳实践

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

Material Design Motion Guidelines by Google.

确保你的动画不需要太长时间也是至关重要的。记住，少即是多。快速、引人注目的动画将会比冗长而复杂的动画更有趣、更吸引人。我们主张短暂的时间跨度，所以不要添加延长完成动作的动画。访问者应该将这些动画看作是有趣的、成功完成动作的有趣小指示。

另一个要保持动画短暂而美妙的原因是你的页面加载时间。人们不喜欢等待，而且大多数现代消费者没有耐心等待缓慢加载的网站。如果大型的、笨重的动画文件正在影响你的网站载入时间，你的网站的访问者将会很快失去兴趣并探索你的竞争对手网站，而不是与你的不稳定的、缓慢加载的页面抗衡。

注意一些常见的动画陷阱

除了放慢你的网站加载时间，失去注意力不集中的访客之外，太多的动画会让你的页面看起来太过装饰和刻意的浮华。那些意在让潜在客户们惊叹的、大胆的、闪烁的大字和长篇大论的动画已经一去不复返了。

今天，动画的目标应该是提高网站的功能和吸引力。不要仅仅为了装饰而做动画——确保你所有的动画都有一个目的而不会减少页面的内容。

自带信息也很重要。如果你推出一个新网站或开发一个新的移动应用程序，你将需要向新用户展示如何导航，并充分利用他们的时间。

Dropbox/Guide by ueno.

开发一个教程流程，向用户展示应用程序或新网站的所有功能和控件，并考虑在执行过程中每一步的动画。这不仅会更具视觉趣味性，而且顾客也会喜欢有趣的，吸引人的东西，并且更有可能享受在你的应用上所花费的时间。

打破平衡

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

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