武林網(wǎng)(www.survivalescaperooms.com)文章簡介：Module Tabs(也稱選項卡，后文中簡稱Tab，以便更符合中國設(shè)計師的日常叫法) 是一個常見的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標(biāo)點擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽 上，來請求顯示該層內(nèi)容區(qū)。

Module Tabs(也稱選項卡，后文中簡稱Tab，以便更符合中國設(shè)計師的日常叫法) 是一個常見的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標(biāo)點擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽上，來請求顯示該層內(nèi)容區(qū)。

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

Module Tabs(也稱選項卡，后文中簡稱Tab，以便更符合中國設(shè)計師的日常叫法) 是一個常見的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標(biāo)點擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽 上，來請求顯示該層內(nèi)容區(qū)。

（譯注：本文中指的是狹義的Tab，指在界面的某一版塊區(qū)域內(nèi)所應(yīng)用的Tab設(shè)計。實際上，絕大多數(shù)網(wǎng)站導(dǎo)航也是Tab的一種應(yīng)用。）

web界面的設(shè)計趨勢是縮短頁面屏長，降低信息的顯示密度，但同時又不能犧牲可視的信息量。在這種趨勢下，Tab 這種交互元素成為了一個越來越普遍的應(yīng)用。例如在Blog界面的設(shè)計中，人們在側(cè)邊欄使用Tab模式來顯示 ”最新更新|最熱更新“ 的文章列表以引導(dǎo)用戶快速跳轉(zhuǎn)到文章內(nèi)容頁，這種模式令頁面結(jié)構(gòu)緊湊同時在視覺上不那么喧賓奪主。

本文將討論基于web頁面或其它web應(yīng)用中如何設(shè)計Tab，同時分享一些產(chǎn)品設(shè)計原則、真實的應(yīng)用案例、教程以及一些能幫助你直接實現(xiàn)Tab應(yīng)用的免費腳本。

為了統(tǒng)一叫法以便于進(jìn)行討論，我們先花時間來認(rèn)識一下Tab元素的每個構(gòu)成部分。

當(dāng)交互設(shè)計師希望節(jié)省頁面空間；緊湊布局；且需要組合的幾種信息之間具有關(guān)聯(lián)性時，可以選擇Tab應(yīng)用。

構(gòu)成一個整體的每個元素之間都應(yīng)該具有邏輯上的關(guān)聯(lián)性。所以出現(xiàn)在同一個tab元素中的幾種信息自己應(yīng)該具有關(guān)聯(lián)特征，這樣用戶才能將整個Tab區(qū)域視為一個整體。例如在Blog中很常見的信息組合：“ 最新更新 | 最熱文章 | 評論最多 ” 。

下圖是網(wǎng)站W(wǎng)ebdesigner Depot的側(cè)邊欄上的Tab元素：“全部文章 | 最受歡迎 | 最新更新”

Tab元素中，同一時刻，只能顯示一層內(nèi)容區(qū)。當(dāng)用戶需要對位于不同內(nèi)容區(qū)上的信息進(jìn)行對比，或者這幾種信息同時顯示會更便于用戶閱讀時，就不應(yīng)該使用Tab。否則會導(dǎo)致用戶為了比對所需的信息，而不停在標(biāo)簽之間進(jìn)行切換。

下面這個案例中，BGPatterns (一個在線制作背景圖案的網(wǎng)站）tab就用得不是地方。當(dāng)用戶想設(shè)計或修改他所制作的背景圖案時，必須反復(fù)在幾個標(biāo)簽之間進(jìn)行切換。Tab在這里妨礙了用戶的操作。如果在頁面上同時顯示這4個內(nèi)容區(qū)上的信息，可用性和友好度會更高。

另一個反面案例：網(wǎng)站 Best Web Gallery 在它側(cè)邊欄上所放置的Tab，標(biāo)簽分別是 ”特別推薦“（包含了一些網(wǎng)站所有者認(rèn)為值得注意的鏈接）和 “最新評論”。 這兩組信息之間并沒有邏輯聯(lián)系，用戶會很疑惑為什么這兩者要放在一起呢。所以這個Tab中的兩組信息最好分開放置。

Tab元素的標(biāo)簽區(qū)寬度是有限的，所以標(biāo)簽區(qū)的文字應(yīng)該簡潔扼要，具有代表性，長度控制在1~3個英文單詞。用精煉的方式展示信息，除了保持設(shè)計樣式不變形外，還可以讓用戶更快速地處理文字信息，用以預(yù)測隱藏區(qū)域上所包含的內(nèi)容。

Tab本意用于展現(xiàn)標(biāo)準(zhǔn)化和易于理解的信息。基于此，Tab應(yīng)該只用于顯示信息摘要和內(nèi)容要點，例如列表，數(shù)據(jù)圖表，或1~2段簡短的文字這種形式。