爲用(yòng)戶導航是每一位網站和(hé)app設計者的(de)首要職責。畢竟用(yòng)戶一旦迷路，再炫酷的(de)動效、再有趣的(de)内容也(yě)都毫無意義。即使我們的(de)網站中有搜索功能，也(yě)不能把搜索框當成用(yòng)戶導航的(de)唯一工具。大(dà)多(duō)設計者已意識到這(zhè)一點，并在自己的(de)網站中設計了(le)導航菜單。

定義：導航菜單是網站主要内容或特征的(de)列表，通(tōng)常由一組鏈接或icon組成，并在視覺樣式上與網站其他(tā)内容有顯著差異。

導航菜單包含但不限于導航條和(hé)漢堡菜單。

導航菜單的(de)重要性已經不言而喻，我們平時(shí)遇到的(de)每一個(gè)網站或軟件中都有它的(de)存在；但并不是所有的(de)導航菜單都設計得(de)準确無誤。我們也(yě)常發現用(yòng)戶因導航設計不當而感到困惑、難以操作，或者連導航在哪兒(ér)都不知道。

下(xià)面的(de)設計原則，可(kě)以避免導航菜單出錯。

導航菜單要清晰可(kě)見

1.大(dà)屏中的(de)導航菜單不要太小。如果空間足夠，不要将菜單隐藏。

2.把導航菜單放在用(yòng)戶熟悉的(de)位置。通(tōng)常用(yòng)戶會希望在浏覽過的(de)網站或app中的(de)類似位置（譬如網站頂部、左側等）中找到他(tā)們想要的(de)UI元素。

3.讓菜單鏈接看起來(lái)有互動感。如果菜單選項看起來(lái)不可(kě)點擊，用(yòng)戶未必能認出它是導航。如果我們的(de)導航設計融入太重的(de)圖形、或太過追崇扁平化(huà)設計風格，會使它們看起來(lái)更像是裝飾性圖片或标題。

4.确保導航菜單擁有足夠的(de)視覺吸引力。很多(duō)導航菜單的(de)周圍會留有一點空白區(qū)域以從視覺上突顯它。但當網站UI元素比較擁擠時(shí)，如果導航菜單視覺比重太弱就會在各色圖形、促銷廣告、标題裏迷失，不易被用(yòng)戶識别。

5.菜單選項的(de)顔色要與網站背景色對(duì)比鮮明(míng)。令人(rén)驚訝的(de)是，有非常多(duō)的(de)設計師都忽視了(le)“對(duì)比原則”。

即便是熟悉以上規則的(de)設計師設計出來(lái)的(de)導航菜單也(yě)有可(kě)能會被用(yòng)戶忽視，因爲他(tā)們很難客觀地評價自己的(de)作品——尤其是碰上比較主觀的(de)設計标準時(shí)，比如哪個(gè)UI元素應該擁有更明(míng)顯的(de)視覺效果。如果你知道你的(de)導航菜單在哪兒(ér)，自然能一看看到它，因爲這(zhè)是你設計的(de)。因此，讓用(yòng)戶參與驗證十分(fēn)必要。

告訴用(yòng)戶其當前位置

6.告訴用(yòng)戶當前所處什(shén)麽位置。用(yòng)戶成功導航的(de)一個(gè)最基本的(de)标準是他(tā)自己能發現：“我在哪兒(ér)？”通(tōng)常被選中的(de)菜單選項在視覺上與其他(tā)選項是有差異的(de)，這(zhè)可(kě)以幫助用(yòng)戶明(míng)确自己的(de)當前所在位置（或者通(tōng)過面包屑導航定位）。如果沒有讓用(yòng)戶明(míng)确所在位置、導緻他(tā)們迷路，那麽就犯了(le)網站設計最基本的(de)錯誤。諷刺的(de)是用(yòng)戶不總是通(tōng)過首頁到達目的(de)頁，所以導航菜單對(duì)于用(yòng)戶來(lái)說意義重大(dà)。

導航菜單要與用(yòng)戶任務協調一緻

7.使用(yòng)易懂(dǒng)的(de)鏈接标簽。清楚用(yòng)戶要找的(de)是什(shén)麽，使用(yòng)相似且相關的(de)類别标簽。要記住導航菜單并不是拿自造詞和(hé)行話(huà)去忽悠人(rén)的(de)。請使用(yòng)可(kě)以準确描述網站内容和(hé)特征的(de)術語。

8.鏈接标簽要容易閱讀。減少用(yòng)戶閱讀菜單具體内容的(de)時(shí)間，如使用(yòng)左對(duì)齊的(de)垂直菜單、或将關鍵詞前置。

