摘要：移動和PC使用者都習慣於通過導航選單探索網站內容及特性。本文的15個UX指導原則可以讓你的導航選單更受使用者青睞。
為使用者導航是每一位網站和app設計者的首要職責。畢竟使用者一旦迷路，再炫酷的動效、再有趣的內容也都毫無意義。即使我們的網站中有搜尋功能，也不能把搜尋框當成使用者導航的唯一工具。大多設計者已意識到這一點，並在自己的網站中設計了導航選單。
定義：導航選單是網站主要內容或特徵的列表，通常由一組連結或icon組成，並在視覺樣式上與網站其他內容有顯著差異。
導航選單包含但不限於導航條和漢堡選單。
導航選單的重要性已經不言而喻，我們平時遇到的每一個網站或軟體中都有它的存在；但並不是所有的導航選單都設計得準確無誤。我們也常發現使用者因導航設計不當而感到困惑、難以操作，或者連導航在哪兒都不知道。
下面的設計原則，可以避免導航選單出錯。
導航選單要清晰可見
1. 大屏中的導航選單不要太小。如果空間足夠，不要將選單隱藏。
2. 把導航選單放在使用者熟悉的位置。通常使用者會希望在瀏覽過的網站或app中的類似位置（譬如網站頂部、左側等）中找到他們想要的UI元素。
3. 讓選單連結看起來有互動感。如果選單選項看起來不可點選，使用者未必能認出它是導航。如果我們的導航設計融入太重的圖形、或太過追崇扁平化設計風格，會使它們看起來更像是裝飾性圖片或標題。
4. 確保導航選單擁有足夠的視覺吸引力。很多導航選單的周圍會留有一點空白區域以從視覺上突顯它。但當網站UI元素比較擁擠時，如果導航選單視覺比重太弱就會在各色圖形、促銷廣告、標題裡迷失，不易被使用者識別。
5. 選單選項的顏色要與網站背景色對比鮮明。令人驚訝的是，有非常多的設計師都忽視了“對比原則”。
即便是熟悉以上規則的設計師設計出來的導航選單也有可能會被使用者忽視，因為他們很難客觀地評價自己的作品——尤其是碰上比較主觀的設計標準時，比如哪個UI元素應該擁有更明顯的視覺效果。如果你知道你的導航選單在哪兒，自然能一看看到它，因為這是你設計的。因此，讓使用者參與驗證十分必要。
告訴使用者其當前位置
6. 告訴使用者當前所處什麼位置。使用者成功導航的一個最基本的標準是他自己能發現：“我在哪兒？” 通常被選中的選單選項在視覺上與其他選項是有差異的，這可以幫助使用者明確自己的當前所在位置（或者通過麵包屑導航定位）。如果沒有讓使用者明確所在位置、導致他們迷路，那麼就犯了網站設計最基本的錯誤。諷刺的是使用者不總是通過首頁到達目的頁，所以導航選單對於使用者來說意義重大。
導航選單要與使用者任務協調一致
7. 使用易懂的連結標籤。清楚使用者要找的是什麼，使用相似且相關的類別標籤。要記住導航選單並不是拿自造詞和行話去忽悠人的。請使用可以準確描述網站內容和特徵的術語。
8. 連結標籤要容易閱讀。減少使用者閱讀選單具體內容的時間，如使用左對齊的垂直選單、或將關鍵詞前置。
9. 對於大型網站來說，讓使用者通過導航選單預覽子級內容。對於喜歡挖掘網站各層級內容的典型使用者來說，下拉選單可以讓使用者快速瀏覽、節省時間。
10. 為息息相關的內容提供本地導航。如果使用者喜歡對一些同類商品頻繁對比、或在某個場景裡完成多個任務，可以將這些臨近頁面做成本地導航選單，這樣使用者就不需要在複雜的路徑裡“上躥下跳”了。
11. 利用視覺的傳達力。影像、顏色等元素可以幫助使用者理解選單選項，但也要確保這些圖形起的是積極作用（至少不能讓操作變得更難）。
導航選單要易於操作
12. 選單選項要夠大、方便點選。如果導航選單的選項過小或者彼此靠得太近，會給移動使用者造成很大的困擾；大屏網站中導航選單選項如果也設計成這樣，那就會很難操作。
13. 確保下拉選單不會太大或太小。滑鼠懸停觸發的下拉選單呈現時間太過短暫會給使用者帶來挫敗感，因為使用者還沒來得及點選選單裡的某個連結的時候，下拉選單就消失了。另外，太長的垂直導航選單也不利於底部選項的點選，除非滾動螢幕。最後，滑鼠懸停觸發的下拉選單不能太寬，否則會讓使用者誤以為是新頁面、並且好奇為什麼自己還沒點選就出現了新的“頁面”？
14. 當頁面內容很長時，可以考慮懸浮吸頂（或固底）選單。已瀏覽到頁面底部的使用者要想回到首屏需要一次又一次地回滾滑鼠（移動端則是不斷向上划動螢幕）；如果導航可以懸浮吸頂，使用者就可以很方便地進行其他選單選項的切換。這很適合小螢幕場景。
15. 儘可能縮短導航選單最常用操作的物理距離。下拉選單內容比較多時，將使用者最常點選的連結放到離滑鼠懸停的選項最近的地方可以減少滑鼠移動的距離（移動端也類似）。最近一些app中流行的餅狀選單則將所有選單選項成圓（有的是半圓）狀圍繞在選單週圍，這樣每一個選項鍊接的物理點選距離都是最短的。
用新穎有趣的互動方式去驚豔使用者？
實際上……答案是“不”。
炫酷的效果並非我們的首要目標。對於使用者來說，最能打動他們的還是網站的精彩內容、以及熟悉且操作簡單的導航選單。
當然，有的時候一些創新型選單的確可以提升使用者體驗（下拉選單就是一個例子）。在某些場景下，由於新技術的獨特要求，這15條原則也未必使用——舉個例子，第4條 “確保導航選單擁有足夠的視覺吸引力” 就不適用於語音識別。但大多數情況下，這15條都是我們需要考慮的指導原則，因為它們會大大提高導航選單的易用性。
譯者簡介：
小媛
Neuro-cognitive Linguistics碩士，熱衷於使用者體驗、互動設計和服務設計，目前從事網際網路產品設計