Module Tabs(也稱(chēng)選項(xiàng)卡，后文中簡(jiǎn)稱(chēng)Tab，以便更符合中國(guó)設(shè)計(jì)師的日常叫法) 是一個(gè)常見(jiàn)的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見(jiàn)的。用戶(hù)通過(guò)鼠標(biāo)點(diǎn)擊或移到內(nèi)容區(qū)所對(duì)應(yīng)的標(biāo)簽 上，來(lái)請(qǐng)求顯示該層內(nèi)容區(qū)。
（譯注：本文中指的是狹義的Tab，指在界面的某一版塊區(qū)域內(nèi)所應(yīng)用的Tab設(shè)計(jì)。實(shí)際上，絕大多數(shù)網(wǎng)站導(dǎo)航也是Tab的一種應(yīng)用。）
web界面的設(shè)計(jì)趨勢(shì)是縮短頁(yè)面屏長(zhǎng)，降低信息的顯示密度，但同時(shí)又不能犧牲可視的信息量。在這種趨勢(shì)下，Tab 這種交互元素成為了一個(gè)越來(lái)越普遍的應(yīng)用。例如在Blog界面的設(shè)計(jì)中，人們?cè)趥?cè)邊欄使用Tab模式來(lái)顯示 ”最新更新|最熱更新“ 的文章列表以引導(dǎo)用戶(hù)快速跳轉(zhuǎn)到文章內(nèi)容頁(yè)，這種模式令頁(yè)面結(jié)構(gòu)緊湊同時(shí)在視覺(jué)上不那么喧賓奪主。
本文將討論基于web頁(yè)面或其它web應(yīng)用中如何設(shè)計(jì)Tab，同時(shí)分享一些產(chǎn)品設(shè)計(jì)原則、真實(shí)的應(yīng)用案例、教程以及一些能幫助你直接實(shí)現(xiàn)Tab應(yīng)用的免費(fèi)腳本。
分析Tab元素的構(gòu)成
為了統(tǒng)一叫法以便于進(jìn)行討論，我們先花時(shí)間來(lái)認(rèn)識(shí)一下Tab元素的每個(gè)構(gòu)成部分。
- 標(biāo)簽：用戶(hù)控制切換內(nèi)容區(qū)的操作區(qū)域。
- 標(biāo)簽和內(nèi)容區(qū)在視覺(jué)上看起來(lái)應(yīng)該是一個(gè)整體。
- 標(biāo)簽上的文字應(yīng)該簡(jiǎn)潔、無(wú)歧義并能準(zhǔn)確描述出它所對(duì)應(yīng)的內(nèi)容區(qū)的信息特征。
- 標(biāo)簽有選中和未選中兩種狀態(tài)，每次只能有一個(gè)標(biāo)簽是選中狀態(tài)，在頁(yè)面剛載入時(shí)，默認(rèn)第一個(gè)標(biāo)簽是選中狀態(tài)。
- 內(nèi)容區(qū)：Tab元素中重疊的區(qū)塊。用于顯示信息內(nèi)容。
- 內(nèi)容區(qū)和標(biāo)簽一一對(duì)應(yīng)，
- 當(dāng)前顯示的內(nèi)容區(qū)對(duì)應(yīng)選中狀態(tài)的標(biāo)簽，當(dāng)前隱藏的內(nèi)容區(qū)對(duì)應(yīng)未選中狀態(tài)的標(biāo)簽。
- 用戶(hù)應(yīng)當(dāng)能很輕易地通過(guò)控制標(biāo)簽來(lái)切換對(duì)應(yīng)的內(nèi)容區(qū)。
- 默認(rèn)被選中的內(nèi)容區(qū)應(yīng)該在頁(yè)面載入后立即顯示。
一 。什么情況下應(yīng)用Tab設(shè)計(jì)
當(dāng)交互設(shè)計(jì)師希望節(jié)省頁(yè)面空間；緊湊布局；且需要組合的幾種信息之間具有關(guān)聯(lián)性時(shí)，可以選擇Tab應(yīng)用。
信息之間具有某種關(guān)聯(lián)特征
構(gòu)成一個(gè)整體的每個(gè)元素之間都應(yīng)該具有邏輯上的關(guān)聯(lián)性。所以出現(xiàn)在同一個(gè)tab元素中的幾種信息自己應(yīng)該具有關(guān)聯(lián)特征，這樣用戶(hù)才能將整個(gè)Tab區(qū)域視為一個(gè)整體。例如在Blog中很常見(jiàn)的信息組合：“ 最新更新 | 最熱文章 | 評(píng)論最多 ” 。
下圖是網(wǎng)站W(wǎng)ebdesigner Depot的側(cè)邊欄上的Tab元素：“全部文章 | 最受歡迎 | 最新更新”
信息之間不應(yīng)該存在對(duì)比或并行的關(guān)系
Tab元素中，同一時(shí)刻，只能顯示一層內(nèi)容區(qū)。當(dāng)用戶(hù)需要對(duì)位于不同內(nèi)容區(qū)上的信息進(jìn)行對(duì)比，或者這幾種信息同時(shí)顯示會(huì)更便于用戶(hù)閱讀時(shí)，就不應(yīng)該使用Tab。否則會(huì)導(dǎo)致用戶(hù)為了比對(duì)所需的信息，而不停在標(biāo)簽之間進(jìn)行切換。
下面這個(gè)案例中，BGPatterns (一個(gè)在線制作背景圖案的網(wǎng)站）tab就用得不是地方。當(dāng)用戶(hù)想設(shè)計(jì)或修改他所制作的背景圖案時(shí)，必須反復(fù)在幾個(gè)標(biāo)簽之間進(jìn)行切換。Tab在這里妨礙了用戶(hù)的操作。如果在頁(yè)面上同時(shí)顯示這4個(gè)內(nèi)容區(qū)上的信息，可用性和友好度會(huì)更高。
另一個(gè)反面案例：網(wǎng)站 Best Web Gallery 在它側(cè)邊欄上所放置的Tab，標(biāo)簽分別是 ”特別推薦“（包含了一些網(wǎng)站所有者認(rèn)為值得注意的鏈接）和 “最新評(píng)論”。 這兩組信息之間并沒(méi)有邏輯聯(lián)系，用戶(hù)會(huì)很疑惑為什么這兩者要放在一起呢。所以這個(gè)Tab中的兩組信息最好分開(kāi)放置。
每個(gè)內(nèi)容區(qū)應(yīng)該有一個(gè)簡(jiǎn)短明確的標(biāo)題。
Tab元素的標(biāo)簽區(qū)寬度是有限的，所以標(biāo)簽區(qū)的文字應(yīng)該簡(jiǎn)潔扼要，具有代表性，長(zhǎng)度控制在1~3個(gè)英文單詞。用精煉的方式展示信息，除了保持設(shè)計(jì)樣式不變形外，還可以讓用戶(hù)更快速地處理文字信息，用以預(yù)測(cè)隱藏區(qū)域上所包含的內(nèi)容。
Tab應(yīng)該用于展現(xiàn)精煉的內(nèi)容。
Tab本意用于展現(xiàn)標(biāo)準(zhǔn)化和易于理解的信息?；诖耍琓ab應(yīng)該只用于顯示信息摘要和內(nèi)容要點(diǎn)，例如列表，數(shù)據(jù)圖表，或1~2段簡(jiǎn)短的文字這種形式。
