五。Tab的真实应用
现在为止，我们从细节上探讨了Tab这种交互元素，是时候来看看真实案例了，在这一章节，我们分析一些Tab元素的应用，希望可以带给大家灵感。
这个网站在首屏位置使用大量Tab元素 以展现数量庞大的信息。
雅虎在头版位置使用Tab设计，对信息内容的显示进行了压缩和模块化。 界面设计
Igoogle在模块中大量使用了Tab，不占用大量的屏幕空间，又令信息饱满。 深圳界面设计
蓝橡果网站 利用Tab来显示网站的热门文章: 电子商务和Magento（一个电商软件平台），内容区上还放置着引导用户浏览更多文章列表的按钮。
在这个案例中，你可以看到利用图标强化标签文字描述的应用。
WebNotes 网站的Tab元素，标签位于内容区下方，令人耳目一新。内容区切换时有淡入淡出的动画。 中国设计学堂
WordCat.org 在搜索框中使用了Tab标签，让用户可以针对特定搜索需求缩小搜索范围。（比如书籍、DVD、或者文章）
Martha Stewart 在网站的“推荐内容”上应用用了Tab设计，可以自动播放和带有过渡动画。 深圳UI设计
Krista’s Creations 利用字母表作为标签来控制图片的分类显示。 深圳UI设计
Clearspring 拥有响应速度极快的Tab，这是一个非常好的古典样式的Tab设计案例。
在网站Homewood中，它们也利用icon来辅助了标签上文字的表述。
苹果网站里，垂直方向排列的Tab标签设计，非常漂亮。 深圳设计工作室
网站 ExpressionEngine 把标签控制区放在Tab窗体的底部，在快速载入内容区和快速响应内容区切换方面，它也是一个典型案例。
Viget Inspire 在“热门文章”版块使用了Tab，有淡入淡出的切换动画，内容区高度可根据内容长度自适应。 中国设计学堂
Komodo Media 的标签里，icon放在文字上方。 APP UI设计
atebits presents 用Tab来展示产品介绍，它有效地在这么小的空间里展现了如此丰富的内容。 深圳UI设计
Tumblon 把标签放置在内容区下方，能快速响应切换，但不好的是，标签的选中状态和未选中状态不是那么容易区分。
在 Kev Adamson的网站中，右边栏里有好几个Tab，网站使用了不同的ICON配图，帮助用户理解不同Tab的功能。
六。 Tab的创建教程（前端方面的）
有很多教程能告诉你在页面上如何建立和实现一个Tab，下面，你可以通过一些顶尖教程来了解更多关于创建Tab的技巧。
《如何创建Tab》
通过阅读这篇初级教程，你可以了解如何通过使用 JS 框架Prototype创建一个简单的Tab元素，
《使用jQuery来创建Tab》
Dan Harper 提供给读者关于如何使用jQuery库(译注：著名的js库）来构建Tab。
《图片标签导航的快速切换》
学习如何实现用图片来制作标签导航区，并实现快速切换
《使用CSS和jQuery来实现一个可平滑切换的Tab》
