|
如果標(biāo)簽之間存在重要程度的不同，也可以考慮顯示最重要的一批標(biāo)簽，同時以“更多”等按鈕來提供余下的標(biāo)簽（交互設(shè)計模式中的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)簽的最短長度，然后在兩端加入向左/向右的箭頭，同時還在標(biāo)簽欄左側(cè)或者右側(cè)加入顯示全部標(biāo)簽按鈕。Safari 4只在最右側(cè)加入一個”…”的“顯示全部標(biāo)簽”按鈕。而Chrome做的比較奇怪，沒有最短標(biāo)簽長度這一設(shè)置，也不管三七二十一將所有標(biāo)簽都顯示在一行里面，于是當(dāng)標(biāo)簽數(shù)目過多時就會變成如下圖這個悲劇的樣子。我們建議，如果只顯示一行標(biāo)簽的時候，best practice是：在左右兩側(cè)顯示滾動的箭頭，并且提供以某種方式（通常是平鋪或下拉菜單）顯示全部標(biāo)簽列表的按鈕，并且設(shè)定標(biāo)簽最短的長度。
總結(jié)瀏覽器的做法，可以看出還是以對標(biāo)簽欄的橫向操作為主。舉個手持設(shè)備的例子。facebook的iPhone App中，對于不同的feed是將其顯示在一個“window”中，手指滑動可以拖動feed條在window下移動（語言很難描述清楚，看圖）。另一個對標(biāo)簽條橫向操作例子是蘋果的Mac頁面，在這里蘋果使用了交互設(shè)計模式中的“注釋滾動條”模式，將滾動條加上了標(biāo)簽的功能，這同時也是標(biāo)簽分組的使用。
總結(jié)以上討論：
- 在靜態(tài)頁面設(shè)計中，盡量避免使用多排水平標(biāo)簽的布置。可以使用垂直標(biāo)簽代替。
- 如果標(biāo)簽之間存在結(jié)構(gòu)，可以將標(biāo)簽分組。分組可以以下拉菜單，顏色分組等多種方式進(jìn)行。
- 如果標(biāo)簽重要性或相關(guān)性存在區(qū)別，可以顯示最重要的標(biāo)簽，然后加入“更多”（全部）按鈕。
- 如果標(biāo)簽之間都是相互平等的，可以考慮對標(biāo)簽欄進(jìn)行操作，如加入左右移動按鈕，允許用戶拖動/滑動等。
本文鏈接：http://www.95time.cn/design/doc/2009/6580.asp 
出處：懶人有禪
責(zé)任編輯：bluehearts
上一頁 如何處理海量tab? [2] 下一頁
|
第 1 頁 
第 3 頁 如何處理海量tab? [3]
