国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

设计师都应该了解的加载动画知识

发布时间:2019/08/18标签:   动效设计    点击量:

原标题: 设计师都应该了解的加载动画知识

动画,带给客户一些情感化的设计体验,是必不可少,动画,可以缓解用户等待焦虑的心态。

Loading动画,在现在的设计中已经是一个必须要设计的系统元素,它能减缓用户等待焦虑的心态,也能用来作为品牌透传,增加曝光。

那关于loading动画相关知识,我觉得对于设计师来说是有必要去了解的,所以我找到了这篇优秀文章,让大家能够深入了解loading动画,透过现象看本质,学以致用。

图片来源:Domaso

没有人喜欢等待

在用户心目中,优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。

举一个真实的例子:最近我们新发布了一个用户评价的应用,第一个版本并不完美,loading延迟在2-3秒。

你猜怎么着?

很多人认为这3秒是一个故障。在实际开发中,你可能要面对龟速的网络,没有优化的代码,操作时间长或数据处理太多等问题。因此,App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会,但绝大多数人会立即退出它。

除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么?是操作错误还是在等待服务器的请求?用户需要等待多长时间才能正常使用这个工具或网站?用户为什么要等待呢?

让我们一起深入了解Loading动画:

1、loading动画的历史由来

2、优秀loading动画所具备的特征

3、细节可以做出精彩

4、简单处理还是精心制作

loading动画的历史由来

对于这种类型的反馈,设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程,以减少用户的心理焦虑。

你觉得设计师是从什么时候开始考虑加上这种反馈的?

我很惊讶的看到关于Nielsen Norman的一篇文章,提到响应时间和loading动画是在1993年(参考1985年的资料):

如果计算机无法提供快速响应,则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文,“计算机-人机界面百分比进度指标的重要性”】

显示进度的三个主要优点:向用户保证系统没有崩溃且正在处理他们的问题;告诉用户还需要等待多久时间,让用户能腾出时间来做其他的事而不只是干等;甚至可以向用户提供一些可以阅读和查看的内容,减少等待的焦虑。— Jakob Nielsen, on January 1, 1993

自从Web 1.0以来,几乎每个网站都有loading状态,用户可以注意到当页面内容正在loading时,这些Loading动画活跃的身影。

在2007年的时候,ui设计发展史,网站的Loading形式大概是下面这张图上的样子:

2007年时的Loading

在那个年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)这样的工具来做这些 loading动画。

到了2010年,随着CSS3的迅猛发展,出现了很多教程教大家如何做CSS3动画,也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画,这个在10年前是非常流行的。

在那时,Loading动画更像是web的专属问题,因为页面loading确实是一个问题。在2010年的时候,很多Flash网页都做了一些很有创意的loading动画:

30个创意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)

渐渐地,设计师们开始不满足于简单的进度条和旋转Loading,到2014年-2016年的时候,变得更加关注这块的设计。所以,你能发现更多关于loading教程,免费的Loading设计资源,插件和开源项目。

2016年出现的Material Design loading()

设计趋势和方法已经发生了变化,但向用户提供有效反馈的原则依然需要遵循。

优秀loading动画所具备的特征

在一个完美的世界里,loading动画应该:

尽可能少的显示给用户

如果你的工具或网站工作的足够快,那就是非常完美的。或者至少要使得它们的速度符合用户的预期,显示好看的loading动画只是一个缓兵之计,等待太久了一样会惹恼用户。所以,首先应该是解决内容的loading问题。

给出具体时间

版权信息Copyright © IT技术教程 版权所有    ICP备案编号:鲁ICP备09013610号