开发网站要从用户的角度出发!

我本人就是一个用户,当我在使用全国软考网是所遭遇的问题让我头痛,报名和查看信息要登陆账户时,浏览器总是报错,弹窗提示说必须使用IE6版本JS才能正常运行,这样真的很让我很无语。还有在一些个别的企业网站,打开页面通常需要5S的时间,期间页面呈现空白,也会听到散热风扇“呼呼”地吹着热风,我查看了一下源代码,文档的代码结构让我心里很吃惊。而且百度的大部分产品完全没有对桌面触控事件提供支持,让多合一设备无从下手...

我在开发个人网站时,始终重视“用户体验”这个概念。让用户放松的浏览网站中的内容,难道这不重要吗?让代码遇到错误是尽快返回、控制作用域、提升循环性能、缓存变量、使用对象式函数及方法等,这些技术的运用都源自创建良好用户体验这一目标。

 1    success : function (data) {
 2             var fruit = data.fruit,
 3                 count = fruit.length;
 4                 //将output元素置空
 5             
 6                 $("#output").empty();
 7             if(count > 0){
 8                 $.each(fruit, function (i,obj) {
 9                     $("#output").append("<p>'+obj.name+'<a href="*" '+obj.color+'>'+obj.color+'</a></p>");
10                 })
11             }
12                 //这是一段截取的向json数据文件请求的js片段,它形象的返回了请求的各个阶段 相应的提示
13         }.error(function () {
14                 alert("返回请求错误信息!")
15             }).complete(function () {
16                 alert("返回发送完成消息!")
17             }).success(function () {
18                 alert("返回请求成功消息!")
19             })

加载信息提示用户

有时我们需要Ajax接受服务器的数据,网络通信条件可能非常的不稳定,会出现在请求和浏览器渲染过程中导致网页部分暂时空白的情况。如果不针对用户显示相应的等待提示,可能会使用户感到焦虑,在等待过程中在页面左点右点,甚至会认为网站的本身出了问题,从而离开网站。可见用户的体验关系到了网站的运营。至此,我们需要在Ajax通信过程中同时在相应的DOM节点添加loding…或者小动画等提示信息,这样的话用户可能会为数据等待一段时间,而不至于迅速离开网站。

 1     "use strict";   //这是一段截取的js(ajax)代码
 2 
 3     var request = getHTTPObject();
 4     //我想要提醒大家的是:当网页的某个区域在向服务器发送http请求的过程中,要有一个标识提醒用户正在加载...
 5     
 6     outputElement.innerHTML = "Loding..."; //也可以根据各位的需求添加一个循环小动画
 7 
 8     request.onreadystatechange = function () {
 9         
10         if(request.readyState ===4 || request.status ===200){

特效  (http://www.w3school.com.cn/jquery/jquery_ref_effects.asp)

对于网站特效的问题,我建议使用适量的前端动态特效,辅以事件监听器达到一种“动态”网站的效果。CSS3新标准迎来大量的伪类样式,使用javascript代码结合CSS可以创造出很好的特效;另外jQuery库中定义了animat()方法,可以直接定义元素的动态效果。

浏览器适配问题(http://www.w3school.com.cn/browsers/index.asp)

关于旧版浏览器适配的问题,可以使用框架进行兼容。HTML5 boilerplate(http://www.bootcss.com/p/html5boilerplate/)是一个前端开发模板,官方宣传由100为资深开发者共同协作而成。它能帮你构建健壮、快速且适应能力强的Web 应用程序和网站,你使用编码器阅读HTML5 boilerplate,你会惊叹这个仅仅64kb左右的源码包,每一个代码都有其存在的意义。它确实能让你的项目开一个好头,它能识别旧的Ie浏览器,并给出用户提示,以免用户误解。你可以自行下载源文件,深入研究。

当你开发项目的过程中,需要对如何处理javascript中的各种问题做出结构或风格方面的决策时,应始终记住用户体验一词,以此来指导开发过程。我们通常关注的是应用程序的终端永华,实际上用户体验还包含另一方面的内容,它就是“可维护性”,它与终端用户的体验同等重要。

可维护性指的是与你一同开发团队中的其他能更新你的代码的人,是否能够有效地维护你开发出来的程序。我们也许可以为了提升终端用户的可用性而牺牲了可维护性,但是一名合格的开发者应该在可用性、执行效率及终端用户可用性之间寻求平衡。

我经常再做一个决定时,我会思考两个问题:“哪种方案会终端用户最好?”,“这么做对代码库的可维护性会造成什么影响?”。如果我的脑海中有明确的答案,这就证明我带领着项目正在朝着良好的方向前进。

原文地址:https://www.cnblogs.com/xuanya/p/5947199.html