現(xiàn)在為止，我們從細(xì)節(jié)上探討了Tab這種交互元素，是時候來看看真實案例了，在這一章節(jié)，我們分析一些Tab元素的應(yīng)用，希望可以帶給大家靈感。
這個網(wǎng)站在首屏位置使用大量Tab元素 以展現(xiàn)數(shù)量龐大的信息。
雅虎在頭版位置使用Tab設(shè)計，對信息內(nèi)容的顯示進(jìn)行了壓縮和模塊化。
Igoogle在模塊中大量使用了Tab，不占用大量的屏幕空間，又令信息飽滿。
藍(lán)橡果網(wǎng)站 利用Tab來顯示網(wǎng)站的熱門文章: 電子商務(wù)和Magento（一個電商軟件平臺），內(nèi)容區(qū)上還放置著引導(dǎo)用戶瀏覽更多文章列表的按鈕。
在這個案例中，你可以看到利用圖標(biāo)強(qiáng)化標(biāo)簽文字描述的應(yīng)用。
WebNotes 網(wǎng)站的Tab元素，標(biāo)簽位于內(nèi)容區(qū)下方，令人耳目一新。內(nèi)容區(qū)切換時有淡入淡出的動畫。
WordCat.org 在搜索框中使用了Tab標(biāo)簽，讓用戶可以針對特定搜索需求縮小搜索范圍。（比如書籍、DVD、或者文章）
Martha Stewart 在網(wǎng)站的“推薦內(nèi)容”上應(yīng)用用了Tab設(shè)計，可以自動播放和帶有過渡動畫。
Krista’s Creations 利用字母表作為標(biāo)簽來控制圖片的分類顯示。
Clearspring 擁有響應(yīng)速度極快的Tab，這是一個非常好的古典樣式的Tab設(shè)計案例。
在網(wǎng)站Homewood中，它們也利用icon來輔助了標(biāo)簽上文字的表述。
蘋果網(wǎng)站里，垂直方向排列的Tab標(biāo)簽設(shè)計，非常漂亮。
網(wǎng)站 ExpressionEngine 把標(biāo)簽控制區(qū)放在Tab窗體的底部，在快速載入內(nèi)容區(qū)和快速響應(yīng)內(nèi)容區(qū)切換方面，它也是一個典型案例。
Viget Inspire 在“熱門文章”版塊使用了Tab，有淡入淡出的切換動畫，內(nèi)容區(qū)高度可根據(jù)內(nèi)容長度自適應(yīng)。
Komodo Media 的標(biāo)簽里，icon放在文字上方。
atebits presents 用Tab來展示產(chǎn)品介紹，它有效地在這么小的空間里展現(xiàn)了如此豐富的內(nèi)容。
Tumblon 把標(biāo)簽放置在內(nèi)容區(qū)下方，能快速響應(yīng)切換，但不好的是，標(biāo)簽的選中狀態(tài)和未選中狀態(tài)不是那么容易區(qū)分。
在 Kev Adamson的網(wǎng)站中，右邊欄里有好幾個Tab，網(wǎng)站使用了不同的ICON配圖，幫助用戶理解不同Tab的功能。
50張美麗的動物攝影作品欣賞動物攝影2014-01-01
Brandnew：2013年最佳LOGO更換榜單VI設(shè)計2013-12-27
優(yōu)秀包裝設(shè)計精選集(45)包裝設(shè)計2013-12-22
用戶體驗設(shè)計遇見色彩情感網(wǎng)頁理論2013-12-22
網(wǎng)頁設(shè)計趨勢淺析網(wǎng)頁理論2013-12-22
設(shè)計師如何通過顏色來影響消費者網(wǎng)頁理論2013-12-03