您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁(yè)導(dǎo)航欄設(shè)計(jì)模式分析

網(wǎng)頁(yè)設(shè)計(jì)中有一些通用的交互設(shè)計(jì)模式。網(wǎng)站導(dǎo)航各種各樣的通用和大家熟知的設(shè)計(jì)模式,可以用來(lái)作為為網(wǎng)站創(chuàng)建有效地信息架構(gòu)的基礎(chǔ)。這篇指南涵蓋了流行的站點(diǎn)導(dǎo)航設(shè)計(jì)模式。對(duì)于每一種網(wǎng)站導(dǎo)航欄設(shè)計(jì)模式,我們將討論它的一般特征,它的缺點(diǎn),以及什么時(shí)候使用它最好。

頂部水平欄導(dǎo)航

頂部水平欄導(dǎo)航是當(dāng)前兩種最流行地網(wǎng)站導(dǎo)航菜單設(shè)計(jì)模式之一。它最常用于網(wǎng)站的主導(dǎo)航菜單,且最通常地放在網(wǎng)站所有頁(yè)面的網(wǎng)站頭的直接上方或直接下方。

頂部水平欄導(dǎo)航設(shè)計(jì)模式有時(shí)伴隨著下拉菜單,當(dāng)鼠標(biāo)移到某個(gè)項(xiàng)上時(shí)彈出它下面的二級(jí)子導(dǎo)航項(xiàng)。

頂部水平欄導(dǎo)航一般特征

導(dǎo)航項(xiàng)是文字鏈接,按鈕形狀,或者選項(xiàng)卡形狀

水平欄導(dǎo)航通常直接放在鄰近網(wǎng)站logo的地方

它通常位于折疊之上

頂部水平欄導(dǎo)航的缺點(diǎn)

頂部水平欄導(dǎo)航最大的缺點(diǎn)就是它限制了你在不采用子級(jí)導(dǎo)航的情況下可以包含的鏈接數(shù)。對(duì)于只有幾個(gè)頁(yè)面或類別的網(wǎng)站來(lái)說(shuō),這不是什么問(wèn)題,但是對(duì)于有非常復(fù)雜的信息結(jié)構(gòu)且有很多模塊組成的網(wǎng)站來(lái)說(shuō),如果沒(méi)有子導(dǎo)航的話,這并不是一個(gè)完美的主導(dǎo)航菜單選擇。

何時(shí)使用頂部水平欄導(dǎo)航

頂部水平欄導(dǎo)航對(duì)于只需要在主要導(dǎo)航中顯示5-12個(gè)導(dǎo)航項(xiàng)的網(wǎng)站來(lái)說(shuō)是非常好的。這也是單列布局的網(wǎng)站的主導(dǎo)航的唯一選擇(除了通常用于二級(jí)導(dǎo)航系統(tǒng)的底部導(dǎo)航)。當(dāng)它與下拉子導(dǎo)航結(jié)合時(shí),這種設(shè)計(jì)模式可以支持更多的鏈接。

豎直/側(cè)邊欄導(dǎo)航

側(cè)邊欄導(dǎo)航的導(dǎo)航項(xiàng)被排列在一個(gè)單列,一項(xiàng)在一項(xiàng)的上面。它經(jīng)常在左上角的列上,在主內(nèi)容區(qū)之前——根據(jù)一份針對(duì)從左到右習(xí)慣讀者的導(dǎo)航模式的可用性研究,左邊的豎直導(dǎo)航欄比右邊的豎直導(dǎo)航表現(xiàn)要好。

側(cè)邊欄導(dǎo)航設(shè)計(jì)模式隨處可見(jiàn),幾乎存在于各類網(wǎng)站上。這有可能是因?yàn)樨Q直導(dǎo)航是當(dāng)前最通用的模式之一,可以適應(yīng)數(shù)量很多的鏈接。

它可以與子導(dǎo)航菜單一起使用,也可以單獨(dú)使用。它很容易用于包含很多鏈接的網(wǎng)站主導(dǎo)航。側(cè)邊欄導(dǎo)航可以集成在幾乎任何種類的多列布局中。

側(cè)邊欄導(dǎo)航的一般特征

