在前端用户交互过程中,会存在等待服务器响应的事件间隔,这个时候对用户展示响应的提示能更加的友好。这样情况就需要考虑操作方式和网络情况。
响应时间的基本准则:
* 0.1秒是用户瞬间感受的界限,这意味着不需要任何提示(feedback)可直接显示结果。
* 1秒:即使用户感觉到了延迟,但仍然感觉流畅并保持连续的操作,一般来讲,延迟在0.1秒~1秒之间,是不需要特殊提示的, 但用户仍然会失去直响应的感觉。
* 10秒是用户专注于单一任务的极限,对于更长的延迟,用户将会进行其它的操作,而不会等待计算机执行完毕。所以,在计算机执行的过程中应当给用户提示。由于时间对于用户来讲是十宝贵,所以提示现在尤为重要,不然的话用户讲不知道做什么。
* 计算机的响应时间一般来说,越快越好,但底线是保证可用性,不应当过快以至于用户无法操作。例如,滚动列表的滚动速度太快到让用户无法及时停止目标内容。
* 当一个操作需要超过10秒的等待,应该给予用户一个百分比进度条,这种效果将远远好于仅提示用户剩余时间,并且给予一个可中断或取消的操作。
* 对于无法计算进度的操作,也应当给予用户适当的反馈。例如:扫描未知大小的数据库时,可以打印出已扫描的表。另外替代方案是提供一个简单的等待动画,提示用户程序在运行中。
* 对于2~10秒的操作,如果使用百分比进度条显得有些大材小用,并且过快的显示也会让用户有种闪烁的不好效果。这时可以仅使用一个“忙碌”的动画,并且在合适的位置配上一个变化的数字提示进度,效果更好。
现在在大多数主流网站都运用了这种方式:
1: 如在google的suggest的应用当中,如果每次键盘事件都会触发一次请求的,那么这其中将会有许多无效请求,并对服务器造成一定压力。因此多数Suggest中都会使用如上一例子中的延迟,时间一般控制在200~250毫秒内。
2: 在上传文件和图片,会存在一定的等待时间这是给用户以等待条表示系统正在提交中,增加用户体验。
参考:
http://www.useit.com/papers/responsetime.html
http://www.cnblogs.com/rainman/archive/2011/01/04/1925814.html
分享到:
相关推荐
Magix 是用于构建大型富交互单页应用的前端MVC框架。它提供了基于树状结构的视图系统,页面初始渲染以及URL 变动都将从根 View 开始逐层进行, 这使得局部变化井然有序;同时遵循Magix的开发约定可以很好的控制页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
这些模板基于最新的Web标准构建,采用了响应式设计原则,确保在不同设备上都能提供一致的用户体验 从前端开发的角度来看,这些模板使用了HTML5、CSS3和JavaScript的最新标准,结合了流行的框架如Bootstrap,使得页面...
从前端开发者的视角出发,这些模板采用了HTML5、CSS3和JavaScript的最新标准,结合了响应式设计原则和流行的框架如Bootstrap,使得页面布局灵活且兼容多种浏览器。它们不仅设计优雅,还提供了高度的可定制性,让...
从Web前端开发的角度来看,这些模板使用了最新的HTML5和CSS3标准,并严格遵守响应式设计原则,以确保在各种设备上都能提供一致的用户体验。它们易于定制,支持Sass或Less等现代CSS预处理器,使得样式的编写更加高效...
这些模板采用了最新的HTML5和CSS3标准,结合了响应式设计原则,确保在不同设备和屏幕尺寸上都能提供无缝的用户体验。它们易于定制,可以根据项目需求进行个性化调整,同时支持各种主流浏览器,包括Chrome, Firefox, ...
从交互性角度来看,这些模板利用JavaScript和jQuery实现了动态效果和响应式功能,提升了页面的互动性和用户参与度。对于搜索引擎优化(SEO),模板遵循了最佳的HTML编码实践,包括使用语义化标签和Microdata,助力...
它们基于最新的Web开发标准,采用了响应式设计原则,确保在不同设备和屏幕尺寸上都能提供一致的用户体验。 利用现代前端技术如HTML5、CSS3和Bootstrap框架,这些模板在主流浏览器中表现出了优异的兼容性和布局一致...
超动态自动装配消息系统(spring-stream-3,支持rocketMq,原则上同时支持kafuka和activeMq) 初步骨架生成器 前端骨架生成器 初步可迭代开发生器(dalgen演进而来dalgenX,全网唯一可支持继承开发??
此外,这些模板还集成了响应式设计原则和流行的框架如Bootstrap,以确保在不同设备上都能提供一致的用户体验。对于程序员来说,这些模板不仅能够减少重复编写常用元素的工作量,还能作为学习和参考的最佳实践,提升...
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...