怎么做好網(wǎng)站導航

新聞 2019-04-20編輯：深圳網(wǎng)站建設閱讀（）標簽： 怎么做好網(wǎng)站導航

怎么做好網(wǎng)站導航？網(wǎng)站建設越來越多，而互聯(lián)網(wǎng)交易已經(jīng)成為目前消費市場一個簡單快捷，而且讓年輕人越來越能接受的一個消費方式，但是網(wǎng)站的建設中導航欄的設計也是非常重要的，優(yōu)秀的導航設計能夠提高網(wǎng)站的易用性，對實現(xiàn)電子商務網(wǎng)站的高效運作具有實際意義。

怎么做好網(wǎng)站導航
 

1.文字導航
 

盡量使用最普通的HTML文字導航，不要使用圖片作為導航鏈接，更不要使用JS生成導航系統(tǒng)，也不要用Flash做導航。CSS也可以設計出很好的視覺效果，如背景、文字顏色變化、下拉菜單。
 

最普通的文字鏈接對搜索引擎來說時阻力最小的爬行通道。導航系統(tǒng)鏈接是整個網(wǎng)站收錄最重要的內(nèi)部鏈接。
 

2.點擊距離及扁平化
 

良好的導航的目標之一是使所有頁面與首頁點擊距離越近越好。權(quán)重普通的網(wǎng)站，內(nèi)頁離首頁不要超過四五次。通常在鏈接結(jié)構(gòu)上使網(wǎng)站盡量扁平化。
 

網(wǎng)站導航系統(tǒng)的安排對減少鏈接層次至關(guān)重要。主導航中出現(xiàn)的頁面將處于僅低于首頁的層次，所以主導航中頁面越多，網(wǎng)站越扁平。但用戶體驗和頁面連接總數(shù)都不允許主導航中有太多鏈接。seo人員需要做好平衡。
 

3.錨文字包含關(guān)鍵詞
 

導航系統(tǒng)通常是分類頁面獲得內(nèi)部鏈接的最主要來源，數(shù)量巨大，其錨文字對頁面相關(guān)性有很大影響，因此分類名稱應盡量使用目標關(guān)鍵詞。當然也不能堆積，分類名稱以2-4字為宜。
 

4.面包屑導航
 

對用戶和搜索引擎來說，是判斷頁面在網(wǎng)站整個結(jié)構(gòu)中的位置的最好方法。正確使用面包屑導航的網(wǎng)站通常都是架構(gòu)清晰的網(wǎng)站，強烈建議使用。
 

5.避免頁腳堆積
 

隨著seo被更多站長認識，近些年有一種在頁腳堆積富含關(guān)鍵字的分類頁面鏈接的傾向。三四年前這種做法還有不錯的效果，但是近來搜索引擎比較反感這種做法，常常造成某種形式的懲罰。
 

網(wǎng)頁導航類型
 

1.全局導航
 

網(wǎng)頁中的導航 每一頁都會顯示全域?qū)Ш较到y(tǒng)
 

2.局部導航
 

局部導航系統(tǒng)和其內(nèi)容 被稱為“子網(wǎng)站”或“網(wǎng)站中的網(wǎng)站”
 

3.全局導航+局部導航
 

很多網(wǎng)站會把全局導航和局部導航 結(jié)合使用 ——巨型菜單
 

4.情景導航
 

有節(jié)制地使情景式導航可以增加靈活性來彌補現(xiàn)有導航系統(tǒng)的不足
 

它提供了了交叉銷售、提升銷售、打造品牌和提供顧客價值的真正機會
 

5.輔助導航
 

不屬于網(wǎng)站的層級結(jié)構(gòu)，但是可以提供查找內(nèi)容和完成任務的輔助方法

網(wǎng)頁導航形式
 

1、頂部導航
 

頂部導航被廣泛應用在各個領(lǐng)域的網(wǎng)站當中，這類導航可以一目了然的讓用戶迅速尋找到所需。頂部導航這樣的設計形式保守但目的性強，可以確保組織結(jié)構(gòu)的可靠和降低用戶尋找的時間成本。但這類導航有個缺點，首頁內(nèi)容過多需要滾屏的時候，用戶需要滾動到頂部再去切換導航內(nèi)容。所以現(xiàn)在很多頂部設計的導航會做一個效果，將導航固定在頂部導航，這樣減少了用戶的使用成本。
 

頂部導航設計的樣式也比較多，主要是跟logo、登陸注冊、搜索框搭配組合成多種效果，具體可見下圖：
 

頂部導航的設計成熟穩(wěn)重，比較中規(guī)中矩，但不容易出現(xiàn)太大的問題，所以使用率也是比較廣的。熟悉我的人都知道我用蟬知在做網(wǎng)站，下圖就是蟬知系統(tǒng)后臺界面中頭部導航的定義，可做多種組合在前臺顯示效果。
 

2、側(cè)邊導航
 

