|
譯者：西喬 來源：Smashing Magazine 作者：Jacob Gube
Module Tabs(也稱選項(xiàng)卡，后文中簡稱Tab，以便更符合中國設(shè)計(jì)師的日常叫法) 是一個常見的交互元素——將不同的內(nèi)容重疊放置在某一布局區(qū)塊內(nèi)，重疊的內(nèi)容區(qū)里的每次只有其中一層是可見的。用戶通過鼠標(biāo)點(diǎn)擊或移到內(nèi)容區(qū)所對應(yīng)的標(biāo)簽上，來請求顯示該層內(nèi)容區(qū)。
（譯注：本文中指的是狹義的Tab，指在界面的某一版塊區(qū)域內(nèi)所應(yīng)用的Tab設(shè)計(jì)。實(shí)際上，絕大多數(shù)網(wǎng)站導(dǎo)航也是Tab的一種應(yīng)用。）
web界面的設(shè)計(jì)趨勢是縮短頁面屏長，降低信息的顯示密度，但同時又不能犧牲可視的信息量。在這種趨勢下，Tab 這種交互元素成為了一個越來越普遍的應(yīng)用。例如在Blog界面的設(shè)計(jì)中，人們在側(cè)邊欄使用Tab模式來顯示 ”最新更新|最熱更新“ 的文章列表以引導(dǎo)用戶快速跳轉(zhuǎn)到文章內(nèi)容頁，這種模式令頁面結(jié)構(gòu)緊湊同時在視覺上不那么喧賓奪主。
本文將討論基于web頁面或其它web應(yīng)用中如何設(shè)計(jì)Tab，同時分享一些產(chǎn)品設(shè)計(jì)原則、真實(shí)的應(yīng)用案例、教程以及一些能幫助你直接實(shí)現(xiàn)Tab應(yīng)用的免費(fèi)腳本。
分析Tab元素的構(gòu)成
為了統(tǒng)一叫法以便于進(jìn)行討論，我們先花時間來認(rèn)識一下Tab元素的每個構(gòu)成部分。
- 標(biāo)簽：用戶控制切換內(nèi)容區(qū)的操作區(qū)域。
- 標(biāo)簽和內(nèi)容區(qū)在視覺上看起來應(yīng)該是一個整體。
- 標(biāo)簽上的文字應(yīng)該簡潔、無歧義并能準(zhǔn)確描述出它所對應(yīng)的內(nèi)容區(qū)的信息特征。
- 標(biāo)簽有選中和未選中兩種狀態(tài)，每次只能有一個標(biāo)簽是選中狀態(tài)，在頁面剛載入時，默認(rèn)第一個標(biāo)簽是選中狀態(tài)。
- 內(nèi)容區(qū)：Tab元素中重疊的區(qū)塊。用于顯示信息內(nèi)容。
- 內(nèi)容區(qū)和標(biāo)簽一一對應(yīng)，
- 當(dāng)前顯示的內(nèi)容區(qū)對應(yīng)選中狀態(tài)的標(biāo)簽，當(dāng)前隱藏的內(nèi)容區(qū)對應(yīng)未選中狀態(tài)的標(biāo)簽。
- 用戶應(yīng)當(dāng)能很輕易地通過控制標(biāo)簽來切換對應(yīng)的內(nèi)容區(qū)。
- 默認(rèn)被選中的內(nèi)容區(qū)應(yīng)該在頁面載入后立即顯示。
一、什么情況下應(yīng)用Tab設(shè)計(jì)
當(dāng)交互設(shè)計(jì)師希望節(jié)省頁面空間；緊湊布局；且需要組合的幾種信息之間具有關(guān)聯(lián)性時，可以選擇Tab應(yīng)用。信息之間具有某種關(guān)聯(lián)特征
構(gòu)成一個整體的每個元素之間都應(yīng)該具有邏輯上的關(guān)聯(lián)性。所以出現(xiàn)在同一個tab元素中的幾種信息自己應(yīng)該具有關(guān)聯(lián)特征，這樣用戶才能將整個Tab區(qū)域視為一個整體。例如在Blog中很常見的信息組合：“ 最新更新 | 最熱文章 | 評論最多 ” 。
下圖是網(wǎng)站Webdesigner Depot的側(cè)邊欄上的Tab元素：“全部文章 | 最受歡迎 | 最新更新”
出處：西喬的九卦
責(zé)任編輯：bluehearts
上一頁 下一頁 Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [2]
|
第 1 頁 Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [1]
第 2 頁 
