zylew的鲜果分享

之前有写过一篇浏览器的tab设计，这回说说网站的tab设计。
一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化，选择tab似乎是性价比最高、结构传递最明确的导航方式。这也是其中面包屑导航方式衰弱的重要原因。

如果你想用tab的方式构架你的网站，搞明白下面几个问题，或许对你怎么设计会有帮助。

用tab解决什么问题？
在设计tab之前，先要搞清楚为什么用tab，每个tab下的信息到底是什么，信息之间的关系是：
信息结构一共有多少层？
tab跟大标题之间的关系（大标题的作用大多是给用户定位）
并列关系
过滤关系
是否互为同类项？
包含与被包含？
……
如上图，tab1和tab2下面的信息互相之间的关系？每个tab下信息和大标题之间的关系？只有搞清楚关系和需求，才有办法进行下一步设计。

tab结构
看下面几张图，相信应该能够感受到结构的区别了。

上图都是选中tab4的效果，但结构方式却不一样。虽然这个例子很简单，但我们在实际操作的时候，往往会比这复杂很多，比如：
tab下面需要嵌套tab，如digg的设计。
或者tab和面包屑的结合方式，（如原来junchen介绍过的）等等，
很多问题往往因为多层的信息结构，在tab的运用上面，需要灵活变通。
（在研究结构的时候，需要完全抛开交互和视觉样式来分析）