網(wǎng)站建設(shè)中Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用發(fā)布者：本站     時(shí)間：2022-04-04 19:04:21

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)成部分。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

標(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元素：“全部文章 | 最受歡迎 | 最新更新”

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

信息之間不應(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è)在線(xiàn)制作背景圖案的網(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ì)更高。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

另一個(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)放置。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

每個(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)化和易于理解的信息?；诖?，Tab應(yīng)該只用于顯示信息摘要和內(nèi)容要點(diǎn)，例如列表，數(shù)據(jù)圖表，或1~2段簡(jiǎn)短的文字這種形式。

二 。Tab的可用性原則及優(yōu)化方法
這一章節(jié) 我們將討論一些關(guān)于Tab的可用性設(shè)計(jì)原則，以及如何使這種交互元素變得更友好和有效。

選中的標(biāo)簽應(yīng)該高亮顯示。
選中狀態(tài)的標(biāo)簽應(yīng)該設(shè)計(jì)得顯眼，讓用戶(hù)容易區(qū)分當(dāng)前顯示的內(nèi)容區(qū)是對(duì)應(yīng)哪個(gè)標(biāo)簽。通用做法是 為未選中狀態(tài)使用統(tǒng)一的背景色，為出于選中狀態(tài)的標(biāo)簽上使用高亮的背景色。

保持標(biāo)簽只在一行內(nèi)顯示
Tab的標(biāo)簽通常是水平方向排列的（當(dāng)然如果你愿意，也可以設(shè)計(jì)成垂直方向排列的），標(biāo)簽如果分布在多行上會(huì)導(dǎo)致用戶(hù)在使用中產(chǎn)生疑惑。

這是由于在水平方向上多行分布標(biāo)簽，隱含一種等級(jí)關(guān)系，可能讓用戶(hù)誤以為第二行是第一行的子級(jí)。

標(biāo)簽需要分布在多行上時(shí)，也就意味著標(biāo)簽的數(shù)量過(guò)多或者標(biāo)簽上文字太長(zhǎng)。而這些都是需要被精簡(jiǎn)的。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

內(nèi)容區(qū)之間的切換 應(yīng)該沒(méi)有延遲。
使用Tab來(lái)控制內(nèi)容切換的特性之一是快速和互動(dòng)。為此，應(yīng)該在html代碼里提前內(nèi)嵌所有內(nèi)容區(qū)的代碼，并通過(guò)CSS/Javascript來(lái)隱藏未被選中內(nèi)容區(qū)，而不是等用戶(hù)切換到某個(gè)標(biāo)簽后再去遠(yuǎn)程請(qǐng)載入信息。

避免在標(biāo)簽切換的時(shí)候去載入頁(yè)面，使用AJAX從遠(yuǎn)程讀數(shù)據(jù)來(lái)生成動(dòng)態(tài)菜單也是一個(gè)辦法，但這對(duì)使用語(yǔ)音閱讀器的用戶(hù)（譯注：Screen-Reader：為視力障礙的用戶(hù)準(zhǔn)備，可以語(yǔ)音讀出頁(yè)面上的信息。）是不友好的，因?yàn)檎Z(yǔ)音閱讀器不支持DOM模型。

（譯注：有4種方法載入隱藏區(qū)的內(nèi)容代碼：

