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