總結者：戴雨森 yusendai.com
我們小組討論的話題是tab（標籤）在使用時的禁忌。
在討論的開始，大家很快產生了六個感興趣的話題：
如何處理海量的tab？
在流覽器中關掉tab之後應該發生的行為？
不同tab下內容的相互關係
多層tab的使用
Tab和SEO的關係
使用多個tab工作時快速回到注意力的焦點
由於時間有限，我們討論的話題最終集中在一個點上：如何處理海量的tab？經過大家的熱烈討論，現在將一些想法以及對應的示例總結如下，還請各路英雄好漢指正。
首先回顧一下Tab的歷史。這裡的tab，是一類交互元素的統稱，既包括在web設計中的導航，也包括在流覽器等桌面軟體中的使用。被稱為tab的交互元素一般有如下兩個特性：
同時具有動作和狀態兩個含義。tab之所以流行，一個原因就是因為它既方便操作，同時又能夠讓用戶清楚地知道自己目前在哪個位置（tab）
從資訊架構的角度來看，tab之間的內容一般是不交叉的。並且tab之間的關係應該是平等的，沒有相互隸屬的關係。
所以從廣義來講，絕大多數導航功能表其實都可以歸結為tab。
在網頁設計中tab的使用一般認為是Amazon開了先河。相信大家很多人都讀過LukeW的經典回顧文章：The History of Amazon’s Tab Navigation（中文版請猛擊這裡）。從這篇文章中我們可以看到，Amazon的導航從最初只有兩個tab：Book和Music，演化到2000年最多的時候有兩排tab。很顯然，當tab數量增多的時候，tab這種對話模式遇到了一些困難。
另一個例子是Word 2003中的設置對話方塊。如下圖所示，當標籤太多而顯示空間有限的時候，微軟不得不同樣把標籤排成兩排。這樣做的一個大問題是，上排的標籤在選中的時候，如何表示選中狀態和當前內容頁的關係？
微軟的做法是飽受詬病的。在上圖中當用戶點擊上排標籤時，上排自動和下排對調從而保持標籤和內容頁的緊貼關係。然而這個做法使得標籤的位置非常不一致，相信很多人都有著同樣的迷茫經歷。
在其他一些軟體中，如firefox 3（如下圖），點擊上排標籤時，僅僅將標籤顯示變為選中狀態，這樣的好處是保持了標籤位置的一致性，然而卻失去了一些位置上的指示功能。
那麼如果多排標籤不是個好主意，如何處理很多的標籤呢？
一個顯然的思路是把標籤從慣用的水準排列換到豎直排列。一般這樣的排列是在視圖的左側，可能是以圖示或者文字的形式。
不過這種做法存在一些問題。首先，如果標籤的名字很長，將會佔據很多寶貴的左側空間，而這一空間正好是螢幕上使用者注意焦點，兵家必爭之地。有的網站的做法是將文字垂直擺放，這樣的做法，特別對於英文網站來說，可讀性簡直就是災難。如果放在右側，有可能和捲軸相互干涉，並且用戶也不容易注意到。其次，當標籤不多的時候（考慮標籤數目可變的情況），標籤下方放什麼內容也是比較頭疼的。
（左）一個設計網站的縱向標籤排列，可讀性很差。（右）雅虎易搜裡面採用的右側垂直標籤導航
另一個思路是，如果標籤之間存在著某種結構，那麼可以把標籤分組。然後增加一個導航級別。微軟的onenote在這方面做到了登峰造極的程度，將資訊分為Notebook, section, page三個層次，每個層次都用標籤導航來表示，結果就是在頁面的上方，左側和右側都佈滿了標籤……微軟功力不俗，用格式塔（左側的分割）、色彩標記（section的彩色和page的白色）等手法把三層標籤導航都處理得很好。
另一種分組的方式是直接呈現在標籤上。考慮windows工作列的默認分組方法，將同一個程式的不同視窗歸為一組。或者是IE8中，將來源於同一父網站的標籤用相同的顏色歸為一組。
如果標籤之間不存在重要程度的區別，也不存在顯然的結構呢？比如流覽器的標籤？不同的流覽器有不同的做法。firefox和IE的預設做法是只顯示一行標籤，設定標籤的最短長度，然後在兩端加入向左/向右的箭頭，同時還在標籤欄左側或者右側加入顯示全部標籤按鈕。Safari 4只在最右側加入一個”…”的”顯示全部標籤”按鈕。而Chrome做的比較奇怪，沒有最短標籤長度這一設置，也不管三七二十一將所有標籤都顯示在一行裡面
總結流覽器的做法，可以看出還是以對標籤欄的橫向操作為主。舉個手持設備的例子。facebook的iPhone App中，對於不同的feed是將其顯示在一個”window”中，手指滑動可以拖動feed條在window下移動（語言很難描述清楚，看圖）。另一個對標籤條橫向操作例子是蘋果的 Mac頁面 ，在這裡蘋果使用了交互設計模式中的”注釋捲軸”模式，將捲軸加上了標籤的功能，這同時也是標籤分組的使用。
總結以上討論：
1. 在靜態頁面設計中，儘量避免使用多排水平標籤的佈置。可以使用垂直標籤代替。
2. 如果標籤之間存在結構，可以將標籤分組。分組可以以下拉式功能表，顏色分組等多種方式進行。
3. 如果標籤重要性或相關性存在區別，可以顯示最重要的標籤，然後加入”更多”（全部）按鈕。
4. 如果標籤之間都是相互平等的，可以考慮對標籤欄進行操作，如加入左右移動按鈕，允許使用者拖動/滑動等。
沒有留言:
張貼留言