06月 14, 2009

进度条的设计

发表 : 逍遥虾

今天订电影票的时候看到一个进度条设计:

订票进度条

进度条旁边的数字从1开始往上递增,刚开始以为是百分比,谁知道过了100,数字还在不断增大,才反应过来它表示的“秒”,而非百分比。我只好一边吃刚买来的西瓜,一边开始了漫长的等待。半个西瓜快吃完,数字停止在了360,并且进度条停止了增长。很难理解这个设计的用意,难道是在告诉我,“亲爱的用户,你已经等待了这么长的时间,你还将无止境地等待下去?”如果不是今天买的西瓜还算比较甜,我肯定早就把这个页面给关闭了。

众所周知,进度条能使用户等待的时间变短,告诉用户进程正在运作,增加用户的耐心。关于进度条的设计,译言上有一篇不错的论文翻译,原文在这里。文中用9种曲线来展现进度,并且进行了测试,最后得出的结论是需让用户感觉到进度条是在增加,这样用户就会感觉速度会比较快。不管怎么说,对于web设计来说,使用线性的增速总是比较安全的做法,既符合用户的心智模型也能让用户时刻感觉到进度条在增长。

一开始,进度条只是出现在软件与Flash之中,但是现在,已经越来越多的网页加载时也使用了进度条的设计,最为人所津津乐道无疑是gmail加载时的设计:

gmail进度条

是否每个页面加载时都需要进度条?AW为自己的blog添加了类似的设计,但感觉这样频繁地显示进度条,会分散用户的注意力,降低浏览的效率。而且,大多数的浏览器会显示网页的加载进度(除了chrome):

firefox进度条

safari的设计很巧妙,将进度条整合到了地址栏之中:

safari进度条

之前提到的文章中也指出,在进度无法被准备地测量时,不用进度条可能是更好的解决办法。的确,在网站模块加载时,有不少网站采用了这样的非进度条设计。

鲜果:

进度条02

淘宝:

淘宝模块进度条


暂无评论

(必填)
(我们将会为您保密) (必填)
(选填)
feed地址