细微处提高tab标签鼠标效果的用户体验
Tab标签的切换效果在网页里几乎是无所不在,只要做网站,就会有这个效果,当然,我不是想谈怎么去实现它(代码网上一抓一大把,水平参差不齐)
讨论:Tab效果,实现切换是鼠标经过切换好还是鼠标点击切换好?
从用户的使用角度来讲,通过越少的动作能达到获得更多的信息才是更好的,那么可以说鼠标经过就切换比鼠标点击要好。 附: 现在网站上这种标签样的东西非常多,也经常会给人迷惑感,设计做出来看上去是标签,点击以后却直接打开一个新页面,或者转跳,也许这不是浏览者的意愿,(这让我想起了很多论坛,或者新闻,在首页新闻里看到的明明是条新闻标题,点击以后进入的不是新闻,而是新闻的栏目首页,让我顿刻有受骗的感觉)所以点击效果的tab,只有用户不在乎是否跳转他才肯定的去点击。
提升用户体验:既然鼠标经过的效果好,有什么细微之处可以提高?
说到这个问题,还是那天客户提出的要求让我感觉到确实是个很细微的地方 , 页面如:侏罗纪软件的首页:http://www.jurassic.com.cn/
他的下方有个tab切换的效果,当看到这个效果的时候,我当然就按平时的做法(具体不说了)马上做好,效果无非是鼠标放上去切换,代码上,如果客户要求鼠标是点击效果,只需要将mouseover改成click,然后里面的执行代码就一样一样。 但挑剔的客户客户突然提出:这个Tab效果切换的太快了,鼠标随便划拉一下就切换,感觉太灵敏了。 心里暗骂客户真是事儿多,但无奈还是改,将切换代码写成函数,再用settimeout来延迟400毫秒来实现切换的函数,改完这步,感觉是延迟了,但鼠标滑过每个标签还是切换,只是推迟函数执行,改变它,小问题!在mouseout里加个cleartimeout,这样,用户在Tab标签上鼠标停留时间不超过400毫秒的滑过,就不会引起tab内容的切换,这样真的就避免了无意的鼠标滑过引起切换。改完以后感觉客户的要求确实是对的, 虽然只是细微的一步,细微到我做了这么久的Tab效果都已经烂熟烂抄的效果,而没有注意过这个问题,细微到很多人在浏览网站上重来没有感觉到这是需要处理才能更好实现的效果(做完后又去看了一些门户和其他网站的Tab切换,发现很多切换都做了细微的延迟处理,以前怎么没有发现这个问题). 改完后,由于Tab标签上,客户没有要求加链接,干脆再加上一个点击效果,完成后就是点击直接切换,或者鼠标在标签上稍微停顿切换内容,这样算是用户体验达到了很好的提升,兼顾了各种用户习惯。
后感后言
一个优良的代码应该具备哪些条件,总结应该如下(自己的一些看法):
1,兼容能力强,逻辑合理,结构优化,执行效率高 能为更多的情况考虑,减少DOM访问,将代码尽量用于逻辑及自定义操作(这个和js网页脚本开发特点有关),多写几行甚至几十行代码是很值得的。
2,易读性,模块化, 所谓易读性,当然首先要有良好的代码习惯,书写习惯以及尽量在需要的地方留有注解说明,模块化的代码更便于调用,和避免同样的效果,仅仅是因为对象的id,class,标签名称而反复写,所以应该说,更推崇脚本库的使用,库不是万能的,但是有了库确实简化了很多不了解而需要很多步骤去实现的代码,或者不需要的重复代码。
3,扩展能力强,易于以后不可预料的修改, 扩展和易于维护,这个更应该在代码结构上,从一开始就想好,当然这个和自身水平以及经验有很多关系.
同样的,我认为以上几点也适用于web标准页面的书写,好的web页面代码应该充分掌握网站结构的特点,定义样式或者html代码的结构应该从整站出发,而只考虑当前页面,当前模块,往往我们会多写出许多重复的代码,重复的样式,而到最后自己也被绕糊涂了
Tab关键代码展示
function tabChange(tabHead,headAddClass,tabBox,boxAddClass){ var timeout; function eachClass(){ jQuery(tabHead).each(function(i){ jQuery(tabHead).eq(i).removeClass(headAddClass); jQuery(tabBox).eq(i).removeClass(boxAddClass); }); } window.addClass = function(a){ eachClass(); jQuery(tabHead).eq(a).addClass(headAddClass); jQuery(tabBox).eq(a).addClass(boxAddClass); } jQuery(tabHead).each(function(i){ jQuery(tabHead).eq(i).mouseover(function(){ timeout =setTimeout("addClass("+i+")", 400); }); jQuery(tabHead).eq(i).mouseout(function(){ clearTimeout(timeout); }); jQuery(tabHead).eq(i).click(function(){ addClass(i); return false; }); });
(责任编辑:admin) |