導(dǎo)航對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，起到重要的引導(dǎo)作用。一個(gè)優(yōu)秀的導(dǎo)航設(shè)計(jì)可以讓用戶快速的找到所需 ，讓用戶清晰明了的了解到網(wǎng)站的結(jié)構(gòu)框架，起到重要的指引作用。下面跟大家分享下常用的幾種網(wǎng)頁(yè)導(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)，首頁(yè)內(nèi)容過(guò)多需要滾屏的時(shí)候，用戶需要滾動(dòng)到頂部再去切換導(dǎo)航內(nèi)容。所以現(xiàn)在很多頂部設(shè)計(jì)的導(dǎo)航會(huì)做一個(gè)效果，將導(dǎo)航固定在頂部導(dǎo)航，這樣減少了用戶的使用成本。

頂部導(dǎo)航設(shè)計(jì)的樣式也比較多，主要是跟logo、登陸注冊(cè)、搜索框搭配組合成多種效果。頂部導(dǎo)航的設(shè)計(jì)成熟穩(wěn)重，比較中規(guī)中矩，但不容易出現(xiàn)太大的問(wè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ì)不是很建議，特別是對(duì)于寬度大的側(cè)邊欄導(dǎo)航，這樣的設(shè)計(jì)會(huì)影響整個(gè)網(wǎng)頁(yè)界面的寬度。設(shè)計(jì)師可以考慮做成側(cè)邊欄以滑動(dòng)方式展現(xiàn)，在節(jié)約網(wǎng)站空間的同時(shí)也顯得更加簡(jiǎn)約。

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

3、底部導(dǎo)航

底部導(dǎo)航應(yīng)用性不是很廣，比較長(zhǎng)出現(xiàn)在一些活動(dòng)或個(gè)性化的網(wǎng)站當(dāng)中。其實(shí)底部導(dǎo)航被廣泛使用的并不是在pc端中，而是在移動(dòng)端。故而有很多網(wǎng)站在設(shè)計(jì)的時(shí)候首屏導(dǎo)航會(huì)放在底部，到第二屏之后導(dǎo)航就會(huì)固定到頂部

4、漢堡包式導(dǎo)航

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

雖然漢堡包式導(dǎo)航的設(shè)計(jì)方式可以很多樣，也可以很個(gè)性。但對(duì)于一部分用戶而言，漢堡包式導(dǎo)航其實(shí)并不是那么直觀，特別是用戶對(duì)導(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(jué)運(yùn)動(dòng)方向與常規(guī)的縱向滾動(dòng)不同，而且當(dāng)你使用鼠標(biāo)滾輪滾動(dòng)的時(shí)候，它的左右水平滾動(dòng)會(huì)讓用戶產(chǎn)生交互上的錯(cuò)位感，這樣的感受其實(shí)并不是特別友好。所以這樣的網(wǎng)站其實(shí)比較少見(jiàn)，但也有及其少部分做得好的。

其實(shí)為了不讓用戶在水平滾動(dòng)的體驗(yàn)上太差，在界面設(shè)計(jì)的時(shí)候可以加入一個(gè)向左或向右的箭頭指示，讓用戶有個(gè)心理暗示，可以減少突兀感。

垂直式滾動(dòng)

垂直式的滾動(dòng)在html5網(wǎng)頁(yè)中運(yùn)用廣泛，很多設(shè)計(jì)師很喜歡用這樣的設(shè)計(jì)，將一些動(dòng)畫特效和垂直式滾動(dòng)導(dǎo)航相結(jié)合，可以達(dá)到一種新的視覺(jué)效果。

以上介紹的這么多種導(dǎo)航方式，各有利弊，但無(wú)論哪一種，導(dǎo)航既然是導(dǎo)航，就應(yīng)該起到為用戶快速便捷找到所需的作用，提高網(wǎng)站的易用性和易操作性，并不是花哨的導(dǎo)航就是好的，用戶往往喜歡簡(jiǎn)單醒目的。這才是導(dǎo)航的設(shè)計(jì)原則！