五。Tab的真实应用

现在为止，我们从细节上探讨了Tab这种交互元素，是时候来看看真实案例了，在这一章节，我们分析一些Tab元素的应用，希望可以带给大家灵感。

Haveamint.com

这个网站在首屏位置使用大量Tab元素 以展现数量庞大的信息。

Yahoo!

雅虎在头版位置使用Tab设计，对信息内容的显示进行了压缩和模块化。

iGoogle

Igoogle在模块中大量使用了Tab，不占用大量的屏幕空间，又令信息饱满。

Blue Acorn

蓝橡果网站 利用Tab来显示网站的热门文章: 电子商务和Magento（一个电商软件平台），内容区上还放置着引导用户浏览更多文章列表的按钮。

MailChimp

在这个案例中，你可以看到利用图标强化标签文字描述的应用。

WebNotes

WebNotes 网站的Tab元素，标签位于内容区下方，令人耳目一新。内容区切换时有淡入淡出的动画。

WorldCat.org

WordCat.org 在搜索框中使用了Tab标签，让用户可以针对特定搜索需求缩小搜索范围。（比如书籍、DVD、或者文章）

Martha Stewart

Martha Stewart 在网站的“推荐内容”上应用用了Tab设计，可以自动播放和带有过渡动画。

Krista’s Creations

Krista’s Creations 利用字母表作为标签来控制图片的分类显示。

Clearspring

Clearspring 拥有响应速度极快的Tab，这是一个非常好的古典样式的Tab设计案例。

Homewood

在网站Homewood中，它们也利用icon来辅助了标签上文字的表述。

Apple - iWork

苹果网站里，垂直方向排列的Tab标签设计，非常漂亮。

ExpressionEngine

网站 ExpressionEngine 把标签控制区放在Tab窗体的底部，在快速载入内容区和快速响应内容区切换方面，它也是一个典型案例。

Viget Inspire

Viget Inspire 在“热门文章”版块使用了Tab，有淡入淡出的切换动画，内容区高度可根据内容长度自适应。

Komodo Media

Komodo Media 的标签里，icon放在文字上方。

atebits

atebits presents 用Tab来展示产品介绍，它有效地在这么小的空间里展现了如此丰富的内容。

Tumblon

Tumblon 把标签放置在内容区下方，能快速响应切换，但不好的是，标签的选中状态和未选中状态不是那么容易区分。

kevadamson.com

在 Kev Adamson的网站中，右边栏里有好几个Tab，网站使用了不同的ICON配图，帮助用户理解不同Tab的功能。

六。 Tab的创建教程（前端方面的）

有很多教程能告诉你在页面上如何建立和实现一个Tab，下面，你可以通过一些顶尖教程来了解更多关于创建Tab的技巧。

Building Tabbed Content 《如何创建Tab》

通过阅读这篇初级教程，你可以了解如何通过使用 JS 框架Prototype创建一个简单的Tab元素，

Create A Tabbed Interface Using jQuery 《使用jQuery来创建Tab》

Dan Harper 提供给读者关于如何使用jQuery库(译注：著名的js库）来构建Tab。

Accessible Image-Tab Rollovers 《图片标签导航的快速切换》

学习如何实现用图片来制作标签导航区，并实现快速切换

Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery来实现一个可平滑切换的Tab》

更多的网页选项卡TAB设计原则和应用案例教程请到论坛查看: http://BBS.TC711.COM


【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源： 网页教学网    日期：2009-7-8