UI中的响应时间：3个重要的界限

今天看了篇文章（Response Times: The 3 Important Limits）觉得很不错，这里简单整理了下要点。

Response Times: The 3 Important Limits

有关操作响应时间的基本准则，三十多年来就没有变过，而且这些准则不限于某一门技术或语言。

• 0.1秒是用户瞬间感受的界限，这意味着不需要任何提示（feedback）可直接显示结果。
• 1秒：即使用户感觉到了延迟，但仍然感觉流畅并保持连续的操作，一般来讲，延迟在0.1秒~1秒之间，是不需要特殊提示的， 但用户仍然会失去直响应的感觉。
• 10秒是用户专注于单一任务的极限，对于更长的延迟，用户将会进行其它的操作，而不会等待计算机执行完毕。所以，在计算机执行的过程中应当给用户提示。由于时间对于用户来讲是十宝贵，所以提示现在尤为重要，不然的话用户讲不知道做什么。

其它

• 计算机的响应时间一般来说，越快越好，但底线是保证可用性，不应当过快以至于用户无法操作。例如，滚动列表的滚动速度太快到让用户无法及时停止目标内容。
• 当一个操作需要超过10秒的等待，应该给予用户一个百分比进度条，这种效果将远远好于仅提示用户剩余时间，并且给予一个可中断或取消的操作。
• 对于无法计算进度的操作，也应当给予用户适当的反馈。例如：扫描未知大小的数据库时，可以打印出已扫描的表。另外替代方案是提供一个简单的等待动画，提示用户程序在运行中。
• 对于2~10秒的操作，如果使用百分比进度条显得有些大材小用，并且过快的显示也会让用户有种闪烁的不好效果。这时可以仅使用一个“忙碌”的动画，并且在合适的位置配上一个变化的数字提示进度，效果更好。

结合实际

1、在网页中有许多的选项卡或相册轮翻，这些大都是使用mouseover事件触发。这就难免出现一个问题，鼠标无意之中划过触发区域，会进行切换，给人以闪烁的感觉。

具体的解决方法：既然100毫秒内的延迟，用户都不会有所察觉，那就增加触发延迟，代码如下(使用jQuery编码方式做演示)。

var timer;    // 时间句柄
$('div.tab-holder li').hover(function(){
    clearTimeout(timer);    // 首先清除上一次注册的句柄
    timer = setTimeout(function() {
            //执行切换
    }, 100);
});

2、在Suggest的应用当中，如果每次键盘事件都会触发一次请求的，那么这其中将会有许多无效请求，并对服务器造成一定压力。因此多数Suggest中都会使用如上一例子中的延迟，时间一般控制在200~250毫秒内。