譯者：西喬 來源：Smashing Magazine 作者：Jacob Gube

html 一次性載入：這種方法原始且安全，但是存在數(shù)據(jù)太多或太復(fù)雜導(dǎo)致頁面解析緩慢，從而導(dǎo)致整個頁面打開速度變慢，這是不可忍受的。 frame: 將隱藏區(qū)的代碼作為一個frame載入，frame的好處是可以新建進(jìn)程，和頁面中的圖片同時下載。不同的瀏覽器可以運行一定數(shù)量的進(jìn)程并行，比如IE可 以同時允許4個。這樣對整體頁面的打開速度影響小。另外，frame可以進(jìn)入瀏覽器緩存，在多個頁面共用同一個Tab元素時，frame是一個好選擇。 iframe：iframe和frame類似，繼承了frame的優(yōu)點，此外它還可以作為一個容器隨意嵌入頁面。google adsense使用了iframe來實現(xiàn)了局部代碼的載入。。 Ajax：響應(yīng)用戶操作或響應(yīng)某個觸發(fā)條件，由JS在后臺向服務(wù)器發(fā)出請求，載入隱藏區(qū)的代碼。我認(rèn)為除了交互和需要響應(yīng)動態(tài)生成的內(nèi)容外，沒必要ajax技術(shù)。） 在標(biāo)簽上使用簡短和有邏輯的文字。
標(biāo)簽應(yīng)該設(shè)計得盡可能窄，以便在一行內(nèi)容納盡可能多的標(biāo)簽。
在標(biāo)簽區(qū)使用簡單的描述或內(nèi)容關(guān)鍵字，可以幫助用戶在掃描頁面時快速找到他們想要的內(nèi)容。所以使用概括準(zhǔn)確符合邏輯的文字來描述內(nèi)容區(qū)是非常重要的，選用這些文字應(yīng)該經(jīng)過深思熟慮。
下面這個在網(wǎng)站CBS.com上的案例，是一個難用的Tab。標(biāo)簽上沒有任何說明性文字，用戶無法預(yù)測未顯示的內(nèi)容區(qū)里到底有什么。

而在 Navigant Consulting 的網(wǎng)站上，使用數(shù)字來暗示數(shù)據(jù)是有序的。但仍然沒有表達(dá)出內(nèi)容區(qū)里包含什么。這種設(shè)計容易產(chǎn)生歧義導(dǎo)致用戶產(chǎn)生不必要的困惑。
不要在內(nèi)容區(qū)內(nèi)使用滾動條
在Tab的內(nèi)容區(qū)里使用滾動條會增加用戶負(fù)擔(dān)：用戶在要查找信息在哪個內(nèi)容區(qū)里時，不僅需要切換標(biāo)簽，還需要加上移動滾動條的操作。
內(nèi)容區(qū)里容納的信息太多或設(shè)計Tab時設(shè)定的高度不夠，會導(dǎo)致滾動條出現(xiàn)。所以需要考慮精簡內(nèi)容、增加高度值，或把選中狀態(tài)的內(nèi)容區(qū)處理為的高度自適應(yīng)。三?？紤]Tab的易用性
更復(fù)雜的交互行為的出現(xiàn)，在不刷新頁面的狀態(tài)下異步更新內(nèi)容，以及如何滿足用戶使用不同訪問方式，包括那些很難確定的非典型狀況下的訪問需求，這些狀況令易用性成為當(dāng)前最熱門的話題。本章節(jié)中，我們將討論一些在設(shè)計Tab元素時你應(yīng)該知道的易用性原則。 “選擇”和“未選中”狀態(tài)的標(biāo)簽 應(yīng)該使用對比鮮明的顏色
為了讓視力上有障礙的用戶能分清哪些標(biāo)簽是已選中的，哪些是未選中的，應(yīng)該使用高對比的背景色來做出區(qū)分。
Yahoo! News 網(wǎng)站中的反面案例：選中和未選中狀態(tài)的標(biāo)簽 只有非常小的視覺上的差異，他們對視力好的用戶沒問題，但是會給視力不佳的用戶帶來麻煩。