html 一次性載入：這種方法原始且安全，但是存在數(shù)據(jù)太多或太復(fù)雜導(dǎo)致頁(yè)面解析緩慢，從而導(dǎo)致整個(gè)頁(yè)面打開(kāi)速度變慢，這是不可忍受的。
frame: 將隱藏區(qū)的代碼作為一個(gè)frame載入，frame的好處是可以新建進(jìn)程，和頁(yè)面中的圖片同時(shí)下載。不同的瀏覽器可以運(yùn)行一定數(shù)量的進(jìn)程并行，比如IE可以同時(shí)允許4個(gè)。這樣對(duì)整體頁(yè)面的打開(kāi)速度影響小。另外，frame可以進(jìn)入瀏覽器緩存，在多個(gè)頁(yè)面共用同一個(gè)Tab元素時(shí)，frame是一個(gè)好選擇。
iframe：iframe和frame類(lèi)似，繼承了frame的優(yōu)點(diǎn)，此外它還可以作為一個(gè)容器隨意嵌入頁(yè)面。google adsense使用了iframe來(lái)實(shí)現(xiàn)了局部代碼的載入。。
Ajax：響應(yīng)用戶(hù)操作或響應(yīng)某個(gè)觸發(fā)條件，由JS在后臺(tái)向服務(wù)器發(fā)出請(qǐng)求，載入隱藏區(qū)的代碼。我認(rèn)為除了交互和需要響應(yīng)動(dòng)態(tài)生成的內(nèi)容外，沒(méi)必要ajax技術(shù)。）
在標(biāo)簽上使用簡(jiǎn)短和有邏輯的文字。
標(biāo)簽應(yīng)該設(shè)計(jì)得盡可能窄，以便在一行內(nèi)容納盡可能多的標(biāo)簽。

在標(biāo)簽區(qū)使用簡(jiǎn)單的描述或內(nèi)容關(guān)鍵字，可以幫助用戶(hù)在掃描頁(yè)面時(shí)快速找到他們想要的內(nèi)容。所以使用概括準(zhǔn)確符合邏輯的文字來(lái)描述內(nèi)容區(qū)是非常重要的，選用這些文字應(yīng)該經(jīng)過(guò)深思熟慮。

下面這個(gè)在網(wǎng)站CBS.com上的案例，是一個(gè)難用的Tab。標(biāo)簽上沒(méi)有任何說(shuō)明性文字，用戶(hù)無(wú)法預(yù)測(cè)未顯示的內(nèi)容區(qū)里到底有什么。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

而在 Navigant Consulting 的網(wǎng)站上，使用數(shù)字來(lái)暗示數(shù)據(jù)是有序的。但仍然沒(méi)有表達(dá)出內(nèi)容區(qū)里包含什么。這種設(shè)計(jì)容易產(chǎn)生歧義導(dǎo)致用戶(hù)產(chǎn)生不必要的困惑。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

不要在內(nèi)容區(qū)內(nèi)使用滾動(dòng)條
在Tab的內(nèi)容區(qū)里使用滾動(dòng)條會(huì)增加用戶(hù)負(fù)擔(dān)：用戶(hù)在要查找信息在哪個(gè)內(nèi)容區(qū)里時(shí)，不僅需要切換標(biāo)簽，還需要加上移動(dòng)滾動(dòng)條的操作。

內(nèi)容區(qū)里容納的信息太多或設(shè)計(jì)Tab時(shí)設(shè)定的高度不夠，會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。所以需要考慮精簡(jiǎn)內(nèi)容、增加高度值，或把選中狀態(tài)的內(nèi)容區(qū)處理為的高度自適應(yīng)。

三?？紤]Tab的易用性
更復(fù)雜的交互行為的出現(xiàn)，在不刷新頁(yè)面的狀態(tài)下異步更新內(nèi)容，以及如何滿(mǎn)足用戶(hù)使用不同訪(fǎng)問(wèn)方式，包括那些很難確定的非典型狀況下的訪(fǎng)問(wèn)需求，這些狀況令易用性成為當(dāng)前最熱門(mén)的話(huà)題。本章節(jié)中，我們將討論一些在設(shè)計(jì)Tab元素時(shí)你應(yīng)該知道的易用性原則。

“選擇”和“未選中”狀態(tài)的標(biāo)簽 應(yīng)該使用對(duì)比鮮明的顏色
為了讓視力上有障礙的用戶(hù)能分清哪些標(biāo)簽是已選中的，哪些是未選中的，應(yīng)該使用高對(duì)比的背景色來(lái)做出區(qū)分。

Yahoo! News 網(wǎng)站中的反面案例：選中和未選中狀態(tài)的標(biāo)簽 只有非常小的視覺(jué)上的差異，他們對(duì)視力好的用戶(hù)沒(méi)問(wèn)題，但是會(huì)給視力不佳的用戶(hù)帶來(lái)麻煩。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

