作者：KATHRYN WHITENTON ? ?2015-11-29 ? ?發(fā)表于NN/g ? ?譯者：小媛

摘要：移動(dòng)和PC用戶都習(xí)慣于通過(guò)導(dǎo)航菜單探索網(wǎng)站內(nèi)容及特性蛾绎。本文的15個(gè)UX指導(dǎo)原則可以讓你的導(dǎo)航菜單更受用戶青睞枉层。

為用戶導(dǎo)航是每一位網(wǎng)站和app設(shè)計(jì)者的首要職責(zé)砂轻。畢竟用戶一旦迷路揍移，再炫酷的動(dòng)效只损、再有趣的內(nèi)容也都毫無(wú)意義滑肉。即使我們的網(wǎng)站中有搜索功能包各，也不能把搜索框當(dāng)成用戶導(dǎo)航的唯一工具。大多設(shè)計(jì)者已意識(shí)到這一點(diǎn)靶庙，并在自己的網(wǎng)站中設(shè)計(jì)了導(dǎo)航菜單问畅。

定義：導(dǎo)航菜單是網(wǎng)站主要內(nèi)容或特征的列表，通常由一組鏈接或icon組成六荒，并在視覺(jué)樣式上與網(wǎng)站其他內(nèi)容有顯著差異护姆。

導(dǎo)航菜單包含但不限于導(dǎo)航條和漢堡菜單。

導(dǎo)航菜單的重要性已經(jīng)不言而喻掏击，我們平時(shí)遇到的每一個(gè)網(wǎng)站或軟件中都有它的存在卵皂；但并不是所有的導(dǎo)航菜單都設(shè)計(jì)得準(zhǔn)確無(wú)誤。我們也常發(fā)現(xiàn)用戶因?qū)Ш皆O(shè)計(jì)不當(dāng)而感到困惑铐料、難以操作渐裂，或者連導(dǎo)航在哪兒都不知道。

下面的設(shè)計(jì)原則钠惩，可以避免導(dǎo)航菜單出錯(cuò)柒凉。

導(dǎo)航菜單要清晰可見(jiàn)

1. 大屏中的導(dǎo)航菜單不要太小。如果空間足夠篓跛，不要將菜單隱藏膝捞。

2. 把導(dǎo)航菜單放在用戶熟悉的位置。通常用戶會(huì)希望在瀏覽過(guò)的網(wǎng)站或app中的類似位置（譬如網(wǎng)站頂部愧沟、左側(cè)等）中找到他們想要的UI元素蔬咬。

3. 讓菜單鏈接看起來(lái)有互動(dòng)感。如果菜單選項(xiàng)看起來(lái)不可點(diǎn)擊沐寺，用戶未必能認(rèn)出它是導(dǎo)航林艘。如果我們的導(dǎo)航設(shè)計(jì)融入太重的圖形、或太過(guò)追崇扁平化設(shè)計(jì)風(fēng)格混坞，會(huì)使它們看起來(lái)更像是裝飾性圖片或標(biāo)題狐援。

4. 確保導(dǎo)航菜單擁有足夠的視覺(jué)吸引力钢坦。很多導(dǎo)航菜單的周圍會(huì)留有一點(diǎn)空白區(qū)域以從視覺(jué)上突顯它。但當(dāng)網(wǎng)站UI元素比較擁擠時(shí)啥酱，如果導(dǎo)航菜單視覺(jué)比重太弱就會(huì)在各色圖形爹凹、促銷廣告、標(biāo)題里迷失镶殷，不易被用戶識(shí)別禾酱。

5. 菜單選項(xiàng)的顏色要與網(wǎng)站背景色對(duì)比鮮明。令人驚訝的是绘趋，有非常多的設(shè)計(jì)師都忽視了“對(duì)比原則”颤陶。

即便是熟悉以上規(guī)則的設(shè)計(jì)師設(shè)計(jì)出來(lái)的導(dǎo)航菜單也有可能會(huì)被用戶忽視，因?yàn)樗麄兒茈y客觀地評(píng)價(jià)自己的作品——尤其是碰上比較主觀的設(shè)計(jì)標(biāo)準(zhǔn)時(shí)陷遮，比如哪個(gè)UI元素應(yīng)該擁有更明顯的視覺(jué)效果指郁。如果你知道你的導(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)在視覺(jué)上與其他選項(xiàng)是有差異的项秉，這可以幫助用戶明確自己的當(dāng)前所在位置（或者通過(guò)面包屑導(dǎo)航定位）。如果沒(méi)有讓用戶明確所在位置慷彤、導(dǎo)致他們迷路娄蔼，那么就犯了網(wǎng)站設(shè)計(jì)最基本的錯(cuò)誤。諷刺的是用戶不總是通過(guò)首頁(yè)到達(dá)目的頁(yè)底哗，所以導(dǎo)航菜單對(duì)于用戶來(lái)說(shuō)意義重大岁诉。

導(dǎo)航菜單要與用戶任務(wù)協(xié)調(diào)一致

