眾所周知，用戶的第一印象非常之重要的，而導(dǎo)航欄設(shè)計(jì)就相當(dāng)于用戶的一個(gè)指引牌，用戶進(jìn)入你的網(wǎng)站最先看到的便是導(dǎo)航欄。如果一個(gè)網(wǎng)站想要成功吸引住用戶并且在同行中脫穎而出，那么設(shè)計(jì)出一款優(yōu)秀的網(wǎng)頁導(dǎo)航欄就顯得尤為重要。

這篇文章中，小編將介紹一些導(dǎo)航欄設(shè)計(jì)技巧，教大家如何更好的去提升用戶體驗(yàn)。下面直接進(jìn)入正題。

導(dǎo)航欄設(shè)計(jì)的基本規(guī)則：

• 網(wǎng)頁導(dǎo)航欄應(yīng)該簡單易懂
• 導(dǎo)航欄結(jié)構(gòu)布局應(yīng)該清晰完整
• 導(dǎo)航欄設(shè)計(jì)應(yīng)保持一致性與連貫性
• 導(dǎo)航欄應(yīng)該保持鏈接的有效性

六點(diǎn)導(dǎo)航欄設(shè)計(jì)技巧

1.良好的布局

導(dǎo)航欄設(shè)計(jì)的目的是幫助用戶找到他們所尋找的東西，所以網(wǎng)頁導(dǎo)航欄必須保持邏輯清晰且結(jié)構(gòu)合理。網(wǎng)站頂部導(dǎo)航常見的內(nèi)容有：品牌logo、菜單、搜索框、提示消息、登錄/注冊、聯(lián)系方式等。另外，導(dǎo)航內(nèi)元素的排列順序和標(biāo)簽內(nèi)容同樣重要。導(dǎo)航欄兩頭的標(biāo)簽條目是最引人注意的，并且用戶點(diǎn)擊的次數(shù)也是最多的，所以作為設(shè)計(jì)師，你需要特別注意這些條目的設(shè)計(jì)。

2. 使用高對比度

導(dǎo)航欄設(shè)計(jì)應(yīng)在視覺上與頁面其余部分進(jìn)行區(qū)分。不僅應(yīng)該在頁面之間保持一致，而且還應(yīng)該具有高對比度，使其一目了然。從可訪問性的角度來看，這是一個(gè)特別重要的細(xì)節(jié)。無論是通過顏色，形狀還是尺寸方面考慮，都應(yīng)該使網(wǎng)頁導(dǎo)航欄有一個(gè)高對比度，因?yàn)橐暳Φ拖禄蛞暳κ軗p的人很大程度上會(huì)依賴于你的導(dǎo)航欄。

3.在導(dǎo)航欄中提供視覺提示（圖標(biāo)，標(biāo)簽和顏色）與反饋

隨時(shí)向用戶反饋他所處位置是導(dǎo)航欄設(shè)計(jì)的一個(gè)重要環(huán)節(jié)。設(shè)計(jì)師可以通過更改鏈接的背景，頁面名稱的顏色或在導(dǎo)航菜單中將文本變?yōu)榇煮w來提供視覺提示和反饋。這樣做的目的是避免用戶產(chǎn)生迷茫感。有些設(shè)計(jì)師在導(dǎo)航欄設(shè)計(jì)時(shí)，忽略了這一點(diǎn)。如果沒有突出選中選項(xiàng)，用戶可能不知道他們當(dāng)前是位于哪個(gè)頁面。所以當(dāng)我們在設(shè)計(jì)的時(shí)候，需要使用形狀和顏色對比突出選定的頁面。比如：

• 突出顯示所選按鈕（在導(dǎo)航欄中更改當(dāng)前頁面的背景顏色）

• 更改頁面名稱的顏色

• 將頁面名稱加粗

• 添加下劃線

僅僅是顏色的突出可能讓色盲患者難以辨別，因此最好的方式是在導(dǎo)航欄標(biāo)簽下添加下劃線或者添加一個(gè)輪廓。

• 使用縮進(jìn)選項(xiàng)卡

• 添加圖標(biāo)

可在網(wǎng)頁導(dǎo)航欄中放置與你鏈接內(nèi)容相關(guān)的小圖標(biāo)或簡短描述，這樣在你的導(dǎo)航欄設(shè)計(jì)中用戶可快速識(shí)別他們點(diǎn)擊的內(nèi)容。

