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毫秒内。

UI中的响应时间：3个重要的界限相关推荐

ASP.NET Core 在 Swagger UI 中显示自定义的 Header Token
Swagger 是个好东西,对于前后端分离的网站来说,不仅是提高前后端开发人员沟通效率的利器,也大大方便了后端人员测试 API.有时候,API 中可能需要在 Header 中设置认证参数,比如 aut ...
Hbase源码分析：Hbase UI中Requests Per Second的具体含义
Hbase源码分析:Hbase UI中Requests Per Second的具体含义让运维加监控,被问到Requests Per Second(见下图)的具体含义是什么?我一时竟回答不上来,虽然大 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
实用UI素材|UI中的按钮设计
为什么按钮如此普遍? 让我们回顾一下物理按钮的历史和起源.物理按钮是UI组件的直接前身,因此在当今所有数字产品中都大量使用,即使用户不了解基本的机制或算法,只要触摸一下手指,即可使家用电器,汽车或系统 ...
在Blazor中构建数据库应用程序——第5部分——查看组件——UI中的CRUD列表操作
目录介绍存储库和数据库列表功能基本表单分页和排序分页器分页器数据分页器控件排序控件 UIDataTableHeaderColumn 天气预报列表表单视图 WeatherForeca ...
在Blazor中构建数据库应用程序——第3部分——UI中的CRUD编辑和查看操作
目录介绍示例项目.代码和链接基本表单 RecordFormBase EditRecordFormBase 实现表单 WeatherForecastViewerForm WeatherForeca ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

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

Response Times: The 3 Important Limits

结合实际

UI中的响应时间：3个重要的界限相关推荐

最新文章

热门文章