導航選單的重要性已經不言而喻,我們平時遇到的每一個網站或站群軟體中都有它的存在;但並不是所有的導航選單都設計得準確無誤。我們也常發現多使用者因導航設計不當而感到困惑、難以操作,或者連導航在哪兒都不知道。下面是網站導航設計的幾個要點.

1. 導航設計要大氣

大屏中的導航選單不要太小. 如果空間足夠,不要將選單隱藏。

2. 導航操作要簡單方便

通常多使用者會希望在瀏覽過的網站或 app 中的類似位置(譬如網站頂部、左側等)中找到他們想要的 UI 元素。

3. 要有互動感

如果選單選項看起來不可點選,多使用者未必能認出它是導航。如果我們的導航設計融入太重的圖形、或太過追崇扁平化設計風格,會使它們看起來更像是裝飾性圖片或標題。

4. 有視覺衝擊力

很多導航選單的周圍會留有一點空白區域以從視覺上突顯它。但當網站 UI 元素比較擁擠時,如果導航選單視覺比重太弱就會在各色圖形、促銷廣告、標題裡迷失,不易被多使用者識別。

5. 導航選單與背景要對比鮮明

即便是熟悉以上規則的設計師設計出來的導航選單也有可能會被多使用者忽視,因為他們很難客觀地評價自己的作品——尤其是碰上比較主觀的設計標準時,比如哪個 UI 元素應該擁有更明顯的視覺效果。如果你知道你的導航選單在哪兒,自然能一看看到它,因為這是你設計的。因此,讓多使用者參與驗證十分必要。

6. 位置導航

多使用者成功導航的一個最基本的標準是他自己能發現:“我在哪兒?” 通常被選中的選單選項在視覺上與其他選項是有差異的,這可以幫助多使用者明確自己的當前所在位置(或者透過麵包屑導航定位)。如果沒有讓多使用者明確所在位置、導致他們迷路,那麼就犯了 WordPress 網站設計最基本的錯誤。諷刺的是多使用者不總是透過首頁到達目的頁,所以導航選單對於多使用者來說意義重大。

7. 連結標籤要清晰

清楚多使用者要找的是什麼,使用相似且相關的類別標籤。要記住導航選單並不是拿自造詞和行話去忽悠人的。請使用可以準確描述 WordPress 網站內容和特徵的術語。

8. 連結標籤要易讀

減少多使用者閱讀選單具體內容的時間,如使用左對齊的垂直選單、或將關鍵詞前置。

9. 對於二級選單要易於查詢

對於大型網站來說,讓多使用者透過導航選單預覽子級內容。對於喜歡挖掘網站各層級內容的典型多使用者來說,下拉選單可以讓多使用者快速瀏覽、節省時間。

10. 為內容提供本地導航

如果多使用者喜歡對一些同類商品頻繁對比、或在某個場景裡完成多個任務,可以將這些臨近頁面做成本地導航選單,這樣多使用者就不需要在複雜的路徑裡 “上躥下跳” 了。

11. 傳達網站意圖

利用視覺的傳達力。影象、顏色等元素可以幫助多使用者理解選單選項,但也要確保這些圖形起的是積極作用(至少不能讓操作變得更難)。

12. 選單選項要夠大、方便點選

如果導航選單的選項過小或者彼此靠得太近,會給移動多使用者造成很大的困擾;大屏網站中導航選單選項如果也設計成這樣,那就會很難操作。

13. 確保下拉選單不會太大或太小

滑鼠懸停觸發的下拉選單呈現時間太過短暫會給多使用者帶來挫敗感,因為多使用者還沒來得及點選選單裡的某個連結的時候,下拉選單就消失了。另外,太長的垂直導航選單也不利於底部選項的點選,除非滾動螢幕。最後,滑鼠懸停觸發的下拉選單不能太寬,否則會讓多使用者誤以為是新頁面、並且好奇為什麼自己還沒點選就出現了新的 “頁面”?

14. 懸浮吸頂(或固底)選單的使用

當頁面內容很長時,可以考慮懸浮吸頂(或固底)選單。已瀏覽到頁面底部的多使用者要想回到首屏需要一次又一次地回滾滑鼠(移動端則是不斷向上划動螢幕);如果導航可以懸浮吸頂,多使用者就可以很方便地進行其他選單選項的切換。這很適合小螢幕場景。

15. 縮短導航選單最常用操作的物理距離

下拉選單內容比較多時,將多使用者最常點選的連結放到離滑鼠懸停的選項最近的地方可以減少滑鼠移動的距離(移動端也類似)。最近一些 app 中流行的餅狀選單則將所有選單選項成圓(有的是半圓)狀圍繞在選單週圍,這樣每一個選項鍊接的物理點選距離都是最短的。