怎么做好網(wǎng)站導(dǎo)航？網(wǎng)站建設(shè)越來越多，而互聯(lián)網(wǎng)交易已經(jīng)成為目前消費(fèi)市場一個(gè)簡單快捷，而且讓年輕人越來越能接受的一個(gè)消費(fèi)方式，但是網(wǎng)站的建設(shè)中導(dǎo)航欄的設(shè)計(jì)也是非常重要的，優(yōu)秀的導(dǎo)航設(shè)計(jì)能夠提高網(wǎng)站的易用性，對實(shí)現(xiàn)電子商務(wù)網(wǎng)站的高效運(yùn)作具有實(shí)際意義。怎么做好網(wǎng)站導(dǎo)航 1.文字導(dǎo)航 盡量使用最普通的HTML文字導(dǎo)航，不要使用圖片作為導(dǎo)航鏈接，更不要使用JS生成導(dǎo)航系統(tǒng)，也不要用Flash做導(dǎo)航。CSS也可
怎么做好網(wǎng)站導(dǎo)航？網(wǎng)站建設(shè)越來越多，而互聯(lián)網(wǎng)交易已經(jīng)成為目前消費(fèi)市場一個(gè)簡單快捷，而且讓年輕人越來越能接受的一個(gè)消費(fèi)方式，但是網(wǎng)站的建設(shè)中導(dǎo)航欄的設(shè)計(jì)也是非常重要的，優(yōu)秀的導(dǎo)航設(shè)計(jì)能夠提高網(wǎng)站的易用性，對實(shí)現(xiàn)電子商務(wù)網(wǎng)站的高效運(yùn)作具有實(shí)際意義。
怎么做好網(wǎng)站導(dǎo)航
1.文字導(dǎo)航
盡量使用最普通的HTML文字導(dǎo)航，不要使用圖片作為導(dǎo)航鏈接，更不要使用JS生成導(dǎo)航系統(tǒng)，也不要用Flash做導(dǎo)航。CSS也可以設(shè)計(jì)出很好的視覺效果，如背景、文字顏色變化、下拉菜單。
最普通的文字鏈接對搜索引擎來說時(shí)阻力最小的爬行通道。導(dǎo)航系統(tǒng)鏈接是整個(gè)網(wǎng)站收錄最重要的內(nèi)部鏈接。
2.點(diǎn)擊距離及扁平化
良好的導(dǎo)航的目標(biāo)之一是使所有頁面與首頁點(diǎn)擊距離越近越好。權(quán)重普通的網(wǎng)站，內(nèi)頁離首頁不要超過四五次。通常在鏈接結(jié)構(gòu)上使網(wǎng)站盡量扁平化。
網(wǎng)站導(dǎo)航系統(tǒng)的安排對減少鏈接層次至關(guān)重要。主導(dǎo)航中出現(xiàn)的頁面將處于僅低于首頁的層次，所以主導(dǎo)航中頁面越多，網(wǎng)站越扁平。但用戶體驗(yàn)和頁面連接總數(shù)都不允許主導(dǎo)航中有太多鏈接。seo人員需要做好平衡。
3.錨文字包含關(guān)鍵詞
導(dǎo)航系統(tǒng)通常是分類頁面獲得內(nèi)部鏈接的最主要來源，數(shù)量巨大，其錨文字對頁面相關(guān)性有很大影響，因此分類名稱應(yīng)盡量使用目標(biāo)關(guān)鍵詞。當(dāng)然也不能堆積，分類名稱以2-4字為宜。
4.面包屑導(dǎo)航
對用戶和搜索引擎來說，是判斷頁面在網(wǎng)站整個(gè)結(jié)構(gòu)中的位置的最好方法。正確使用面包屑導(dǎo)航的網(wǎng)站通常都是架構(gòu)清晰的網(wǎng)站，強(qiáng)烈建議使用。
5.避免頁腳堆積
隨著seo被更多站長認(rèn)識(shí)，近些年有一種在頁腳堆積富含關(guān)鍵字的分類頁面鏈接的傾向。三四年前這種做法還有不錯(cuò)的效果，但是近來搜索引擎比較反感這種做法，常常造成某種形式的懲罰。
網(wǎng)頁導(dǎo)航類型
1.全局導(dǎo)航
網(wǎng)頁中的導(dǎo)航 每一頁都會(huì)顯示全域?qū)Ш较到y(tǒng)
2.局部導(dǎo)航
局部導(dǎo)航系統(tǒng)和其內(nèi)容 被稱為“子網(wǎng)站”或“網(wǎng)站中的網(wǎng)站”
3.全局導(dǎo)航+局部導(dǎo)航
很多網(wǎng)站會(huì)把全局導(dǎo)航和局部導(dǎo)航 結(jié)合使用 ——巨型菜單
4.情景導(dǎo)航
有節(jié)制地使情景式導(dǎo)航可以增加靈活性來彌補(bǔ)現(xiàn)有導(dǎo)航系統(tǒng)的不足
它提供了了交叉銷售、提升銷售、打造品牌和提供顧客價(jià)值的真正機(jī)會(huì)
5.輔助導(dǎo)航
不屬于網(wǎng)站的層級結(jié)構(gòu)，但是可以提供查找內(nèi)容和完成任務(wù)的輔助方法
網(wǎng)頁導(dǎo)航形式
1、頂部導(dǎo)航
頂部導(dǎo)航被廣泛應(yīng)用在各個(gè)領(lǐng)域的網(wǎng)站當(dāng)中，這類導(dǎo)航可以一目了然的讓用戶迅速尋找到所需。頂部導(dǎo)航這樣的設(shè)計(jì)形式保守但目的性強(qiáng)，可以確保組織結(jié)構(gòu)的可靠和降低用戶尋找的時(shí)間成本。但這類導(dǎo)航有個(gè)缺點(diǎn)，首頁內(nèi)容過多需要滾屏的時(shí)候，用戶需要滾動(dòng)到頂部再去切換導(dǎo)航內(nèi)容。所以現(xiàn)在很多頂部設(shè)計(jì)的導(dǎo)航會(huì)做一個(gè)效果，將導(dǎo)航固定在頂部導(dǎo)航，這樣減少了用戶的使用成本。
頂部導(dǎo)航設(shè)計(jì)的樣式也比較多，主要是跟logo、登陸注冊、搜索框搭配組合成多種效果，具體可見下圖：
頂部導(dǎo)航的設(shè)計(jì)成熟穩(wěn)重，比較中規(guī)中矩，但不容易出現(xiàn)太大的問題，所以使用率也是比較廣的。熟悉我的人都知道我用蟬知在做網(wǎng)站，下圖就是蟬知系統(tǒng)后臺(tái)界面中頭部導(dǎo)航的定義，可做多種組合在前臺(tái)顯示效果。
2、側(cè)邊導(dǎo)航
側(cè)邊欄導(dǎo)航的設(shè)計(jì)形式比較多樣，也可以有多表現(xiàn)形式，可動(dòng)可靜，可大可小，比較個(gè)性化。固定的側(cè)邊欄導(dǎo)航設(shè)計(jì)不是很建議，特別是對于寬度大的側(cè)邊欄導(dǎo)航，這樣的設(shè)計(jì)會(huì)影響整個(gè)網(wǎng)頁界面的寬度。設(shè)計(jì)師可以考慮做成側(cè)邊欄以滑動(dòng)方式展現(xiàn)，在節(jié)約網(wǎng)站空間的同時(shí)也顯得更加簡約。
側(cè)邊欄導(dǎo)航的設(shè)計(jì)需要注意的是導(dǎo)航欄目的寬度問題，若導(dǎo)航欄中字體過長，在展示上會(huì)存在一定的問題，哪怕做成滑動(dòng)展示的形式也不能很好的得以解決問題。結(jié)構(gòu)復(fù)制的網(wǎng)站不適用這類導(dǎo)航，且側(cè)邊欄的二級導(dǎo)航欄目不也宜多，所以這類導(dǎo)航大部分適用于一些設(shè)計(jì)師或個(gè)人官網(wǎng)。當(dāng)然，也有一些結(jié)構(gòu)簡單的網(wǎng)站會(huì)采用這類導(dǎo)航。
以下這個(gè)the HOUSE時(shí)尚服飾官網(wǎng)將側(cè)邊欄的內(nèi)容精簡做成一個(gè)元素放在側(cè)邊，這樣看起來是不突兀的，不會(huì)占用空間，相反還起到一定的裝飾作用。
3、底部導(dǎo)航
底部導(dǎo)航應(yīng)用性不是很廣，比較長出現(xiàn)在一些活動(dòng)或個(gè)性化的網(wǎng)站當(dāng)中。其實(shí)底部導(dǎo)航被廣泛使用的并不是在pc端中，而是在移動(dòng)端。
在pc端中采用底部導(dǎo)航的形式，一般都是采用固定的方式，這類導(dǎo)航可以減少用戶的使用成本，但對于結(jié)構(gòu)復(fù)雜的網(wǎng)站，有二級或三級導(dǎo)航的網(wǎng)站就不是很合適。其次，將導(dǎo)航放置底部，對于用戶的使用習(xí)慣來說不是特別的好，用戶的眼睛都是從上到下從做往右瀏覽的，這樣的設(shè)計(jì)比較挑戰(zhàn)用戶的使用習(xí)慣。
故而有很多網(wǎng)站在設(shè)計(jì)的時(shí)候首屏導(dǎo)航會(huì)放在底部，到第二屏之后導(dǎo)航就會(huì)固定到頂部，舉個(gè)例子：forh健身房體育運(yùn)動(dòng)網(wǎng)站。
4、漢堡包式導(dǎo)航
漢堡式導(dǎo)航其實(shí)跟底部導(dǎo)航一樣，比較常出現(xiàn)于移動(dòng)端。但現(xiàn)在不少的pc端也越來越喜歡用漢堡包式的導(dǎo)航設(shè)計(jì)。這樣的設(shè)計(jì)比較節(jié)約空間，相當(dāng)于將導(dǎo)航做成一個(gè)隱藏式的設(shè)計(jì)或是彈出式的設(shè)計(jì)，具有設(shè)計(jì)感。
STUDIO JT韓國設(shè)計(jì)工作室網(wǎng)站的漢堡包式導(dǎo)航就具有一定的設(shè)計(jì)感。
雖然漢堡包式導(dǎo)航的設(shè)計(jì)方式可以很多樣，也可以很個(gè)性。但對于一部分用戶而言，漢堡包式導(dǎo)航其實(shí)并不是那么直觀，特別是用戶對導(dǎo)航結(jié)構(gòu)不清晰的情況下。設(shè)計(jì)師在設(shè)計(jì)這類導(dǎo)航的時(shí)候還是要斟酌下。
5、滾動(dòng)式導(dǎo)航
滾動(dòng)式導(dǎo)航分水平滾動(dòng)和垂直式滾動(dòng)。
水平式滾動(dòng)
水平式滾動(dòng)就是內(nèi)容呈左右水平方向滾動(dòng)的，當(dāng)用戶第一次遇到這樣類型網(wǎng)站的時(shí)候，體驗(yàn)感會(huì)比較差，因?yàn)樗锢砗鸵曈X運(yùn)動(dòng)方向與常規(guī)的縱向滾動(dòng)不同，而且當(dāng)你使用鼠標(biāo)滾輪滾動(dòng)的時(shí)候，它的左右水平滾動(dòng)會(huì)讓用戶產(chǎn)生交互上的錯(cuò)位感，這樣的感受其實(shí)并不是特別友好。所以這樣的網(wǎng)站其實(shí)比較少見，但也有及其少部分做得好的。
其實(shí)為了不讓用戶在水平滾動(dòng)的體驗(yàn)上太差，在界面設(shè)計(jì)的時(shí)候可以加入一個(gè)向左或向右的箭頭指示，讓用戶有個(gè)心理暗示，可以減少突兀感。
垂直式滾動(dòng)
垂直式的滾動(dòng)在html5網(wǎng)頁中運(yùn)用廣泛，很多設(shè)計(jì)師很喜歡用這樣的設(shè)計(jì)，將一些動(dòng)畫特效和垂直式滾動(dòng)導(dǎo)航相結(jié)合，可以達(dá)到一種新的視覺效果。一起看看DENSO Brand site的官網(wǎng)，里面結(jié)合了很多特效。
設(shè)計(jì)導(dǎo)航前應(yīng)該做好什么工作
1、準(zhǔn)備工作：整理導(dǎo)航結(jié)構(gòu)內(nèi)容。
網(wǎng)站頭部常常包括的內(nèi)容是：標(biāo)志、導(dǎo)航、搜索框、語言、登陸注冊、口號(hào)、400電話這些內(nèi)容。這么多內(nèi)容不可能全部放置在網(wǎng)站當(dāng)中，所以我們在設(shè)計(jì)網(wǎng)站前需要規(guī)劃好這些內(nèi)容，適當(dāng)?shù)淖鲆恍┤∩帷?br />
2、分析網(wǎng)站風(fēng)格，確定導(dǎo)航的具體風(fēng)格。
在確定網(wǎng)站導(dǎo)航的構(gòu)成內(nèi)容之后，我們可以將這些信息列出，分析網(wǎng)站的整體風(fēng)格和最佳的用戶體驗(yàn)，確定好導(dǎo)航的表現(xiàn)形式。
3、設(shè)計(jì)方案
在確定好導(dǎo)航的表現(xiàn)形式是做頂部固定導(dǎo)航還是底部固定導(dǎo)航之后，我們需要將確認(rèn)好的導(dǎo)航內(nèi)容進(jìn)行組合排列設(shè)計(jì)。選出最優(yōu)的一款設(shè)計(jì)方案。
在設(shè)計(jì)的過程中，我們需要遵從用戶體驗(yàn)為上的設(shè)計(jì)原則，在保證內(nèi)容可讀的情況下，再去保證界面設(shè)計(jì)的最優(yōu)。
版權(quán)所有：重慶安菲科技有限公司
友情鏈接:
