恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
常见的几种Loading动效形式赏析
0.0°
2015-04-24 原创文章 经验/观点 原作者: 原作者 举报 9981 125 55 4

在浏览网页、玩游戏、手机应用等场景,因为网速慢或是硬件差的关系,难免会遇上等待加载的情况,这时添加一个Loading进度条动画就成为了必要的事情。

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

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


B,Bar。

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


最常见的直线进度条。


或者圆形进度条。


进度条和转场完美融合。


也有给LOGO描线的进度条。



R,Rotation。

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


最常见的自转。


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


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


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



A,Animation。

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


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


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



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

希望给各位灵感和启发,如果你有什么更好的创意,欢迎交流,作者微博:MotionGraphic

更新:2015-04-24

收藏

125人已收藏

moonjoin

dribbble.com/moonjoin

  • 15

    作品

  • 454

    粉丝

  • 26

    关注

  • 近一年来做的动效设计整理
  • 也是做过UI的
  • 新鲜出炉的点线MG分享
  • 横看成岭侧成峰——多视角字体

    猜你喜欢

      2015-04-24 原创文章 经验/观点 原作者: 原作者 举报 9981 125 55 4

      常见的几种Loading动效形式赏析

      0.0°

      你确定要举报常见的几种Loading动效形式赏析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年04月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      55
      125
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录