何处安放的Loading

  可用性研究表明,当响应时间超过一秒钟时,用户便能够有所察觉。

  虽然在反馈系统中,当用户需要等待时,更好的解决方案的是应该采用确定性的进度条。但对于一些耗时短,且用户的带宽为主要影响要素时,却使用Loading这种低成本实现的反馈。

  Loading图标的历史来源已经无法考究(据传是苹果最先使用),但是,它的动态效果,在视觉上刚好是一个重复循环的“风火轮”。非常适合做不确定等待时间的进度反馈。

  Loading的主要作用,在于提供反馈给用户表示当前状态,并且让用户的命令的执行和完成过渡得更加平滑。从这种角度上说,它和很多流动式反馈没有多大区别,如MAC系统中窗口最小化的渐进动画。

  Loading的图标仅仅在web应用当中产生,而在客户端中,则较少使用,因为鼠标手型能够代替它的工作。

  但是对比客户端,web端的Loading反馈可控性更好,创意也更加。如以下几种:


  那么在设计中,如何放置Loading图标,也应该有所章法。但是无论如何放置,都有一个规则:确保用户可以注意到。

  1.靠近点击区域

  靠近点击区域,能够让你的Loading反馈得到最直接的呈现,也最利于被注意到。如果能配合按钮的Enabled与Disabled状态的切换,这是很好的反馈。


  2.位于内容刷新区域上层

  当用户选择刷新页面内某块区域内内容时,其视觉焦点也将聚焦于此,如果此时让Loading反馈不适合放置在点击区域,那么将其放在内容刷新区域上层,也是一个很直观的反馈。如QQ邮箱广播的评论展开区域:


  但是需要注意的是,勿将Loading反馈采用模态形式,模态形式将导致用户只能等待Loading完成而无法进行其他操作,而且还有可能给用户带来损失。


  如上图,如果这个Loading反馈是模态形式,当它出现时,您就无法点击页面内其他地方,万一不走运,这个时候你网络断线,这辛苦写的日志,你就可能再也找不回来了。(注:图为Qzone发表日志截图,其Loading反馈为非模态形式)

  3.固定区域

  固定区域呈现,最好应该是固定在浏览器窗口某位置(要确保用户能很方便的注意到),而不是固定在页面某位置。如同Gmail一样,Loading反馈始终位于浏览器窗口顶端位置。


  但也需切记,别把Loading反馈放置得离视觉焦点太远。这样很难注意到。


  Loading反馈虽然是一个小部件,但其能够给用户的,却是系统可见性的有效提高,在平常的设计中,需对Loading反馈设计有所留意。

  但Loading反馈不足的地方是,无法明确告知用户具体等待时间。就像拨打客服电话中被告知的“稍等片刻”一样。即使这样我们依然能做得更好,像Gmail那样。

  当用户Loading了约10秒后,如果系统还在运转,那么Gmail会自动将Loading标签修改为Still Working,明确告知用户,可能还需等待一段时间。

  Loading反馈在实际设计中不容忽视,尤其是在用户提交表单时,Loading反馈和各控件的连锁状态变化场景当中。忽视它的后果,将给用户带来严重的等待的焦灼感,给用户带来损失。

  所以,请好好设计你们产品的Loading反馈。

  作者:大脸

  文章来源:优涩控 转载请注明出处链接。

时间: 2024-10-10 15:55:29

何处安放的Loading的相关文章

canvas做loading动画

由于公司最近项目不是很忙,所以,自己利用闲暇的时间来研究了一阵子的htm5和css3,正巧,公司最近要对以前的项目进行一次统一的升级,而我被告知时,主要是在以前的版本中加入一些页面动画.有4人参与了动画特效的编写,我很幸运自己也被选中. 第一次做动效还是用css3,心里好激动.虽然自己对css3不是很了解,但是,我还是有信心自己能够胜任这次的任务.接下来近2个月的时间里,我 都在做css3动效,由于自己只是擅长javascript和JQuery,对css了解也不是很熟悉,所以,做css3动画上还

css3 loading: 3款漂亮的CSS3 Loading动画实例教程

HTML第1个例子中的HTML标记非常简单,我们在页面上创建了一个ul列表标记,并在其内部创建了几个div来控制它的总体进度动画,代码如下: 12345678910111213141516171819202122 <ul id="progress">    <li>    <div id="layer1" class="ball"></div> <!-- layer1 control dela

CSS3 实现超炫的 Loading(加载)动画效果

SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) Loading 动画效果一           HTML 代码: <div class="spinner">

Asp实例之:一个loading效果的实例

用Asp制作一个loading效果似乎也并不是困难事. <script> function load1(name) { loading.style.display="none"; name.style.display=""; } function selecte(s) { if(s==1) { loading.style.display=""; div_b.style.display="none"; div_c.s

网页设计技巧:网页的loading进度条设计

文章描述:虽然加载在整个页面来看是一件小事,但是因为加载在不经意间导致的用户流失却是大事.在加载页中显示进度,给出承诺,增加信息量或者幽默内容都能使用户潜移默化减少"觉察"正在加载的时间.但是真正可以减缓的办法还是加载的速度增快;别致的设计虽可以治标,但加载速 对于加载(loading),想必大家都不陌生.每当看到加载页中那个不停转啊转的圈圈,或者是 "Loading-"后面不停闪动的三个点点,心里都会涌起各种焦躁反感.根据一份调查得出,用户能够忍受加载的最长时间在

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

文章描述:Loading,让烦躁少一些. 前一阵子,接到一个app切图制作加载圆形进度条的任务,看到那个小进度条转啊转的,我若有所思-同时,一个做印象派制作间控件设计的同学最近做了改版,那个控件登陆需要一些时间,看到他对loading加载条进行了优化,然后就一起交流了一下.作为一个刚毕业入行不久的新人,请允许我分享一下关于讨论loading加载后的一些心得- 这是一个浮躁的年代,长听到这样的抱怨"好慢!""等到死!",每次看到那个转啊转的圈圈,或者是那个"

[ASP.net]Loading制作

asp.net|loading|asp.net|loading 方法很简单.把代码放上来大家看看!打了包成了个控件.下载地址:http://upserver4.ys168.com/ys168up/D1/YY1.aspx?f=050P1D8E0E3E5D9D5G6ALI7A00A05AKA03D6A00A08A08I5F9G0E0D9E0D8D6E1A24E6E1D9E5D9C3 下面是源码: =================================== using System; na

Loading动画的制作

loading Loading动画的制作(一) 说是Loading动画,其实只不过是用Fireworks4做的一段动画效果,千万别误会是Flash中的Loading哦,用Fireworks可不能进行编程,如果哪位会的话,请告诉我,呵呵. 实际效果是这样的.请看下图 (这是一个GIF动画) 制作方法如下: 一. 新建文件,新文件的尺寸大小为300*200,画布颜色为白色. 二. 选择工具面板中的矩形工具,按住shift键,画一个正方形,填充颜色为红色,打开info面板,设置其W和H的值都为20,按

flash制作一个完整的loading

核心提示:flash如何用AS3制作一个完整的loading loading这个东西,说穿了其实是给用户反馈的一种表现形式,在客户端中的loading,通常以鼠标的手型变化来表现:而在web端,loading的创意则层出不穷了,而且给用户的反馈更好.本文将主要阐述在flash中制作loading的一些问题. 先来看看loading的原理.在flash中,制作loading的目的是为了预先加载一部分内容(你可以选择全部加载完毕,或者加载一部分之后),然后再把flash的主要内容展示出来.一般来讲,