?
用戶的瀏覽習慣是從左到右、從上到下，當他們進入一個旅游網站的時候，第一眼看到的就是網站首頁Banner圖和導航欄(lan)，它(ta)們(men)共同決定著(zhu)用(yong)戶對網站的第(di)一印象(xiang)，第(di)一印象(xiang)會(hui)一直伴隨接下來使用(yong)的整(zheng)個過程，其重要性(xing)不(bu)言(yan)而(er)喻。
舉個例子，思途的首頁導(dao)航(hang)欄分別是：首頁、解(jie)決方案(an)、產品(pin)(pin)與服(fu)(fu)務(wu)、思途(tu)(tu)案(an)例、幫助中心以及經驗(yan)推廣，用戶就可(ke)以直接點擊【產品(pin)(pin)與服(fu)(fu)務(wu)】找到自己想了解(jie)的產品(pin)(pin)。作為(wei)第一次來到思途(tu)(tu)網站的用戶來說，可(ke)以通過【思途(tu)(tu)案(an)例】了解(jie)建站后具(ju)體是什么樣子，作為(wei)自己建設旅游網站的參考。
可是對于很多站長來說，網站導航欄一直是設計中的一個盲區，他們認為導航欄就是簡單的幾個詞組成，沒有必要花費多余的時間在這上面。事實卻并非如此，因為導航欄直接關系到用戶體驗度的問題。在這一篇文章里，我就從網站導航欄的各個方面進行分析，對大家在旅游網站優化過程中導航欄的設計提供一(yi)些建議，僅供參考(kao)。
一、網站導航欄是什么？
網站導航欄(lan)是指通過一定的(de)技術手段，為網頁的(de)訪(fang)問(wen)者提供(gong)途(tu)徑，引(yin)導他們訪(fang)問(wen)網站的(de)各個欄(lan)目、菜(cai)單(dan)、在線幫(bang)助等，使用戶可以方便(bian)快(kuai)速的(de)訪(fang)問(wen)自己所需的(de)內(nei)容。
二、網站導航欄的作用是什么？
導航欄是(shi)網站非常(chang)重要的(de)組成部分，一款良好的(de)網站導航欄對于用戶體驗度和搜索引擎優化都非常(chang)有(you)利(li)。
1. 用戶(hu)體驗度：導航(hang)欄相當于是網站的(de)(de)(de)眼睛或地(di)圖，可以方(fang)(fang)便(bian)用戶(hu)查看(kan)或者(zhe)尋找(zhao)自(zi)(zi)己所需要的(de)(de)(de)信息，并(bing)能(neng)快速跳轉到相應頁面。就像(xiang)圖書館里(li)的(de)(de)(de)書會分(fen)門(men)別(bie)類的(de)(de)(de)擺(bai)放，它們有著(zhu)各(ge)自(zi)(zi)的(de)(de)(de)標簽，以方(fang)(fang)便(bian)讀者(zhe)尋找(zhao)，導航(hang)欄就起(qi)著(zhu)這(zhe)樣的(de)(de)(de)作用。另外，導航(hang)欄也能(neng)使(shi)網站內容(rong)看(kan)起(qi)來更加豐(feng)富，方(fang)(fang)便(bian)優化(hua)。
2. 搜索(suo)引擎優化：網站(zhan)頂部(bu)水平導航欄位(wei)于優化網站(zhan)中F區最重要的位(wei)置(zhi)(zhi)，也是搜索(suo)引擎蜘蛛檢索(suo)時看重、權(quan)重較高的一個位(wei)置(zhi)(zhi)，同時還布局了(le)各個其他單頁面的導入鏈接(jie)，是設置(zhi)(zhi)整個網站(zhan)回流的最核心(xin)部(bu)分(fen)。
三、網站導航欄包含哪些元素
在(zai)大部分的站長認識里，導(dao)(dao)航(hang)(hang)欄就是(shi)網(wang)(wang)頁上方的一(yi)個導(dao)(dao)航(hang)(hang)條，由幾(ji)個詞組(zu)成。也有人(ren)認為，導(dao)(dao)航(hang)(hang)欄就是(shi)一(yi)種(zhong)方法，引導(dao)(dao)用戶去尋找網(wang)(wang)站上最重要的信息。在(zai)設計導(dao)(dao)航(hang)(hang)欄之(zhi)前，我們要先(xian)了解導(dao)(dao)航(hang)(hang)欄到(dao)底包含了哪些元素，以(yi)此(ci)才(cai)能確(que)定(ding)自己的旅游網(wang)(wang)站要展示哪些內容(rong)。一(yi)般來說，網(wang)(wang)站導(dao)(dao)航(hang)(hang)欄由以(yi)下幾(ji)個元素組(zu)成：
1. 網站logo
網站(zhan)(zhan)logo是網站(zhan)(zhan)的(de)(de)一(yi)部分，也是網站(zhan)(zhan)的(de)(de)品(pin)牌標志，具(ju)有唯一(yi)性。一(yi)個好的(de)(de)logo往(wang)往(wang)可以反映(ying)旅游網站(zhan)(zhan)的(de)(de)業務(wu)類型(xing)或者(zhe)內容。網站(zhan)(zhan)logo的(de)(de)設計一(yi)定要簡單大方，讓(rang)用戶一(yi)眼就(jiu)能看懂。
如下圖所示是使用思途CMS的(de)絲路直(zhi)通(tong)(tong)車網(wang)(wang)(wang)，它的(de)網(wang)(wang)(wang)站logo除了有“絲路直(zhi)通(tong)(tong)車”和官網(wang)(wang)(wang)網(wang)(wang)(wang)址外(wai)，還添加了帶有絲綢之路的(de)特色標志(zhi)駱駝(tuo)，符合(he)網(wang)(wang)(wang)站定(ding)位，用戶一眼就能看懂。
2. 網站欄目
一(yi)(yi)個旅游網站(zhan)，不(bu)可能把所(suo)有(you)的(de)業(ye)務(wu)都呈現在一(yi)(yi)個頁(ye)面上，為(wei)了便于用戶(hu)瀏(liu)覽，需要(yao)對旅游網站(zhan)的(de)各個模(mo)塊(kuai)進(jin)行(xing)二次(ci)分(fen)類，也就是所(suo)謂的(de)二級導航(hang)。網站(zhan)的(de)業(ye)務(wu)不(bu)同(tong)，內(nei)容種類也會不(bu)同(tong)，旅游網站(zhan)應該根據自己的(de)主要(yao)業(ye)務(wu)來進(jin)行(xing)分(fen)類，一(yi)(yi)個不(bu)涉及(ji)出(chu)(chu)境業(ye)務(wu)的(de)網站(zhan)就不(bu)能在導航(hang)欄上添加一(yi)(yi)個出(chu)(chu)境游模(mo)塊(kuai)。
3. 返回首頁
用戶的瀏(liu)覽層(ceng)級(ji)是一層(ceng)一層(ceng)加深(shen)，如果沒有返回(hui)首頁(ye)(ye)，用戶到達首頁(ye)(ye)就(jiu)會顯(xian)得特別的繁瑣，浪費很多時(shi)間。導航欄里有返回(hui)首頁(ye)(ye)可(ke)以(yi)節約用戶時(shi)間，防(fang)止用戶關閉網頁(ye)(ye)停止瀏(liu)覽。
4. 附加欄目
網(wang)站(zhan)(zhan)都會(hui)有(you)附加欄(lan)目，雖(sui)然(ran)它們不(bu)屬(shu)于網(wang)站(zhan)(zhan)的(de)主(zhu)要內(nei)容，但它們也(ye)是網(wang)站(zhan)(zhan)不(bu)能(neng)缺少的(de)內(nei)容。比如常見(jian)的(de)“24小時客服(fu)(fu)電話”、“登錄/注冊(ce)按鈕”、“聯系我們”等。這些應該放(fang)(fang)(fang)在(zai)網(wang)站(zhan)(zhan)哪個位置(zhi)好(hao)呢？頂部(bu)(bu)導航欄(lan)空(kong)間(jian)有(you)限(xian)，主(zhu)要用來呈(cheng)現(xian)旅游(you)網(wang)站(zhan)(zhan)主(zhu)要業務，像線路、酒店、簽證等等，如果都放(fang)(fang)(fang)在(zai)頂部(bu)(bu)導航欄(lan)，則顯得主(zhu)次不(bu)分。一般來說，附加欄(lan)目放(fang)(fang)(fang)在(zai)網(wang)站(zhan)(zhan)頂部(bu)(bu)右側(ce)(ce)位置(zhi)，如下圖所(suo)示是使(shi)用思(si)途CMS的(de)重(zhong)慶中青(qing)旅，它的(de)頂部(bu)(bu)右側(ce)(ce)放(fang)(fang)(fang)了(le)24小時客服(fu)(fu)電話。
如下圖所示是使用思途CMS的(de)華騰游，它的(de)頂(ding)部(bu)右側(ce)放了登錄/注冊按鈕。
5. 搜索功能
很多(duo)人用(yong)慣了百度，到任何一個網(wang)站尋找信息，都習慣性的(de)想要去(qu)搜(sou)(sou)索。如(ru)果一個旅游網(wang)站沒有搜(sou)(sou)索功(gong)能，對用(yong)戶訪問網(wang)站來說就(jiu)帶(dai)來了障礙。如(ru)下圖所示是(shi)使用(yong)思途CMS的(de)驢程戶外網(wang)，頂部(bu)導航欄上面(mian)就(jiu)是(shi)搜(sou)(sou)索框，極大的(de)方便了用(yong)戶。
上述五種都是(shi)網(wang)站導(dao)(dao)航欄中(zhong)的常見(jian)元(yuan)素，旅游(you)網(wang)站在設計導(dao)(dao)航欄的時候要根據自(zi)己網(wang)站的具體情況進行取(qu)舍，畢竟(jing)把在這些元(yuan)素都放上去也不太可能，網(wang)站沒有那么多(duo)的多(duo)余空間(jian)，并且太多(duo)信息的展現會讓用戶覺(jue)得(de)網(wang)站凌亂(luan)、沒有主(zhu)次，注意力會分散。
四、網站導航欄分類
其實很多(duo)的(de)旅游網站都不只一(yi)種(zhong)導(dao)航(hang)設計模(mo)式，例如使用(yong)思途(tu)CMS的(de)順(shun)風旅游網，用(yong)頂部水平導(dao)航(hang)欄作為主(zhu)導(dao)航(hang)，并(bing)使用(yong)側邊導(dao)航(hang)欄作為輔助，同時還有面包屑導(dao)航(hang)，增加頁面的(de)便(bian)利度。
旅游網站應(ying)該根(gen)據自(zi)己網站的業務多少、整體設計綜(zong)合考慮，到底(di)使用什么模(mo)式的導航欄。以下是幾種(zhong)常見的導航欄模(mo)式：
1. 頂部水平欄導航(hang)
頂部(bu)水平(ping)欄導(dao)(dao)航也被(bei)稱為主(zhu)導(dao)(dao)航，是當前最流(liu)行的(de)旅游網站導(dao)(dao)航菜(cai)單設(she)計模(mo)(mo)式，一般位(wei)于網頁頁眉頂部(bu)，能(neng)(neng)夠第一時(shi)間引導(dao)(dao)用戶指(zhi)向(xiang)他所需要(yao)的(de)信息欄目。長(chang)久以來，網頁自上(shang)向(xiang)下滑動培養(yang)了人們(men)的(de)閱讀習慣，導(dao)(dao)航欄放在頂部(bu)可(ke)以讓用戶感知(zhi)到位(wei)置，哪怕瀏覽到未(wei)知(zhi)的(de)位(wei)置，只(zhi)要(yao)滑動條拖到最上(shang)面(mian)就(jiu)可(ke)以選擇(ze)導(dao)(dao)航。同時(shi)頂部(bu)導(dao)(dao)航，占用空間小，突(tu)出核心功(gong)能(neng)(neng)，便于用戶識別和操(cao)作。很多(duo)時(shi)候，頂部(bu)水平(ping)欄導(dao)(dao)航設(she)計模(mo)(mo)式伴隨著下拉菜(cai)單，當鼠標移到某個項(xiang)上(shang)時(shi)彈(dan)出它下面(mian)的(de)二(er)級子(zi)導(dao)(dao)航項(xiang)。
如下圖(tu)所示(shi)是使用思途CMS的(de)品味(wei)中國(guo)戶外旅游(you)網，把(ba)鼠標放到(dao)“國(guo)際線路”上時下方(fang)自動出現二級子導航項。
2. 豎直/側(ce)邊欄導航
豎(shu)直/側邊欄(lan)(lan)導(dao)(dao)航(hang)(hang)也被稱為(wei)次導(dao)(dao)航(hang)(hang)，一般位(wei)于旅(lv)游(you)(you)網(wang)(wang)站(zhan)的(de)左側。當用戶(hu)需(xu)要(yao)(yao)瀏覽(lan)網(wang)(wang)頁時(shi)，想去別的(de)欄(lan)(lan)目看(kan)(kan)看(kan)(kan)，可以通(tong)過次導(dao)(dao)航(hang)(hang)進(jin)入其他(ta)欄(lan)(lan)目。側邊欄(lan)(lan)導(dao)(dao)航(hang)(hang)設計模式在旅(lv)游(you)(you)網(wang)(wang)站(zhan)中也隨處可見，因為(wei)它可以適應數量很多的(de)鏈(lian)接。對于業(ye)務種類(lei)繁多，像(xiang)有國內(nei)游(you)(you)、出境游(you)(you)、郵輪、簽證等的(de)旅(lv)游(you)(you)網(wang)(wang)站(zhan)，主導(dao)(dao)航(hang)(hang)欄(lan)(lan)不能(neng)全部列出，這(zhe)時(shi)候就需(xu)要(yao)(yao)側邊導(dao)(dao)航(hang)(hang)欄(lan)(lan)作(zuo)為(wei)補充，讓用戶(hu)更(geng)容易(yi)到達自己感興趣的(de)頁面。
側(ce)邊導航欄適用于網(wang)(wang)站業(ye)務和產品較(jiao)多的(de)旅游網(wang)(wang)站，如下圖所示的(de)重慶(qing)中青旅：
3. 面包屑導航
面(mian)包(bao)屑(xie)(xie)(xie)的(de)名字來(lai)源于Hansel和Gretel的(de)故事，他們在沿途播撒(sa)面(mian)包(bao)屑(xie)(xie)(xie)以用來(lai)找到加家的(de)路，就像這(zhe)個(ge)故事一樣，在互聯網中(zhong)，面(mian)包(bao)屑(xie)(xie)(xie)為用戶(hu)提(ti)供一種(zhong)追蹤(zong)返(fan)回最(zui)初訪(fang)問頁面(mian)的(de)方(fang)式(shi)，可以幫助(zhu)用戶(hu)了(le)解到當(dang)前自(zi)己在整站中(zhong)所(suo)處的(de)位置。面(mian)包(bao)屑(xie)(xie)(xie)對(dui)于多(duo)級(ji)別具有(you)層次結構(gou)的(de)網站特(te)別有(you)用。如(ru)(ru)果訪(fang)客希望返(fan)回到某(mou)一級(ji)，它們只需要點擊相應的(de)面(mian)包(bao)屑(xie)(xie)(xie)導航項，從而(er)降(jiang)低網站的(de)總體跳出率，如(ru)(ru)下圖所(suo)示：
4. 網站地圖
網(wang)站(zhan)地圖也算是(shi)導(dao)航的(de)一個分類(lei)，主要(yao)是(shi)給搜索(suo)(suo)引(yin)擎指引(yin)道路。網(wang)站(zhan)地圖又稱站(zhan)點(dian)地圖，它(ta)就是(shi)一個頁(ye)面(mian)，上(shang)面(mian)放置了(le)網(wang)站(zhan)上(shang)需要(yao)搜索(suo)(suo)引(yin)擎抓(zhua)取的(de)所(suo)有頁(ye)面(mian)的(de)鏈接（注(zhu)：不(bu)是(shi)所(suo)有頁(ye)面(mian)），方便搜索(suo)(suo)引(yin)擎蜘蛛(zhu)抓(zhua)取網(wang)站(zhan)頁(ye)面(mian)，通過抓(zhua)取網(wang)站(zhan)頁(ye)面(mian)，清晰了(le)解網(wang)站(zhan)的(de)架構。
五、網站導航欄設計原則
網站的導航欄是用戶查看了網站首頁后想要進一步了解網站其他部分時最重要的指示，對留住用戶至關重要。設計網站導航欄就相當于為一棟大樓打基礎，如果地基都不牢靠，再美、再壯觀的大樓也沒有什么作用，因為存在著潛在的危險。如果站長想要擁有優秀的用戶體驗，良好的產品轉化率，站(zhan)長就必須要真正了解用戶的需求(qiu)，從用戶角(jiao)度(du)出發去設計(ji)導(dao)航欄(lan)(lan)，真正做到方便(bian)用戶。設計(ji)一(yi)款優(you)秀的網站(zhan)導(dao)航欄(lan)(lan)沒有想象中(zhong)的那么困難，這里有幾(ji)個在設計(ji)過程中(zhong)要注意的關鍵點。
1. 一眼看到
網站導(dao)航(hang)欄(lan)必須要(yao)(yao)讓用(yong)(yong)戶(hu)(hu)一進網站就(jiu)能看(kan)到，這就(jiu)意味著導(dao)航(hang)上(shang)的(de)文字不要(yao)(yao)和Banner圖(tu)或者(zhe)背景圖(tu)使用(yong)(yong)相同或者(zhe)相近(jin)的(de)顏色(se)，以免造成用(yong)(yong)戶(hu)(hu)尋找困難。導(dao)航(hang)區域也不能太小，要(yao)(yao)讓用(yong)(yong)戶(hu)(hu)容易(yi)看(kan)到。還有導(dao)航(hang)欄(lan)的(de)位(wei)置要(yao)(yao)符合用(yong)(yong)戶(hu)(hu)使用(yong)(yong)習慣，放(fang)在頂部或者(zhe)左側位(wei)置。
2. 簡潔大方
很(hen)多的(de)(de)網(wang)站(zhan)喜(xi)歡在導航(hang)(hang)欄上添加很(hen)多繁雜(za)的(de)(de)裝飾，其實依我來看(kan)，這(zhe)樣完全(quan)沒(mei)有(you)必(bi)要(yao)，因為導航(hang)(hang)欄的(de)(de)目的(de)(de)只有(you)一個——方便(bian)用戶(hu)到達所需頁面。這(zhe)也就說明網(wang)站(zhan)導航(hang)(hang)欄的(de)(de)設計一定要(yao)簡約(yue)，易(yi)于操作，能(neng)夠幫助用戶(hu)快(kuai)速查看(kan)欄目內容。文字也盡可能(neng)的(de)(de)簡單易(yi)懂，不要(yao)讓用戶(hu)花時(shi)間思考這(zhe)里的(de)(de)文本是(shi)什(shen)么意思。
3. 可點擊
網站一定(ding)要保證(zheng)導航欄上所有的(de)文(wen)字(zi)都(dou)可以點(dian)擊，就算是(shi)有下拉(la)菜單，點(dian)擊子(zi)類(lei)別鏈接也要能(neng)夠點(dian)擊跳轉到相應頁面。很多網站都(dou)沒有注意細節，常(chang)常(chang)是(shi)下拉(la)菜單中的(de)鏈接點(dian)擊了卻無法跳轉，用(yong)戶體驗度很糟糕。
4. 保持簡潔
網(wang)站導(dao)航不應該有太多的模塊(kuai)，可(ke)(ke)以在下(xia)拉菜單中添加更(geng)多的分類(lei)，避免分散用戶(hu)的注意力或者使網(wang)站看起來繁雜，復雜而擁擠(ji)的導(dao)航欄(lan)設計(ji)會(hui)嚴(yan)重阻礙(ai)網(wang)站的整體可(ke)(ke)用性(xing)。一般來說，主導(dao)航模塊(kuai)不要超過(guo)8項。
5. 排序
通常我們會發現(xian)越重要(yao)的(de)(de)內容越是出(chu)現(xian)在靠前的(de)(de)位(wei)置。用戶(hu)的(de)(de)瀏覽習慣是從(cong)左到(dao)右，因此站長應該把最重要(yao)的(de)(de)模塊放在前面。并且網(wang)站所有的(de)(de)導航欄(lan)應該盡量保持一致的(de)(de)風(feng)格，這樣能留給(gei)用戶(hu)網(wang)站專業的(de)(de)形象(xiang)。
如果(guo)站(zhan)(zhan)長做好了網(wang)(wang)(wang)站(zhan)(zhan)導航欄的(de)優化(hua)工作，首先能夠讓網(wang)(wang)(wang)站(zhan)(zhan)層次(ci)更(geng)加(jia)清(qing)晰，方便用(yong)戶(hu)操作，清(qing)晰知道自己(ji)在(zai)網(wang)(wang)(wang)站(zhan)(zhan)中的(de)位置，提升其在(zai)網(wang)(wang)(wang)站(zhan)(zhan)內的(de)操作次(ci)數，降低(di)網(wang)(wang)(wang)站(zhan)(zhan)跳出率。另外還能利(li)用(yong)導航欄的(de)錨(mao)文本鏈接增加(jia)網(wang)(wang)(wang)站(zhan)(zhan)的(de)核心關鍵詞權重(zhong)和長尾關鍵詞的(de)權重(zhong)，有利(li)于(yu)頁面的(de)收錄和抓取，整個網(wang)(wang)(wang)站(zhan)(zhan)的(de)排(pai)名(ming)也會上升很多。希望大家能從(cong)以上獲得一些啟(qi)發，從(cong)而設計出一款(kuan)符(fu)合自己(ji)網(wang)(wang)(wang)站(zhan)(zhan)并且獨(du)具魅力的(de)網(wang)(wang)(wang)站(zhan)(zhan)導航欄。
贊
2
有一點幫助
1
沒有幫助
小米