文字鏈接作為導(dǎo)航項(xiàng)很普遍(包含或不包含圖標(biāo))

很少使用選項(xiàng)卡(除了堆疊標(biāo)簽導(dǎo)航模式)

豎直導(dǎo)航菜單經(jīng)常含有很多鏈接

豎直/側(cè)邊欄導(dǎo)航缺點(diǎn)

因?yàn)榭梢蕴幚砗芏噫溄樱?dāng)豎直菜單太長(zhǎng)時(shí)有時(shí)可能將用戶淹沒(méi)。嘗試限制你引入的鏈接數(shù),取而代之可以使用飛出式子導(dǎo)航菜單以提供網(wǎng)站的更多信息。同時(shí)考慮將鏈接分放在直觀的類別當(dāng)中,以幫助用戶很快地找到感興趣的鏈接。

何時(shí)使用豎直/側(cè)邊欄導(dǎo)航

豎直導(dǎo)航適用于幾乎所有種類的網(wǎng)站,尤其適合有一堆主導(dǎo)航鏈接的網(wǎng)站。

選項(xiàng)卡導(dǎo)航

選項(xiàng)卡導(dǎo)航可以隨意設(shè)計(jì)成任何你想要的樣式,從逼真的,有手感的標(biāo)簽到圓滑的標(biāo)簽,以及簡(jiǎn)單地方邊的標(biāo)簽等。它存在于各種各樣的網(wǎng)站里,并且可以納入任何視覺(jué)效果。

選項(xiàng)卡比起其它類別的導(dǎo)航有一個(gè)明顯的優(yōu)勢(shì):它們對(duì)用戶有積極的心理效應(yīng)。人們通常把導(dǎo)航與選項(xiàng)卡關(guān)聯(lián)在一起,因?yàn)樗麄冊(cè)?jīng)在筆記本或資料夾里看見(jiàn)選項(xiàng)卡,并且把它們與切換到一個(gè)新的章節(jié)聯(lián)系在一起。這個(gè)真實(shí)世界的暗喻使得選項(xiàng)卡導(dǎo)航非常直觀。

選項(xiàng)卡導(dǎo)航的一般特征

樣子和功能都類似真實(shí)世界的選項(xiàng)卡(就像在文件夾,筆記本等中看到的一樣)

一般是水平方向的但也有時(shí)是豎直的(堆疊標(biāo)簽)

選項(xiàng)卡導(dǎo)航的缺點(diǎn)

選項(xiàng)卡最大的缺點(diǎn)是它比簡(jiǎn)單的頂部水平欄更難設(shè)計(jì)。它們通常需要更多的標(biāo)簽,圖片資源以及CSS,具體根據(jù)標(biāo)簽的視覺(jué)復(fù)雜度而定。選項(xiàng)卡的另一個(gè)缺點(diǎn)是它們也不太適用于鏈接很多的情況,除非它們豎直地排列(即使這樣,如果太多的話它們還是看起來(lái)很不合適)。

何時(shí)使用選項(xiàng)卡導(dǎo)航

選項(xiàng)卡也適合幾乎任何主導(dǎo)航,雖然它們?cè)诳梢燥@示的鏈接上有限制,尤其在水平方向的情況下。將它們用于擁有不同風(fēng)格子導(dǎo)航的主導(dǎo)航的較大型網(wǎng)站是個(gè)不錯(cuò)的選項(xiàng)。

面包屑導(dǎo)航

面包屑的名字來(lái)源于Hansel和Gretel的故事,他們?cè)谘赝静ト雒姘家杂脕?lái)找到加家的路,這可以告訴你在網(wǎng)站的當(dāng)前位置。這是二級(jí)導(dǎo)航的一種形式,輔助網(wǎng)站的主導(dǎo)航系統(tǒng)。

面包屑對(duì)于多級(jí)別具有層次結(jié)構(gòu)的網(wǎng)站特別有用。它們可以幫助訪客了解到當(dāng)前自己在整站中所處的位置。如果訪客希望返回到某一級(jí),它們只需要點(diǎn)擊相應(yīng)的面包屑導(dǎo)航項(xiàng)。

