`
deng131
  • 浏览: 675238 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

前端交互操作响应时间基本准则

阅读更多
在前端用户交互过程中,会存在等待服务器响应的事件间隔,这个时候对用户展示响应的提示能更加的友好。这样情况就需要考虑操作方式和网络情况。

响应时间的基本准则:

  * 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
分享到:
评论

相关推荐

    java前端交互

    Java前端交互是Web开发中的重要环节,涉及到服务器与客户端之间的数据传输、状态管理以及用户界面的实时更新。在这个过程中,Java通常作为后端语言处理业务逻辑,而前端则负责展示和用户交互。以下是对给定文件信息...

    留学商城前端交互的设计与实现.rar

    总的来说,留学商城前端交互设计与实现涉及多方面的技术和知识,包括但不限于用户体验设计、前端框架应用、Web标准、响应式设计、状态管理以及安全策略。通过合理的设计与实现,可以构建出高效、易用且安全的留学...

    6个Web前端非常好用绚丽的时间显示(二)

    除了基本的前端技术,开发者可能还利用了一些特定的前端库或插件,如Moment.js(时间日期处理)、Bootstrap(UI框架)或Animate.css(动画库),来增强时间显示的功能和视觉效果。 8. **性能优化**: 高效的时间...

    响应式前端框架

    响应式前端框架是一种设计模式,它允许网页在不同的设备上,如桌面电脑、平板电脑和智能手机,呈现良好的视觉效果和用户体验。这种框架的核心是利用媒体查询(Media Queries)、流式布局(Fluid Grids)、弹性图片...

    APP前端响应式页面

    4. **可触摸友好的交互**: 移动端APP的前端设计需要考虑到触屏操作,如增大按钮大小,增加触摸目标,以及优化滑动和点击事件,确保用户在触摸屏上的操作体验流畅。 5. **字体适配**: 不同设备的像素密度不同,响应...

    100套响应式前端纯静态网页模板.7z

    总的来说,"100套响应式前端纯静态网页模板.7z"提供的资源为开发者和设计师提供了一个丰富的库,帮助他们快速搭建和部署适应多设备的网站,节省了设计和编码的时间,同时也降低了维护成本。无论是新手还是经验丰富的...

    棕色宽屏响应式仿flash交互html5模板_html5 bootstrap 响应式模板UI前端源码.rar

    标题和描述中提到的“棕色宽屏响应式仿flash交互html5模板_html5 bootstrap 响应式模板UI前端源码.rar”表明这是一个基于HTML5和Bootstrap框架开发的响应式网站模板。这个模板具有棕色的主色调,宽屏设计,以及模拟...

    响应式前端网页模板

    响应式前端网页模板是现代网页设计中的一个重要概念,它允许网页根据访问设备的不同屏幕尺寸自动调整布局、内容和功能,从而提供优秀的用户体验。这种技术在移动互联网时代尤其关键,因为用户可能通过桌面电脑、平板...

    全屏js交互大图模特摄影公司响应式模板_html5 bootstrap 响应式模板UI前端源码.rar

    该压缩包文件“全屏js交互大图模特摄影公司响应式模板_html5 bootstrap 响应式模板UI前端源码.rar”包含了一套专为模特摄影公司设计的响应式网站模板,利用了HTML5和Bootstrap框架,以实现优秀的用户体验和设备适应...

    手机前端响应式模板源代码

    总的来说,这个"手机前端响应式模板源代码"是一套适用于开发手机网站的完整工具,它利用了响应式设计原则,确保在不同设备上的良好表现,同时也简化了开发流程,帮助开发者高效地创建出美观且实用的移动端网站。...

    前端前端静态模板-非响应式后黑色台综合管理系统-学生作业毕设实训素材.zip

    该压缩包文件“前端前端静态模板-非响应式后黑色台综合管理系统-学生作业毕设实训素材.zip”包含了用于前端开发的学习资源,特别适合学生进行毕业设计或论文编写时使用。这个项目是一个非响应式的后台管理系统,其...

    php面向对象案例,对一个盒子进行封装,与前端交互

    在这个案例中,我们将探讨如何通过PHP面向对象技术来实现一...同时,通过与前端的交互,我们实现了用户输入到后台计算再到前端展示的完整流程。这种模式在实际的Web应用开发中非常常见,是构建动态、交互式网站的基础。

    【前端源码】响应式农业网站html+css+js.zip

    4. 响应式设计原则: - 移动优先:首先为最小的设备(如手机)设计,然后逐步添加更多样式和功能以适应更大屏幕。 - 弹性网格:使用相对单位(如百分比、em、rem)而不是绝对单位(像素),使元素能够按比例缩放。...

    前端静态模板-响应式红灰后台系统ui组件模板-学生作业毕设实训素材.zip

    在前端开发领域,静态模板和响应式设计是构建现代网页应用的重要组成部分。"前端静态模板-响应式红灰后台系统ui组件模板-学生作业毕设实训素材.zip"这个压缩包包含了一个完整的前端应用源码,适合学生进行毕业设计...

    前端前端静态模板-非响应式航空公司企业模板-学生作业毕设实训素材.zip

    9. 设计原则:包括色彩理论、布局、对比度、响应时间等,这些都是创建美观且易于使用的界面的关键。 通过学习和实践这个非响应式航空公司企业模板,学生可以积累宝贵的前端开发经验,掌握基本的网页构建技术,并为...

    软件工程中的前端开发与交互设计.pptx

    ### 软件工程中的前端开发与交互设计 #### 第一章:软件工程中的前端开发与交互设计 **1.1 前端开发与交互设计简介** 前端开发与交互设计是软件工程中的两个核心组成部分,它们共同作用于提高产品的用户体验。...

    H23_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    【标题】"H23_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 涉及的是一个专门用于构建手机网站的HTML源码包,这个包内...同时,了解并运用响应式设计原则,对于适应当前多设备浏览的需求至关重要。

    前端开发工程师分享PPT

    - **前端交互逻辑**:涉及前端代码的编写,以及实现用户界面的各种动态效果。 - **后端数据逻辑**:虽然主要是后端工程师的工作,但前端工程师也需要了解数据接口的设计与调用。 - **测试质量把控**:前端工程师需要...

    前端静态模板-响应式可换色图片网站模板-学生作业毕设实训素材.zip

    通过研究和实践这个模板,学生不仅可以学习到前端开发的基本技能,还能深入了解响应式设计原则,提升网页设计和用户体验方面的知识。同时,这样的项目也适合用于论文展示,因为它提供了实际的、可视化的成果。在实训...

    前端前端静态模板-非响应式绿灰清新-学生作业毕设实训素材.zip

    "前端前端静态模板-非响应式绿灰清新-学生作业毕设实训素材.zip" 是一个专门为学生作业和毕业设计准备的资源包,它包含了一套完整的前端应用源码,帮助学生在学习过程中实践和理解前端开发的基本概念和技术。...

Global site tag (gtag.js) - Google Analytics