网页进度条设计:关于讨论loading加载后的一些心得

文章描述:Loading,让烦躁少一些.

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

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

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

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

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

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

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

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

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

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

如果进度条再进行一些变形,不仅告诉了用户现在的加载进程,还别有一种欣赏的意味:

PS:上右是搜狗实验室的logo,但是这个创意做成loading也很棒啊,还加强了品牌印象。

除了进度条变形外,还可以从文案下手,例如,下面的是“下厨房”的APP的加载页,虽然只有短短的一句话“是谁来自山川湖海 却囿于昼夜 厨房与爱”虽然只闪过短短一秒钟,这非但没给用户带来烦躁的感觉,反而觉得这个应用有一种特别的气质,不仅加深了印象,更带来了好感。

一般电影上映前都有一段预告片来吸引观众去观影。显露冰山一角,以此激起用户的好奇心,也告诉了用户大概情况。

上图是QZONE的热门应用游戏——捕鱼大亨的登陆页,这个loading的进度设计就像一个鱼雷的行程,不仅告诉玩家现在加载到哪个进度,尾部的小水花也似乎在说我一直在努力加载。另外,这个加载速度有点慢,上方还有场景图介绍,以此让玩家有更多的了解。这种弹出窗口展示放大图片和多个视图也是许多顶级在线零售商所采用的方法。虽然加载有点慢,但是给玩家这样一个暗示:这是非常值得的等待。

此外,如果要加载的东西比较多,那么加载进度肯定会比较慢,呈现一种加载条一直滞留不动的情况,在这种情况下,我们可以把进度条分成多个进度条多次加载以安抚用户焦躁的心。但是每次加载最好都配有文字显示现在在加载的内容,不然一次又一次的进度条会让用户恐慌“这到底要加载多少次才是个头!”但是如果像下面一样,明确告诉用户在加载的内容,就算用户是有些烦躁“怎么有这么多要加载”但是每次都相对加载得比较快,而且每次加载都有理有据,让用户觉得这个加载还是有必要的。

要减弱用户的焦躁,“增强用户的期待值”也不失为一种好方法,除了对本身网站的期待,还有对“进度条本身”的期待。

如果在不同的百分点上都会有不一样的颜色,那么用户也许在等待的时候会想:下一秒会是什么颜色呢,从而,好像也不是那么急了。

这个小人的表情好丰富,但是似乎又代表了用户的心情,看着他挪动并有不同的心理,就像在看一个好玩的gif。

这是印像派的新版制作间登陆,在等待的同时还告诉客户有哪些产品可以使用到制作间,既传达了品牌的信息,也让用户在等待时不那么枯燥。

此外,如果这个是多次登陆的网站,那么不管捕鱼大亨的场景展示,还是yxp的步骤流程展示,似乎这些展示只在第一次会起到比较特别的作用,但是如果每次都附带给登陆者不同的信息,那么,用户每次都有小惊喜,比如每次都随机出现一些小提示(以下分别是四次loading):

虽然加载是个小细节,但是也很有可能不经意间让用户流失。以上是我的一些小心得,虽然搜集的这些设计方式可以减缓一些用户烦躁的等待情绪,但是真正可以减缓的办法还是加载的速度增快;别致的设计可以治标,加载速度提高是治本。在加载页中显示进度,给出承诺,增加信息量或者幽默内容都能使用户潜移默化减少“觉察”正在加载的时间。当然,烦躁是一种心情,加载是烦躁的导火索,但是如果每天保持好心情,那对待等待的耐心也会大大增加哦^.^

最后,送上一个可以生成加载圈圈的小工具,希望可以对您有帮助:

 http://preloaders.net/en/circular

时间: 2024-11-02 00:30:17

网页进度条设计:关于讨论loading加载后的一些心得的相关文章

网页进度条设计:全兼容且自适应的进度条

文章简介:网页进度条设计:全兼容且自适应的进度条. 在做这个东西之前,我们需要了解基本的信息: 是否为静态加载?(是) 有多少种状态?(三种基本状态:默认.当前.已完成) 是否使用JS程序实现状态的更改?(否) 使用的频率?(高) 更新的频率?(低) 在了解这些基本信息后,我们还需要关注: 效果的完整性 性能的优越性 代码的可移植性及复用 兼容性 易维护 易扩展 这些条件有助于我们所作出的东西更加优秀. 先看一下我们以前的做法: 此做法使用了一张背景图片. 效果的完整性(很好的展示了其效果) 性

交互设计案例:网页进度条提升等待体验的设计方法