此外，請(qǐng)務(wù)必保證標(biāo)簽的文字顏色（前景色）和標(biāo)簽背景色 有充分的對(duì)比。即使是未選中的標(biāo)簽，用戶(hù)也應(yīng)該能輕松閱讀上面的文字。為了讓未選擇的標(biāo)簽看起來(lái)不顯眼，而把它們都直接變灰 是不妥當(dāng)?shù)摹?br />
確保 隱藏內(nèi)容區(qū)里的信息 在語(yǔ)音閱讀器中是可讀的
基于可訪(fǎng)問(wèn)性，Tab應(yīng)該使用技術(shù)將未選中狀態(tài)的內(nèi)容區(qū)隱藏起來(lái)，但是不能在DOM Tree中刪除他們。比如不能使用 display:none; 或者 visibility:none這樣的css參數(shù)去定義容器。這類(lèi)參數(shù)導(dǎo)致語(yǔ)音閱讀器無(wú)法讀取被隱藏的內(nèi)容區(qū)中的信息。

（譯注：中國(guó)設(shè)計(jì)師可能不太重視語(yǔ)音閱讀器的可訪(fǎng)問(wèn)性，但是在國(guó)外，有專(zhuān)門(mén)的法令條款規(guī)定，機(jī)構(gòu)網(wǎng)站不得歧視有障礙的用戶(hù)，包括視力缺陷，行動(dòng)障礙、癲癇患者等，所以外國(guó)的產(chǎn)品或前端工程師會(huì)很重視這一點(diǎn)，不然會(huì)遭到投訴甚至起訴。這種差異去看看中國(guó)人是如何設(shè)計(jì)盲道的就明白了。）

詳情請(qǐng)見(jiàn)Roger Johansson’s 的文章 《利用css隱藏內(nèi)容：?jiǎn)栴}和對(duì)策》”Hiding with CSS: Problems and solutions“.

（譯注：Roger Johansson’s的文章中指出：許多CSS和JS教程建議使用display:none; visibility:none 來(lái)隱藏元素，但大多數(shù)狀況下這是一個(gè)會(huì)降低可訪(fǎng)問(wèn)性的選擇，。

display:none的真正含義是表示這一元素并不存在，不需要顯示打印或被閱讀。大多數(shù)語(yǔ)音閱讀器會(huì)忽略任何使用display:none來(lái)隱藏鏈接，文字，導(dǎo)航和標(biāo)題等。作者建議使用的技術(shù)是使用絕對(duì)定位坐標(biāo)，例如 .structural { position:absolute; left:-9999px; } 。

另一個(gè)需要注意的問(wèn)題是，當(dāng)你決定使用JS去顯示一個(gè)元素時(shí)，也應(yīng)該用JS技術(shù)去隱藏它。因?yàn)榭紤]到客戶(hù)端是否支持js以及安全等級(jí)，如果客戶(hù)端的js沒(méi)起作用，可能交互或動(dòng)態(tài)菜單沒(méi)效果，但起碼內(nèi)容是可訪(fǎng)問(wèn)的。但如果你使用css去隱藏一個(gè)元素，但使用js技術(shù)去顯示它，在某些狀況下，這個(gè)元素會(huì)變得一直無(wú)法訪(fǎng)問(wèn)。）

使用語(yǔ)義化的HTML結(jié)構(gòu)來(lái)構(gòu)造 Tab的標(biāo)簽。
使用無(wú)序或有序列表(譯注：<ul> <li>這類(lèi)標(biāo)簽）來(lái)構(gòu)造標(biāo)簽的html代碼，可以改善可訪(fǎng)問(wèn)性。因?yàn)槭褂谜Z(yǔ)音閱讀器的用戶(hù)可以基于此來(lái)識(shí)別出這是一組Tab標(biāo)簽。如果標(biāo)簽上使用了圖片來(lái)代替文字，別忘了添加ALT 或 title屬性來(lái) 描述圖片的含義。

