總結(jié)者：戴雨森 yusendai.com

我們小組討論的話題是tab（標(biāo)簽）在使用時(shí)的禁忌。

在討論的開始，大家很快產(chǎn)生了六個(gè)感興趣的話題：

• 如何處理海量的tab？
• 在瀏覽器中關(guān)掉tab之后應(yīng)該發(fā)生的行為？
• 不同tab下內(nèi)容的相互關(guān)系
• 多層tab的使用
• Tab和SEO的關(guān)系
• 使用多個(gè)tab工作時(shí)快速回到注意力的焦點(diǎn)

由于時(shí)間有限，我們討論的話題最終集中在一個(gè)點(diǎn)上：如何處理海量的tab？經(jīng)過大家的熱烈討論，現(xiàn)在將一些想法以及對應(yīng)的示例總結(jié)如下，還請各路英雄好漢指正。

首先回顧一下Tab的歷史。這里的tab，是一類交互元素的統(tǒng)稱，既包括在web設(shè)計(jì)中的導(dǎo)航，也包括在瀏覽器等桌面軟件中的使用。被稱為tab的交互元素一般有如下兩個(gè)特性：

• 同時(shí)具有動作和狀態(tài)兩個(gè)含義。tab之所以流行，一個(gè)原因就是因?yàn)樗确奖悴僮?，同時(shí)又能夠讓用戶清楚地知道自己目前在哪個(gè)位置（tab）
• 從信息架構(gòu)的角度來看，tab之間的內(nèi)容一般是不交叉的。并且tab之間的關(guān)系應(yīng)該是平等的，沒有相互隸屬的關(guān)系。

所以從廣義來講，絕大多數(shù)導(dǎo)航菜單其實(shí)都可以歸結(jié)為tab。

在網(wǎng)頁設(shè)計(jì)中tab的使用一般認(rèn)為是Amazon開了先河。相信大家很多人都讀過LukeW的經(jīng)典回顧文章：The History of Amazon’s Tab Navigation（中文版請猛擊這里）。從這篇文章中我們可以看到，Amazon的導(dǎo)航從最初只有兩個(gè)tab：Book和Music，演化到2000年最多的時(shí)候有兩排tab。很顯然，當(dāng)tab數(shù)量增多的時(shí)候，tab這種交互方式遇到了一些困難。

另一個(gè)例子是Word 2003中的設(shè)置對話框。如下圖所示，當(dāng)標(biāo)簽太多而顯示空間有限的時(shí)候，微軟不得不同樣把標(biāo)簽排成兩排。這樣做的一個(gè)大問題是，上排的標(biāo)簽在選中的時(shí)候，如何表示選中狀態(tài)和當(dāng)前內(nèi)容頁的關(guān)系？

微軟的做法是飽受詬病的。在上圖中當(dāng)用戶點(diǎn)擊上排標(biāo)簽時(shí)，上排自動和下排對調(diào)從而保持標(biāo)簽和內(nèi)容頁的緊貼關(guān)系。然而這個(gè)做法使得標(biāo)簽的位置非常不一致，相信很多人都有著同樣的迷茫經(jīng)歷。

在其他一些軟件中，如firefox 3（如下圖），點(diǎn)擊上排標(biāo)簽時(shí)，僅僅將標(biāo)簽顯示變?yōu)檫x中狀態(tài)，這樣的好處是保持了標(biāo)簽位置的一致性，然而卻失去了一些位置上的指示功能。

那么如果多排標(biāo)簽不是個(gè)好主意，如何處理很多的標(biāo)簽?zāi)兀?/P>

一個(gè)顯然的思路是把標(biāo)簽從慣用的水平排列換到豎直排列。一般這樣的排列是在視圖的左側(cè)，可能是以圖標(biāo)或者文字的形式。

不過這種做法存在一些問題。首先，如果標(biāo)簽的名字很長，將會占據(jù)很多寶貴的左側(cè)空間，而這一空間正好是屏幕上用戶注意焦點(diǎn)，兵家必爭之地。有的網(wǎng)站的做法是將文字垂直擺放，這樣的做法，特別對于英文網(wǎng)站來說，可讀性簡直就是災(zāi)難。如果放在右側(cè)，有可能和滾動條相互干涉，并且用戶也不容易注意到。其次，當(dāng)標(biāo)簽不多的時(shí)候（考慮標(biāo)簽數(shù)目可變的情況），標(biāo)簽下方放什么內(nèi)容也是比較頭疼的。