面包屑的一般特征

一般格式是水平文字鏈接列表,通常在兩項(xiàng)中間伴隨著左箭頭以指示層及關(guān)系

從不用于主導(dǎo)航

面包屑導(dǎo)航的缺點(diǎn)

面包屑不適于淺導(dǎo)航網(wǎng)站。當(dāng)網(wǎng)站沒(méi)有清晰的層次和分類的時(shí)候,使用它也可能產(chǎn)生混亂。何時(shí)使用面包屑導(dǎo)航。面包屑導(dǎo)航最適用于具有清晰章節(jié)和多層次分類內(nèi)容的網(wǎng)站。沒(méi)有明顯的章節(jié),使用面包屑是得不償失。

標(biāo)簽導(dǎo)航

標(biāo)簽經(jīng)常被用于博客和新聞網(wǎng)站。它們常常被組織成一個(gè)標(biāo)簽云,導(dǎo)航項(xiàng)可能按字母順序排列(通常用不同大小的鏈接來(lái)表示這個(gè)標(biāo)簽下有多少內(nèi)容),或者按流行程度排列。

標(biāo)簽是出色的二級(jí)導(dǎo)航而很少用于主導(dǎo)航。他可以提高網(wǎng)站的可發(fā)現(xiàn)性和探索性。標(biāo)簽云通常出現(xiàn)在邊欄或底部。如果沒(méi)有標(biāo)簽云,標(biāo)簽則通常包括于文章頂部或底部的元信息中,這種設(shè)計(jì)讓用戶更容易找到相似的內(nèi)容。

標(biāo)簽導(dǎo)航的一般特征

標(biāo)簽是以內(nèi)容為中心的網(wǎng)(博客和新聞?wù)?站的一般特性

僅有文字鏈接

當(dāng)處于標(biāo)簽云中時(shí),鏈接通常大小各異以標(biāo)識(shí)流行度

經(jīng)常被包含在文章的元信息中

標(biāo)簽導(dǎo)航的缺點(diǎn)

人們通常把標(biāo)簽和博客和新聞網(wǎng)站聯(lián)系在一起(有時(shí)候也可能是電子商務(wù)網(wǎng)站),所以如果你的網(wǎng)站與這些網(wǎng)站有本質(zhì)的不同,它可能對(duì)你就沒(méi)有幫助。標(biāo)簽也會(huì)給內(nèi)容創(chuàng)作者帶來(lái)一定量的工作量,因?yàn)闉榱耸箻?biāo)簽系統(tǒng)有效,每篇文章都需要打上準(zhǔn)確的標(biāo)簽。

何時(shí)使用標(biāo)簽

如果你擁有很多主題,為內(nèi)容打上關(guān)鍵詞標(biāo)記是很有利的。如果你僅有幾個(gè)頁(yè)面(可能你的網(wǎng)站是一個(gè)公司網(wǎng)站),可能就不需要給內(nèi)容打標(biāo)簽了。是否結(jié)合標(biāo)簽云或只是將標(biāo)簽包含在元信息中得取決于你的設(shè)計(jì)。

搜索導(dǎo)航

近些年來(lái)網(wǎng)站檢索已成為流行的導(dǎo)航方式。它非常適合擁有無(wú)限內(nèi)容的網(wǎng)站(像維基百科),這種網(wǎng)站很難使用其它的導(dǎo)航。搜索也常見(jiàn)于博客和新聞網(wǎng)站,以及電子商務(wù)網(wǎng)站。

搜索對(duì)于清楚知道自己想要找什么的訪客非常有用。但是有了搜索并不代表著就可以忽略好的信息結(jié)構(gòu)。它對(duì)于保證那些不完全知道自己要找什么或是想發(fā)現(xiàn)潛在的感興趣內(nèi)容的瀏覽者可以查找到內(nèi)容依然非常重要。

搜索導(dǎo)航的一般特征

搜索欄通常位于頭部或在側(cè)邊欄靠近頂部的地方

搜索欄經(jīng)常會(huì)出現(xiàn)在頁(yè)面布局中的輔助部分,如底部

搜索導(dǎo)航的缺點(diǎn)

