作者：西喬 譯 來源：Smashing Magazine 時間：2009-07-04 類別：網頁理論
現在為止，我們從細節上探討了Tab這種交互元素，是時候來看看真實案例了，在這一章節，我們分析一些Tab元素的應用，希望可以帶給大家靈感。
這個網站在首屏位置使用大量Tab元素 以展現數量龐大的信息。
雅虎在頭版位置使用Tab設計，對信息內容的顯示進行了壓縮和模塊化。
Igoogle在模塊中大量使用了Tab，不占用大量的屏幕空間，又令信息飽滿。
藍橡果網站 利用Tab來顯示網站的熱門文章: 電子商務和Magento（一個電商軟件平臺），內容區上還放置著引導用戶瀏覽更多文章列表的按鈕。
在這個案例中，你可以看到利用圖標強化標簽文字描述的應用。
WebNotes 網站的Tab元素，標簽位于內容區下方，令人耳目一新。內容區切換時有淡入淡出的動畫。
WordCat.org 在搜索框中使用了Tab標簽，讓用戶可以針對特定搜索需求縮小搜索范圍。（比如書籍、DVD、或者文章）
Martha Stewart 在網站的“推薦內容”上應用用了Tab設計，可以自動播放和帶有過渡動畫。
Krista’s Creations 利用字母表作為標簽來控制圖片的分類顯示。
Clearspring 擁有響應速度極快的Tab，這是一個非常好的古典樣式的Tab設計案例。
在網站Homewood中，它們也利用icon來輔助了標簽上文字的表述。
蘋果網站里，垂直方向排列的Tab標簽設計，非常漂亮。
網站 ExpressionEngine 把標簽控制區放在Tab窗體的底部，在快速載入內容區和快速響應內容區切換方面，它也是一個典型案例。
Viget Inspire 在“熱門文章”版塊使用了Tab，有淡入淡出的切換動畫，內容區高度可根據內容長度自適應。
Komodo Media 的標簽里，icon放在文字上方。
atebits presents 用Tab來展示產品介紹，它有效地在這么小的空間里展現了如此豐富的內容。
Tumblon 把標簽放置在內容區下方，能快速響應切換，但不好的是，標簽的選中狀態和未選中狀態不是那么容易區分。
在 Kev Adamson的網站中，右邊欄里有好幾個Tab，網站使用了不同的ICON配圖，幫助用戶理解不同Tab的功能。
優秀包裝設計精選集(44)包裝設計2013-11-24
20個國外創意信封設計欣賞VI設計2013-11-14
6個創意品牌形象設計佳作VI設計2013-11-14
30款薯片包裝設計欣賞包裝設計2013-10-26
現代時尚的臥室設計欣賞裝修設計2013-10-25
優秀包裝設計精選集(43)包裝設計2013-10-25
設計師如何通過顏色來影網頁理論2013-12-03
做好扁平化設計:視覺篇網頁理論2013-11-28
如何讓響應式網頁設計保網頁理論2013-11-06
淺析專題中的構圖之美網頁理論2013-11-06
扁平設計之爭網頁理論2013-09-18
網頁設計可用性指導-如何網頁理論2013-07-26