網(wǎng)站導(dǎo)航系統(tǒng)的設(shè)計應(yīng)用

趙 愛 濤

(石家莊職業(yè)技術(shù)學(xué)院 信息工程系,河北 石家莊 050081)

?

網(wǎng)站導(dǎo)航系統(tǒng)的設(shè)計應(yīng)用

趙 愛 濤

(石家莊職業(yè)技術(shù)學(xué)院 信息工程系,河北 石家莊 050081)

網(wǎng)站導(dǎo)航系統(tǒng)的設(shè)計應(yīng)遵循以人為本，直觀易操作；與網(wǎng)站內(nèi)容、風(fēng)格、結(jié)構(gòu)一致的原則.網(wǎng)站導(dǎo)航系統(tǒng)設(shè)計的方法有全局導(dǎo)航、局部導(dǎo)航、文字導(dǎo)航、面包屑導(dǎo)航和搜索引擎式導(dǎo)航.

導(dǎo)航系統(tǒng)；網(wǎng)站；設(shè)計

隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，網(wǎng)站作為信息傳遞的媒介，已經(jīng)滲入到人們工作、生活的方方面面.網(wǎng)站提供了導(dǎo)航、文字、圖片、聲音、動畫等多種媒體元素，瀏覽者通過網(wǎng)站獲取所需的各類信息.而導(dǎo)航系統(tǒng)作為網(wǎng)站設(shè)計好壞的評價指標(biāo)，在構(gòu)建一個成功的網(wǎng)站中扮演著重要的角色.本文就網(wǎng)站導(dǎo)航系統(tǒng)在網(wǎng)站設(shè)計中的作用、設(shè)計原則和方法進(jìn)行分析研究.

1 網(wǎng)站中導(dǎo)航系統(tǒng)的重要性

網(wǎng)站信息量巨大，瀏覽者要想快速高效地獲取需要的信息，離不開網(wǎng)站導(dǎo)航.在進(jìn)入網(wǎng)站后，瀏覽者需要知道“我在哪，要去哪，怎么去”，而這些問題由網(wǎng)站導(dǎo)航系統(tǒng)來解決.

導(dǎo)航系統(tǒng)在網(wǎng)站中承擔(dān)著展現(xiàn)信息結(jié)構(gòu)的功能，對網(wǎng)站的規(guī)劃和布局起著決定性的作用.一個好的導(dǎo)航系統(tǒng)能夠改善用戶的網(wǎng)站體驗(yàn)，幫助用戶定位自己在網(wǎng)站中的位置，知道下一步該去哪里和如何順利地返回上一頁，從而有助于用戶制定更好的閱讀路線，增進(jìn)對內(nèi)容的理解，避免用戶在虛擬網(wǎng)絡(luò)空間里出現(xiàn)迷航的現(xiàn)象.

網(wǎng)站導(dǎo)航系統(tǒng)要實(shí)現(xiàn)三個方面的功能：(1)瀏覽者能從互聯(lián)網(wǎng)的一個頁面跳轉(zhuǎn)到另一個頁面，即實(shí)現(xiàn)頁面跳轉(zhuǎn).(2)能尋找和定位所需的信息，即實(shí)現(xiàn)對網(wǎng)絡(luò)信息的瀏覽.(3)提供訪問網(wǎng)頁定位所需的所有文字、圖片等的鏈接.鏈接是網(wǎng)站導(dǎo)航設(shè)計的關(guān)鍵，通過鏈接可以體現(xiàn)網(wǎng)站內(nèi)容的關(guān)聯(lián)性和結(jié)構(gòu)的完整性.

2 網(wǎng)站導(dǎo)航系統(tǒng)的設(shè)計原則

(1)以人為本，直觀易操作

網(wǎng)站的用戶是瀏覽者，因此，首先必須滿足以人為本的基本原則.導(dǎo)航結(jié)構(gòu)設(shè)計要簡單明了，符合瀏覽者的瀏覽習(xí)慣，使瀏覽者能快速進(jìn)入網(wǎng)站主題內(nèi)容并定位信息.