搜索最大的缺點(diǎn)是并非所有搜索引擎都是平等的。取決于你選擇的方案,你網(wǎng)站的搜索特性可能不能返回精確的結(jié)果或者缺失一些東西如文章元數(shù)據(jù)。搜索導(dǎo)航,對(duì)于大部分網(wǎng)站來(lái)說(shuō),應(yīng)該作為次要的導(dǎo)航形式。搜索是用戶在無(wú)法被導(dǎo)航到他們想找的東西的地方時(shí)的可靠選擇。

何時(shí)使用搜索導(dǎo)航

對(duì)于具有無(wú)數(shù)頁(yè)面并且有復(fù)雜信息結(jié)構(gòu)的網(wǎng)站來(lái)說(shuō),肯定必須引入搜索功能。沒(méi)有它用戶可能很難通過(guò)遍歷鏈接和多層的導(dǎo)航來(lái)找到他們想要的信息。搜索對(duì)于電子商務(wù)網(wǎng)站也非常重要,而關(guān)鍵的一點(diǎn)是電子商務(wù)網(wǎng)站的搜索結(jié)果要根據(jù)網(wǎng)站存貨的多少具有相應(yīng)的篩選和排序功能。

出式菜單和下拉菜單導(dǎo)航

出式菜單(與豎直/側(cè)邊欄導(dǎo)航一起使用)和下拉菜單(一般與頂部水平欄導(dǎo)航一起使用)是構(gòu)建健壯的導(dǎo)航系統(tǒng)的好方法。它使得你的網(wǎng)站整體上看起來(lái)很整潔,而且使得深層章節(jié)很容易被訪問(wèn)。

他們通常結(jié)合水平,豎直或是選項(xiàng)卡導(dǎo)航一起使用,作為網(wǎng)站主導(dǎo)航系統(tǒng)的一部分。

出式菜單和下拉菜單導(dǎo)航的一般特征

用于多級(jí)信息結(jié)構(gòu)

使用JavaScript和CSS來(lái)隱藏和顯示菜單

顯示在菜單中的鏈接是主菜單項(xiàng)的子項(xiàng)

菜單通常在鼠標(biāo)懸停在上面時(shí)被激活,而有時(shí)候也可能是鼠標(biāo)點(diǎn)擊時(shí)激活

出式菜單和下拉菜單導(dǎo)航缺點(diǎn)

除非你在主導(dǎo)航鏈接邊上放置一些標(biāo)識(shí)(通常是箭頭圖標(biāo)),不然訪客可能不知道那有包含子導(dǎo)航項(xiàng)的下拉或出式菜單,因此使這些標(biāo)識(shí)很明顯是非常重要的。同時(shí)出式菜單和下拉可能使得導(dǎo)航在移動(dòng)設(shè)備上非常難用,所以要確保你的移動(dòng)樣式表處理了這種情況。

何時(shí)使用出式菜單和下拉菜單導(dǎo)航

如果你想在視覺(jué)上隱藏很大的或很復(fù)雜的導(dǎo)航層次,出式菜單和下拉是很好的選擇,因?yàn)樗層脩魶Q定他們想看見(jiàn)什么,以及什么時(shí)候可以看見(jiàn)它們。它們可以用來(lái)在不弄亂網(wǎng)頁(yè)的情況下按需顯示很大數(shù)量的鏈接。它們還可以用來(lái)顯示子頁(yè)面和局部導(dǎo)航,并且不需要用戶首先點(diǎn)擊打開(kāi)新的頁(yè)面。

分面/引導(dǎo)導(dǎo)航

分面/引導(dǎo)導(dǎo)航(也叫做分面檢索或引導(dǎo)檢索)最常見(jiàn)于電子商務(wù)網(wǎng)站?;旧蟻?lái)說(shuō)引導(dǎo)導(dǎo)航給你提供額外的內(nèi)容屬性篩選。假設(shè)你在瀏覽一個(gè)新的LCD顯示器,引導(dǎo)導(dǎo)航可能會(huì)列出大小,價(jià)格,品牌等選頂?;谶@些內(nèi)容屬性,你可以導(dǎo)航到匹配你的條件的項(xiàng)。