4.設(shè)置懸停效果

在導(dǎo)航欄設(shè)計(jì)中創(chuàng)建懸停效果，能讓用戶更好的理解其功能，并很容易吸引用戶去觸發(fā)它。常見的懸停效果是當(dāng)光標(biāo)懸停在焦點(diǎn)上時(shí)，通過顏色或者背景的改變告知用戶，這個(gè)按鈕是可以點(diǎn)擊的。

5.將Logo鏈接到主頁

Logo一般會(huì)直接鏈到首頁，但是沒有設(shè)置此功能的網(wǎng)站也不少。導(dǎo)航欄設(shè)計(jì)中將Logo鏈接主頁的目的是方便用戶操作，從而增加網(wǎng)頁導(dǎo)航欄的用戶體驗(yàn)。

6.限制選項(xiàng)卡的數(shù)量

導(dǎo)航欄設(shè)計(jì)時(shí)，我們應(yīng)當(dāng)把最重要、最常用到的條目置于導(dǎo)航欄當(dāng)中。如果你提供的選項(xiàng)太多或太復(fù)雜，那么用戶會(huì)感到混亂。一般網(wǎng)頁導(dǎo)航欄最好不要超過7個(gè)選項(xiàng)；如果是移動(dòng)端，最好不要超過5個(gè)。這個(gè)限制對設(shè)計(jì)師來說是件好事，這樣就可以把持導(dǎo)航欄設(shè)計(jì)的簡潔性，用戶可也可輕松找到他們正在尋找的內(nèi)容，而無需經(jīng)過太多選項(xiàng)。

常見的4種導(dǎo)航欄設(shè)計(jì)類型

• 頂部導(dǎo)航

By Mockplus DS

• 底部導(dǎo)航

• 側(cè)邊導(dǎo)航

• 漢堡菜單

By Knoed

• 抽屜導(dǎo)航

By Dribbble

實(shí)戰(zhàn)操作：如何用原型設(shè)計(jì)工具Mockplus（摹客）來快速的實(shí)現(xiàn)頂部導(dǎo)航欄設(shè)計(jì)之內(nèi)容切換

這里我們需要結(jié)合Mockplus中的按鈕欄和內(nèi)容面板，來實(shí)現(xiàn)內(nèi)容切換。

Step 1：在界面上添加一個(gè)按鈕欄和內(nèi)容面板，按鈕欄可根據(jù)自己的需要來更改樣式。

Step 2：給內(nèi)容面板添加3個(gè)層

Step 3：新建三個(gè)子界面并重命名為界面一，界面二，界面三。在三個(gè)界面上添加不同的內(nèi)容以示區(qū)分。

Step 4：內(nèi)容面版三個(gè)層分別連接對應(yīng)的三個(gè)界面。在小灰點(diǎn)按下鼠標(biāo)左鍵拖動(dòng)鏈接頁面。

Step 5：按鈕欄三個(gè)按鈕分別對應(yīng)連接內(nèi)容面板三個(gè)層，也是鼠標(biāo)拖動(dòng)。

最后，預(yù)覽看效果演示，導(dǎo)航欄設(shè)計(jì)之內(nèi)容切換是不是很簡單呢？

綜上

導(dǎo)航欄設(shè)計(jì)是網(wǎng)頁和移動(dòng)端設(shè)計(jì)中不可或缺的一部分，它們就像一個(gè)路牌，時(shí)刻引導(dǎo)用戶并且用戶也很依賴。導(dǎo)航欄菜單設(shè)計(jì)的好壞會(huì)影響用戶對你網(wǎng)站或者App的印象和評價(jià)，所以設(shè)計(jì)師應(yīng)該確保自己設(shè)計(jì)的網(wǎng)頁導(dǎo)航欄能為用戶提供一個(gè)良好的用戶體驗(yàn)。希望小編今天分享的導(dǎo)航欄設(shè)計(jì)技巧能夠?qū)δ銈冇袔椭?

文章干貨分享：

【干貨分享】10條必知的網(wǎng)頁導(dǎo)航菜單設(shè)計(jì)原則

【附教程】2018九款最佳下拉菜單設(shè)計(jì)實(shí)例

【附教程】交互原型設(shè)計(jì)的六大原則，助你打造完美的用戶體驗(yàn)

【附教程】App原型設(shè)計(jì)—Dribbble極具創(chuàng)意的下拉刷新案例大放送