科普文!设计师需知的Loading进度条动效形式 - 优设网 - UISDC

科普文!设计师需知的Loading进度条动效形式

2015/05/04 21433评论区

common-loading-animation-design-1

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

进度条精品案例:《一组加载体验超舒服的网站设计欣赏》

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

B:Bar

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

load20150504 (1)

最常见的直线进度条。

load20150504 (2)

或者圆形进度条。

load20150504 (3)

进度条和转场完美融合。

load20150504 (4)

也有给LOGO描线的进度条。

R:Rotation

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

load20150504 (5)

最常见的自转。

load20150504 (6)

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

load20150504 (7)

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

load20150504 (8)

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

A:Animation

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

load20150504 (9)

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

load20150504 (10)

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

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

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

想让进度条有创意?来这里学习!

Loading如同404,有创意才会有人爱!
《谈谈加载(LOADING)的那点事》

让等待美好的这件小事!
《超赞的用户体验设计:让等待更美好》

优秀案例合集!跟高手学习!
《让等待也成为享受!18个读取进度条的优秀设计案例》

原文地址:jianshu
作者:@MotionGraphic

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量94万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/common-loading-animation-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里