谈谈加载(Loading)的那点事
对于加载(loading),想必大家都不陌生。每当看到加载页中那个不停转啊转的圈圈,或者是 “Loading…”后面不停闪动的三个点点,心里都会涌起各种焦躁反感。
根据一份调查得出,用户能够忍受加载的最长时间在:6到8秒。8秒是一个临界值,如果加载时间在8秒以上,大部分访问者最终会选择放弃,除非他一定要打开那个页面。
以上三种是常见的loading方式,如果是我,我更希望看到第三种的进度条,因为我实在不知道第一个圈圈要转多久才能算加载成功,也不知道第二个点点要点到猴年马月。
如果这个时候,界面除了看到“加载”以外的东西,是否就能转移用户的注意力呢?我们在看视屏前,视屏都会缓冲,在这时个候总是会放一段广告。每次我都会忍耐加载时的广告,但是如果广告做的很棒,很吸引人,就一点都不烦躁了,甚至还能在评论里看到求加载广告的地址。网页的loading就承担了加载广告的作用。
在页面局部加载时常能看到第一个圈圈的身影,不过每次看到这个圈圈都差不多,如果换一种转圈的形式,也许会觉得“这个圈圈跟别的好像不太一样”,通过好奇减少等待的焦躁。
减少用户的焦虑,可以给个允诺,示意他们还要加载多久,告诉现在的进度(有个进程百分比),算给一个定心丸。例如以下的方式:
其中上图最下面一种进度条又有不同的设计:
上面两种确定性进度条虽然都提示了现在的进程,但它们的差别是,第一种的进度条内容是纯色,第二种进度条内容有动画效果,如果这个进度条再某点上突然停住了,这时候会给用户造成困扰,到底是卡死了还是这段的加载比较慢呢?如果是下一种进度条就一目了然,如果卡死,那动画效果就没了,如果依然有动画效果,那就说明只是这一段加载比较缓慢。
如果进度条再进行一些变形,不仅告诉了用户现在的加载进程,还别有一种欣赏的意味:
除了进度条变形外,还可以从文案或图片下手,这种形式的加载非但没给用户带来烦躁的感觉,反而觉得这个加载有一种特别的气质,不仅加深了印象,更带来了好感。
用教学或小提示代替加载,在游戏加载页面中经常看到。一般出现的内容为游戏教学或一些技巧小提示,并且每次的内容都不一样。
要减弱用户的焦躁,“增强用户的期待值”也不失为一种好方法,除了对本身网站的期待,还有对“进度条本身”的期待。如果在不同的百分点上都会有不一样的颜色,那么用户也许在等待的时候会想:下一秒会是什么颜色呢,从而,好像也不是那么急了。
虽然加载在整个页面来看是一件小事,但是因为加载在不经意间导致的用户流失却是大事。在加载页中显示进度,给出承诺,增加信息量或者幽默内容都能使用户潜移默化减少“觉察”正在加载的时间。但是真正可以减缓的办法还是加载的速度增快;别致的设计虽可以治标,但加载速度的提高才是治本。
谈谈加载(Loading)的那点事的更多相关文章
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- 一个很酷的加载loading效果--IT蓝豹
一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 简易仿ios菊花加载loading图
原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...
- php+ajax实现登录按钮加载loading效果
php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...
- react 首页加载loading
首页加载loading,放在#root里面,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
随机推荐
- P2330 05四川 繁忙的都市
题目描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条 ...
- Promise简单实现--摘抄
Promise 看了些promise的介绍,还是感觉不够深入,这个在解决异步问题上是一个很好的解决方案,所以详细看一下,顺便按照自己的思路实现一个简单的Promise. Promise/A+规范: 首 ...
- 随机生成指定长度字符字符串(C语言实现)
相关函数 srand(), rand()头文件#include<stdlib.h> 定义函数 int rand(void) 函数说明 rand()会返回一随机数值,范围在0至RAND_MA ...
- unity3d的模型规范
1.不能存在单独的点和面,重复的面和点,不能被玩家所看到的模型也不必制作. 2.贴图要保证始终是2的倍数,但不必为正方形. 3.移动平台,如IP4,应该每个模型一般不超过300-1500个面,同屏不应 ...
- 最小生成树-prim算法模板
题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N<=5000,M<= ...
- 转:PHP 生成复杂JSON格式 简单快速方法
PHP 生成JSON 格式主要使用json_encode()函数.这个函数的输入参数支持PHP数组和对象类型. 查阅网上的例子通常都是使用数组的,也有个别使用对象生成.但实际项目中,我们要生成的JSO ...
- tensorflow搭建神经网络基本流程
定义添加神经层的函数 1.训练的数据2.定义节点准备接收数据3.定义神经层:隐藏层和预测层4.定义 loss 表达式5.选择 optimizer 使 loss 达到最小 然后对所有变量进行初始化,通过 ...
- 利用Thinkphp 5缓存漏洞实现前台Getshell
0×00 背景 网站为了实现加速访问,会将用户访问过的页面存入缓存来减小数据库查询的开销.而Thinkphp5框架的缓存漏洞使得在缓存中注入代码成为可能.(漏洞详情见参考资料) 本文将会详细讲解: 1 ...
- 如何突破Windows环境限制打开“命令提示符”
如今,许多企业或组织都会通过使用受限的windows环境来减少系统表面的漏洞.系统加固的越好,那么也就意味着能被访问和使用到的功能就越少. 我最近遇到的情况是,一个已经加固的系统同时受到McAfee ...
- C中的继承和多态
昨天同学面试被问到这个问题,很有水平,以前都没有遇到过这个问题,一时自己也不知道怎么回答. 网上学习了一下,记录以备后用! C/C++ Internals : 里面的问题都写的不错,可以读读! Ref ...