?
用戶(hù)的瀏覽習(xí)慣是從左到右、從上到下，當(dāng)他們進(jìn)入一個(gè)旅游網(wǎng)站的時(shí)候，第一眼看到的就是網(wǎng)站首頁(yè)Banner圖和導(dǎo)航欄，它們共同決定著用戶(hù)對(duì)網(wǎng)站的第一印象，第一印象會(huì)一直伴隨接下來(lái)使用的整個(gè)過(guò)程，其重要性不言而喻。
舉個(gè)例子，思途的首頁(yè)導(dǎo)航欄分別是：首頁(yè)、解決方案、產(chǎn)品與服務(wù)、思途案例、幫助中心以及經(jīng)驗(yàn)推廣，用戶(hù)就可以直接點(diǎn)擊【產(chǎn)品與服務(wù)】找到自己想了解的產(chǎn)品。作為第一次來(lái)到思途網(wǎng)站的用戶(hù)來(lái)說(shuō)，可以通過(guò)【思途案例】了解建站后具體是什么樣子，作為自己建設(shè)旅游網(wǎng)站的參考。
可是對(duì)于很多站長(zhǎng)來(lái)說(shuō)，網(wǎng)站導(dǎo)航欄一直是設(shè)計(jì)中的一個(gè)盲區(qū)，他們認(rèn)為導(dǎo)航欄就是簡(jiǎn)單的幾個(gè)詞組成，沒(méi)有必要花費(fèi)多余的時(shí)間在這上面。事實(shí)卻并非如此，因?yàn)閷?dǎo)航欄直接關(guān)系到用戶(hù)體驗(yàn)度的問(wèn)題。在這一篇文章里，我就從網(wǎng)站導(dǎo)航欄的各個(gè)方面進(jìn)行分析，對(duì)大家在旅游網(wǎng)站優(yōu)化過(guò)程中導(dǎo)航欄的設(shè)計(jì)提供一些建議，僅供參考。
一、網(wǎng)站導(dǎo)航欄是什么？
網(wǎng)站導(dǎo)航欄是指通過(guò)一定的技術(shù)手段，為網(wǎng)頁(yè)的訪問(wèn)者提供途徑，引導(dǎo)他們?cè)L問(wèn)網(wǎng)站的各個(gè)欄目、菜單、在線幫助等，使用戶(hù)可以方便快速的訪問(wèn)自己所需的內(nèi)容。
二、網(wǎng)站導(dǎo)航欄的作用是什么？
導(dǎo)航欄是網(wǎng)站非常重要的組成部分，一款良好的網(wǎng)站導(dǎo)航欄對(duì)于用戶(hù)體驗(yàn)度和搜索引擎優(yōu)化都非常有利。
1. 用戶(hù)體驗(yàn)度：導(dǎo)航欄相當(dāng)于是網(wǎng)站的眼睛或地圖，可以方便用戶(hù)查看或者尋找自己所需要的信息，并能快速跳轉(zhuǎn)到相應(yīng)頁(yè)面。就像圖書(shū)館里的書(shū)會(huì)分門(mén)別類(lèi)的擺放，它們有著各自的標(biāo)簽，以方便讀者尋找，導(dǎo)航欄就起著這樣的作用。另外，導(dǎo)航欄也能使網(wǎng)站內(nèi)容看起來(lái)更加豐富，方便優(yōu)化。
2. 搜索引擎優(yōu)化：網(wǎng)站頂部水平導(dǎo)航欄位于優(yōu)化網(wǎng)站中F區(qū)最重要的位置，也是搜索引擎蜘蛛檢索時(shí)看重、權(quán)重較高的一個(gè)位置，同時(shí)還布局了各個(gè)其他單頁(yè)面的導(dǎo)入鏈接，是設(shè)置整個(gè)網(wǎng)站回流的最核心部分。
三、網(wǎng)站導(dǎo)航欄包含哪些元素
在大部分的站長(zhǎng)認(rèn)識(shí)里，導(dǎo)航欄就是網(wǎng)頁(yè)上方的一個(gè)導(dǎo)航條，由幾個(gè)詞組成。也有人認(rèn)為，導(dǎo)航欄就是一種方法，引導(dǎo)用戶(hù)去尋找網(wǎng)站上最重要的信息。在設(shè)計(jì)導(dǎo)航欄之前，我們要先了解導(dǎo)航欄到底包含了哪些元素，以此才能確定自己的旅游網(wǎng)站要展示哪些內(nèi)容。一般來(lái)說(shuō)，網(wǎng)站導(dǎo)航欄由以下幾個(gè)元素組成：
1. 網(wǎng)站logo
網(wǎng)站logo是網(wǎng)站的一部分，也是網(wǎng)站的品牌標(biāo)志，具有唯一性。一個(gè)好的logo往往可以反映旅游網(wǎng)站的業(yè)務(wù)類(lèi)型或者內(nèi)容。網(wǎng)站logo的設(shè)計(jì)一定要簡(jiǎn)單大方，讓用戶(hù)一眼就能看懂。
如下圖所示是使用思途CMS的絲路直通車(chē)網(wǎng)，它的網(wǎng)站logo除了有“絲路直通車(chē)”和官網(wǎng)網(wǎng)址外，還添加了帶有絲綢之路的特色標(biāo)志駱駝，符合網(wǎng)站定位，用戶(hù)一眼就能看懂。
2. 網(wǎng)站欄目
一個(gè)旅游網(wǎng)站，不可能把所有的業(yè)務(wù)都呈現(xiàn)在一個(gè)頁(yè)面上，為了便于用戶(hù)瀏覽，需要對(duì)旅游網(wǎng)站的各個(gè)模塊進(jìn)行二次分類(lèi)，也就是所謂的二級(jí)導(dǎo)航。網(wǎng)站的業(yè)務(wù)不同，內(nèi)容種類(lèi)也會(huì)不同，旅游網(wǎng)站應(yīng)該根據(jù)自己的主要業(yè)務(wù)來(lái)進(jìn)行分類(lèi)，一個(gè)不涉及出境業(yè)務(wù)的網(wǎng)站就不能在導(dǎo)航欄上添加一個(gè)出境游模塊。
3. 返回首頁(yè)
用戶(hù)的瀏覽層級(jí)是一層一層加深，如果沒(méi)有返回首頁(yè)，用戶(hù)到達(dá)首頁(yè)就會(huì)顯得特別的繁瑣，浪費(fèi)很多時(shí)間。導(dǎo)航欄里有返回首頁(yè)可以節(jié)約用戶(hù)時(shí)間，防止用戶(hù)關(guān)閉網(wǎng)頁(yè)停止瀏覽。
4. 附加欄目
網(wǎng)站都會(huì)有附加欄目，雖然它們不屬于網(wǎng)站的主要內(nèi)容，但它們也是網(wǎng)站不能缺少的內(nèi)容。比如常見(jiàn)的“24小時(shí)客服電話(huà)”、“登錄/注冊(cè)按鈕”、“聯(lián)系我們”等。這些應(yīng)該放在網(wǎng)站哪個(gè)位置好呢？頂部導(dǎo)航欄空間有限，主要用來(lái)呈現(xiàn)旅游網(wǎng)站主要業(yè)務(wù)，像線路、酒店、簽證等等，如果都放在頂部導(dǎo)航欄，則顯得主次不分。一般來(lái)說(shuō)，附加欄目放在網(wǎng)站頂部右側(cè)位置，如下圖所示是使用思途CMS的重慶中青旅，它的頂部右側(cè)放了24小時(shí)客服電話(huà)。
如下圖所示是使用思途CMS的華騰游，它的頂部右側(cè)放了登錄/注冊(cè)按鈕。
5. 搜索功能
很多人用慣了百度，到任何一個(gè)網(wǎng)站尋找信息，都習(xí)慣性的想要去搜索。如果一個(gè)旅游網(wǎng)站沒(méi)有搜索功能，對(duì)用戶(hù)訪問(wèn)網(wǎng)站來(lái)說(shuō)就帶來(lái)了障礙。如下圖所示是使用思途CMS的驢程戶(hù)外網(wǎng)，頂部導(dǎo)航欄上面就是搜索框，極大的方便了用戶(hù)。
上述五種都是網(wǎng)站導(dǎo)航欄中的常見(jiàn)元素，旅游網(wǎng)站在設(shè)計(jì)導(dǎo)航欄的時(shí)候要根據(jù)自己網(wǎng)站的具體情況進(jìn)行取舍，畢竟把在這些元素都放上去也不太可能，網(wǎng)站沒(méi)有那么多的多余空間，并且太多信息的展現(xiàn)會(huì)讓用戶(hù)覺(jué)得網(wǎng)站凌亂、沒(méi)有主次，注意力會(huì)分散。
四、網(wǎng)站導(dǎo)航欄分類(lèi)
其實(shí)很多的旅游網(wǎng)站都不只一種導(dǎo)航設(shè)計(jì)模式，例如使用思途CMS的順風(fēng)旅游網(wǎng)，用頂部水平導(dǎo)航欄作為主導(dǎo)航，并使用側(cè)邊導(dǎo)航欄作為輔助，同時(shí)還有面包屑導(dǎo)航，增加頁(yè)面的便利度。
旅游網(wǎng)站應(yīng)該根據(jù)自己網(wǎng)站的業(yè)務(wù)多少、整體設(shè)計(jì)綜合考慮，到底使用什么模式的導(dǎo)航欄。以下是幾種常見(jiàn)的導(dǎo)航欄模式：
1. 頂部水平欄導(dǎo)航
頂部水平欄導(dǎo)航也被稱(chēng)為主導(dǎo)航，是當(dāng)前最流行的旅游網(wǎng)站導(dǎo)航菜單設(shè)計(jì)模式，一般位于網(wǎng)頁(yè)頁(yè)眉頂部，能夠第一時(shí)間引導(dǎo)用戶(hù)指向他所需要的信息欄目。長(zhǎng)久以來(lái)，網(wǎng)頁(yè)自上向下滑動(dòng)培養(yǎng)了人們的閱讀習(xí)慣，導(dǎo)航欄放在頂部可以讓用戶(hù)感知到位置，哪怕瀏覽到未知的位置，只要滑動(dòng)條拖到最上面就可以選擇導(dǎo)航。同時(shí)頂部導(dǎo)航，占用空間小，突出核心功能，便于用戶(hù)識(shí)別和操作。很多時(shí)候，頂部水平欄導(dǎo)航設(shè)計(jì)模式伴隨著下拉菜單，當(dāng)鼠標(biāo)移到某個(gè)項(xiàng)上時(shí)彈出它下面的二級(jí)子導(dǎo)航項(xiàng)。
如下圖所示是使用思途CMS的品味中國(guó)戶(hù)外旅游網(wǎng)，把鼠標(biāo)放到“國(guó)際線路”上時(shí)下方自動(dòng)出現(xiàn)二級(jí)子導(dǎo)航項(xiàng)。
2. 豎直/側(cè)邊欄導(dǎo)航
豎直/側(cè)邊欄導(dǎo)航也被稱(chēng)為次導(dǎo)航，一般位于旅游網(wǎng)站的左側(cè)。當(dāng)用戶(hù)需要瀏覽網(wǎng)頁(yè)時(shí)，想去別的欄目看看，可以通過(guò)次導(dǎo)航進(jìn)入其他欄目。側(cè)邊欄導(dǎo)航設(shè)計(jì)模式在旅游網(wǎng)站中也隨處可見(jiàn)，因?yàn)樗梢赃m應(yīng)數(shù)量很多的鏈接。對(duì)于業(yè)務(wù)種類(lèi)繁多，像有國(guó)內(nèi)游、出境游、郵輪、簽證等的旅游網(wǎng)站，主導(dǎo)航欄不能全部列出，這時(shí)候就需要側(cè)邊導(dǎo)航欄作為補(bǔ)充，讓用戶(hù)更容易到達(dá)自己感興趣的頁(yè)面。
側(cè)邊導(dǎo)航欄適用于網(wǎng)站業(yè)務(wù)和產(chǎn)品較多的旅游網(wǎng)站，如下圖所示的重慶中青旅：
3. 面包屑導(dǎo)航
面包屑的名字來(lái)源于Hansel和Gretel的故事，他們?cè)谘赝静ト雒姘家杂脕?lái)找到加家的路，就像這個(gè)故事一樣，在互聯(lián)網(wǎng)中，面包屑為用戶(hù)提供一種追蹤返回最初訪問(wèn)頁(yè)面的方式，可以幫助用戶(hù)了解到當(dāng)前自己在整站中所處的位置。面包屑對(duì)于多級(jí)別具有層次結(jié)構(gòu)的網(wǎng)站特別有用。如果訪客希望返回到某一級(jí)，它們只需要點(diǎn)擊相應(yīng)的面包屑導(dǎo)航項(xiàng)，從而降低網(wǎng)站的總體跳出率，如下圖所示：
4. 網(wǎng)站地圖
網(wǎng)站地圖也算是導(dǎo)航的一個(gè)分類(lèi)，主要是給搜索引擎指引道路。網(wǎng)站地圖又稱(chēng)站點(diǎn)地圖，它就是一個(gè)頁(yè)面，上面放置了網(wǎng)站上需要搜索引擎抓取的所有頁(yè)面的鏈接（注：不是所有頁(yè)面），方便搜索引擎蜘蛛抓取網(wǎng)站頁(yè)面，通過(guò)抓取網(wǎng)站頁(yè)面，清晰了解網(wǎng)站的架構(gòu)。
五、網(wǎng)站導(dǎo)航欄設(shè)計(jì)原則
網(wǎng)站的導(dǎo)航欄是用戶(hù)查看了網(wǎng)站首頁(yè)后想要進(jìn)一步了解網(wǎng)站其他部分時(shí)最重要的指示，對(duì)留住用戶(hù)至關(guān)重要。設(shè)計(jì)網(wǎng)站導(dǎo)航欄就相當(dāng)于為一棟大樓打基礎(chǔ)，如果地基都不牢靠，再美、再壯觀的大樓也沒(méi)有什么作用，因?yàn)榇嬖谥鴿撛诘奈ｋU(xiǎn)。如果站長(zhǎng)想要擁有優(yōu)秀的用戶(hù)體驗(yàn)，良好的產(chǎn)品轉(zhuǎn)化率，站長(zhǎng)就必須要真正了解用戶(hù)的需求，從用戶(hù)角度出發(fā)去設(shè)計(jì)導(dǎo)航欄，真正做到方便用戶(hù)。設(shè)計(jì)一款優(yōu)秀的網(wǎng)站導(dǎo)航欄沒(méi)有想象中的那么困難，這里有幾個(gè)在設(shè)計(jì)過(guò)程中要注意的關(guān)鍵點(diǎn)。
1. 一眼看到
網(wǎng)站導(dǎo)航欄必須要讓用戶(hù)一進(jìn)網(wǎng)站就能看到，這就意味著導(dǎo)航上的文字不要和Banner圖或者背景圖使用相同或者相近的顏色，以免造成用戶(hù)尋找困難。導(dǎo)航區(qū)域也不能太小，要讓用戶(hù)容易看到。還有導(dǎo)航欄的位置要符合用戶(hù)使用習(xí)慣，放在頂部或者左側(cè)位置。
2. 簡(jiǎn)潔大方
很多的網(wǎng)站喜歡在導(dǎo)航欄上添加很多繁雜的裝飾，其實(shí)依我來(lái)看，這樣完全沒(méi)有必要，因?yàn)閷?dǎo)航欄的目的只有一個(gè)——方便用戶(hù)到達(dá)所需頁(yè)面。這也就說(shuō)明網(wǎng)站導(dǎo)航欄的設(shè)計(jì)一定要簡(jiǎn)約，易于操作，能夠幫助用戶(hù)快速查看欄目?jī)?nèi)容。文字也盡可能的簡(jiǎn)單易懂，不要讓用戶(hù)花時(shí)間思考這里的文本是什么意思。
3. 可點(diǎn)擊
網(wǎng)站一定要保證導(dǎo)航欄上所有的文字都可以點(diǎn)擊，就算是有下拉菜單，點(diǎn)擊子類(lèi)別鏈接也要能夠點(diǎn)擊跳轉(zhuǎn)到相應(yīng)頁(yè)面。很多網(wǎng)站都沒(méi)有注意細(xì)節(jié)，常常是下拉菜單中的鏈接點(diǎn)擊了卻無(wú)法跳轉(zhuǎn)，用戶(hù)體驗(yàn)度很糟糕。
4. 保持簡(jiǎn)潔
網(wǎng)站導(dǎo)航不應(yīng)該有太多的模塊，可以在下拉菜單中添加更多的分類(lèi)，避免分散用戶(hù)的注意力或者使網(wǎng)站看起來(lái)繁雜，復(fù)雜而擁擠的導(dǎo)航欄設(shè)計(jì)會(huì)嚴(yán)重阻礙網(wǎng)站的整體可用性。一般來(lái)說(shuō)，主導(dǎo)航模塊不要超過(guò)8項(xiàng)。
5. 排序
通常我們會(huì)發(fā)現(xiàn)越重要的內(nèi)容越是出現(xiàn)在靠前的位置。用戶(hù)的瀏覽習(xí)慣是從左到右，因此站長(zhǎng)應(yīng)該把最重要的模塊放在前面。并且網(wǎng)站所有的導(dǎo)航欄應(yīng)該盡量保持一致的風(fēng)格，這樣能留給用戶(hù)網(wǎng)站專(zhuān)業(yè)的形象。
如果站長(zhǎng)做好了網(wǎng)站導(dǎo)航欄的優(yōu)化工作，首先能夠讓網(wǎng)站層次更加清晰，方便用戶(hù)操作，清晰知道自己在網(wǎng)站中的位置，提升其在網(wǎng)站內(nèi)的操作次數(shù)，降低網(wǎng)站跳出率。另外還能利用導(dǎo)航欄的錨文本鏈接增加網(wǎng)站的核心關(guān)鍵詞權(quán)重和長(zhǎng)尾關(guān)鍵詞的權(quán)重，有利于頁(yè)面的收錄和抓取，整個(gè)網(wǎng)站的排名也會(huì)上升很多。希望大家能從以上獲得一些啟發(fā)，從而設(shè)計(jì)出一款符合自己網(wǎng)站并且獨(dú)具魅力的網(wǎng)站導(dǎo)航欄。
小米
參與評(píng)論