善用Loading加载条设计，让用户烦躁少一些

2012-01-05 16:56:38 来源：网易用户体验设计中心

前一阵子，接到一个app切图制作加载圆形进度条的任务，看到那个小进度条转啊转的，我若有所思…同时，一个做印象派制作间控件设计的同学最近做了改版，那个控件登陆需要一些时间，看到他对loading加载条进行了优化，然后就一起交流了一下。作为一个刚毕业入行不久的新人，请允许我分享一下关于讨论loading加载后的一些心得…

这是一个浮躁的年代，长听到这样的抱怨“好慢！”“等到死！”，每次看到那个转啊转的圈圈，或者是那个“loading…”后面那三个点不停滴闪动，心里总是有莫名的焦躁，彼时的心情就好像下面这张图片一样，不知您是否有同感…

有人统计，用户能够忍受的最长等待时间大约在 6～8秒之间。8秒是一个临界值，如果网页加载时间在8秒以上，很有可能大部分访问者最终都会离开该页面。除非他一定要打开那个页面。

以上三种是常见的loading方式，如果是我，我更希望看到第三种的进度条，因为我实在不知道第一个圈圈要转多久才能算加载成功，也不知道第二个点点点要点到猴年马月。

但是如果这个时候，界面除了看到“加载”以外的东西，是否就能转移用户的注意力呢？比如我们在银行排队的时候，如果我们无时不刻看着自己手中的号码牌和叫号板，虽然知道自己大概什么时候会轮到，但是依旧会无聊和烦躁。这时候银行里的一些宣传单起到了很好的作用：比如各种银行的理财产品，如果你不小心还看到了适合自己投资的，肯定会激动不已，觉得这个等待时间给自己带来的意外的收获，即使没有得到自己想要的信息，也不会觉得那么无聊了。又比如视频在缓冲的过程中，总是会放一段广告，我一直弱弱滴认为这个好鸡肋，舍不得放弃看那个视频，但又要忍耐这个加载时候的广告。但是如果广告做得很棒，就一点都不烦躁了，甚至还在评论里看到求加载广告的地址。网页的loading就承担了宣传单跟加载广告的作用。

在页面局部加载时常能看到第一个圈圈的身影，不过每次看到这个圈圈都差不多，如果换一种转圈的形式，也许会觉得“这个圈圈跟别的好像不太一样”，通过好奇减少等待的焦躁。

下面我找了一些变过形的圈圈，是不是多了一些新意呢？

减少用户的焦虑，可以给个允诺，示意他们还要加载多久，告诉现在的进度（有个进程百分比），算给一个定心丸。例如以下的方式：

其中上图最下面一种进度条又有不同的设计：

上面两种确定性进度条虽然都提示了现在的进程，但它们的差别是，第一种的进度条内容是纯色，第二种进度条内容有动画效果，如果这个进度条再某点上突然停住了，这时候会给用户造成困扰，到底是卡死了还是这段的加载比较慢呢？如果是下一种进度条就一目了然，如果卡死，那动画效果就没了，如果依然有动画效果，那就说明只是这一段加载比较缓慢。

相关热词：Loading 加载条用户体验

收藏至我的帐号

教程排行榜: 30个基于jQuery框架的幻灯滑块特效设计的网站实例; 30个基于jQuery滑动门技术的网站欣赏; 10个优美精致简约风格的导航菜单欣赏及点评; 38款网页设计应用的JS拉洋片幻灯效果欣赏; 最新收集的50多个专业设计公司网站欣赏; 40+设计独特超漂亮的水平导航网站欣赏; 全球65个设计出众的设计师个人博客欣赏; 35套精美绚丽的创意酷站设计欣赏; 国外颇具特色的电子商务网站设计欣赏(上); 国外颇具特色的电子商务网站设计欣赏(下); 21个精美漂亮的网页幻灯片应用案例欣赏; 20个设计精致漂亮的Photoshop网页设计教程; 网页UI之Banner广告条设计案例赏析; 2011年网站设计的新趋势; 手绘风格的15款超级漂亮网站欣赏; 24个很漂亮用CSS3实现的文本效果演示及教程推荐

下载排行榜: 带标题显示拉洋片式的jQuery滑动幻灯特效插件; 带标题和数字导航的JS焦点幻灯特效代码; 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 支持幻灯、相册、滚动、TAB选项卡等效果的...; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 31款简单实用的CSS+JS下拉菜单脚本; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 简洁效果多图切换flash幻灯焦点图代码; 基于jQuery实现的瀑布流布局列表特效代码; 3D立体效果金字塔环形旋转的flash+xml相册代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 兼容firefox和IE的QQ、淘宝旺旺在线客服代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 能自动弹出对话信息框的QQ在线客服代码; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...; 很好看的带缓冲效果CSS下拉菜单导航代码