回國(guó)正好趕上百度用戶(hù)體驗(yàn)部主辦的UXday活動(dòng)，我們小組討論的話(huà)題是tab（標(biāo)簽）在使用時(shí)的禁忌。

我們討論的話(huà)題集中在一個(gè)點(diǎn)上：如何處理海量的tab？

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

同時(shí)具有動(dòng)作和狀態(tài)兩個(gè)含義。tab之所以流行，一個(gè)原因就是因?yàn)樗确奖悴僮?，同時(shí)又能夠讓用戶(hù)清楚地知道自己目前在哪個(gè)位置（tab）
從信息架構(gòu)的角度來(lái)看，tab之間的內(nèi)容一般是不交叉的。并且tab之間的關(guān)系應(yīng)該是平等的，沒(méi)有相互隸屬的關(guān)系。
所以從廣義來(lái)講，絕大多數(shù)導(dǎo)航菜單其實(shí)都可以歸結(jié)為tab。

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

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

微軟的做法是飽受詬病的。在上圖中當(dāng)用戶(hù)點(diǎn)擊上排標(biāo)簽時(shí)，上排自動(dòng)和下排對(duì)調(diào)從而保持標(biāo)簽和內(nèi)容頁(yè)的緊貼關(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)或者文字的形式。

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

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

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

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

如果標(biāo)簽之間不存在重要程度的區(qū)別，也不存在顯然的結(jié)構(gòu)呢？比如瀏覽器的標(biāo)簽？不同的瀏覽器有不同的做法。firefox和IE的默認(rèn)做法是只顯示一行標(biāo)簽，設(shè)定標(biāo)簽的最短長(zhǎng)度，然后在兩端加入向左/向右的箭頭，同時(shí)還在標(biāo)簽欄左側(cè)或者右側(cè)加入顯示全部標(biāo)簽按鈕。Safari 4只在最右側(cè)加入一個(gè)”…”的“顯示全部標(biāo)簽”按鈕。而Chrome做的比較奇怪，沒(méi)有最短標(biāo)簽長(zhǎng)度這一設(shè)置，也不管三七二十一將所有標(biāo)簽都顯示在一行里面，于是當(dāng)標(biāo)簽數(shù)目過(guò)多時(shí)就會(huì)變成如下圖這個(gè)悲劇的樣子。我們建議，如果只顯示一行標(biāo)簽的時(shí)候，best practice是：在左右兩側(cè)顯示滾動(dòng)的箭頭，并且提供以某種方式（通常是平鋪或下拉菜單）顯示全部標(biāo)簽列表的按鈕，并且設(shè)定標(biāo)簽最短的長(zhǎng)度。

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

總結(jié)以上討論：

1. 在靜態(tài)頁(yè)面設(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)簽之間都是相互平等的，可以考慮對(duì)標(biāo)簽欄進(jìn)行操作，如加入左右移動(dòng)按鈕，允許用戶(hù)拖動(dòng)/滑動(dòng)等。

原文：http://www.lanrenux.com/?p=163