超實用！網站導航欄設計方法總結

導航對於一個網站來講，起到重要的引導做用。一個優秀的導航設計可讓用戶快速的找到所需 ，讓用戶清晰明瞭的瞭解到網站的結構框架，起到重要的指引做用。下面跟你們分享下經常使用的幾種網頁導航形式：

一、頂部導航

 

頂部導航被普遍應用在各個領域的網站當中，這類導航能夠一目瞭然的讓用戶迅速尋找到所需。頂部導航這樣的設計形式保守但目的性強，能夠確保組織結構的可靠和下降用戶尋找的時間成本。但這類導航有個缺點，首頁內容過多須要滾屏的時候，用戶須要滾動到頂部再去切換導航內容。因此如今不少頂部設計的導航會作一個效果，將導航固定在頂部導航，這樣減小了用戶的使用成本。

 

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

頂部導航的設計成熟穩重，比較中規中矩，但不容易出現太大的問題，因此使用率也是比較廣的。熟悉個人人都知道我用蟬知在作網站，下圖就是蟬知系統後臺界面中頭部導航的定義，可作多種組合在前臺顯示效果。

 

 

二、側邊導航

側邊欄導航的設計形式比較多樣，也能夠有多表現形式，可動可靜，可大可小，比較個性化。固定的側邊欄導航設計不是很建議，特別是對於寬度大的側邊欄導航，這樣的設計會影響整個網頁界面的寬度。設計師能夠考慮作成側邊欄以滑動方式展示，在節約網站空間的同時也顯得更加簡約。

側邊欄導航的設計須要注意的是導航欄目的寬度問題，若導航欄中字體過長，在展現上會存在必定的問題，哪怕作成滑動展現的形式也不能很好的得以解決問題。結構複製的網站不適用這類導航，且側邊欄的二級導航欄目不也宜多，因此這類導航大部分適用於一些設計師或我的官網。固然，也有一些結構簡單的網站會採用這類導航。

如下這個the HOUSE時尚服飾官網將側邊欄的內容精簡作成一個元素放在側邊，這樣看起來是不突兀的，不會佔用空間，相反還起到必定的裝飾做用。

 

 

三、底部導航

 

底部導航應用性不是很廣，比較長出如今一些活動或個性化的網站當中。其實底部導航被普遍使用的並非在pc端中，而是在移動端。

 

 

在pc端中採用底部導航的形式，通常都是採用固定的方式，這類導航能夠減小用戶的使用成本，但對於結構複雜的網站，有二級或三級導航的網站就不是很合適。其次，將導航放置底部，對於用戶的使用習慣來講不是特別的好，用戶的眼睛都是從上到下從作往右瀏覽的，這樣的設計比較挑戰用戶的使用習慣。

 

 

故而有不少網站在設計的時候首屏導航會放在底部，到第二屏以後導航就會固定到頂部，舉個例子：forh健身房體育運動網站。

 

四、漢堡包式導航

 

漢堡式導航其實跟底部導航同樣，比較常出現於移動端。但如今很多的pc端也愈來愈喜歡用漢堡包式的導航設計。這樣的設計比較節約空間，至關於將導航作成一個隱藏式的設計或是彈出式的設計，具備設計感。

 

STUDIO JT韓國設計工做室網站的漢堡包式導航就具備必定的設計感。

雖然漢堡包式導航的設計方式能夠不少樣，也能夠很個性。但對於一部分用戶而言，漢堡包式導航其實並非那麼直觀，特別是用戶對導航結構不清晰的狀況下。設計師在設計這類導航的時候仍是要斟酌下。

五、滾動式導航

 

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

 

水平式滾動

水平式滾動就是內容呈左右水平方向滾動的，當用戶第一次遇到這樣類型網站的時候，體驗感會比較差，由於它物理和視覺運動方向與常規的縱向滾動不一樣，並且當你使用鼠標滾輪滾動的時候，它的左右水平滾動會讓用戶產生交互上的錯位感，這樣的感覺其實並非特別友好。因此這樣的網站其實比較少見，但也有及其少部分作得好的。

 

來看看Costume National Scents官網的界面效果。

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

垂直式滾動

垂直式的滾動在html5網頁中運用普遍，不少設計師很喜歡用這樣的設計，將一些動畫特效和垂直式滾動導航相結合，能夠達到一種新的視覺效果。一塊兒看看DENSO Brand site的官網，裏面結合了不少特效。

 

以上介紹的這麼多種導航方式，各有利弊，但不管哪種，導航既然是導航，就應該起到爲用戶快速便捷找到所需的做用，提升網站的易用性和易操做性，並非花哨的導航就是好的，用戶每每喜歡簡單醒目的。這纔是導航的設計原則！

 

 

上面介紹了導航常見的幾種設計樣式，咱們再來講說在設計導航前應該作好什麼工做：

 

一、準備工做：整理導航結構內容。
網站頭部經常包括的內容是：標誌、導航、搜索框、語言、登錄註冊、口號、400電話這些內容。這麼多內容不可能所有放置在網站當中，因此咱們在設計網站前須要規劃好這些內容，適當的作一些取捨。

二、分析網站風格，肯定導航的具體風格。
在肯定網站導航的構成內容以後，咱們能夠將這些信息列出，分析網站的總體風格和最佳的用戶體驗，肯定好導航的表現形式。

三、設計方案
在肯定好導航的表現形式是作頂部固定導航仍是底部固定導航以後，咱們須要將確認好的導航內容進行組合排列設計。選出最優的一款設計方案。
在設計的過程當中，咱們須要聽從用戶體驗爲上的設計原則，在保證內容可讀的狀況下，再去保證界面設計的最優。

相信一個好的導航是整個網站成功的重要一步，設計師根據不一樣網站的須要設計不一樣的導航，而要作到這一步也並不是易事，學海無涯，設計師們一塊兒加油吧。