应该是两年前,网易首页全新的改版。内容区块大量采用了tab切换的方式,当我鼠标放上一个tab竟然立即切换到标签内容,当点击tab的时候竟然弹出了一个新的网页。我一直在想网易怎么犯这么低级的错呢?tab应该是单击以后在再切换的呀,这个是基本的交互原则。

然而从这个时候开始,发现在国内越来越多国内门户网站的小区块tab设计,采用了这种悬浮切换,点击弹出新页面频道的方式。而当我渐渐的开始习惯这种方式的时候,再打开美国yahoo首页,突然发现用点击切换小内容块反而还不适应了。这不禁让我开始反思。

其实不仅在国内,在国外的某些网站也开始采用这种悬浮切换的方式。我们来分析一这种方式优劣势:
优势:用户不用点击,直接用鼠标滑过tab就可以迅速切换区域内容,这对于快速浏览内容的用户,操作起来十分爽,对于浏览区块内容效率极高。
劣势:用户对于tab切换一般的习惯是点击切换,这有悖于用户的习惯,如果用户第一次接触这种切换方式的话肯定会产生错误(和我一样),很有挫败感。
所以如果要采用这种方式的话最关键的一点就是,用户要学习这种新的切换方式,是否容易学习?是否会和传统的点击切换发生混淆?
我无法做用户调查,但是从我使用的角度来说,首先很容易学习。当我点击发现是悬浮才能切换以后,我第二次访问就会采用这种新的方式了。其次还是容易区别的,因为悬浮切换有一个很大的特点就是这种方式全部应用在小内容块上,而且基本应用在内容展现上。
另外对于小内容区块展现,还有一种折中的设计方式,就是悬浮也切换,点击也切换。淘宝的首页里面的充值区块就采用了中设计。也非常不错。

最后不过无论采用哪种方式,切记一定要保持统一性,千万不要在一个页面中混合使用。
7 评论 to tab切换是click还是over?
violet
七月 13th, 2009 at 8:42 上午
很受用
旁白光
七月 17th, 2009 at 2:24 下午
很讨论QQ登录的弹出…
说说tab设计 – 我叫光耀
七月 25th, 2009 at 1:04 上午
[...] 要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这边文章分析了tab设计很在理,今天我也谈谈我抓了几个案例,谈谈对tab设计的看法。 [...]
KDUED.COM » 说说tab设计 Youshang UED Team---金蝶友商网用户体验与前端开发团队
七月 25th, 2009 at 1:22 上午
[...] 要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理,今天我也谈谈我抓了几个案例,谈谈对tab设计的看法。 [...]
bwsm
八月 5th, 2009 at 4:03 下午
请教一下:
“悬浮也切换,点击也切换”是啥米意思?
hover的时候已经切换了,再点击就没有作用了呀~~~
tina_tong
九月 8th, 2009 at 4:10 下午
鼠标滑过和点击切换tab,这两种是不冲突的方式吧,各有优缺点,点击的是用户需要多一个步骤进入自己想打开的页面。鼠标划过的方式很快捷,但是偶尔会出现滑动鼠标的反复,当内容和tab标题距离很近的时候这种方式就可能会出问题,用户在阅读内容的时候用鼠标滑来滑去,很可能不不小心就切换到另外的tab标签。
UEwin 赢在用户体验工作室 » Blog Archive » 说说tab设计
九月 15th, 2009 at 1:23 下午
[...] 要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理,今天我也谈谈我抓了几个案例,谈谈对tab设计的看法。 [...]