導覽列與選單設計：從 UX 研究看漢堡選單、選單命名與手機導覽

訪客進到網站，第一件事通常不是讀內容，而是在找路：「這家公司有沒有我要的服務？價格在哪？怎麼聯絡？」導覽列設計就是網站的路標。路標寫得模糊、藏得太深，訪客不會耐心摸索，而是直接離開。

很多官網的導覽問題，不是設計得不夠漂亮，而是太「有創意」：選單名稱取得很文青、桌機版也用漢堡圖示、下拉選單一碰就消失。這篇文章以 Nielsen Norman Group（NN/g）的使用者研究為基礎，說明導覽列該怎麼規劃、怎麼命名、手機與桌機要怎麼取捨。

導覽列的工作：回答三個問題

不管網站大小，好的導覽都在幫使用者回答三個問題：

1. 我在哪裡？ 目前所在的頁面要在選單中被標示出來。
2. 這裡有什麼？ 選單要讓人一眼看懂網站提供哪些內容與服務。
3. 我可以去哪裡？ 下一步的路徑要清楚、好點擊。

NN/g 在〈Menu-Design Checklist〉中特別指出，沒有標示目前位置是非常常見的錯誤。很多人以為訪客都從首頁進來，但實際上透過 Google 搜尋、廣告或 LINE 分享連結進站的人，往往直接落在內頁。他們沒有走過你設計的路線，更需要選單告訴他們「你現在在『服務項目 › 商業空間設計』」。

漢堡選單：研究怎麼說？

漢堡選單（三條橫線的圖示）是手機上最常見的導覽方式，但它有一個本質問題：看不見的東西，就很難被想起來。

NN/g 曾以 179 位受試者、6 個真實網站，比較「隱藏式導覽」（漢堡選單）、「可見式導覽」（選單直接排在頁面上）與「混合式」（部分可見、其餘收起來）的差異。幾個主要發現：

NN/g 據此給出的建議很具體：

• 桌機：不要用隱藏式導覽，主要選單直接橫排在頁首或放在左側。
• 手機：如果第一層只有 4 個以內的項目，就直接顯示出來；超過 4 個，可以把部分收進選單，同時在頁面內容中放連到重點頁面的連結。

這對台灣中小企業官網很有參考價值。多數官網第一層選單是「關於我們、服務項目、案例作品、最新消息、聯絡我們」五項，手機上可以把最關鍵的一兩項（例如「服務」與「聯絡」）做成可見的按鈕，其餘收進漢堡選單，就是混合式導覽。

選單命名：清楚永遠勝過有創意

選單文字是導覽中最被低估的部分。NN/g 的建議是使用清楚、具體、大家熟悉的標籤，避免行話、自創詞與太抽象的分類。

常見的反例與改法：

另一個原則是把關鍵字放在標籤開頭，因為人掃讀選單時通常只看前幾個字。例如「冷氣安裝與保養」比「專業團隊為您提供冷氣安裝」好掃讀得多。

選單名稱用的詞，最好就是客人搜尋時會用的詞。這也連結到 SEO：選單是全站最重要的內部連結，清楚的錨點文字能幫助搜尋引擎理解頁面主題，詳見內部連結與主題群集策略。

下拉選單與大型選單（Mega Menu）

服務項目一多，就需要第二層選單。以下幾個 NN/g 的原則，可以避免最常見的挫折：

用點擊展開，不要只靠滑鼠懸停

只靠 hover 展開的選單有兩個問題：觸控螢幕和鍵盤使用者根本無法「滑過去」；滑鼠使用者則常常因為移動路線稍微偏掉，選單就關起來。NN/g 建議以點擊（click）展開子選單。

有子選單的項目要加箭頭

在有下拉內容的選單項目旁加上小箭頭（caret），讓使用者知道「點這個會展開」，而不是直接跳頁。

避免多層連續展開

第一層展開第二層、第二層再往旁邊展開第三層，這種多層級聯選單很容易滑錯。NN/g 建議超過兩層時，改用大型選單（mega menu）一次展開兩到三層，或是把使用者導到一個分類頁再往下選。

長頁面可以考慮固定式導覽

頁面很長時（例如服務說明頁、長篇部落格），讓導覽列在捲動時固定在上方，使用者就不必一路滑回頂端。手機上尤其明顯，但要注意固定列不要佔太多畫面高度。

位置要符合預期：別讓使用者重新學習

NN/g 提醒，選單應該放在使用者預期的位置：網站的主要導覽在頁首，區域導覽（同一分類下的相鄰頁面）在桌機版左側，登入、語言切換這類工具型連結常放在主選單上方，徵才、隱私權政策、投資人資訊等次要連結則放在頁尾。他們也建議避免為了新奇而設計的特殊導覽方式，例如畫面全螢幕滑動切換、需要拖曳才能看到選單；這些效果在提案會議上很吸睛，但使用者多半更喜歡熟悉的選單。

頁尾導覽同樣重要。對服務型企業而言，頁尾是放「營業時間、地址、電話、LINE、各服務頁連結」的好位置，很多訪客滑到底就是在找這些資訊。

導覽設計從網站架構開始

導覽列只是網站架構的「表面」。如果架構本身混亂——同一種服務散在三個分類、頁面名稱前後不一——選單再怎麼調整都不會好用。建議在動手設計之前，先完成官網規劃與網站地圖：列出所有頁面、依使用者的思考方式分組，再決定哪些放第一層。

手機版的導覽取捨，則可以搭配行動優先與 RWD 響應式設計一起規劃，避免桌機版直接套用手機版的漢堡選單。

官網導覽檢查清單

• 桌機版主要選單是否直接顯示，而不是藏在漢堡圖示裡？
• 手機版最重要的 1–2 個項目（如服務、聯絡）是否可直接看到？
• 目前所在頁面是否在選單中有明顯標示？
• 每個選單名稱，陌生人能否猜到點進去是什麼？
• 有子選單的項目是否有箭頭提示、以點擊展開？
• 選單層級是否控制在兩層以內，或改用大型選單？
• 選單文字與背景對比是否足夠、點擊區域是否夠大？
• 頁尾是否有聯絡方式與主要頁面連結？

常見問題

選單項目放幾個最適合？

沒有一個萬用數字。NN/g 對手機的建議是第一層 4 個以內可以全部顯示；桌機則以能在一行清楚排開、不需換行為原則。與其追求數字，不如問每個項目是否真的是訪客常找的。

桌機版一定不能用漢堡選單嗎？

NN/g 的研究顯示，桌機上隱藏式導覽的使用率與任務效率都明顯較差，因此建議桌機版直接顯示主要選單。例外是以視覺展示為主、頁面極少的作品集網站，但企業官網通常不屬於這類。

選單可以用圖示取代文字嗎？

不建議只用圖示。除了少數通用圖示（如搜尋、購物車），大部分圖示意義並不明確。NN/g 建議圖示用來輔助文字標籤，而不是取代它。

導覽列對 SEO 有影響嗎？

有。主選單是全站每一頁都會出現的內部連結，會影響搜尋引擎理解網站的重點頁面。用具體、包含服務名稱的文字當選單標籤，同時對使用者與搜尋引擎都更友善。

結語：最好的導覽，是使用者感覺不到它存在

使用者不會稱讚選單設計得好，但會在找不到東西時立刻離開。把主要選單放在看得見的地方、用客人聽得懂的詞命名、標示目前位置，這三件事做好，大多數官網的導覽問題就解決了一大半。

如果你想檢查現有官網的導覽與架構，網軍行銷的網站設計服務可以從網站地圖開始，幫你重新規劃讓訪客找得到、也讓 Google 看得懂的導覽。更完整的官網規劃流程，可參考企業官網設計完整指南。

參考資料

• Nielsen Norman Group，Menu-Design Checklist: 17 UX Guidelines：https://www.nngroup.com/articles/menu-design/
• Nielsen Norman Group，Hamburger Menus and Hidden Navigation Hurt UX Metrics：https://www.nngroup.com/articles/hamburger-menus/
• Nielsen Norman Group，Mobile First Is NOT Mobile Only：https://www.nngroup.com/articles/mobile-first-not-mobile-only/
• Google Search Central，Mobile-first indexing best practices：https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing