回国正好赶上百度用户体验部主办的UXday活动，我们小组讨论的话题是tab（标签）在使用时的禁忌。
我们讨论的话题集中在一个点上：如何处理海量的tab？
首先回顾一下Tab的历史。这里的tab，是一类交互元素的统称，既包括在web设计中的导航，也包括在浏览器等桌面软件中的使用。被称为tab的交互元素一般有如下两个特性：
- 同时具有动作和状态两个含义。tab之所以流行，一个原因就是因为它既方便操作，同时又能够让用户清楚地知道自己目前在哪个位置（tab）
- 从信息架构的角度来看，tab之间的内容一般是不交叉的。并且tab之间的关系应该是平等的，没有相互隶属的关系。
所以从广义来讲，绝大多数导航菜单其实都可以归结为tab。
在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章：The History of Amazon’s Tab Navigation（中文版请猛击这里）。从这篇文章中我们可以看到，Amazon的导航从最初只有两个tab：Book和Music，演化到2000年最多的时候有两排tab。很显然，当tab数量增多的时候，tab这种交互方式遇到了一些困难。
另一个例子是Word 2003中的设置对话框。如下图所示，当标签太多而显示空间有限的时候，微软不得不同样把标签排成两排。这样做的一个大问题是，上排的标签在选中的时候，如何表示选中状态和当前内容页的关系？
微软的做法是饱受诟病的。在上图中当用户点击上排标签时，上排自动和下排对调从而保持标签和内容页的紧贴关系。然而这个做法使得标签的位置非常不一致，相信很多人都有着同样的迷茫经历。
在其他一些软件中，如firefox 3（如下图），点击上排标签时，仅仅将标签显示变为选中状态，这样的好处是保持了标签位置的一致性，然而却失去了一些位置上的指示功能。
那么如果多排标签不是个好主意，如何处理很多的标签呢？
一个显然的思路是把标签从惯用的水平排列换到竖直排列。一般这样的排列是在视图的左侧，可能是以图标或者文字的形式。
不过这种做法存在一些问题。首先，如果标签的名字很长，将会占据很多宝贵的左侧空间，而这一空间正好是屏幕上用户注意焦点，兵家必争之地。有的网站的做法是将文字垂直摆放，这样的做法，特别对于英文网站来说，可读性简直就是灾难。如果放在右侧，有可能和滚动条相互干涉，并且用户也不容易注意到。其次，当标签不多的时候（考虑标签数目可变的情况），标签下方放什么内容也是比较头疼的。
一个思路是，如果标签之间存在着某种结构，那么可以把标签分组。然后增加一个导航级别。微软的onenote在这方面做到了登峰造极的程度，将信息分为Notebook, section, page三个层次，每个层次都用标签导航来表示，结果就是在页面的上方，左侧和右侧都布满了标签……微软功力不俗，用格式塔（左侧的分割）、色彩标记（section的彩色和page的白色）等手法把三层标签导航都处理得很好。
另一种分组的方式是直接呈现在标签上。考虑windows任务栏的默认分组方法，将同一个程序的不同窗口归为一组。或者是IE8中，将来源于同一父网站的标签用相同的颜色归为一组。
如果标签之间存在重要程度的不同，也可以考虑显示最重要的一批标签，同时以“更多”等按钮来提供余下的标签（交互设计模式中的extra on demand模式）。如Amazon在实在不能忍受双排标签之后就这样做了（如下图）。此外，还可以根据用户目前的位置提供相关性最高的标签。
如果标签之间不存在重要程度的区别，也不存在显然的结构呢？比如浏览器的标签？不同的浏览器有不同的做法。firefox和IE的默认做法是只显示一行标签，设定标签的最短长度，然后在两端加入向左/向右的箭头，同时还在标签栏左侧或者右侧加入显示全部标签按钮。Safari 4只在最右侧加入一个”…”的“显示全部标签”按钮。而Chrome做的比较奇怪，没有最短标签长度这一设置，也不管三七二十一将所有标签都显示在一行里面，于是当标签数目过多时就会变成如下图这个悲剧的样子。我们建议，如果只显示一行标签的时候，best practice是：在左右两侧显示滚动的箭头，并且提供以某种方式（通常是平铺或下拉菜单）显示全部标签列表的按钮，并且设定标签最短的长度。
总结浏览器的做法，可以看出还是以对标签栏的横向操作为主。举个手持设备的例子。facebook的iPhone App中，对于不同的feed是将其显示在一个“window”中，手指滑动可以拖动feed条在window下移动（语言很难描述清楚，看图）。另一个对标签条横向操作例子是苹果的Mac页面，在这里苹果使用了交互设计模式中的“注释滚动条”模式，将滚动条加上了标签的功能，这同时也是标签分组的使用。
总结以上讨论：
1. 在静态页面设计中，尽量避免使用多排水平标签的布置。可以使用垂直标签代替。
2. 如果标签之间存在结构，可以将标签分组。分组可以以下拉菜单，颜色分组等多种方式进行。
3. 如果标签重要性或相关性存在区别，可以显示最重要的标签，然后加入“更多”（全部）按钮。
4. 如果标签之间都是相互平等的，可以考虑对标签栏进行操作，如加入左右移动按钮，允许用户拖动/滑动等。
总结的很好，amazon的内个4排tab用现在的标准来看简直就是“雷人”啊。
看到总结部分发现并没有一个解法。我想这是因为“海量”这个目标太宽泛。不可能设计出一个能无限scale up的整理tab的办法。数目过多也许应该使用其他方法。针对于reasonable数量的tab讨论可能更具有实际意义？
本人对浏览器一直很关注，也是自己最主要的业余爱好之一。在对TAB的处理上，本人也曾花了不少心思考虑，确实，在浏览器上如果用户打开几十个页面，那么就象楼主所说的，在TAB上的内容什么也看不清楚了，点击也成了问题。以前我的处理方法就是按网站来源分组（不是IE8那种用颜色分组，而是分成两排），后来发现视觉效果很差，后来就干脆把组内的TAB改成缩略图的形式，变成了一个TAB就是一个网站，而网站内所有打开的新页面就是缩略图，TAB大大减少了，而视觉效果也并不差。有兴趣的朋友可以看看（这里不能贴图，只好给地址了）。
http://blog.51cto.com/viewpic.php?refimg=http://img1.51cto.com/attachment/200912/200912271261853086078.jpg
赞！这个是老兄自己设计的浏览器吗？其中这个预览显示的思路在windows 7设计的时候曾经作为任务栏样式的一种可能性提出，好处是直截了当，坏处也是很明显的，就是大量屏幕空间被长时间闲置了。在这个问题上我觉得苹果的expose解决得非常优雅，既最大限度地做到了所见即所点，又实现了在不用的时候隐藏起来，使用的时候方便调出
赞，配上图就清楚很多了啊，呵呵，不过关于tab 有很多东西可以研究的，希望能看到关于其它问题的讨论
网页上的tab有两种形式：module tab(用于页面内某区块)，navigation tab(用于整站导航)。当面临海量tab时，应分别进行讨论。
对于navigation tab，它展示的是网站一级导航，我认为在这里根本就不应该允许“海量tab”的出现。如果出现“海量tab”的话，只能说明网站内容的信息架构方式存在问题了。
如果出现“海量tab”的话，只能说明网站内容的信息架构方式存在问题了。赞同！
同意。所以这里面的讨论，可能很多还是在浏览器这种场合下比较适用
btw，我认为在one note中，右侧的tab严格意义上其实是treeview…它只是做成了tab的样子
推荐阅读msdn中对于tab可用性的描述：
http://msdn.microsoft.com/en-us/library/aa511493.aspx
顶一下，好文。
好文，收藏到20ju.com
很喜欢贵站，不知站长是否可以交换链接啊。已经添加好了您的链接。
本站名称：乐蜂网
希望能通过审核。谢谢！
博主总结的很好，
其中关于垂直排布的问题，可以参考下FIREFOX的插件 TREE STYLE TAB，解决的很好：）