美文网首页iOS工作系列99Design干货
常见的Loading进度条动效形式

常见的Loading进度条动效形式

作者: moonjoin | 来源:发表于2015-04-22 11:55 被阅读51835次

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

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

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

    最常见的直线进度条。 或者圆形进度条。 进度条和转场完美融合。 也有给LOGO描线的进度条。

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

    最常见的自转。 顺时针自转暗示着时间的流逝。 巧妙地用两架飞机形成公转。 不规则多向转动,让用户把等待的时间用在研究运动规律上。

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

    用可爱的奔跑拟人形象来告诉用户:我在很努力加载请耐心等待。 这样萌的章鱼,用户一定舍不得加载界面的结束。

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

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

    相关文章

      网友评论

      • 阿琥123:好想看看章鱼的码是怎么写的
      • 巴图鲁:不错
      • Z_Yuhan:最喜欢那只章鱼/水母~
      • fendo:赞一个!!
      • 3f6ae0090af6:这些东西要用什么做啊
      • 3f45ad1e951a:请问下楼煮,飞机的那个loading和章鱼的那个有开源的代码地址吗?没有的话我打算写个Android的开源 :fist:
        3f45ad1e951a:@moonjoin 好的谢谢,过几天自己也试着写个😁
        moonjoin:@Yellow5A5 可能有吧,我没找过,我这发的都是设计师的图
      • 北冥风尘:这种动画效果是xcode代码实现的吗?
      • fredson:@moonjoin 那个就算了,出现的太粗鲁了。我指的是如b类中的那种给logo描线进度,如果能出现广告商的logo应该是件很有创意的idea。
      • moonjoin:@fredson 新浪微博,下拉刷新的时候有时候就拉出个广告横幅 :cry:
      • fredson:b类中的给logo描线的进度条,很有创意。我在想,Loading界面是否可以引入创意广告,不知有先例没有?
      • 6fea5ba3adde:请问这种动效是用什么软件实现的呢?
      • ded1c1da1992:bar中第一种效果怎么实现哒
      • 林青霞:呃 loading 你们不都是放gif图嘛 要什么开源 ( ̄▽ ̄") ···
      • 口袋海贼王_:露珠为何不开源下。
      • 84e43d469007:一个好的loading动画设计往往会让用户觉得一切等待都是值得的
      • Xiphap:其实 Rotation 最后一张图可以归类为 Animation 的进阶形式
      • ee6c75107d3f:表示GIF图全部收藏了,感谢楼主
      • asminer:开源吗?
      • iHTCboy:真心惊到!
      • 703c57d07739:很有意思
      • Wind_Wang:有源代码么?
      • LR_李瑞瑞:如果可能为啥不整一个小的漫画故事那种,有情节的
      • 定Ding: 支持!同时略提一下请警戒整屏loading,尽可能显示足够多的静态内容,只加载那些需要加载的,有时候一个框架都会比白屏要好得多。
      • moonjoin:@这都不是我的名字 bilibili那个电视可以算作第三类
      • c5f2f487d4d3:哔哩哔哩小电视一直抖

      本文标题:常见的Loading进度条动效形式

      本文链接:https://www.haomeiwen.com/subject/cpmufttx.html