推薦閱讀

運營熊

旅游網(wǎng)站如何設(shè)計優(yōu)秀的網(wǎng)站導航

時間：2017-09-12 | 分類：網(wǎng)站運營

瀏覽：16515

?

用戶的瀏覽習慣是從左到右、從上到下，當他們進入一個旅游網(wǎng)站的時候，第一眼看到的就是網(wǎng)站首頁Banner圖和導航欄，它們共同決定著用戶對網(wǎng)站的第一印象，第一印象會一直伴隨接下來使用的整個過程，其重要性不言而喻。

舉個例子，思途的首頁導航欄分別是：首頁、解決方案、產(chǎn)品與服務、思途案例、幫助中心以及經(jīng)驗推廣，用戶就可以直接點擊【產(chǎn)品與服務】找到自己想了解的產(chǎn)品。作為第一次來到思途網(wǎng)站的用戶來說，可以通過【思途案例】了解建站后具體是什么樣子，作為自己建設(shè)旅游網(wǎng)站的參考。

可是對于很多站長來說，網(wǎng)站導航欄一直是設(shè)計中的一個盲區(qū)，他們認為導航欄就是簡單的幾個詞組成，沒有必要花費多余的時間在這上面。事實卻并非如此，因為導航欄直接關(guān)系到用戶體驗度的問題。在這一篇文章里，我就從網(wǎng)站導航欄的各個方面進行分析，對大家在旅游網(wǎng)站優(yōu)化過程中導航欄的設(shè)計提供一些建議，僅供參考。

一、網(wǎng)站導航欄是什么？

網(wǎng)站導航欄是指通過一定的技術(shù)手段，為網(wǎng)頁的訪問者提供途徑，引導他們訪問網(wǎng)站的各個欄目、菜單、在線幫助等，使用戶可以方便快速的訪問自己所需的內(nèi)容。

二、網(wǎng)站導航欄的作用是什么？

導航欄是網(wǎng)站非常重要的組成部分，一款良好的網(wǎng)站導航欄對于用戶體驗度和搜索引擎優(yōu)化都非常有利。

1. 用戶體驗度：導航欄相當于是網(wǎng)站的眼睛或地圖，可以方便用戶查看或者尋找自己所需要的信息，并能快速跳轉(zhuǎn)到相應頁面。就像圖書館里的書會分門別類的擺放，它們有著各自的標簽，以方便讀者尋找，導航欄就起著這樣的作用。另外，導航欄也能使網(wǎng)站內(nèi)容看起來更加豐富，方便優(yōu)化。

2. 搜索引擎優(yōu)化：網(wǎng)站頂部水平導航欄位于優(yōu)化網(wǎng)站中F區(qū)最重要的位置，也是搜索引擎蜘蛛檢索時看重、權(quán)重較高的一個位置，同時還布局了各個其他單頁面的導入鏈接，是設(shè)置整個網(wǎng)站回流的最核心部分。

三、網(wǎng)站導航欄包含哪些元素

在大部分的站長認識里，導航欄就是網(wǎng)頁上方的一個導航條，由幾個詞組成。也有人認為，導航欄就是一種方法，引導用戶去尋找網(wǎng)站上最重要的信息。在設(shè)計導航欄之前，我們要先了解導航欄到底包含了哪些元素，以此才能確定自己的旅游網(wǎng)站要展示哪些內(nèi)容。一般來說，網(wǎng)站導航欄由以下幾個元素組成：

1. 網(wǎng)站logo

網(wǎng)站logo是網(wǎng)站的一部分，也是網(wǎng)站的品牌標志，具有唯一性。一個好的logo往往可以反映旅游網(wǎng)站的業(yè)務類型或者內(nèi)容。網(wǎng)站logo的設(shè)計一定要簡單大方，讓用戶一眼就能看懂。

如下圖所示是使用思途CMS的絲路直通車網(wǎng)，它的網(wǎng)站logo除了有“絲路直通車”和官網(wǎng)網(wǎng)址外，還添加了帶有絲綢之路的特色標志駱駝，符合網(wǎng)站定位，用戶一眼就能看懂。

2. 網(wǎng)站欄目

一個旅游網(wǎng)站，不可能把所有的業(yè)務都呈現(xiàn)在一個頁面上，為了便于用戶瀏覽，需要對旅游網(wǎng)站的各個模塊進行二次分類，也就是所謂的二級導航。網(wǎng)站的業(yè)務不同，內(nèi)容種類也會不同，旅游網(wǎng)站應該根據(jù)自己的主要業(yè)務來進行分類，一個不涉及出境業(yè)務的網(wǎng)站就不能在導航欄上添加一個出境游模塊。

