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