7. 使用易懂的鏈接標(biāo)簽。清楚用戶要找的是什么跋选，使用相似且相關(guān)的類別標(biāo)簽涕癣。要記住導(dǎo)航菜單并不是拿自造詞和行話去忽悠人的。請(qǐng)使用可以準(zhǔn)確描述網(wǎng)站內(nèi)容和特征的術(shù)語(yǔ)前标。

8. 鏈接標(biāo)簽要容易閱讀坠韩。減少用戶閱讀菜單具體內(nèi)容的時(shí)間，如使用左對(duì)齊的垂直菜單炼列、或?qū)㈥P(guān)鍵詞前置只搁。

9. 對(duì)于大型網(wǎng)站來(lái)說(shuō)，讓用戶通過(guò)導(dǎo)航菜單預(yù)覽子級(jí)內(nèi)容俭尖。對(duì)于喜歡挖掘網(wǎng)站各層級(jí)內(nèi)容的典型用戶來(lái)說(shuō)氢惋，下拉菜單可以讓用戶快速瀏覽、節(jié)省時(shí)間。

10. 為息息相關(guān)的內(nèi)容提供本地導(dǎo)航明肮。如果用戶喜歡對(duì)一些同類商品頻繁對(duì)比菱农、或在某個(gè)場(chǎng)景里完成多個(gè)任務(wù)，可以將這些臨近頁(yè)面做成本地導(dǎo)航菜單柿估，這樣用戶就不需要在復(fù)雜的路徑里“上躥下跳”了循未。

11. 利用視覺(jué)的傳達(dá)力。圖像秫舌、顏色等元素可以幫助用戶理解菜單選項(xiàng)的妖，但也要確保這些圖形起的是積極作用（至少不能讓操作變得更難）。

導(dǎo)航菜單要易于操作

12. 菜單選項(xiàng)要夠大足陨、方便點(diǎn)擊嫂粟。如果導(dǎo)航菜單的選項(xiàng)過(guò)小或者彼此靠得太近，會(huì)給移動(dòng)用戶造成很大的困擾墨缘；大屏網(wǎng)站中導(dǎo)航菜單選項(xiàng)如果也設(shè)計(jì)成這樣星虹，那就會(huì)很難操作。

13. 確保下拉菜單不會(huì)太大或太小镊讼。鼠標(biāo)懸停觸發(fā)的下拉菜單呈現(xiàn)時(shí)間太過(guò)短暫會(huì)給用戶帶來(lái)挫敗感宽涌，因?yàn)橛脩暨€沒(méi)來(lái)得及點(diǎn)擊菜單里的某個(gè)鏈接的時(shí)候，下拉菜單就消失了蝶棋。另外卸亮，太長(zhǎng)的垂直導(dǎo)航菜單也不利于底部選項(xiàng)的點(diǎn)擊，除非滾動(dòng)屏幕玩裙。最后兼贸，鼠標(biāo)懸停觸發(fā)的下拉菜單不能太寬，否則會(huì)讓用戶誤以為是新頁(yè)面吃溅、并且好奇為什么自己還沒(méi)點(diǎn)擊就出現(xiàn)了新的“頁(yè)面”溶诞？

14. 當(dāng)頁(yè)面內(nèi)容很長(zhǎng)時(shí)，可以考慮懸浮吸頂（或固底）菜單罕偎。已瀏覽到頁(yè)面底部的用戶要想回到首屏需要一次又一次地回滾鼠標(biāo)（移動(dòng)端則是不斷向上劃動(dòng)屏幕）很澄；如果導(dǎo)航可以懸浮吸頂，用戶就可以很方便地進(jìn)行其他菜單選項(xiàng)的切換颜及。這很適合小屏幕場(chǎ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)擊距離都是最短的肄扎。

用新穎有趣的交互方式去驚艷用戶墨林？

實(shí)際上……答案是“不”赁酝。

炫酷的效果并非我們的首要目標(biāo)。對(duì)于用戶來(lái)說(shuō)旭等，最能打動(dòng)他們的還是網(wǎng)站的精彩內(nèi)容酌呆、以及熟悉且操作簡(jiǎn)單的導(dǎo)航菜單。

當(dāng)然搔耕，有的時(shí)候一些創(chuàng)新型菜單的確可以提升用戶體驗(yàn)（下拉菜單就是一個(gè)例子）隙袁。在某些場(chǎng)景下，由于新技術(shù)的獨(dú)特要求弃榨，這15條原則也未必使用——舉個(gè)例子菩收，第4條 “確保導(dǎo)航菜單擁有足夠的視覺(jué)吸引力” 就不適用于語(yǔ)音識(shí)別。但大多數(shù)情況下鲸睛，這15條都是我們需要考慮的指導(dǎo)原則娜饵，因?yàn)樗鼈儠?huì)大大提高導(dǎo)航菜單的易用性。

譯者簡(jiǎn)介：

小媛

熱衷于用戶體驗(yàn)官辈、交互設(shè)計(jì)和服務(wù)設(shè)計(jì)箱舞，目前從事互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)

若有轉(zhuǎn)載需求，請(qǐng)與我聯(lián)系拳亿；轉(zhuǎn)載時(shí)請(qǐng)標(biāo)明簡(jiǎn)書(shū)出處

原文鏈接：Menu Design: Checklist of 15 UX Guidelines to Help Users