建設(shè)網(wǎng)站中下面的設(shè)計(jì)原則，可以避免導(dǎo)航菜單出錯(cuò)。
導(dǎo)航菜單要清晰可見
1. 大屏中的導(dǎo)航菜單不要太小。如果空間足夠，不要將菜單隱藏。
2. 把導(dǎo)航菜單放在用戶熟悉的位置。通常用戶會(huì)希望在瀏覽過的網(wǎng)站或app中的類似位置(譬如網(wǎng)站頂部、左側(cè)等)中找到他們想要的UI元素。
3. 讓菜單鏈接看起來有互動(dòng)感。如果菜單選項(xiàng)看起來不可點(diǎn)擊，用戶未必能認(rèn)出它是導(dǎo)航。如果我們的導(dǎo)航設(shè)計(jì)融入太重的圖形、或太過追崇扁平化設(shè)計(jì)風(fēng)格，會(huì)使它們看起來更像是裝飾性圖片或標(biāo)題。
4. 確保導(dǎo)航菜單擁有足夠的視覺吸引力。很多導(dǎo)航菜單的周圍會(huì)留有一點(diǎn)空白區(qū)域以從視覺上突顯它。但當(dāng)網(wǎng)站UI元素比較擁擠時(shí)，如果導(dǎo)航菜單視覺比重太弱就會(huì)在各色圖形、促銷廣告、標(biāo)題里迷失，不易被用戶識(shí)別。
5. 菜單選項(xiàng)的顏色要與網(wǎng)站背景色對(duì)比鮮明。令人驚訝的是，有非常多的設(shè)計(jì)師都忽視了“對(duì)比原則”。
即便是熟悉以上規(guī)則的設(shè)計(jì)師設(shè)計(jì)出來的導(dǎo)航菜單也有可能會(huì)被用戶忽視，因?yàn)樗麄兒茈y客觀地評(píng)價(jià)自己的作品——尤其是碰上比較主觀的設(shè)計(jì)標(biāo)準(zhǔn)時(shí)，比如哪個(gè) UI元素應(yīng)該擁有更明顯的視覺效果。如果你知道你的導(dǎo)航菜單在哪兒，自然能一看看到它，因?yàn)檫@是你設(shè)計(jì)的。因此，讓用戶參與驗(yàn)證十分必要。
告訴用戶其當(dāng)前位置
6. 告訴用戶當(dāng)前所處什么位置。用戶成功導(dǎo)航的一個(gè)最基本的標(biāo)準(zhǔn)是他自己能發(fā)現(xiàn)：“我在哪兒?” 通常被選中的菜單選項(xiàng)在視覺上與其他選項(xiàng)是有差異的，這可以幫助用戶明確自己的當(dāng)前所在位置(或者通過面包屑導(dǎo)航定位)。如果沒有讓用戶明確所在位置、導(dǎo) 致他們迷路，那么就犯了網(wǎng)站設(shè)計(jì)最基本的錯(cuò)誤。諷刺的是用戶不總是通過首頁到達(dá)目的頁，所以導(dǎo)航菜單對(duì)于用戶來說意義重大。
導(dǎo)航菜單要與用戶任務(wù)協(xié)調(diào)一致
7. 使用易懂的鏈接標(biāo)簽。清楚用戶要找的是什么，使用相似且相關(guān)的類別標(biāo)簽。要記住導(dǎo)航菜單并不是拿自造詞和行話去忽悠人的。請(qǐng)使用可以準(zhǔn)確描述網(wǎng)站內(nèi)容和特征的術(shù)語。
8. 鏈接標(biāo)簽要容易閱讀。減少用戶閱讀菜單具體內(nèi)容的時(shí)間，如使用左對(duì)齊的垂直菜單、或?qū)㈥P(guān)鍵詞前置。
9. 對(duì)于大型網(wǎng)站來說，讓用戶通過導(dǎo)航菜單預(yù)覽子級(jí)內(nèi)容。對(duì)于喜歡挖掘網(wǎng)站各層級(jí)內(nèi)容的典型用戶來說，下拉菜單可以讓用戶快速瀏覽、節(jié)省時(shí)間。
10. 為息息相關(guān)的內(nèi)容提供本地導(dǎo)航。如果用戶喜歡對(duì)一些同類商品頻繁對(duì)比、或在某個(gè)場景里完成多個(gè)任務(wù)，可以將這些臨近頁面做成本地導(dǎo)航菜單，這樣用戶就不需要在復(fù)雜的路徑里“上躥下跳”了。
11. 利用視覺的傳達(dá)力。圖像、顏色等元素可以幫助用戶理解菜單選項(xiàng)，但也要確保這些圖形起的是積極作用(至少不能讓操作變得更難)。
導(dǎo)航菜單要易于操作
12. 菜單選項(xiàng)要夠大、方便點(diǎn)擊。如果導(dǎo)航菜單的選項(xiàng)過小或者彼此靠得太近，會(huì)給移動(dòng)用戶造成很大的困擾;大屏網(wǎng)站中導(dǎo)航菜單選項(xiàng)如果也設(shè)計(jì)成這樣，那就會(huì)很難操作。
13. 確保下拉菜單不會(huì)太大或太小。鼠標(biāo)懸停觸發(fā)的下拉菜單呈現(xiàn)時(shí)間太過短暫會(huì)給用戶帶來挫敗感，因?yàn)橛脩暨€沒來得及點(diǎn)擊菜單里的某個(gè)鏈接的時(shí)候，下拉菜單就消 失了。另外，太長的垂直導(dǎo)航菜單也不利于底部選項(xiàng)的點(diǎn)擊，除非滾動(dòng)屏幕。最后，鼠標(biāo)懸停觸發(fā)的下拉菜單不能太寬，否則會(huì)讓用戶誤以為是新頁面、并且好奇為 什么自己還沒點(diǎn)擊就出現(xiàn)了新的“頁面”?
14. 當(dāng)頁面內(nèi)容很長時(shí)，可以考慮懸浮吸頂(或固底)菜單。已瀏覽到頁面底部的用戶要想回到首屏需要一次又一次地回滾鼠標(biāo)(移動(dòng)端則是不斷向上劃動(dòng)屏幕);如果導(dǎo)航可以懸浮吸頂，用戶就可以很方便地進(jìn)行其他菜單選項(xiàng)的切換。這很適合小屏幕場景。
15. 盡可能縮短導(dǎo)航菜單最常用操作的物理距離。下拉菜單內(nèi)容比較多時(shí)，將用戶最常點(diǎn)擊的鏈接放到離鼠標(biāo)懸停的選項(xiàng)最近的地方可以減少鼠標(biāo)移動(dòng)的距離(移動(dòng)端也 類似)。最近一些app中流行的餅狀菜單則將所有菜單選項(xiàng)成圓(有的是半圓)狀圍繞在菜單周圍，這樣每一個(gè)選項(xiàng)鏈接的物理點(diǎn)擊距離都是最短的。
北京傳誠信,行業(yè)領(lǐng)先網(wǎng)站建設(shè)公司,14年專注企業(yè)網(wǎng)站一站式服務(wù),已為眾多企業(yè)公司提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,手機(jī)網(wǎng)站開發(fā),模板建站等服務(wù)。高端定制網(wǎng)站建設(shè)領(lǐng)軍品牌--傳誠信值得信賴！
