導(dǎo)航是網(wǎng)站中的指路標(biāo)，是網(wǎng)頁(yè)設(shè)計(jì)中最重要的內(nèi)容，也是用戶在頁(yè)面中使用最高的功能。用戶需要使用網(wǎng)站的導(dǎo)航系統(tǒng)來(lái)明確自己每時(shí)每刻所處的位置，并快速地獲取信息。因此，我們必須清晰、合理地規(guī)劃網(wǎng)站框架和信息結(jié)構(gòu)，理清頁(yè)面之間的邏輯關(guān)系，設(shè)計(jì)出直觀、易操作的導(dǎo)航系統(tǒng)。從表現(xiàn)形式上來(lái)劃分，網(wǎng)站導(dǎo)航系統(tǒng)主要包括全局導(dǎo)航、局部導(dǎo)航、搜索引擎導(dǎo)航、面包屑導(dǎo)航和其他輔助導(dǎo)航5種類(lèi)型。
1全局導(dǎo)航
全局導(dǎo)航就是網(wǎng)站中的一級(jí)菜單，也是我們通常所說(shuō)的主導(dǎo)航。它通常位于網(wǎng)站的最優(yōu)視覺(jué)區(qū)域，并展現(xiàn)出整個(gè)網(wǎng)站的框架結(jié)構(gòu)。通常情況下，全局導(dǎo)航都是以統(tǒng)一的外觀出現(xiàn)在網(wǎng)站的所有頁(yè)面，通過(guò)鏈接的構(gòu)建有效引導(dǎo)用戶瀏覽網(wǎng)站。值得注意的是，現(xiàn)在越來(lái)越多的網(wǎng)站為其Logo設(shè)置了首頁(yè)鏈接，方便用戶無(wú)論何時(shí)何地只要單擊Logo就能跳轉(zhuǎn)到首頁(yè)，此處的Logo也屬于全局導(dǎo)航的范疇。
傳統(tǒng)的全局導(dǎo)航菜單是頂部、底部或側(cè)面固定。導(dǎo)航菜單固定在頁(yè)面頂部的形式運(yùn)用范圍十分廣泛，它能靈活地布局圖文和多媒體信息，如某些個(gè)人網(wǎng)站(見(jiàn)圖1），無(wú)論進(jìn)入到站內(nèi)的哪個(gè)頁(yè)面，全局導(dǎo)航的菜單都置于頂部；導(dǎo)航菜單位于界面底部的布局常用于信息內(nèi)容不多，能在一屏內(nèi)展示完信息及效果的網(wǎng)站，如意大利高級(jí)珠寶伯蒂諾網(wǎng)站（見(jiàn)圖2），該網(wǎng)站的全局導(dǎo)航位于界面的底部不變，導(dǎo)航上方拖曳鼠標(biāo)可以觀看有趣的視差變化；全局導(dǎo)航區(qū)域固定在側(cè)面的形式優(yōu)勢(shì)在于能合理控制網(wǎng)站的結(jié)構(gòu)，該布局會(huì)營(yíng)造出簡(jiǎn)潔大氣的風(fēng)格，如Georgina Bousia網(wǎng)站（見(jiàn)圖3)，左側(cè)導(dǎo)航的簡(jiǎn)潔與右側(cè)圖片精致形成強(qiáng)烈對(duì)比，使得網(wǎng)站內(nèi)容及導(dǎo)航區(qū)域一目了然。
圖1
圖2
圖3
隨著時(shí)代的發(fā)展，全局導(dǎo)航也出現(xiàn)了更多新的形態(tài)，如Names for Change網(wǎng)站（見(jiàn)圖4）全局導(dǎo)航菜單頂部與底部兼?zhèn)?，不過(guò)兩者有主次之分，頂部菜單完全展示，單擊菜單后是當(dāng)前頁(yè)面的跳轉(zhuǎn)，而底部菜單則需要單擊方向圖標(biāo)才能展開(kāi)，并且單擊后會(huì)另外打開(kāi)一個(gè)窗口；再如MUSEEKLY網(wǎng)站（見(jiàn)圖5）導(dǎo)航菜單被隱藏在漢堡圖標(biāo)（俗稱(chēng)三條線圖標(biāo)）中，當(dāng)鼠標(biāo)單擊圖標(biāo)后會(huì)跳出彈框選擇，此類(lèi)導(dǎo)航雖隱蔽但可以讓頁(yè)面更整潔，為視覺(jué)設(shè)計(jì)留下更大的空間?？傊?，無(wú)論全局導(dǎo)航身處界面何處都是為了幫助用戶訪問(wèn)到站內(nèi)任意頁(yè)面，完成各個(gè)頁(yè)面間的跳轉(zhuǎn)。
圖4
圖5
2局部導(dǎo)航
局部導(dǎo)航常常與全局導(dǎo)航協(xié)同工作，是全局導(dǎo)航的補(bǔ)充和延伸。實(shí)際上局部導(dǎo)航就是網(wǎng)站一級(jí)菜單下的二級(jí)菜單或三級(jí)菜單。相對(duì)于全局導(dǎo)航位置的固定曝光，局部菜單的位置時(shí)常會(huì)被折疊隱藏，只有選中了一級(jí)菜單后才能看到相應(yīng)的二級(jí)菜單，選中二級(jí)菜單后才能看到三級(jí)菜單。如著名的DIY工藝品電商Brit+Co網(wǎng)站，當(dāng)鼠標(biāo)懸停一級(jí)菜單時(shí)，會(huì)展現(xiàn)出其對(duì)應(yīng)的二級(jí)菜單；當(dāng)進(jìn)入到二級(jí)菜單時(shí)，才能看到三級(jí)菜單。此處的局部導(dǎo)航完美地展現(xiàn)出網(wǎng)站的架構(gòu)，實(shí)現(xiàn)頁(yè)面的快速跳轉(zhuǎn)。值得注意的是局部導(dǎo)航的結(jié)構(gòu)要清晰，層級(jí)最好不要超過(guò)三層，否則會(huì)使網(wǎng)站內(nèi)容和結(jié)構(gòu)顯得繁冗，不利于用戶瀏覽。
3搜索引擎導(dǎo)航
搜索引擎導(dǎo)航實(shí)際上就是搜索框，一般放置在網(wǎng)站的頂部或主導(dǎo)航附近。一個(gè)簡(jiǎn)單的搜索框或搜索按鈕能夠方便用戶直接通過(guò)搜索關(guān)鍵字查詢結(jié)果，特別適用于門(mén)戶類(lèi)與電子商務(wù)類(lèi)網(wǎng)站。如amazon網(wǎng)站（見(jiàn)圖6），大量的商品信息很容易讓用戶無(wú)所適從，此時(shí)用戶只需在搜索框內(nèi)輸入關(guān)鍵詞就能精準(zhǔn)、迅速地查找到所需的信息。相對(duì)于企業(yè)網(wǎng)站和電子商務(wù)類(lèi)網(wǎng)站而言，搜索引擎還能夠提供網(wǎng)絡(luò)市場(chǎng)調(diào)研數(shù)據(jù)，拓展?jié)撛诳蛻簟?/span>
圖6
4面包屑導(dǎo)航
面包屑導(dǎo)航又稱(chēng)作層級(jí)菜單，它表明當(dāng)前頁(yè)面所處的位置及產(chǎn)品的從屬關(guān)系，特別適用于層級(jí)關(guān)系較深的網(wǎng)站。它往往位于全局導(dǎo)航與正文之間的左側(cè)或者右側(cè)的位置，一般樣式是用鏈接文字加上“>”橫向排布。如愛(ài)奇藝網(wǎng)站（見(jiàn)圖7）的面包屑導(dǎo)航位于全局導(dǎo)航與影片正文之間，有了面包屑導(dǎo)航的引導(dǎo)，一方面我們更能看清該視頻的目錄結(jié)構(gòu)，實(shí)現(xiàn)該頁(yè)面與父級(jí)頁(yè)面之間的跳轉(zhuǎn)；另一方面方便我們查找自己當(dāng)前在站內(nèi)的位置。
圖7
5其他輔助導(dǎo)航
其他輔助導(dǎo)航是提供一些全站導(dǎo)航與輔助導(dǎo)航不能快速到達(dá)的相關(guān)內(nèi)容的快捷方式，多以圖片、圖標(biāo)、文字及視頻鏈接等形式出現(xiàn)。其形式可以是靜態(tài)，也可以是動(dòng)態(tài)。如在線學(xué)習(xí)網(wǎng)站Design Tuts+(見(jiàn)圖8），用戶在首頁(yè)無(wú)需借助全局導(dǎo)航、局部導(dǎo)航等，可以通過(guò)單擊圖片直接進(jìn)入到對(duì)應(yīng)的課程學(xué)習(xí)頁(yè)面，還可以單擊作者姓名快速進(jìn)入作者介紹頁(yè)面。我們?cè)谠O(shè)計(jì)輔助導(dǎo)航時(shí)應(yīng)當(dāng)注意其功能的優(yōu)先級(jí)，不可隨意放置。
圖8