設(shè)計和制作導(dǎo)航系統(tǒng)時，對于一些行業(yè)網(wǎng)站或個性化網(wǎng)站，要考慮特定用戶的喜好、文化程度、工作性質(zhì)等因素，最大程度地滿足用戶的特定需求.

導(dǎo)航的結(jié)構(gòu)和層次設(shè)計越簡單，瀏覽者越能快速訪問所需的信息，增強(qiáng)用戶瀏覽信息的體驗(yàn)感，提高網(wǎng)站的服務(wù)能力.一般網(wǎng)站導(dǎo)航設(shè)計層次多為二到三層，以方便用戶尋找.

例如，某介紹玫瑰花的網(wǎng)站導(dǎo)航系統(tǒng)，分兩個層次，如圖1所示.

圖1 玫瑰花網(wǎng)站導(dǎo)航系統(tǒng)層次

網(wǎng)站鏈接文字、圖片設(shè)計要醒目，尤其對于首次訪問網(wǎng)站的用戶，這種直觀易操作性可以大大提高用戶的體驗(yàn)感，利于網(wǎng)站的發(fā)展與推廣.

(2) 導(dǎo)航設(shè)計要與網(wǎng)站內(nèi)容、風(fēng)格、結(jié)構(gòu)一致

首先，網(wǎng)站的內(nèi)容是設(shè)計的依據(jù)，是導(dǎo)航設(shè)計的靈魂，導(dǎo)航要完整、準(zhǔn)確地表達(dá)出網(wǎng)站的內(nèi)容和信息.對網(wǎng)站內(nèi)容進(jìn)行分析、歸納、總結(jié)、分類，有助于理清導(dǎo)航系統(tǒng)的框架結(jié)構(gòu)，確定導(dǎo)航的設(shè)計形式.

其次，根據(jù)網(wǎng)站的風(fēng)格設(shè)計不同的導(dǎo)航系統(tǒng).網(wǎng)站的風(fēng)格是指網(wǎng)頁中所有元素形成的整體形象，能給瀏覽者的一個綜合感受.網(wǎng)站設(shè)計中，網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計非常重要，同時也最難把握，因?yàn)闆]有一個固定的模式可參考，需要制作者不斷積累設(shè)計經(jīng)驗(yàn).

不同的網(wǎng)站，風(fēng)格是不同的，網(wǎng)站導(dǎo)航的設(shè)計也應(yīng)該是獨(dú)特的，并通過色彩的搭配，文字效果的設(shè)置，圖片、動畫的應(yīng)用等來體現(xiàn).當(dāng)然風(fēng)格的設(shè)計離不開內(nèi)容這個靈魂，根據(jù)主題內(nèi)容的不同，風(fēng)格有活潑型、沉穩(wěn)型，有輕松的，也有嚴(yán)肅的，形式上有中規(guī)中矩的，也有特立獨(dú)行的.根據(jù)網(wǎng)站性質(zhì)的不同分為企業(yè)網(wǎng)站、商業(yè)網(wǎng)站、教育科研機(jī)構(gòu)網(wǎng)站、個人網(wǎng)站以及其他類型等,用戶種類不同，風(fēng)格也不同，例如，兒童類網(wǎng)站迪斯尼采用靚麗的顏色、卡通的形象來制作各種導(dǎo)航按鈕.