（左）一個(gè)設(shè)計(jì)網(wǎng)站的縱向標(biāo)簽排列，可讀性很差。（右）雅虎易搜里面采用的右側(cè)垂直標(biāo)簽導(dǎo)航

另一個(gè)思路是，如果標(biāo)簽之間存在著某種結(jié)構(gòu)，那么可以把標(biāo)簽分組。然后增加一個(gè)導(dǎo)航級別。微軟的onenote在這方面做到了登峰造極的程度，將信息分為Notebook, section, page三個(gè)層次，每個(gè)層次都用標(biāo)簽導(dǎo)航來表示，結(jié)果就是在頁面的上方，左側(cè)和右側(cè)都布滿了標(biāo)簽……微軟功力不俗，用格式塔（左側(cè)的分割）、色彩標(biāo)記（section的彩色和page的白色）等手法把三層標(biāo)簽導(dǎo)航都處理得很好。

另一種分組的方式是直接呈現(xiàn)在標(biāo)簽上?？紤]windows任務(wù)欄的默認(rèn)分組方法，將同一個(gè)程序的不同窗口歸為一組?；蛘呤荌E8中，將來源于同一父網(wǎng)站的標(biāo)簽用相同的顏色歸為一組。

如果標(biāo)簽之間存在重要程度的不同，也可以考慮顯示最重要的一批標(biāo)簽，同時(shí)以”更多”等按鈕來提供余下的標(biāo)簽（交互設(shè)計(jì)模式中的extra on demand模式）。如Amazon在實(shí)在不能忍受雙排標(biāo)簽之后就這樣做了（如下圖）。此外，還可以根據(jù)用戶目前的位置提供相關(guān)性最高的標(biāo)簽。

如果標(biāo)簽之間不存在重要程度的區(qū)別，也不存在顯然的結(jié)構(gòu)呢？比如瀏覽器的標(biāo)簽？不同的瀏覽器有不同的做法。firefox和IE的默認(rèn)做法是只顯示一行標(biāo)簽，設(shè)定標(biāo)簽的最短長度，然后在兩端加入向左/向右的箭頭，同時(shí)還在標(biāo)簽欄左側(cè)或者右側(cè)加入顯示全部標(biāo)簽按鈕。Safari 4只在最右側(cè)加入一個(gè)”…”的”顯示全部標(biāo)簽”按鈕。而Chrome做的比較奇怪，沒有最短標(biāo)簽長度這一設(shè)置，也不管三七二十一將所有標(biāo)簽都顯示在一行里面，于是當(dāng)標(biāo)簽數(shù)目過多時(shí)就會變成如下圖這個(gè)悲劇的樣子：

總結(jié)瀏覽器的做法，可以看出還是以對標(biāo)簽欄的橫向操作為主。舉個(gè)手持設(shè)備的例子。facebook的iPhone App中，對于不同的feed是將其顯示在一個(gè)”window”中，手指滑動可以拖動feed條在window下移動（語言很難描述清楚，看圖）。另一個(gè)對標(biāo)簽條橫向操作例子是蘋果的 Mac頁面 ，在這里蘋果使用了交互設(shè)計(jì)模式中的”注釋滾動條”模式，將滾動條加上了標(biāo)簽的功能，這同時(shí)也是標(biāo)簽分組的使用。

總結(jié)以上討論：

1. 在靜態(tài)頁面設(shè)計(jì)中，盡量避免使用多排水平標(biāo)簽的布置?？梢允褂么怪睒?biāo)簽代替。

2. 如果標(biāo)簽之間存在結(jié)構(gòu)，可以將標(biāo)簽分組。分組可以以下拉菜單，顏色分組等多種方式進(jìn)行。

3. 如果標(biāo)簽重要性或相關(guān)性存在區(qū)別，可以顯示最重要的標(biāo)簽，然后加入”更多”（全部）按鈕。

4. 如果標(biāo)簽之間都是相互平等的，可以考慮對標(biāo)簽欄進(jìn)行操作，如加入左右移動按鈕，允許用戶拖動/滑動等。

原文：http://uxday.com/archives/76