3. 返回首頁

用戶的瀏覽層級是一層一層加深，如果沒有返回首頁，用戶到達首頁就會顯得特別的繁瑣，浪費很多時間。導航欄里有返回首頁可以節(jié)約用戶時間，防止用戶關(guān)閉網(wǎng)頁停止瀏覽。

4. 附加欄目

網(wǎng)站都會有附加欄目，雖然它們不屬于網(wǎng)站的主要內(nèi)容，但它們也是網(wǎng)站不能缺少的內(nèi)容。比如常見的“24小時客服電話”、“登錄/注冊按鈕”、“聯(lián)系我們”等。這些應該放在網(wǎng)站哪個位置好呢？頂部導航欄空間有限，主要用來呈現(xiàn)旅游網(wǎng)站主要業(yè)務，像線路、酒店、簽證等等，如果都放在頂部導航欄，則顯得主次不分。一般來說，附加欄目放在網(wǎng)站頂部右側(cè)位置，如下圖所示是使用思途CMS的重慶中青旅，它的頂部右側(cè)放了24小時客服電話。

如下圖所示是使用思途CMS的華騰游，它的頂部右側(cè)放了登錄/注冊按鈕。

5. 搜索功能

很多人用慣了百度，到任何一個網(wǎng)站尋找信息，都習慣性的想要去搜索。如果一個旅游網(wǎng)站沒有搜索功能，對用戶訪問網(wǎng)站來說就帶來了障礙。如下圖所示是使用思途CMS的驢程戶外網(wǎng)，頂部導航欄上面就是搜索框，極大的方便了用戶。

上述五種都是網(wǎng)站導航欄中的常見元素，旅游網(wǎng)站在設(shè)計導航欄的時候要根據(jù)自己網(wǎng)站的具體情況進行取舍，畢竟把在這些元素都放上去也不太可能，網(wǎng)站沒有那么多的多余空間，并且太多信息的展現(xiàn)會讓用戶覺得網(wǎng)站凌亂、沒有主次，注意力會分散。

四、網(wǎng)站導航欄分類

其實很多的旅游網(wǎng)站都不只一種導航設(shè)計模式，例如使用思途CMS的順風旅游網(wǎng)，用頂部水平導航欄作為主導航，并使用側(cè)邊導航欄作為輔助，同時還有面包屑導航，增加頁面的便利度。

旅游網(wǎng)站應該根據(jù)自己網(wǎng)站的業(yè)務多少、整體設(shè)計綜合考慮，到底使用什么模式的導航欄。以下是幾種常見的導航欄模式：

1. 頂部水平欄導航

頂部水平欄導航也被稱為主導航，是當前最流行的旅游網(wǎng)站導航菜單設(shè)計模式，一般位于網(wǎng)頁頁眉頂部，能夠第一時間引導用戶指向他所需要的信息欄目。長久以來，網(wǎng)頁自上向下滑動培養(yǎng)了人們的閱讀習慣，導航欄放在頂部可以讓用戶感知到位置，哪怕瀏覽到未知的位置，只要滑動條拖到最上面就可以選擇導航。同時頂部導航，占用空間小，突出核心功能，便于用戶識別和操作。很多時候，頂部水平欄導航設(shè)計模式伴隨著下拉菜單，當鼠標移到某個項上時彈出它下面的二級子導航項。 

如下圖所示是使用思途CMS的品味中國戶外旅游網(wǎng)，把鼠標放到“國際線路”上時下方自動出現(xiàn)二級子導航項。

2. 豎直/側(cè)邊欄導航

豎直/側(cè)邊欄導航也被稱為次導航，一般位于旅游網(wǎng)站的左側(cè)。當用戶需要瀏覽網(wǎng)頁時，想去別的欄目看看，可以通過次導航進入其他欄目。側(cè)邊欄導航設(shè)計模式在旅游網(wǎng)站中也隨處可見，因為它可以適應數(shù)量很多的鏈接。對于業(yè)務種類繁多，像有國內(nèi)游、出境游、郵輪、簽證等的旅游網(wǎng)站，主導航欄不能全部列出，這時候就需要側(cè)邊導航欄作為補充，讓用戶更容易到達自己感興趣的頁面。

側(cè)邊導航欄適用于網(wǎng)站業(yè)務和產(chǎn)品較多的旅游網(wǎng)站，如下圖所示的重慶中青旅：

3. 面包屑導航