“網(wǎng)站具有多屏、分頁、嵌套等特點(diǎn)，統(tǒng)一的網(wǎng)站風(fēng)格能給瀏覽者留下深刻的印象.”[1]對同一個網(wǎng)站來說，網(wǎng)站導(dǎo)航系統(tǒng)的布局、文字排版、色彩處理要統(tǒng)一、協(xié)調(diào)，不能有太大的跳躍，要塑造網(wǎng)站的整體形象，以便于瀏覽者把握網(wǎng)站的整體風(fēng)格，也有利于技術(shù)實(shí)現(xiàn)以及后期的修改和維護(hù).瀏覽者閱讀的習(xí)慣是從上到下、從左到右，因此，大部分網(wǎng)站導(dǎo)航一般放置在網(wǎng)頁的頂部或左側(cè)，有時還結(jié)合右側(cè)和底部導(dǎo)航的方式[2].頂部導(dǎo)航是一種最常用的導(dǎo)航布局方式，位于頁面的上方.頂部導(dǎo)航符合瀏覽者的瀏覽習(xí)慣，便于瀏覽者對網(wǎng)站結(jié)構(gòu)、內(nèi)容的了解，適用于任何網(wǎng)站結(jié)構(gòu)類型.左側(cè)導(dǎo)航通常作為局部導(dǎo)航，是主導(dǎo)航的二級或三級欄目導(dǎo)航，通常運(yùn)用于左右型結(jié)構(gòu)的網(wǎng)站.底部導(dǎo)航主要是主導(dǎo)航一級欄目的文字鏈接，位于頁面底部.當(dāng)頁面較長，出現(xiàn)多屏?xí)r，瀏覽者不必將屏幕滾動回頂部，可以通過底部的文字鏈接繼續(xù)訪問感興趣的內(nèi)容.

再次，根據(jù)網(wǎng)站的結(jié)構(gòu)特點(diǎn)設(shè)計導(dǎo)航系統(tǒng).對于小型網(wǎng)站，所有文件都在站點(diǎn)的根目錄下，文件不能太多，否則容易造成混亂，沒有太多的邏輯結(jié)構(gòu)可言.一般的網(wǎng)站都是采取邏輯性強(qiáng)的樹形結(jié)構(gòu)，先是首頁，然后是各欄目的分類頁面，最后為具體的文章頁面.所有的頁面都能鏈接到首頁，分類頁面之間可以互相鏈接，不同分類下文章頁面之間一般不直接鏈接，可以通過設(shè)置關(guān)鍵字來鏈接.

3 網(wǎng)站導(dǎo)航系統(tǒng)的設(shè)計方法

3.1 全局導(dǎo)航

全局導(dǎo)航即主導(dǎo)航，在網(wǎng)站中以一級欄目的菜單形式出現(xiàn)，位于網(wǎng)頁的主要位置頂端或左側(cè)，引導(dǎo)用戶對網(wǎng)站進(jìn)行瀏覽.網(wǎng)站的類型不同，一級欄目的多少不同，設(shè)計風(fēng)格也不同.例如，“hao123網(wǎng)址大全”，是權(quán)威的中文上網(wǎng)導(dǎo)航，收錄了音樂、小說、影視、游戲等分類的網(wǎng)址和內(nèi)容，欄目較多，分類較細(xì).“網(wǎng)易” 推出了門戶網(wǎng)站、電子郵箱、在線游戲、在線教育、在線音樂、電子商務(wù)等多種服務(wù)，主導(dǎo)航欄目也較多，如圖2所示.

圖2 “網(wǎng)易”的主導(dǎo)航形式

3.2 局部導(dǎo)航

局部導(dǎo)航是對主導(dǎo)航的補(bǔ)充，是網(wǎng)站的二級或者三級欄目，同主導(dǎo)航一起實(shí)現(xiàn)網(wǎng)站的架構(gòu)，完成頁面的跳轉(zhuǎn).它主要位于網(wǎng)頁的左側(cè)或右側(cè)，適用于“T”字形或“國”字形的網(wǎng)頁框架結(jié)構(gòu)；或采用主導(dǎo)航鼠標(biāo)經(jīng)過的下拉菜單形式來實(shí)現(xiàn).

3.3 文字導(dǎo)航

最好使用文字導(dǎo)航，比起圖片和flash鏈接，文字導(dǎo)航能讓搜索引擎快速收錄.導(dǎo)航系統(tǒng)的鏈接是搜索引擎收錄網(wǎng)站的最重要的內(nèi)部鏈接.

