北京 上海 广州 深圳 >>
网站建设
我们的优势
我们的报价
联系我们
首 页 关于我们 建站套餐 网站优化 网站推广 解决方案 成功案例 客服中心 建站问题 推广知识 建站知识  
网站建设
  网站建设套餐
  网站建设流程
  功能模块介绍
  网页设计报价
  网站改版设计
  网站售后服务
 
最新客户
   
网站推广
推广知识
 
· 浅谈造成网站关键字排名
· 浅谈最近百度调整对网站
· 分析:站内锚文本链接使
· 细节成就权重 权重决定
· 根据百度有效反链数据
· 详解SEO策略制定中的
· 关键词排名优化之挖掘长
 
建站技术知识
 
 
tab标签效果的用户体验研究

细微处提高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;
});
}); <
 
在线咨询
     
 
QQ咨询
旺旺咨询
 
MSN咨询
  点击开始咨询 点击开始咨询
  点击开始咨询 点击开始咨询
建站服务
       经济型网站设计套餐 ¥2580
       企业型网站设计套餐 ¥3980
       豪华型网站设计套餐 ¥6580
       商城型网站设计套餐 ¥7580
       定制型网站设计套餐 ¥面 谈
       智赢型ABC ¥1580/1980
虚拟主机
       普及型(电信)350元/年
       经济型(电信)650元/年
       普及A型(双线)500元/年
       普及B型(双线)900元/年
       外贸型(国外) 550元/年
       企业型(国外) 1050元/年
我要订购主机>>       
域名注册
     国际顶级域名.com 100元/年
     国际顶级域名.net 100元/年
     国际顶级域名.cc 380元/年
     国际顶级域名.org 180元/年
     中国顶级域名.cn 100元/年
     中国顶级域名.com.cn 100元/年
     中文域名.中国.公司 280元/年
我要注册域>>       
 友情链接:湖南网站建设 广州网站建设 上海网站建设 广州网站建设公司 中山网站制作 网页设计网 网页设计公司 网站制作 网站建设 建网站公司 珠海网站建设 赢在网络
 业务范围: 广州虚拟主机 广州网站设计 广州网页制作 广州网页设计 深圳网站建设 珠海网页设计 中山网页制作 汕头网站设计 番禺网页制作 南海网站建设 肇庆网页制作

联系我们 | 建站套餐 | 网站建设 | 建设知识 | 服务报价 | 解决方案 | 成功案例 点击开始咨询 点击开始咨询
Copyright 2005-2020 win580.com rights reserved 电话:020-87518743 87518740  传真:020-87518740
地址:广州市天河区中山大道西8号(天河商贸大厦)1304室  邮编:510620
E-mail:Win580@126.com