允許鍵盤(pán)操作。
鍵盤(pán)導(dǎo)航是為一些有行動(dòng)障礙或不能使用常規(guī)輸入設(shè)備（如鼠標(biāo)）的用戶(hù)準(zhǔn)備的。這種用戶(hù)會(huì)使用替換形式（比如鍵盤(pán)或語(yǔ)音）來(lái)控制導(dǎo)航菜單，確保他們能將控制焦點(diǎn)在標(biāo)簽間切換，并激活他們想要的部分。

一個(gè)簡(jiǎn)單測(cè)試鍵盤(pán)導(dǎo)航的簡(jiǎn)單方法是：使用鍵盤(pán)上的Tab鍵，看你是否能將控制焦點(diǎn) 集中在每個(gè)標(biāo)簽上？使用回車(chē)鍵，當(dāng)前的控制區(qū)域是否能被激活，使未選中狀態(tài)有效地切換為選中狀態(tài)。

提高對(duì)用戶(hù)客戶(hù)端的兼容性。
當(dāng)客戶(hù)端無(wú)法支持某些技術(shù)，比如當(dāng)瀏覽器關(guān)閉了JavaScript功能時(shí)，或者 當(dāng)用戶(hù)沒(méi)有安裝Flash插件時(shí)，Tab內(nèi)容區(qū)上的信息必須保證最基本的可訪(fǎng)問(wèn)性，交互元素確保能被替換為最基本的html文本。

四。 提升之道。
在提供了一些基本的可用性建議和原則后，我們還可以討論一些方法來(lái)進(jìn)一步提高Tab元素的可用性。

在標(biāo)簽上使用icon來(lái)形象化地描述內(nèi)容區(qū)說(shuō)包含的信息。
在標(biāo)簽上配合使用形象的icon，可以增強(qiáng)對(duì)內(nèi)容區(qū)信息的描述。

例如在網(wǎng)站 DrawIt 中，圖標(biāo)用于形象地補(bǔ)充說(shuō)明所對(duì)應(yīng)的內(nèi)容區(qū)的功能。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

在標(biāo)簽上使用icon，必須保證它們是形象的，切題的。使用不相關(guān)的icon會(huì)適得其反。

避免在標(biāo)簽上直接用icon來(lái)代替文字。

不同的人對(duì)一個(gè)圖像有不同的解讀，最安全的方法是使用加上文本來(lái)描述內(nèi)容區(qū)信息。

在內(nèi)容區(qū)切換的時(shí)候使用過(guò)渡動(dòng)畫(huà)。
在內(nèi)容區(qū)切換的時(shí)候使用過(guò)渡轉(zhuǎn)場(chǎng)動(dòng)畫(huà)是一個(gè)不錯(cuò)的選擇，可以為用戶(hù)提供積極的視覺(jué)反饋――內(nèi)容區(qū)正在變化！

大家可以去網(wǎng)站 Coda ，從左到右點(diǎn)擊Tab標(biāo)簽，欣賞切換時(shí)的效果。

Tab選項(xiàng)卡的產(chǎn)品設(shè)計(jì)原則及應(yīng)用

當(dāng)用戶(hù)在Tab的標(biāo)簽區(qū)進(jìn)行操作時(shí)，有明確的懸停響應(yīng)。
默認(rèn)情況下，當(dāng)用戶(hù)將鼠標(biāo)移到超鏈接或標(biāo)簽區(qū)域上時(shí)，鼠標(biāo)指針的樣式會(huì)發(fā)生改變，讓用戶(hù)知道標(biāo)簽區(qū)域是可點(diǎn)擊的。

除此之外，還可以利用背景色變化來(lái)響應(yīng)用戶(hù)的鼠標(biāo)操作。對(duì)于那些不熟悉Tab標(biāo)簽操作的網(wǎng)站新用戶(hù)而言，這是很有用的。

下圖中Vyniknite.sk 網(wǎng)站的案例里：當(dāng)用戶(hù)鼠標(biāo)劃過(guò)未選中狀態(tài)的標(biāo)簽，背景色會(huì)變成鮮明的紅色。