面包屑的名字來源于Hansel和Gretel的故事，他們在沿途播撒面包屑以用來找到加家的路，就像這個故事一樣，在互聯(lián)網(wǎng)中，面包屑為用戶提供一種追蹤返回最初訪問頁面的方式，可以幫助用戶了解到當前自己在整站中所處的位置。面包屑對于多級別具有層次結(jié)構(gòu)的網(wǎng)站特別有用。如果訪客希望返回到某一級，它們只需要點擊相應的面包屑導航項，從而降低網(wǎng)站的總體跳出率，如下圖所示：

4. 網(wǎng)站地圖

網(wǎng)站地圖也算是導航的一個分類，主要是給搜索引擎指引道路。網(wǎng)站地圖又稱站點地圖，它就是一個頁面，上面放置了網(wǎng)站上需要搜索引擎抓取的所有頁面的鏈接（注：不是所有頁面），方便搜索引擎蜘蛛抓取網(wǎng)站頁面，通過抓取網(wǎng)站頁面，清晰了解網(wǎng)站的架構(gòu)。

五、網(wǎng)站導航欄設(shè)計原則

網(wǎng)站的導航欄是用戶查看了網(wǎng)站首頁后想要進一步了解網(wǎng)站其他部分時最重要的指示，對留住用戶至關(guān)重要。設(shè)計網(wǎng)站導航欄就相當于為一棟大樓打基礎(chǔ)，如果地基都不牢靠，再美、再壯觀的大樓也沒有什么作用，因為存在著潛在的危險。如果站長想要擁有優(yōu)秀的用戶體驗，良好的產(chǎn)品轉(zhuǎn)化率，站長就必須要真正了解用戶的需求，從用戶角度出發(fā)去設(shè)計導航欄，真正做到方便用戶。設(shè)計一款優(yōu)秀的網(wǎng)站導航欄沒有想象中的那么困難，這里有幾個在設(shè)計過程中要注意的關(guān)鍵點。

1. 一眼看到

網(wǎng)站導航欄必須要讓用戶一進網(wǎng)站就能看到，這就意味著導航上的文字不要和Banner圖或者背景圖使用相同或者相近的顏色，以免造成用戶尋找困難。導航區(qū)域也不能太小，要讓用戶容易看到。還有導航欄的位置要符合用戶使用習慣，放在頂部或者左側(cè)位置。

2. 簡潔大方

很多的網(wǎng)站喜歡在導航欄上添加很多繁雜的裝飾，其實依我來看，這樣完全沒有必要，因為導航欄的目的只有一個——方便用戶到達所需頁面。這也就說明網(wǎng)站導航欄的設(shè)計一定要簡約，易于操作，能夠幫助用戶快速查看欄目內(nèi)容。文字也盡可能的簡單易懂，不要讓用戶花時間思考這里的文本是什么意思。

3. 可點擊

網(wǎng)站一定要保證導航欄上所有的文字都可以點擊，就算是有下拉菜單，點擊子類別鏈接也要能夠點擊跳轉(zhuǎn)到相應頁面。很多網(wǎng)站都沒有注意細節(jié)，常常是下拉菜單中的鏈接點擊了卻無法跳轉(zhuǎn)，用戶體驗度很糟糕。

4. 保持簡潔

網(wǎng)站導航不應該有太多的模塊，可以在下拉菜單中添加更多的分類，避免分散用戶的注意力或者使網(wǎng)站看起來繁雜，復雜而擁擠的導航欄設(shè)計會嚴重阻礙網(wǎng)站的整體可用性。一般來說，主導航模塊不要超過8項。

5. 排序

通常我們會發(fā)現(xiàn)越重要的內(nèi)容越是出現(xiàn)在靠前的位置。用戶的瀏覽習慣是從左到右，因此站長應該把最重要的模塊放在前面。并且網(wǎng)站所有的導航欄應該盡量保持一致的風格，這樣能留給用戶網(wǎng)站專業(yè)的形象。

如果站長做好了網(wǎng)站導航欄的優(yōu)化工作，首先能夠讓網(wǎng)站層次更加清晰，方便用戶操作，清晰知道自己在網(wǎng)站中的位置，提升其在網(wǎng)站內(nèi)的操作次數(shù)，降低網(wǎng)站跳出率。另外還能利用導航欄的錨文本鏈接增加網(wǎng)站的核心關(guān)鍵詞權(quán)重和長尾關(guān)鍵詞的權(quán)重，有利于頁面的收錄和抓取，整個網(wǎng)站的排名也會上升很多。希望大家能從以上獲得一些啟發(fā)，從而設(shè)計出一款符合自己網(wǎng)站并且獨具魅力的網(wǎng)站導航欄。