功能动画在增强用户体验中的作用



通往更好用户体验的道路涉及各种因素,包括网站设计和功能、产品质量、客户服务、电子商务等等。虽然大多数用户体验计划都需要广泛的研究、测试和周密的规划,但我们掌握的一些最好的工具是能够留下持久印象的小而简单的东西。功能动画就是其中之一,它在用户体验中扮演着更大的角色。

虽然由于成本限制、位置问题和网站性能,许多网站设计师可能会拒绝立即整合动画,但现在在任何类型的网站上添加动画都更可行,也更实惠。网络专业人士必须了解动画在网站上的潜力,并欣赏其价值。

Animated Avatar Upload motion animation米格尔·奥利瓦·马尔克斯的动画阿凡达上传用户体验

玩弄人类生物学和自然

人是视觉驱动的动物,意象是建立联系的最佳方式之一。动画进一步提高了视觉兴趣,并融入了运动。人眼自然会磨练运动,因此视觉动画自然会比静态显示吸引更多的兴趣。

现代设计最广泛的信条之一是极简主义,即用尽可能少的设计元素创造视觉趣味。华而不实、过于夸张的设计有损于预期的信息。通常情况下,他们完全因为忙碌、困惑或难以快速评估有价值的信息而让人们远离信息。

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

微交互奖励用户

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

Animated Twitter Favorite motion animation

想想推特:当你“喜欢”一条推特时,小心形图标开始变灰,一旦你按下它,它就会以一种小而快速的颜色变红。这个小动画是一个有趣的视觉有趣的方式,让用户知道他们已经成功地“喜欢”了一条推特。它还可以帮助他们注意到在滚动时意外点击了“收藏夹”按钮。

如何将动画融入网站

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

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

Animated portfolio exploration motion animation Adrián Somoza的投资组合探索

如果你想使功能性动画成为网站真正有价值的方面,那么你需要使用动画作为向访问者传达反馈的方式。让他们知道自己在做什么,当他们正确完成动作时向他们展示,或者使用精心设计的动画引导他们跟随你的品牌前进。

为移动设备设计

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

由于人们使用拇指而不是鼠标浏览移动网站,因此在规划动画时,务必记住拇指导航。当人们想要滚动时,错误点击链接或提交表单的情况并不少见,因此请确保你的移动网站易于导航。一旦你确信访问者在你的移动网站上滑动和滑动都不会有问题,就可以找地方添加功能性动画。

功能动画的最佳实践

小动画可以让你的网站更容易被访问者使用。即使是一个小小的添加也可以通过一些深思熟虑的计划将一个平淡的页面变成更有趣的内容。一些网站具有导航按钮,当用户将鼠标指针悬停在其上时,这些按钮会改变大小或颜色。这些简单的动画不仅在视觉上更有趣,而且还让用户知道他们将去哪里,或者如果单击该点会发生什么。

Animated Material Design Motion Guidelines谷歌材料设计运动指南

确保动画不会花费太长时间工作也至关重要。记住,少就是多。快速、引人注目的动画将比冗长、复杂的动画更有趣、更吸引人。我们需要应对注意力持续时间短的问题,所以不要添加延长完成动作时间的动画。参观者应该将这些动画视为有趣、有趣的小动作成功完成的迹象。

另一个保持动画简洁的原因是页面加载时间。人们不喜欢等待,而大多数现代消费者没有耐心等待加载缓慢的网站。如果大型、笨重的动画文件阻碍了您的网站加载时间,那么您网站的访问者将很快失去兴趣并探索您的竞争对手,而不是与您不稳定且加载缓慢的页面抗争。

注意一些常见的动画陷阱

除了减缓网站的加载时间和关闭注意力跨度较短的访问者外,过多的动画会使你的页面看起来过于装饰和浮华。那些旨在让潜在客户惊叹的大胆、闪烁的字幕和冗长的动画的日子早已一去不复返了。

今天,动画的目标应该是增强网站的功能和吸引力。不要仅仅为了装饰而制作动画——确保你加入的每一个动画都有一个目的,并且不会影响页面的内容。

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

Animated Dropbox Guide上野的Dropbox/Guide

开发一个教程流程,向用户展示你的应用程序或新网站的所有功能和控件,并考虑在每个步骤中设置动画。这不仅会在视觉上更加有趣,而且客户也会喜欢这些有趣、吸引人的附加功能,他们更有可能享受使用你的应用程序的时间。

保持平衡

最终,功能动画的成功结合取决于可用性。如果您正在考虑是否在站点的任何部分添加动画,请考虑添加动画是否会增强用户体验。如果答案不是肯定的“是”,那么可能不值得做出改变。试着在创造更多视觉趣味而不显得太忙或浮华之间找到平衡。

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

来源:https://speckyboy.com/functional-animation-user-experience/

0