標(biāo)簽的出現(xiàn)解決了頁面上導(dǎo)航難以排布的難題，讓頁面信息整理更加容易。標(biāo)簽的形式來源于人們的生活，在書中夾上一些做好標(biāo)記的紙條并露出書邊，下次再尋找書里的內(nèi)容就非常方便了。

網(wǎng)頁中的標(biāo)簽是為了更加清晰的整理網(wǎng)頁導(dǎo)航區(qū)域，對(duì)每個(gè)不同的頁面進(jìn)行信息整理并歸類為一種最完整易懂的分類名，以此作為頁面的標(biāo)簽。這樣的形式在如今的網(wǎng)頁設(shè)計(jì)中得到了廣泛的應(yīng)用。如果我們需要列出的標(biāo)簽只有幾個(gè)時(shí)，可以用非常漂亮的樣子做出來，而且會(huì)很容易看懂。

可是當(dāng)擺在我們面前的是一長串，比如二十幾個(gè)標(biāo)簽的時(shí)候，我們?cè)撛趺崔k呢？以往的做法是將所有標(biāo)簽列出，并排列成多行，這樣的方式雖然解決了標(biāo)簽的排布問題，但卻給使用的用戶帶來了極大的困惑，并且這樣的排布在形式上也不再像標(biāo)簽的形式了。另外，這樣的排布想要類似標(biāo)簽的形式時(shí)免不了需要滾動(dòng)顯示標(biāo)簽，將當(dāng)前項(xiàng)滾動(dòng)至下方距離標(biāo)簽內(nèi)容最近的位置。這樣就會(huì)產(chǎn)生每個(gè)標(biāo)簽在使用時(shí)位置不固定的問題，用戶會(huì)有一定的疑惑：上次明明在這里的??？奇怪，難道我記憶力出問題了？

這個(gè)是我一個(gè)朋友在設(shè)計(jì)頁面時(shí)遇到的問題，在與之進(jìn)行設(shè)計(jì)討論的時(shí)候遇到了很多的問題。在這里我將討論中的思路簡(jiǎn)單的說一說吧。

由于顯示器顯示的頁面寬度有限，目前雖然寬屏幕、大分辨率的顯示器已經(jīng)出現(xiàn)，但是還并不算非常普及。我們?cè)谠O(shè)計(jì)網(wǎng)頁時(shí)需要考慮更多的適應(yīng)性，讓更多的用戶在使用時(shí)不會(huì)出現(xiàn)問題，還是需要考慮較小分辨率的顯示器情況。鑒于這些限制性因素，那么我們究竟該如何來排布這么多的標(biāo)簽?zāi)兀?/p>

1.?? 分好的標(biāo)簽之間一般是并列關(guān)系，內(nèi)容最好是互相不交叉的，并且是互相平等的關(guān)系。如果我們羅列出的許多個(gè)標(biāo)簽之間有從屬關(guān)系，我們需要考慮將其重新進(jìn)行分類劃分。將標(biāo)簽進(jìn)行分組，把完全平鋪的標(biāo)簽換為幾組標(biāo)簽。

2.?? 用任務(wù)標(biāo)簽直接顯示分組情況。比如Windows系統(tǒng)中，瀏覽器在開啟多個(gè)網(wǎng)頁窗口時(shí)，在任務(wù)欄位置以同一個(gè)瀏覽器程序的形式顯示，共同表示開啟的多個(gè)窗口標(biāo)簽頁。這樣的顯示就大量節(jié)省了任務(wù)欄寬度。

3.?? 將標(biāo)簽從重要標(biāo)簽向次要標(biāo)簽進(jìn)行排布，按照所設(shè)計(jì)的頁面進(jìn)行排列，將多余出來的標(biāo)簽歸入“更多”標(biāo)簽中，這樣雖然在界面上隱藏了一部分標(biāo)簽，但是卻讓界面顯得更加清爽整齊。并且，根據(jù)這樣的排列后的標(biāo)簽，會(huì)突出網(wǎng)頁想要人們注意到的重點(diǎn)界面，集中來訪用戶的關(guān)注度。次要標(biāo)簽中的內(nèi)容讓那些愿意在網(wǎng)頁中長時(shí)間瀏覽和尋找的用戶進(jìn)行探索，這些相對(duì)次要的內(nèi)容不是網(wǎng)頁設(shè)計(jì)的重點(diǎn)，因此相對(duì)而言也不會(huì)有非常多的用戶使用起來不方便。

4.?? 如果標(biāo)簽很難劃分重要不重要，可以將所有的標(biāo)簽列出來，并加以滾動(dòng)條或者左右箭頭的形式，讓用戶可以在眾多標(biāo)簽頁中橫向滾動(dòng)瀏覽。為了讓人們使用起來更加方便，需要又一個(gè)地方可以以下拉菜單或其他形式顯示所有標(biāo)簽，方便用戶快速選擇。另外，在平鋪標(biāo)簽的時(shí)候，不能無休止的縮短標(biāo)簽的長度，要以標(biāo)簽的辨識(shí)度為首要。不能夠無休止的縮短標(biāo)簽，以至于用戶無法知曉每個(gè)標(biāo)簽的內(nèi)容。如圖是有這個(gè)問題的典型–Google Chrome瀏覽器：

5.?? 當(dāng)橫向位置不夠放置多個(gè)標(biāo)簽時(shí)，可以改為向垂直方向設(shè)計(jì)。垂直方向用戶可以較方便的滾動(dòng)鼠標(biāo)來瀏覽，即使標(biāo)簽有比較多個(gè)也能更容易的排列。此外，垂直方向上每個(gè)標(biāo)簽的高度都是容納一個(gè)字的高度，因此較短的位置可以顯示較多的標(biāo)簽。橫向設(shè)計(jì)的標(biāo)簽由于每個(gè)標(biāo)簽都會(huì)有幾個(gè)字的長度，從而會(huì)占據(jù)更多的橫向空間。

最后回到我和朋友討論的話題上，本來如果只是單純的是二十個(gè)標(biāo)簽我會(huì)建議他設(shè)計(jì)成垂直標(biāo)簽，但是根據(jù)項(xiàng)目的特殊性，他搭建的頁面左側(cè)還有一個(gè)不可或缺的樹狀結(jié)構(gòu)，因此，經(jīng)過再多的思考，考慮到這些標(biāo)簽在不同的用戶面前會(huì)呈現(xiàn)不同的一些標(biāo)簽，但有部分是會(huì)常用到的，因此最終建議他考慮使用“3”，即權(quán)衡出幾個(gè)相對(duì)常用和重要的標(biāo)簽，然后將排列不下的標(biāo)簽們放到更多標(biāo)簽里面，這樣能夠?qū)⑦^多的標(biāo)簽稍作緩和。

在設(shè)計(jì)標(biāo)簽時(shí)可能會(huì)遇到各種各樣的問題，根據(jù)不同的情境采用不同的設(shè)計(jì)方式，靈活的運(yùn)用設(shè)計(jì)技巧就可以制作高可用性的網(wǎng)頁。在每次的問題處理時(shí)多做不同的嘗試，會(huì)容易產(chǎn)生很多優(yōu)秀的設(shè)計(jì)模式，積累這些設(shè)計(jì)模式在今后的應(yīng)用中就會(huì)更快捷。

來源：http://tina.reeze.cn/2010/05/10/labels/