讓人又愛又恨的標(biāo)簽們

標(biāo)簽的出現(xiàn)解決了頁面上導(dǎo)航難以排布的難題,讓頁面信息整理更加容易。標(biāo)簽的形式來源于人們的生活,在書中夾上一些做好標(biāo)記的紙條并露出書邊,下次再尋找書里的內(nèi)容就非常方便了。
網(wǎng)頁中的標(biāo)簽是為了更加清晰的整理網(wǎng)頁導(dǎo)航區(qū)域,對每個不同的頁面進(jìn)行信息整理并歸類為一種最完整易懂的分類名,以此作為頁面的標(biāo)簽。這樣的形式在如今的網(wǎng)頁設(shè)計中得到了廣泛的應(yīng)用。如果我們需要列出的標(biāo)簽只有幾個時,可以用非常漂亮的樣子做出來,而且會很容易看懂。
可是當(dāng)擺在我們面前的是一長串,比如二十幾個標(biāo)簽的時候,我們該怎么辦呢?以往的做法是將所有標(biāo)簽列出,并排列成多行,這樣的方式雖然解決了標(biāo)簽的排布問題,但卻給使用的用戶帶來了極大的困惑,并且這樣的排布在形式上也不再像標(biāo)簽的形式了。另外,這樣的排布想要類似標(biāo)簽的形式時免不了需要滾動顯示標(biāo)簽,將當(dāng)前項滾動至下方距離標(biāo)簽內(nèi)容最近的位置。這樣就會產(chǎn)生每個標(biāo)簽在使用時位置不固定的問題,用戶會有一定的疑惑:上次明明在這里的啊?奇怪,難道我記憶力出問題了?
這個是我一個朋友在設(shè)計頁面時遇到的問題,在與之進(jìn)行設(shè)計討論的時候遇到了很多的問題。在這里我將討論中的思路簡單的說一說吧。
由于顯示器顯示的頁面寬度有限,目前雖然寬屏幕、大分辨率的顯示器已經(jīng)出現(xiàn),但是還并不算非常普及。我們在設(shè)計網(wǎng)頁時需要考慮更多的適應(yīng)性,讓更多的用戶在使用時不會出現(xiàn)問題,還是需要考慮較小分辨率的顯示器情況。鑒于這些限制性因素,那么我們究竟該如何來排布這么多的標(biāo)簽?zāi)兀?/p>
1.?? 分好的標(biāo)簽之間一般是并列關(guān)系,內(nèi)容最好是互相不交叉的,并且是互相平等的關(guān)系。如果我們羅列出的許多個標(biāo)簽之間有從屬關(guān)系,我們需要考慮將其重新進(jìn)行分類劃分。將標(biāo)簽進(jìn)行分組,把完全平鋪的標(biāo)簽換為幾組標(biāo)簽。
2.?? 用任務(wù)標(biāo)簽直接顯示分組情況。比如Windows系統(tǒng)中,瀏覽器在開啟多個網(wǎng)頁窗口時,在任務(wù)欄位置以同一個瀏覽器程序的形式顯示,共同表示開啟的多個窗口標(biāo)簽頁。這樣的顯示就大量節(jié)省了任務(wù)欄寬度。
3.?? 將標(biāo)簽從重要標(biāo)簽向次要標(biāo)簽進(jìn)行排布,按照所設(shè)計的頁面進(jìn)行排列,將多余出來的標(biāo)簽歸入“更多”標(biāo)簽中,這樣雖然在界面上隱藏了一部分標(biāo)簽,但是卻讓界面顯得更加清爽整齊。并且,根據(jù)這樣的排列后的標(biāo)簽,會突出網(wǎng)頁想要人們注意到的重點界面,集中來訪用戶的關(guān)注度。次要標(biāo)簽中的內(nèi)容讓那些愿意在網(wǎng)頁中長時間瀏覽和尋找的用戶進(jìn)行探索,這些相對次要的內(nèi)容不是網(wǎng)頁設(shè)計的重點,因此相對而言也不會有非常多的用戶使用起來不方便。
4.?? 如果標(biāo)簽很難劃分重要不重要,可以將所有的標(biāo)簽列出來,并加以滾動條或者左右箭頭的形式,讓用戶可以在眾多標(biāo)簽頁中橫向滾動瀏覽。為了讓人們使用起來更加方便,需要又一個地方可以以下拉菜單或其他形式顯示所有標(biāo)簽,方便用戶快速選擇。另外,在平鋪標(biāo)簽的時候,不能無休止的縮短標(biāo)簽的長度,要以標(biāo)簽的辨識度為首要。不能夠無休止的縮短標(biāo)簽,以至于用戶無法知曉每個標(biāo)簽的內(nèi)容。如圖是有這個問題的典型–Google Chrome瀏覽器:
5.?? 當(dāng)橫向位置不夠放置多個標(biāo)簽時,可以改為向垂直方向設(shè)計。垂直方向用戶可以較方便的滾動鼠標(biāo)來瀏覽,即使標(biāo)簽有比較多個也能更容易的排列。此外,垂直方向上每個標(biāo)簽的高度都是容納一個字的高度,因此較短的位置可以顯示較多的標(biāo)簽。橫向設(shè)計的標(biāo)簽由于每個標(biāo)簽都會有幾個字的長度,從而會占據(jù)更多的橫向空間。
最后回到我和朋友討論的話題上,本來如果只是單純的是二十個標(biāo)簽我會建議他設(shè)計成垂直標(biāo)簽,但是根據(jù)項目的特殊性,他搭建的頁面左側(cè)還有一個不可或缺的樹狀結(jié)構(gòu),因此,經(jīng)過再多的思考,考慮到這些標(biāo)簽在不同的用戶面前會呈現(xiàn)不同的一些標(biāo)簽,但有部分是會常用到的,因此最終建議他考慮使用“3”,即權(quán)衡出幾個相對常用和重要的標(biāo)簽,然后將排列不下的標(biāo)簽們放到更多標(biāo)簽里面,這樣能夠?qū)⑦^多的標(biāo)簽稍作緩和。
在設(shè)計標(biāo)簽時可能會遇到各種各樣的問題,根據(jù)不同的情境采用不同的設(shè)計方式,靈活的運用設(shè)計技巧就可以制作高可用性的網(wǎng)頁。在每次的問題處理時多做不同的嘗試,會容易產(chǎn)生很多優(yōu)秀的設(shè)計模式,積累這些設(shè)計模式在今后的應(yīng)用中就會更快捷。
來源:http://tina.reeze.cn/2010/05/10/labels/
- 目前還沒評論,等你發(fā)揮!