不久前写了这篇关于Tab的文章，最近看到两老外的关于Tab的好文，特此推荐。在Tabbed Navigation, and What Makes it Useful一文中，David Leggett解释了Tab这个metaphor的来源，以及使用导航Tab的四个好处，不过没有具体讲该怎么设计。作为补充，可以参考Smashing Magazine上的Showcase Of Well-Designed Tabbed Navigation， 提供了大量的优秀实例。但关键不在于看人家弄得多漂亮然后照搬，而是学习（并钻研）怎么样能弄得这么漂亮吧？圆角、渐变……都是小细节。但正是这些小细节 让整体看上去完全不一样了。否则又只是生搬硬套的抄袭，还要抄不到点子上……sorry，又粪青说教了，最近实在看了太多劣质山寨。很搞笑，在反馈用户测 试报告提到一个视觉设计的问题时，设计师反驳道，“XX网站（某主流网站，被抄袭对象）也是这么做的啊”，啊哈，测试时用户就说了，“是没错，但那XX网 站也让我不爽很久了”。

另外，OutC童鞋给我的文章留言道——

我认为hover使用的必要性上还需要补充两点：
1. 看导航菜单的Tab个数，如果个数太多而且都有子菜单，那么就十分有必要使用hover，因为我们不能保证用户是不有足够的耐心去一个个点开分类菜单查看子分类；
2.如果对于导航下Tab中有相对应的首页来说，使用hover就显得有些不可取，因为hover这一动作使得用户的关注点集中在了Tab的子菜单下，而不是Tab本身，这样就使得Tab大分类的首页变得无足轻重，所以hover的使用还是需要权衡一下的。

在原文中，切换问题我是分别针对导航Tab和内联式Tab来写的，但对前者的分析不是很全面。因此十分感谢他的补充。导航Tab是hover还是点击切换的，针对OutC提出的第一点，原文我写了：

“一般来说，导航Tab都是点击切换的，因为涉及到整页刷新时载入速度的问题。但有时因为担心Tab下的二级导航项藏起来用户找不到（也即我们不能保证用户是不有足够的耐心去一个个点开分类菜单查看子分类的情况），就会出现图4这个导航 Tab采用hover切换刷新二级菜单的方式。” 在这种情况下，我提出了要解决好触发灵敏度，不再赘述。

关于第二点，不知道OutC同学所言“导航下Tab中有相对应的首页”，是指二级子类目中有一个第二层级的首页吗？我有点不太能理解你所描述的场景但总而言之，正如我在写内联Tab切换问题时所说，没有绝对的选择，关键是选择后如何处理好细节上的设计。

打印  |  相关话题：Tab页签   |  类别：信息和交互  |  源地址