请选择 进入手机版 | 继续访问电脑版

一步教你如何把刷新加载动画做的更有趣?

发表于 03-02 15:53 显示全部楼层 15 500

本帖最后由 孙傲 于 2018-3-2 15:53 编辑

40.gif

加载动画存在的意义


众所周知,app服务器在加载数据的时候需要用户等待一段时间,为了缓解用户等待过程中的焦虑情绪,设计者可以采用加载动画的方式来缓解用户的等待时间,使整个等待过程变得更加友好、流畅。

一个好的加载动画分为两个层次,第一个层次是满足用户的基本心理预期,缓解等待的焦虑;第二个层次是要给出用户一定的惊喜,甚至让用户对加载动画抱有期待、好奇的心理。


2. 加载动画怎么才能更有趣呢?


有研究表明,普通用户能够忍受的最长的加载页面的时间一般为8秒钟。8秒是一个临界值,如果加载时间超过8秒,除非用户必须在这个页面获得一些信息,一般用户会关闭页面或者转到其他页面。

那么在这短短的8秒钟内,如何用一个小小的加载进度条吸引住用户,让他们留在当前的页面呢?



加载动画我们拆开来看分为:加载+动画,这两个缺一不可。

加载:它是在程序运行的时候有个等待的时间。

动画:引用百度百科里面的一段话

动画的英文有很多表述,如animationcartoonanimated cartoon、cameracature。其中较正式的 "Animation" 一词源自于拉丁文字根anima,意思为“灵魂”,动词animate是“赋予生命”的意思,引申为使某物活起来的意思。所以动画可以定义为使用绘画的手法,创造生命运动的艺术

 

通过对加载和动画的分析,我们可以把加载动画定义为:让程序运行等待的时间的运动变得有生命力。

 

有生命力的加载动画自然也就变得有意思,自然大家在等待漫长的加载过程时不会变得无聊、烦躁。

注:同样我们可以把加载动画扩展到生活当中,比如让等待XX的时间变得有生命力。Xx可以是公交车、人、成绩、爱情等等,这样我们的生活是不是感觉美好了许多。

 

来看一下普通加载动画

 

 

它们的特点是简单、缺乏趣味性,一般在不重要的地方用于提示。

 

那么问题来了!我们怎么样才可以有生命力呢?

 

同样在百度百科里面:生命力所表达的应该是一种生命状态的力量。

对于人们来讲,生命力应该源自于人们的内心,如果你的内心充满着生命力,那么你就一定拥有着生命力。

也就是说我们想要在等待的时间变得愉快还是有意思,那么我们只需要让加载的动作变得愉快和有意思。

通过以上的加载动画的引申,那么我们的加载动画不仅仅是一个只会转圈的小圈圈,它可以是一个有趣的运动。

 

比如说 一个运动的自行车、一个运动汽车、一个跳跃的小鹿、一个跳跃的海豚、一个下雨的天气、一个哭泣的小孩儿...

 

是不是灵感来得太突然,一下不知道用哪个?


3、刷新加载动画使用的场景


加载动画运用在网页中以及APP中,一般加载动画在APP中最常见,其中有下拉刷新加载、切换新页面数据加载、页面上拉加载、页面局部加载、启动页加载。

我在网上搜集了42个加载页面设计,是不是趣味十足,有没有得到启发?

blob.png

1.gif40.gif39.gif38.gif37.gif36.gif35.gif34.gif33.gif32.gif31.gif30.gif29.gif28.gif27.gif26.gif25.gif24.gif23.gif22.gif21.gif20.gif19.gif18.gif17.gif16.gif15.gif14.gif13.gif12.gif11.gif10.gif9.gif8.gif7.gif6.gif5.gif4.gif3.gif2.gif42.gif41.gif

制作工具:Adobe After Effects CC2017


1514175881211518.png


个人微信号,欢迎来扰



往期好文


【设计篇】在界面设计中新手不知道的那些事系列(一)

【设计篇】在界面设计中新手不知道的那些事系列(二)

【设计篇】在界面设计中新手不知道的那些事系列(三)

【设计篇】在界面设计中新手不知道的那些事系列(四)


回复 使用道具
举报
晴空万里

发表于 04-06 07:47 显示全部楼层

回复 支持 反对 使用道具
举报
宁静致远

发表于 04-05 21:19 显示全部楼层

别人说是金子总要发光的,我就来看看。

回复 支持 反对 使用道具
举报
大少女

发表于 04-05 12:55 显示全部楼层

必须给个赞!

回复 支持 反对 使用道具
举报
卖水果的阿甘

发表于 04-04 19:34 显示全部楼层

回复 支持 反对 使用道具
举报
diming520

发表于 04-04 08:10 显示全部楼层

回复 支持 反对 使用道具
举报
p出我世界

发表于 04-01 19:46 显示全部楼层

回复 支持 反对 使用道具
举报
熊猫党

发表于 03-29 12:38 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
p出我世界

发表于 03-26 18:58 显示全部楼层

回复 支持 反对 使用道具
举报
寻找皮卡丘

发表于 03-26 14:29 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
孙傲

小码哥会员

0

学分

269

学币

281

积分

小码哥会员

Rank: 3Rank: 3

积分
281

关注新浪微博

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育