3.4 面包屑導(dǎo)航

對于大中型網(wǎng)站，通常使用面包屑導(dǎo)航.面包屑導(dǎo)航的作用是告訴瀏覽者他們目前在網(wǎng)站中的位置以及如何返回，是通過改變字體的顏色和大小來提示瀏覽者目前所在的網(wǎng)站位置，并且向?yàn)g覽者提供歷史瀏覽路徑及返回的鏈接.

面包屑導(dǎo)航可以用于判斷頁面在整個網(wǎng)站中的位置，架構(gòu)比較清晰.它直接反映網(wǎng)站的目錄結(jié)構(gòu)，可以減少網(wǎng)站內(nèi)部的“迷航”現(xiàn)象.如圖3所示.

圖3 面包屑導(dǎo)航樣式

面包屑導(dǎo)航的實(shí)現(xiàn)方式為：首先，通過最后一個節(jié)點(diǎn)標(biāo)簽，提示用戶在網(wǎng)站的當(dāng)前位置，例如圖3的“愛情”；其次，整體從左到右是用戶瀏覽到此位置的路徑，例如圖3“玫瑰花首頁>花情花語>愛情>”；最后，除當(dāng)前頁面節(jié)點(diǎn)標(biāo)簽外，其他節(jié)點(diǎn)標(biāo)簽均可點(diǎn)擊鏈接文字，回到上一級或某級的位置，直至回到訪問網(wǎng)站的最初位置，例如網(wǎng)站首頁.有了這些標(biāo)簽提示，瀏覽者就不會在網(wǎng)站的諸多信息中迷失了.

3.5 搜索引擎方式的導(dǎo)航

網(wǎng)站的用戶可以按照關(guān)鍵字設(shè)計進(jìn)行信息的搜索.用戶在搜索文本框中輸入關(guān)鍵詞，然后點(diǎn)擊搜索按鈕，產(chǎn)生可以訪問的信息列表，瀏覽者可以從列表中選擇內(nèi)容并打開內(nèi)容頁面.搜索引擎的關(guān)鍵詞搜索是最有效的導(dǎo)航方式，可以直接定位到瀏覽者的目的頁面上.

綜合網(wǎng)站導(dǎo)航的設(shè)計一般為多種方法相結(jié)合，為用戶提供全面的服務(wù).導(dǎo)航設(shè)計的創(chuàng)意是無限的，任何樣式，只要符合導(dǎo)航設(shè)計的原則，就可以實(shí)現(xiàn)導(dǎo)航的功能.

網(wǎng)站導(dǎo)航系統(tǒng)就像大廈的地基一樣，體現(xiàn)網(wǎng)站的基礎(chǔ)和架構(gòu)，是用戶瀏覽網(wǎng)頁時重要的引導(dǎo)，在網(wǎng)頁設(shè)計中占有舉足輕重的地位.

[1] 譚嵐丹.網(wǎng)站設(shè)計中導(dǎo)航系統(tǒng)的藝術(shù)性[J].大眾文藝,2011(12):80.

[2] 詹晶晶，黃慧琴，劉沛芬.網(wǎng)站導(dǎo)航欄設(shè)計的應(yīng)用心理[J].藝術(shù)與設(shè)計，2010(12)：62-63.

責(zé)任編輯：金 欣

Designing and application of the website navigation system

ZHAO Ai-tao

(Department of Information Technology, Shijiazhuang Vocational Technology Institute, Shijiazhuang, Hebei 050081, China)

This paper expounds the importance of navigation system in website.Site navigation system designing should be man-centered, easy to operate, substantial and characteristic.The designing methods include global, local, text, bread crumbs and search engine navigations.

navigation system; website; design

2015-03-26

趙愛濤(1975-)，女，河北石家莊人，石家莊職業(yè)技術(shù)學(xué)院講師.

1009-4873(2015)04-0037-03

TP393.092

A