如何设计好网页中的Loading

发布来源:沙漠风网站建设公司

发布时间:2011.09.01

  可用性研究表明,当响应时间超过一秒钟时,用户便能够有所察觉。虽然在反馈系统中,当用户需要等待时,更好的解决方案的是应该采用确定性的进度条。但对于一些耗时短,且用户的带宽为主要影响要素时,却使用Loading这种低成本实现的反馈。

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

  Loading的主要作用,在于提供反馈给用户表示当前状态,并且让用户的命令的执行和完成过渡得更加平滑。从这种角度上说,它和很多流动式反馈没有多大区别,如MAC系统中窗口小化的渐进动画。Loading的图标仅仅在web应用当中产生,而在客户端中,则较少使用,因为鼠标手型能够代替它的工作。

  1.靠近点击区域

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

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

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

  3.固定区域

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

  Loading反馈虽然是一个小部件,但其能够给用户的,却是系统可见性的有效提高,在平常的设计中,需对Loading反馈设计有所留意。但Loading反馈不足的地方是,无法明确告知用户具体等待时间。就像拨打客服电话中被告知的“稍等片刻”一样。即使这样我们依然能做得更好,像Gmail那样。

  当用户Loading了约10秒后,如果系统还在运转,那么Gmail会自动将Loading标签修改为Still Working,明确告知用户,可能还需等待一段时间。Loading反馈在实际设计中不容忽视,尤其是在用户提交表单时,Loading反馈和各控件的连锁状态变化场景当中。忽视它的后果,将给用户带来严重的等待的焦灼感,给用户带来损失。

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

    深圳网站建设公司-沙漠风(www.szweb.cn.),拥有设计团队为企业提供FLASH网站设计网页制作多媒体触摸屏展示设计.

TAG:
相关资讯
多一份参考,总有益处
联系沙漠风,免费获得专属定制《策划方案》及网站建设、网站设计、网站制作报价
深圳网站建设

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线400-688-6062大客户专线158-1856-1755

提交需求提交需求

提交需求
热线
微信扫码咨询
电话咨询
微信
业务热线
提交需求
官方微信
准备好开始了吗,
那就与我们取得联系吧
400-688-6062
有更多服务咨询,请联系我们
请填写您的需求
您希望我们为您提供什么服务呢
您的预算