|
另一個思路是，如果標簽之間存在著某種結(jié)構(gòu)，那么可以把標簽分組。然后增加一個導航級別。微軟的onenote在這方面做到了登峰造極的程度，將信息分為Notebook, section, page三個層次，每個層次都用標簽導航來表示，結(jié)果就是在頁面的上方，左側(cè)和右側(cè)都布滿了標簽……微軟功力不俗，用格式塔（左側(cè)的分割）、色彩標記（section的彩色和page的白色）等手法把三層標簽導航都處理得很好。
另一種分組的方式是直接呈現(xiàn)在標簽上�？紤]windows任務欄的默認分組方法，將同一個程序的不同窗口歸為一組�；蛘呤荌E8中，將來源于同一父網(wǎng)站的標簽用相同的顏色歸為一組。
如果標簽之間存在重要程度的不同，也可以考慮顯示最重要的一批標簽，同時以”更多”等按鈕來提供余下的標簽（交互設計模式中的extra on demand模式）。如Amazon在實在不能忍受雙排標簽之后就這樣做了（如下圖）。此外，還可以根據(jù)用戶目前的位置提供相關(guān)性最高的標簽。
如果標簽之間不存在重要程度的區(qū)別，也不存在顯然的結(jié)構(gòu)呢？比如瀏覽器的標簽？不同的瀏覽器有不同的做法。firefox和IE的默認做法是只顯示一行標簽，設定標簽的最短長度，然后在兩端加入向左/向右的箭頭，同時還在標簽欄左側(cè)或者右側(cè)加入顯示全部標簽按鈕。Safari 4只在最右側(cè)加入一個”…”的”顯示全部標簽”按鈕。而Chrome做的比較奇怪，沒有最短標簽長度這一設置，也不管三七二十一將所有標簽都顯示在一行里面，于是當標簽數(shù)目過多時就會變成如下圖這個悲劇的樣子：
總結(jié)瀏覽器的做法，可以看出還是以對標簽欄的橫向操作為主。舉個手持設備的例子。facebook的iPhone App中，對于不同的feed是將其顯示在一個”window”中，手指滑動可以拖動feed條在window下移動（語言很難描述清楚，看圖）。另一個對標簽條橫向操作例子是蘋果的 Mac頁面 ，在這里蘋果使用了交互設計模式中的”注釋滾動條”模式，將滾動條加上了標簽的功能，這同時也是標簽分組的使用。
總結(jié)以上討論：
-
在靜態(tài)頁面設計中，盡量避免使用多排水平標簽的布置�？梢允褂么怪睒撕灤�。
-
如果標簽之間存在結(jié)構(gòu)，可以將標簽分組。分組可以以下拉菜單，顏色分組等多種方式進行。
-
如果標簽重要性或相關(guān)性存在區(qū)別，可以顯示最重要的標簽，然后加入”更多”（全部）按鈕。
-
如果標簽之間都是相互平等的，可以考慮對標簽欄進行操作，如加入左右移動按鈕，允許用戶拖動/滑動等。
原文：http://uxday.com/archives/76
本文鏈接：http://www.95time.cn/design/doc/2009/6618.asp 
出處：UXday
責任編輯：bluehearts
上一頁 tab(標簽)在使用時的禁忌 [2] 下一頁
|
第 1 頁 
第 3 頁 tab(標簽)在使用時的禁忌 [3]