引導(dǎo)導(dǎo)航在擁有巨大數(shù)量貨物的大型電子商務(wù)網(wǎng)站中是非常寶貴的。用戶通過(guò)直接搜索通常很難找到他們想要的東西,并且增加了用戶漏掉一個(gè)產(chǎn)品的或能性。例如他們可能搜索一個(gè)灰褐色的產(chǎn)品,但你可能將它標(biāo)記了灰色或褐色,雖然它可能就是用戶想要的東西。

分面/引導(dǎo)導(dǎo)航的一般特征

最常見(jiàn)于電子商務(wù)網(wǎng)站

通常讓用戶對(duì)不同的特征做多次篩選

幾乎總是使用文字鏈接,分解在不同的類別下或是下拉菜單下

常常與面包屑導(dǎo)航一起使用

分面/引導(dǎo)導(dǎo)航的缺點(diǎn)

引導(dǎo)導(dǎo)航可能會(huì)引起一些用戶的迷惑。另外不能保證用戶會(huì)在你預(yù)先定義的類別中查找。

何時(shí)使用分面/引導(dǎo)導(dǎo)航

分面導(dǎo)航對(duì)于大型電子商務(wù)網(wǎng)站非常有用。它方便了用戶購(gòu)物,提升了購(gòu)物體驗(yàn),并更容易找到它們真正想要的東西。它也可以用于其它目錄風(fēng)格的網(wǎng)站。

頁(yè)腳導(dǎo)航

頁(yè)腳導(dǎo)航通常用于次要導(dǎo)航,并且可能包含了主導(dǎo)航中沒(méi)有的鏈接,或是包含簡(jiǎn)化的網(wǎng)站地圖鏈接。

訪客通常在主導(dǎo)航找不到他們要找的東西時(shí)會(huì)去查看頁(yè)腳導(dǎo)航。

頁(yè)腳導(dǎo)航的一般特征

頁(yè)腳導(dǎo)航通常用于放置其它地方都沒(méi)有的導(dǎo)航項(xiàng)

通常使用文字鏈接,偶爾帶有圖標(biāo)

通常鏈接指向不是那么關(guān)鍵的頁(yè)面

頁(yè)腳導(dǎo)航的缺點(diǎn)

如果你的頁(yè)面很長(zhǎng),沒(méi)有人愿意僅僅為了導(dǎo)航而滾動(dòng)到頁(yè)面底部。對(duì)于較長(zhǎng)的頁(yè)面,頁(yè)腳導(dǎo)航最好作為重復(fù)鏈接和簡(jiǎn)要的網(wǎng)站地圖的地方。它不適合作為主導(dǎo)般形式。

何時(shí)使用頁(yè)腳導(dǎo)航

\絕大多數(shù)網(wǎng)站都有這樣那樣的頁(yè)腳導(dǎo)航,即使它只是重復(fù)其它地方的鏈接??紤]什么放在那有用,以及你的訪客可能最想找什么。

結(jié)論

大多數(shù)網(wǎng)站使用不只一種導(dǎo)航設(shè)計(jì)模式。例如一個(gè)網(wǎng)站可能會(huì)用頂部水平欄導(dǎo)航作為主導(dǎo)航系統(tǒng),并使用豎直/側(cè)邊欄導(dǎo)航系統(tǒng)來(lái)輔助它,同時(shí)還用頁(yè)腳導(dǎo)航來(lái)作冗余,增加頁(yè)面的便利度。當(dāng)選擇你的導(dǎo)航系統(tǒng)基于的導(dǎo)航設(shè)計(jì)模式時(shí),你必須選擇支持你的信息結(jié)構(gòu)以及網(wǎng)站特性的方案。導(dǎo)航是網(wǎng)站設(shè)計(jì)的重要部分,它的效果必須有堅(jiān)實(shí)的基礎(chǔ)設(shè)計(jì)。


 

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1148.html
網(wǎng)頁(yè)設(shè)計(jì)師需掌握的6種能力
簡(jiǎn)潔至上的Web設(shè)計(jì) – 創(chuàng)意要素及設(shè)計(jì)技巧
圖趣網(wǎng)微信
建議反饋
×