文章描述:从排队等待谈进度条设计. 排队等待是一种日常中常见的现象,例如新年领开工利是.去排队购买首发的苹果产品.每天中午去食堂排队购买午餐.排队等待在我们的生活中无处不在且看似是一个简单的现象.即使是种简单的存在,但也有其复杂的一面,当存在着很多条队列时,确定每条队列是做什么的就变得困难了:在加入队列后,人们会产生:大概要等多久?为什么队伍很久没有往前移动?等诸多疑问.无法解释的等待是令人烦躁的,不公平的等待则可能引发人们的怒火. 经历过领开工利是的同学应该对于当天排队等待的回忆不会很糟,甚至

40个最新的创意进度条设计

  以前的进度条设计以拟物化为主,现在扁平化风格流行,连进度条也改变咯.这是40款最新收集的进度条设计,很多是Dribble上的作品,应潮流而生,想瞧瞧扁平化风格的进度条是怎样的,就来看看吧. Progress by yasir wadood Circular progress bar by Alexandr Ivanov Action buttons by Anton Bodryashkin Progress Bar by Lder Vilela Secret Mail Client – Se

Android 常用效果(各种进度条,酷炫loading动画,火箭升空,撒花以及趋势图)

最近时间比较充裕一些,总结了下几个项目用到的ui效果,在这边共享给大家,也给自己做个记录(后面会有demo贴出).  主要是以下几种ui效果: 进度条多种展示 开源loading动画 火箭升空 撒花效果(仿微信) 气温趋势图 一.进度条  这边主要是有四种进度条展示,具体效果请往下看: 二.开源loading动画  这边有两种动画,来自于网上的开源demo,第一种是市场上app的比较常见动画,第二种是新版58的加载动画,具体效果请往下看: 三.火箭升空  这是在公司的一键清理项目中用到的一个动画

用户体验分析:从排队等待谈进度条设计

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 排队等待是一种日常中常见的现象,例如新年领开工利是.去排队购买首发的苹果产品.每天中午去食堂排队购买午餐.排队等待在我们的生活中无处不在且看似是一个简单的现象.即使是种简单的存在,但也有其复杂的一面,当存在着很多条队列时,确定每条队列是做什么的就变得困难了;在加入队列后,人们会产生:大概要等多久?为什么队伍很久没有往前移动?等诸多疑问.无法解

从排队等待谈进度条设计

排队等待是一种日常中常见的现象,例如新年领开工利是.去排队购买首发的苹果产品.每天中午去食堂排队购买午餐.排队等待在http://www.aliyun.com/zixun/aggregation/32533.html">我们的生活中无处不在且看似是一个简单的现象.即使是种简单的存在,但也有其复杂的一面,当存在着很多条队列时,确定每条队列是做什么的就变得困难了:在加入队列后,人们会产生:大概要等多久?为什么队伍很久没有往前移动?等诸多疑问.无法解释的等待是令人烦躁的,不公平的等待则可能引发人

【干货】设计高性能无限滚动加载,了解高效页面秘密

UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践. 无限滚动加载在互联网上到处都有应用: 豆瓣首页是一个,Facebook的Timeline是一个,Tweeter的话题列表也是一个.当你向下滚动,新的内容就神奇的"无中生有"了.这是一个得到广泛赞扬的用户体验. 无限滚动加载背后的技术挑战其实比想象中要多不少.尤其是要考虑页面性能,需要做到极致. 本文通过代码实例,来实现一个无限滚

网页前端开发,对于图片慢加载简介

技术背景       现在的网页系统,对于一些对图片资源比较多,并且一次性无法浏览完整个网页的情况下,图片慢加载可以提高客户端的体验,如IT大头:淘宝,网易,新浪等等...   技术原理   技术说穿了其实也就那么回事,懂了就简单了,呵呵~      1.   预设图片的属性,"src"指向一个小图,"_src"指向真是的图片地址:      2.   获取浏览器滚动事件:      3.   计算当前浏览器下拉的位置,通过高度判断是否需要加载图片:      4.

CSS3制作loading加载动画效果代码

  在我们这次的新设计教程中,我将向您展示如何创建纯CSS3的loading加载动画组件(没有任何图像).我认为它可以为你减少项目的代码量和额外的图像对你网站的负载.我准备了三种不同风格的加载组件.现在,让我们看看我做的. css3-loading Step 1. HTML 你可以在这里看到的三个元素–放置"加载"元素的div.  代码如下   <div class="main_body">     <div class="element