網(wǎng)站菜單導(dǎo)航欄設(shè)計(jì)準(zhǔn)則及設(shè)計(jì)技巧

網(wǎng)絡(luò)中每天都充斥著海量的信息，隨之而來的問題是如何對這些內(nèi)容進(jìn)行分類，而內(nèi)容和分類最終都反映在導(dǎo)航上面。

有時(shí)，當(dāng)導(dǎo)航有太多選項(xiàng)時(shí)將會是個(gè)令人頭疼的問題。

所以，治療導(dǎo)航欄綜合癥(cure the navigation-itis syndrome)是非常重要的，使得導(dǎo)航欄對用戶友好并容易操作。

本文提供了一些設(shè)計(jì)導(dǎo)航欄的技巧。幫助你解決導(dǎo)航問題并體統(tǒng)清晰的用戶體驗(yàn)，并用真實(shí)的例子教你如何治愈導(dǎo)航炎綜合癥。

但首先，是這些技巧。

設(shè)計(jì)導(dǎo)航欄的技巧

當(dāng)我們撰寫這篇文章之前，Jon (SpyreStudios founder) 和我交換了一些想法，總結(jié)出了關(guān)于導(dǎo)航欄應(yīng)該如何放置、如何作用和表現(xiàn)。

1.堅(jiān)持一個(gè)導(dǎo)航菜單

通常一個(gè)導(dǎo)航菜單就足夠了。不要增加不必要的導(dǎo)航條，而用下拉菜單代替。

2.清晰、簡單、明顯的菜單選項(xiàng)

使用清晰、簡單易懂的文本，盡可能簡單并能表達(dá)清楚。這樣用戶不會感到困惑，且知道他們點(diǎn)擊的是什么。

3.保持導(dǎo)航看起來是菜單

一個(gè)導(dǎo)航菜單應(yīng)該看起來像一個(gè)導(dǎo)航菜單。沒有必要重新發(fā)明輪子。如果沒壞，就不要修。基本上，你的創(chuàng)意應(yīng)該來自內(nèi)容，而不是如何呈現(xiàn)內(nèi)容。相比如何到達(dá)內(nèi)容人們更關(guān)心內(nèi)容本身。所以讓人們通過一個(gè)不用大驚小怪、可立即識別的過程來得到它。

4.不要使用多于兩級的下拉菜單

不要使用多于兩級的下拉菜單，除非特別必要。如果你需要使用多于三層的下拉菜單，那你可能需要重新返回繪圖板。減少菜單項(xiàng)目——大膽裁員。你是否真的需要那兩個(gè)分類或者頁面，也許合二為一更好?這都是關(guān)于如何對你的內(nèi)容做出更好的分類。

5.下拉菜單中不要多于10-12個(gè)選項(xiàng)

切勿在下拉菜單中放置多于10-12個(gè)選項(xiàng)。如果這樣打不到你的要求，請重回繪圖板，像第4條中那樣。

6.最小化下拉菜單

將下拉選項(xiàng)保持在最小狀態(tài)。如果可能，避免使用大型的下拉菜單。更多的選擇往往意味著更少的動(dòng)作。別讓用戶不知道如何如何在菜單中選擇，結(jié)果導(dǎo)致用戶離開網(wǎng)站。

7.不要只往菜單上放一個(gè)圖標(biāo)

圖標(biāo)是很重要的，但是如果菜單上只有圖標(biāo)的話，不是每個(gè)人都了解圖標(biāo)的含義。三十歲的人會知道閃存的圖標(biāo)代表“保存”。而小孩兒可能會不明白這個(gè)含義。

8.不要設(shè)計(jì)垂直導(dǎo)航欄

雖然設(shè)計(jì)一個(gè)垂直的導(dǎo)航欄沒有那么難，但是在網(wǎng)頁上使用水平導(dǎo)航欄是更加容易并且司空見慣的。垂直導(dǎo)航欄會很不方便，會讓一部分用戶望而卻步，而且會浪費(fèi)寶貴的屏幕空間。水平導(dǎo)航欄會為網(wǎng)頁錦上添花，而垂直導(dǎo)航欄會給你的用戶帶來麻煩。另外，垂直導(dǎo)航欄會需要更多的空間來讓自身變得醒目。這也因項(xiàng)目而異。

9.讓你的設(shè)計(jì)方便觸摸屏用戶使用

觸摸屏技術(shù)已經(jīng)被廣泛采用，所以你要讓自己的導(dǎo)航欄方便觸摸屏電子產(chǎn)品(比如IPAD)用戶的使用。尤其對于下拉菜單而言，讓它們更加容易被點(diǎn)擊，而不是只能使用光標(biāo)停留。

治愈“導(dǎo)航欄迷戀癥”：一個(gè)實(shí)例

看看美國國家地理的網(wǎng)站，數(shù)一數(shù)這個(gè)網(wǎng)頁有幾個(gè)導(dǎo)航欄呢?

有三個(gè)，是的!對于訪客是不是有點(diǎn)多呢?如何避免在一個(gè)網(wǎng)頁上使用三個(gè)導(dǎo)航條呢?事實(shí)上，把三個(gè)導(dǎo)航條合并成一個(gè)導(dǎo)航條也是可能的!

1.設(shè)置下拉菜單

最最重要的是，這個(gè)三級菜單的次級菜單(第二級菜單和第三級菜單)可以放到下拉菜單中。這樣既可以節(jié)省空間，又可以讓用戶的選擇更加明了。比如說如果你對攝影感興趣的話，你將鼠標(biāo)懸浮便可以看到關(guān)于攝影的所有內(nèi)容。

2 把搜索框放入現(xiàn)有的導(dǎo)航欄

把搜索框單獨(dú)拉出來是不合理的做法。如果把搜索框放進(jìn)導(dǎo)航欄，可以節(jié)省更多的空間。這樣做，呈現(xiàn)給用戶單一又實(shí)用的導(dǎo)航欄。

3 減少給用戶的選擇

從菜單中砍掉一部分內(nèi)容會讓你的導(dǎo)航欄既方便又實(shí)用。如果點(diǎn)擊logo可以轉(zhuǎn)到主頁的時(shí)候還需要再單獨(dú)做一個(gè)主頁的鏈接嗎?做次級菜單的時(shí)候也要考慮到這一點(diǎn)。

解決導(dǎo)航問題，提供清晰的用戶體驗(yàn)

如果用戶不能訪問到，有再好的內(nèi)容也只是一文不值。好吧，他們最終將找到并訪問它。但是很多用戶會變得沮喪或者放棄并離開網(wǎng)站，如果他們不能輕易的找到或者因不必要的選擇而不堪重負(fù)。所以，為什么不更好的提供便利。

讓用戶方便使用和分享內(nèi)容是治療導(dǎo)航欄綜合癥的最好方法。解決了網(wǎng)站的導(dǎo)航問題能給用戶提供更清晰的用戶體驗(yàn)，讓更多用戶閱讀使用并分享網(wǎng)站的內(nèi)容而使你快樂！