浅谈常见的Loading进度条动效形式

2016-02-16 20:35 66 1 收藏

有了下面这个浅谈常见的Loading进度条动效形式教程,不懂浅谈常见的Loading进度条动效形式的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - 平面设计 】

有哪些常见的Loading动效有哪些形式呢?在观摩过大量优秀的案例后,MotionGraphic总结出Loading动效通常有B.R.A三种形式。为避免误解,下面逐一解释一下。

在浏览网页、玩游戏、手机应用等场景,因为网速慢或是硬件差的关系,难免会遇上等待加载的情况,没人喜欢等待,耐心差的用户可能因为操作得不到及时反馈,直接选择放弃。正所谓细节决定成败,这时添加一个Loading进度条动画,就可以大大缓解等待时候的无聊和焦虑,有效让用户明确知道目前Loading的状态,并对结果有一个直观的预期,甚至有趣巧妙的设计,能让用户爱上等待,把等待看成一件很美好的事。

B:Bar

Loading动画从某种角度也可以说是进度条,一般用于较长时间的加载,通常配合百分比指数,让用户对当前加载进度和剩余等待时间有个明确的心理预期。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

最常见的直线进度条。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

或者圆形进度条。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

进度条和转场完美融合。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

也有给LOGO描线的进度条。

R:Rotation

旋转代表时间的流逝,暗示着时钟一样顺时针旋转。不停循环转动的动画,能有效吸引注意力,给用户时间加速的错觉。旋转Loading动画一般用在较短的加载中,要是一直转却始终加载不出来,用户又该烦躁了。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

最常见的自转。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

顺时针自转暗示着时间的流逝。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

巧妙地用两架飞机形成公转。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

不规则多向转动,让用户把等待的时间用在研究运动规律上。

A:Animation

如果在Loading时配上一个形象的动画,能大大提高产品的亲和力和品牌识别度,用户大多会接受并喜欢这样的形式,一般品牌形象明确的产品会这么做。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

用可爱的奔跑拟人形象来告诉用户:我在很努力加载请耐心等待。

浅谈常见的Loading进度条动效形式,PS教程,图老师教程网

这样萌的章鱼,用户一定舍不得加载界面的结束。

以上就是常见的三种形式,当然创意是无止境的,还有很多Loading动效同时融合了这几种形式,或者用一种全新的形式,比如作者多年前在PSP上见过将小游戏植入到Loading界面中的情况,以至于感叹Loading时间太短都不能好好玩耍了。。

如果你有见过什么更好的创意,欢迎交流,作者微博:@MotionGraphic

来源:http://www.tulaoshi.com/n/20160216/1573866.html

延伸阅读
《无尽的进度条Progress Quest》部分法术效果攻略 提示1:《无尽的进度条》 为半即时回合制游戏,即那种战斗开始后敌我都有行动条,走到头才能行动的回合制。 瞬移:有一定几率让你无视速度,立刻行动,几率随法术等级上升。 兔子的正义铁拳:召...
标签: flash教程
本文由 中国 txwh2006(踏雪无痕)   原创,转载请保留此信息! 这几天为了制作网页,需要做个进度条,无奈以前不注意,至今还不会做,只得看网上教程来学习。网上教程虽然不少,但其实版本雷同,真要学还不如意,有的教程号称“最简单”,他给你一段代码,叫你哭笑不得,人家会的高手,他也不在乎你一段代码,菜鸟们看了也不懂;...
标签: Web开发
1.建立进度条html页面 progressbar.htm script language="javascript" function setPgb(pgbID, pgbValue) { if ( pgbValue = 100 ) { //debugger; if (lblObj = document.getElementById(pgbID+'_label')) { lblObj.innerHTML = pgbValue + '%'; // change the label value } if ( pgbObj = document.getElementBy...
标签: Web开发
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成(Web 2.0 的特色)。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂,无非就是获得总的处理条目,然后获得一个百分比,再显示输出。 通过我们伟大的 CSS,可以实现非常漂亮的进度条样式。加上 Javascript ...
标签: FLASH flash教程
本文由 txwh2006(踏雪无痕)   原创,转载请保留此信息! 这几天为了制作网页,需要做个进度条,无奈以前不注意,至今还不会做,只得看网上教程来学习。网上教程虽然不少,但其实版本雷同,真要学还不如意,有的教程号称“最简单”,他给你一段代码,叫你哭笑不得,人家会的高手,他也不在乎你一段代码,菜鸟们看了也不懂;有的教程...

经验教程

217

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部