側(cè)邊欄導航的設計形式比較多樣，也可以有多表現(xiàn)形式，可動可靜，可大可小，比較個性化。固定的側(cè)邊欄導航設計不是很建議，特別是對于寬度大的側(cè)邊欄導航，這樣的設計會影響整個網(wǎng)頁界面的寬度。設計師可以考慮做成側(cè)邊欄以滑動方式展現(xiàn)，在節(jié)約網(wǎng)站空間的同時也顯得更加簡約。
 

側(cè)邊欄導航的設計需要注意的是導航欄目的寬度問題，若導航欄中字體過長，在展示上會存在一定的問題，哪怕做成滑動展示的形式也不能很好的得以解決問題。結(jié)構(gòu)復制的網(wǎng)站不適用這類導航，且側(cè)邊欄的二級導航欄目不也宜多，所以這類導航大部分適用于一些設計師或個人官網(wǎng)。當然，也有一些結(jié)構(gòu)簡單的網(wǎng)站會采用這類導航。
 

以下這個the HOUSE時尚服飾官網(wǎng)將側(cè)邊欄的內(nèi)容精簡做成一個元素放在側(cè)邊，這樣看起來是不突兀的，不會占用空間，相反還起到一定的裝飾作用。
 

3、底部導航
 

底部導航應用性不是很廣，比較長出現(xiàn)在一些活動或個性化的網(wǎng)站當中。其實底部導航被廣泛使用的并不是在pc端中，而是在移動端。
 

在pc端中采用底部導航的形式，一般都是采用固定的方式，這類導航可以減少用戶的使用成本，但對于結(jié)構(gòu)復雜的網(wǎng)站，有二級或三級導航的網(wǎng)站就不是很合適。其次，將導航放置底部，對于用戶的使用習慣來說不是特別的好，用戶的眼睛都是從上到下從做往右瀏覽的，這樣的設計比較挑戰(zhàn)用戶的使用習慣。
 

故而有很多網(wǎng)站在設計的時候首屏導航會放在底部，到第二屏之后導航就會固定到頂部，舉個例子：forh健身房體育運動網(wǎng)站。
 

4、漢堡包式導航
 

漢堡式導航其實跟底部導航一樣，比較常出現(xiàn)于移動端。但現(xiàn)在不少的pc端也越來越喜歡用漢堡包式的導航設計。這樣的設計比較節(jié)約空間，相當于將導航做成一個隱藏式的設計或是彈出式的設計，具有設計感。
 

STUDIO JT韓國設計工作室網(wǎng)站的漢堡包式導航就具有一定的設計感。
 

雖然漢堡包式導航的設計方式可以很多樣，也可以很個性。但對于一部分用戶而言，漢堡包式導航其實并不是那么直觀，特別是用戶對導航結(jié)構(gòu)不清晰的情況下。設計師在設計這類導航的時候還是要斟酌下。
 

5、滾動式導航
 

滾動式導航分水平滾動和垂直式滾動。
 

水平式滾動
 

水平式滾動就是內(nèi)容呈左右水平方向滾動的，當用戶第一次遇到這樣類型網(wǎng)站的時候，體驗感會比較差，因為它物理和視覺運動方向與常規(guī)的縱向滾動不同，而且當你使用鼠標滾輪滾動的時候，它的左右水平滾動會讓用戶產(chǎn)生交互上的錯位感，這樣的感受其實并不是特別友好。所以這樣的網(wǎng)站其實比較少見，但也有及其少部分做得好的。
 

其實為了不讓用戶在水平滾動的體驗上太差，在界面設計的時候可以加入一個向左或向右的箭頭指示，讓用戶有個心理暗示，可以減少突兀感。
 

垂直式滾動
 

垂直式的滾動在html5網(wǎng)頁中運用廣泛，很多設計師很喜歡用這樣的設計，將一些動畫特效和垂直式滾動導航相結(jié)合，可以達到一種新的視覺效果。一起看看DENSO Brand site的官網(wǎng)，里面結(jié)合了很多特效。
 

設計導航前應該做好什么工作
 

1、準備工作：整理導航結(jié)構(gòu)內(nèi)容。
 

網(wǎng)站頭部常常包括的內(nèi)容是：標志、導航、搜索框、語言、登陸注冊、口號、400電話這些內(nèi)容。這么多內(nèi)容不可能全部放置在網(wǎng)站當中，所以我們在設計網(wǎng)站前需要規(guī)劃好這些內(nèi)容，適當?shù)淖鲆恍┤∩帷?br />  

2、分析網(wǎng)站風格，確定導航的具體風格。
 

在確定網(wǎng)站導航的構(gòu)成內(nèi)容之后，我們可以將這些信息列出，分析網(wǎng)站的整體風格和最佳的用戶體驗，確定好導航的表現(xiàn)形式。
 

3、設計方案
 

在確定好導航的表現(xiàn)形式是做頂部固定導航還是底部固定導航之后，我們需要將確認好的導航內(nèi)容進行組合排列設計。選出最優(yōu)的一款設計方案。
 

在設計的過程中，我們需要遵從用戶體驗為上的設計原則，在保證內(nèi)容可讀的情況下，再去保證界面設計的最優(yōu)。
 

• 上一章：網(wǎng)站整體規(guī)劃怎么做
• 下一章：找公司做網(wǎng)站要注意哪些問題