此外，請務(wù)必保證標(biāo)簽的文字顏色（前景色）和標(biāo)簽背景色 有充分的對比。即使是未選中的標(biāo)簽，用戶也應(yīng)該能輕松閱讀上面的文字。為了讓未選擇的標(biāo)簽看起來不顯眼，而把它們都直接變灰 是不妥當(dāng)?shù)?。確保 隱藏內(nèi)容區(qū)里的信息 在語音閱讀器中是可讀的
基于可訪問性，Tab應(yīng)該使用技術(shù)將未選中狀態(tài)的內(nèi)容區(qū)隱藏起來，但是不能在DOM Tree中刪除他們。比如不能使用 display:none; 或者 visibility:none這樣的css參數(shù)去定義容器。這類參數(shù)導(dǎo)致語音閱讀器無法讀取被隱藏的內(nèi)容區(qū)中的信息。
（譯注：中國設(shè)計師可能不太重視語音閱讀器的可訪問性，但是在國外，有專門 的法令條款規(guī)定，機(jī)構(gòu)網(wǎng)站不得歧視有障礙的用戶，包括視力缺陷，行動障礙、癲癇患者等，所以外國的產(chǎn)品或前端工程師會很重視這一點，不然會遭到投訴甚至起 訴。這種差異去看看中國人是如何設(shè)計盲道的就明白了。）
詳情請見Roger Johansson’s 的文章 《利用css隱藏內(nèi)容：問題和對策》”Hiding with CSS: Problems and solutions“.
（譯注：Roger Johansson’s的文章中指出：許多CSS和JS教程建議使用display:none; visibility:none 來隱藏元素，但大多數(shù)狀況下這是一個會降低可訪問性的選擇，。
display:none的真正含義是表示這一元素并不存在，不需要顯示打印或被閱讀。大多數(shù)語音閱讀器會忽略任何使用display:none來隱藏鏈接，文字，導(dǎo)航和標(biāo)題等。作者建議使用的技術(shù)是使用絕對定位坐標(biāo)，例如 .structural { position:absolute; left:-9999px; } 。
另一個需要注意的問題是，當(dāng)你決定使用JS去顯示一個元素時，也應(yīng)該用JS 技術(shù)去隱藏它。因為考慮到客戶端是否支持js以及安全等級，如果客戶端的js沒起作用，可能交互或動態(tài)菜單沒效果，但起碼內(nèi)容是可訪問的。但如果你使用 css去隱藏一個元素，但使用js技術(shù)去顯示它，在某些狀況下，這個元素會變得一直無法訪問。）使用語義化的HTML結(jié)構(gòu)來構(gòu)造 Tab的標(biāo)簽。
使用無序或有序列表(譯注： 這類標(biāo)簽）來構(gòu)造標(biāo)簽的html代碼，可以改善可訪問性。因為使用語音閱讀器的用戶可以基于此來識別出這是一組Tab標(biāo)簽。如果標(biāo)簽 上使用了圖片來代替文字，別忘了添加ALT 或 title屬性來 描述圖片的含義。
允許鍵盤操作。
鍵盤導(dǎo)航是為一些有行動障礙或不能使用常規(guī)輸入設(shè)備（如鼠標(biāo)）的用戶準(zhǔn)備的。這種用戶會使用替換形式（比如鍵盤或語音）來控制導(dǎo)航菜單，確保他們能將控制焦點在標(biāo)簽間切換，并激活他們想要的部分。
一個簡單測試鍵盤導(dǎo)航的簡單方法是：使用鍵盤上的Tab鍵，看你是否能將控制焦點 集中在每個標(biāo)簽上？使用回車鍵，當(dāng)前的控制區(qū)域是否能被激活，使未選中狀態(tài)有效地切換為選中狀態(tài)。 提高對用戶客戶端的兼容性。
當(dāng)客戶端無法支持某些技術(shù)，比如當(dāng)瀏覽器關(guān)閉了JavaScript功能時，或者 當(dāng)用戶沒有安裝Flash插件時，Tab內(nèi)容區(qū)上的信息必須保證最基本的可訪問性，交互元素確保能被替換為最基本的html文本。 四。 提升之道。
在提供了一些基本的可用性建議和原則后，我們還可以討論一些方法來進(jìn)一步提高Tab元素的可用性。 在標(biāo)簽上使用icon來形象化地描述內(nèi)容區(qū)說包含的信息。
在標(biāo)簽上配合使用形象的icon，可以增強(qiáng)對內(nèi)容區(qū)信息的描述。
例如在網(wǎng)站 DrawIt 中，圖標(biāo)用于形象地補(bǔ)充說明所對應(yīng)的內(nèi)容區(qū)的功能。

在標(biāo)簽上使用icon，必須保證它們是形象的，切題的。使用不相關(guān)的icon會適得其反。
避免在標(biāo)簽上直接用icon來代替文字。
不同的人對一個圖像有不同的解讀，最安全的方法是使用加上文本來描述內(nèi)容區(qū)信息。 在內(nèi)容區(qū)切換的時候使用過渡動畫。
在內(nèi)容區(qū)切換的時候使用過渡轉(zhuǎn)場動畫是一個不錯的選擇，可以為用戶提供積極的視覺反饋——內(nèi)容區(qū)正在變化！
大家可以去網(wǎng)站 Coda ，從左到右點擊Tab標(biāo)簽，欣賞切換時的效果。
當(dāng)用戶在Tab的標(biāo)簽區(qū)進(jìn)行操作時，有明確的懸停響應(yīng)。
默認(rèn)情況下，當(dāng)用戶將鼠標(biāo)移到超鏈接或標(biāo)簽區(qū)域上時，鼠標(biāo)指針的樣式會發(fā)生改變，讓用戶知道標(biāo)簽區(qū)域是可點擊的。
除此之外，還可以利用背景色變化來響應(yīng)用戶的鼠標(biāo)操作。對于那些不熟悉Tab標(biāo)簽操作的網(wǎng)站新用戶而言，這是很有用的。
下圖中Vyniknite.sk 網(wǎng)站的案例里：當(dāng)用戶鼠標(biāo)劃過未選中狀態(tài)的標(biāo)簽，背景色會變成鮮明的紅色。


Module Tabs(也稱選項卡，后文中簡稱Tab，以便更符合中國設(shè)計師的日常叫法) 是一個常見的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標(biāo)點擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽 上，來請求顯示該層內(nèi)容區(qū)。 現(xiàn)在為止，我們從細(xì)節(jié)上探討了Tab這種交互元素，是時候來看看真實案例了，在這一章節(jié)，我們分析一些Tab元素的應(yīng)用，希望可以帶給大家靈感。 五。Tab的真實應(yīng)用
現(xiàn)在為止，我們從細(xì)節(jié)上探討了Tab這種交互元素，是時候來看看真實案例了，在這一章節(jié)，我們分析一些Tab元素的應(yīng)用，希望可以帶給大家靈感。
Haveamint.com
這個網(wǎng)站在首屏位置使用大量Tab元素 以展現(xiàn)數(shù)量龐大的信息。

Yahoo!
雅虎在頭版位置使用Tab設(shè)計，對信息內(nèi)容的顯示進(jìn)行了壓縮和模塊化。

iGoogle
Igoogle在模塊中大量使用了Tab，不占用大量的屏幕空間，又令信息飽滿。

Blue Acorn
藍(lán)橡果網(wǎng)站 利用Tab來顯示網(wǎng)站的熱門文章: 電子商務(wù)和Magento（一個電商軟件平臺），內(nèi)容區(qū)上還放置著引導(dǎo)用戶瀏覽更多文章列表的按鈕。

MailChimp
在這個案例中，你可以看到利用圖標(biāo)強(qiáng)化標(biāo)簽文字描述的應(yīng)用。

WebNotes
WebNotes 網(wǎng)站的Tab元素，標(biāo)簽位于內(nèi)容區(qū)下方，令人耳目一新。內(nèi)容區(qū)切換時有淡入淡出的動畫。

WorldCat.org
WordCat.org 在搜索框中使用了Tab標(biāo)簽，讓用戶可以針對特定搜索需求縮小搜索范圍。（比如書籍、DVD、或者文章）

Martha Stewart
Martha Stewart 在網(wǎng)站的“推薦內(nèi)容”上應(yīng)用用了Tab設(shè)計，可以自動播放和帶有過渡動畫。

Krista’s Creations
Krista’s Creations 利用字母表作為標(biāo)簽來控制圖片的分類顯示。

Clearspring
Clearspring 擁有響應(yīng)速度極快的Tab，這是一個非常好的古典樣式的Tab設(shè)計案例。

Homewood
在網(wǎng)站Homewood中，它們也利用icon來輔助了標(biāo)簽上文字的表述。

Apple - iWork
蘋果網(wǎng)站里，垂直方向排列的Tab標(biāo)簽設(shè)計，非常漂亮。

ExpressionEngine
網(wǎng)站 ExpressionEngine 把標(biāo)簽控制區(qū)放在Tab窗體的底部，在快速載入內(nèi)容區(qū)和快速響應(yīng)內(nèi)容區(qū)切換方面，它也是一個典型案例。

Viget Inspire
Viget Inspire 在“熱門文章”版塊使用了Tab，有淡入淡出的切換動畫，內(nèi)容區(qū)高度可根據(jù)內(nèi)容長度自適應(yīng)。

Komodo Media
Komodo Media 的標(biāo)簽里，icon放在文字上方。

atebits
atebits presents 用Tab來展示產(chǎn)品介紹，它有效地在這么小的空間里展現(xiàn)了如此豐富的內(nèi)容。

Tumblon
Tumblon 把標(biāo)簽放置在內(nèi)容區(qū)下方，能快速響應(yīng)切換，但不好的是，標(biāo)簽的選中狀態(tài)和未選中狀態(tài)不是那么容易區(qū)分。

kevadamson.com
在 Kev Adamson的網(wǎng)站中，右邊欄里有好幾個Tab，網(wǎng)站使用了不同的ICON配圖，幫助用戶理解不同Tab的功能。
六。 Tab的創(chuàng)建教程（前端方面的）
有很多教程能告訴你在頁面上如何建立和實現(xiàn)一個Tab，下面，你可以通過一些頂尖教程來了解更多關(guān)于創(chuàng)建Tab的技巧。
Building Tabbed Content 《如何創(chuàng)建Tab》
通過閱讀這篇初級教程，你可以了解如何通過使用 JS 框架Prototype創(chuàng)建一個簡單的Tab元素，

Create A Tabbed Interface Using jQuery 《使用jQuery來創(chuàng)建Tab》
Dan Harper 提供給讀者關(guān)于如何使用jQuery庫(譯注：著名的js庫）來構(gòu)建Tab。

Accessible Image-Tab Rollovers 《圖片標(biāo)簽導(dǎo)航的快速切換》
學(xué)習(xí)如何實現(xiàn)用圖片來制作標(biāo)簽導(dǎo)航區(qū)，并實現(xiàn)快速切換

Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery來實現(xiàn)一個可平滑切換的Tab》


Module Tabs(也稱選項卡，后文中簡稱Tab，以便更符合中國設(shè)計師的日常叫法) 是一個常見的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標(biāo)點擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽 上，來請求顯示該層內(nèi)容區(qū)。 有很多教程能告訴你在頁面上如何建立和實現(xiàn)一個Tab，下面，你可以通過一些頂尖教程來了解更多關(guān)于創(chuàng)建Tab的技巧。 六。 Tab的創(chuàng)建教程（前端方面的）
有很多教程能告訴你在頁面上如何建立和實現(xiàn)一個Tab，下面，你可以通過一些頂尖教程來了解更多關(guān)于創(chuàng)建Tab的技巧。
Building Tabbed Content 《如何創(chuàng)建Tab》
通過閱讀這篇初級教程，你可以了解如何通過使用 JS 框架Prototype創(chuàng)建一個簡單的Tab元素，

Create A Tabbed Interface Using jQuery 《使用jQuery來創(chuàng)建Tab》
Dan Harper 提供給讀者關(guān)于如何使用jQuery庫(譯注：著名的js庫）來構(gòu)建Tab。

Accessible Image-Tab Rollovers 《圖片標(biāo)簽導(dǎo)航的快速切換》
學(xué)習(xí)如何實現(xiàn)用圖片來制作標(biāo)簽導(dǎo)航區(qū)，并實現(xiàn)快速切換

Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery來實現(xiàn)一個可平滑切換的Tab》
七 。腳本資源
如果你真正查找能直接在你網(wǎng)站上應(yīng)用的Tab腳本代碼，這有一些免費的解決方案。
DOMTab
DomTab 是一個很受歡迎的腳本，能很容易創(chuàng)建一個Tab元素，把普通的鏈接列表改造為Tab元素。

JavaScript Tabifier
這段由BarelyFitz 設(shè)計的即插即用 的 JavaScript代碼，能夠幫助你在個人網(wǎng)站上更快速實現(xiàn)Tab元素。

TabView
TabView 是yahoo用戶界面庫(YUI)里的一個元件，你可以利用這個元件來減化代碼量和圖片的使用。

Coda-Slider
Coda-Slider 是Coda 設(shè)計的Tab實現(xiàn)腳本，可以實現(xiàn)內(nèi)容區(qū)切換的轉(zhuǎn)場動畫效果，還可以設(shè)置將Tab標(biāo)簽處理為靠左對齊或靠右對齊。

idTabs
idTabs 是 jQuery 的一個簡化插件，其強(qiáng)大的設(shè)置功能可以簡化原來控件中復(fù)雜的參數(shù)組合。

Tabtastic
idTabs是一個JavaScript庫，也包含創(chuàng)建Tab工具，這有深入淺出的使用教程Step by Step pane。

Ajax Tabs Content
動態(tài)和遠(yuǎn)程數(shù)據(jù)，你可以使用AJAX這種動態(tài)驅(qū)動的方法，來異步更新內(nèi)容區(qū)里的信息。

Carousel - Module Tabs
這段Tab腳本簡單但有高度自定義的空間，支持動畫與自動播放。
關(guān)于原作者
Jacob Gube 是一個JS和PHP工程師、WEB設(shè)計師、作家，Six Revision的創(chuàng)始人及總編。Six Revision是一個在線共享專業(yè)的開發(fā)與設(shè)計資源及教程的平臺。這是他的Twitter:follow him on Twitter。