9.對(duì)于大(dà)型網站來(lái)說，讓用(yòng)戶通(tōng)過導航菜單預覽子級内容。對(duì)于喜歡挖掘網站各層級内容的(de)典型用(yòng)戶來(lái)說，下(xià)拉菜單可(kě)以讓用(yòng)戶快(kuài)速浏覽、節省時(shí)間。

10.爲息息相關的(de)内容提供本地導航。如果用(yòng)戶喜歡對(duì)一些同類商品頻(pín)繁對(duì)比、或在某個(gè)場(chǎng)景裏完成多(duō)個(gè)任務，可(kě)以将這(zhè)些臨近頁面做(zuò)成本地導航菜單，這(zhè)樣用(yòng)戶就不需要在複雜(zá)的(de)路徑裏“上蹿下(xià)跳”了(le)。

11.利用(yòng)視覺的(de)傳達力。圖像、顔色等元素可(kě)以幫助用(yòng)戶理(lǐ)解菜單選項，但也(yě)要确保這(zhè)些圖形起的(de)是積極作用(yòng)（至少不能讓操作變得(de)更難）。

導航菜單要易于操作

12.菜單選項要夠大(dà)、方便點擊。如果導航菜單的(de)選項過小或者彼此靠得(de)太近，會給移動用(yòng)戶造成很大(dà)的(de)困擾；大(dà)屏網站中導航菜單選項如果也(yě)設計成這(zhè)樣，那就會很難操作。

13.确保下(xià)拉菜單不會太大(dà)或太小。鼠标懸停觸發的(de)下(xià)拉菜單呈現時(shí)間太過短暫會給用(yòng)戶帶來(lái)挫敗感，因爲用(yòng)戶還(hái)沒來(lái)得(de)及點擊菜單裏的(de)某個(gè)鏈接的(de)時(shí)候，下(xià)拉菜單就消失了(le)。另外，太長(cháng)的(de)垂直導航菜單也(yě)不利于底部選項的(de)點擊，除非滾動屏幕。最後，鼠标懸停觸發的(de)下(xià)拉菜單不能太寬，否則會讓用(yòng)戶誤以爲是新頁面、并且好奇爲什(shén)麽自己還(hái)沒點擊就出現了(le)新的(de)“頁面”？

14.當頁面内容很長(cháng)時(shí)，可(kě)以考慮懸浮吸頂（或固底）菜單。已浏覽到頁面底部的(de)用(yòng)戶要想回到首屏需要一次又一次地回滾鼠标（移動端則是不斷向上劃動屏幕）；如果導航可(kě)以懸浮吸頂，用(yòng)戶就可(kě)以很方便地進行其他(tā)菜單選項的(de)切換。這(zhè)很适合小屏幕場(chǎng)景。

15.盡可(kě)能縮短導航菜單最常用(yòng)操作的(de)物(wù)理(lǐ)距離。下(xià)拉菜單内容比較多(duō)時(shí)，将用(yòng)戶最常點擊的(de)鏈接放到離鼠标懸停的(de)選項最近的(de)地方可(kě)以減少鼠标移動的(de)距離（移動端也(yě)類似）。最近一些app中流行的(de)餅狀菜單則将所有菜單選項成圓（有的(de)是半圓）狀圍繞在菜單周圍，這(zhè)樣每一個(gè)選項鏈接的(de)物(wù)理(lǐ)點擊距離都是最短的(de)。

用(yòng)新穎有趣的(de)交互方式去驚豔用(yòng)戶？

實際上……答(dá)案是“不”。

炫酷的(de)效果并非我們的(de)首要目标。對(duì)于用(yòng)戶來(lái)說，最能打動他(tā)們的(de)還(hái)是網站的(de)精彩内容、以及熟悉且操作簡單的(de)導航菜單。

當然，有的(de)時(shí)候一些創新型菜單的(de)确可(kě)以提升用(yòng)戶體驗（下(xià)拉菜單就是一個(gè)例子）。在某些場(chǎng)景下(xià)，由于新技術的(de)獨特要求，這(zhè)15條原則也(yě)未必使用(yòng)——舉個(gè)例子，第4條“确保導航菜單擁有足夠的(de)視覺吸引力”就不适用(yòng)于語音(yīn)識别。但大(dà)多(duō)數情況下(xià)，這(zhè)15條都是我們需要考慮的(de)指導原則，因爲它們會大(dà)大(dà)提高(gāo)導航菜單的(de)易用(yòng)性。