網站設計導覽列怎麼做？從選單架構、UX 原則到轉換檢查清單

網站導覽列是什麼？為什麼它是網站設計的 UX 核心

網站導覽列是網站設計中負責「帶路」的介面，通常位在 Header，包含 Logo、主選單、輔助入口與 CTA。好的導覽列設計能讓使用者立刻知道自己在哪裡、可以去哪裡、下一步該做什麼。

導覽列在網站中的三個任務

• 定位：讓使用者知道目前站在網站架構中的哪一層，例如首頁、服務頁、商品分類或文章分類。
• 引導：把使用者帶到最重要的頁面，例如服務介紹、案例、FAQ、聯絡我們、購物車或會員登入。
• 轉換：在適當位置提供詢價、預約、加入購物車、電話、LINE 等下一步入口。

好導覽列會降低使用者找資料的成本

我看過不少企業網站，首頁視覺做得很完整，導覽列卻像公司組織表，使用者要先猜「解決方案」裡面是不是服務，「資源中心」裡面是不是文章。導覽列命名越需要猜，使用者越容易離開。

設計導覽列前，先釐清網站目標與使用者任務

導覽列不該從「公司有哪些頁面」開始排，而要從「使用者最常想完成哪些任務」開始。把任務重要度、商業價值與點擊期待放在一起看，主選單才不會變成雜亂的頁面清單。

先列出使用者最常做的任務

中小企業網站常見任務包括看服務、比較方案、確認案例、查價格邏輯、找聯絡方式、預約諮詢。電商網站則常見商品分類、活動頁、購物車、會員登入、客服查詢。任務越靠近成交或信任建立，越值得放在顯眼位置。

區分品牌認識、服務比較、詢價與支援

不是所有入口都要放在主選單。品牌介紹可以放在輔助選單或頁尾，服務比較與案例通常應進主選單，售後支援則視使用頻率安排在 Header、頁尾導覽或站內搜尋旁。這種分工能避免 Header 被塞滿。

導覽決策矩陣：任務重要度 × 商業價值 × 點擊期待

頁面或入口	任務重要度	商業價值	點擊期待	建議位置
服務項目	高	高	高	主選單
案例	中高	高	中高	主選單或下拉選單
聯絡我們	高	高	高	主要 CTA
公司沿革	中	中	低	關於我們或頁尾
隱私權政策	低	必要	低	頁尾導覽

導覽列資訊架構：選單項目、層級與命名規則

導覽列資訊架構的核心，是用少量、清楚、可預期的選單項目，讓使用者快速理解網站有哪些內容。主選單建議保留 5 到 7 個核心項目，層級越深越要克制。

主選單建議控制在 5 到 7 個核心項目

5 到 7 個不是硬性法律，而是實務上較容易掃讀的範圍。超過這個數量時，使用者會開始逐字判斷，選單就失去快速導覽的功能。多出來的頁面可改放下拉選單、頁尾導覽或站內搜尋。

用使用者看得懂的名稱，不用公司內部術語

「解決方案」不一定錯，但如果裡面其實是服務項目，就直接叫「服務項目」通常更好。「成功故事」如果是案例頁，可以命名為「客戶案例」。導覽列不是展示品牌文案的地方，先讓人看懂比較重要。

避免三層以上選單與相似分類

三層以上選單常讓使用者在桌機版難以移動滑鼠，在手機版更容易迷路。相似分類也會造成猶豫，例如「服務」、「方案」、「解決方案」同時存在，使用者會不知道差異。分類不能只對內部團隊合理，也要對第一次來的人合理。

服務型網站、電商網站、內容型網站的常見選單架構

不同網站的導覽列不該套同一個模板。服務型網站要降低詢價前的不確定感，電商網站要縮短找商品與結帳路徑，內容型網站則要讓讀者快速進入主題分類。

服務型網站：服務、案例、流程、FAQ、聯絡

服務型網站的主選單可安排「服務項目、客戶案例、服務流程、常見問題、聯絡我們」。如果流程很短，可以併入服務頁；如果 FAQ 能降低詢價阻力，放進主選單會比藏在頁尾更有效。

電商網站：商品分類、活動、購物車、會員、客服

電商導覽要優先處理商品分類、活動入口、購物車、會員登入與客服。商品分類太多時，不宜全部攤在 Header，可用 Mega Menu 或分類頁承接。更完整的電商架構可參考 電商網站規劃指南。

內容型網站：主題分類、最新文章、熱門內容、訂閱

內容型網站的導覽列要幫讀者理解主題範圍。常見入口包含主題分類、最新文章、熱門內容、關於作者與訂閱。若文章量大，站內搜尋會比把所有分類塞進主選單更實用。

桌機版導覽列 UX 原則：位置、排序、CTA 與互動狀態

桌機版導覽列要穩定、清楚、可操作。Logo、主選單、輔助選單與主要 CTA 的排序應符合使用者掃讀習慣，Hover、Active、Focus 狀態也要讓人知道目前可點、已到達或正在操作哪個項目。

Logo、主選單、輔助選單與主要 CTA 的排序

常見排序是左側 Logo，中間主選單，右側放搜尋、會員、語言、購物車或主要 CTA。B2B 與服務型網站可把「聯絡我們」或「預約諮詢」放在右側；電商網站則要讓購物車與會員登入容易辨識。

固定式導覽列適合誰，不適合誰

固定式導覽列適合長頁面、內容型網站、Landing Page 或需要頻繁切換分類的網站。若 Header 很高、選單很多，固定在上方反而會壓縮閱讀區域。做 Landing Page 時，可搭配 Landing Page 設計 的段落跳轉邏輯調整 CTA。

目前頁面狀態要清楚標示

使用者點進「服務項目」後，主選單應顯示目前所在狀態。Active 樣式可以用底線、粗體、背景、圖示或文字狀態搭配，不要讓使用者只能靠網址猜自己在哪。這是很小的細節，但會明顯降低迷路感。

Hover、Active、Focus 狀態不能只靠顏色

Hover 可提示滑鼠移入，Active 可提示目前頁面，Focus 則服務鍵盤操作與可及性。只用顏色變化時，部分使用者可能看不出差異。比較穩的做法是顏色搭配底線、外框、背景區塊或文字粗細。

手機版導覽列設計：RWD、漢堡選單與拇指操作

手機版導覽列不是把桌機選單縮小，而是重新安排使用者最常用的入口。RWD、漢堡選單、底部導覽、LINE、電話、地圖與預約按鈕，都要符合單手操作與快速行動的情境。

手機版導覽不是桌機版縮小

桌機版使用者可以慢慢看選單，手機版使用者常在通勤、店門口、聊天視窗或搜尋結果頁切進網站。這時候「電話」、「LINE」、「地圖」、「預約」可能比公司介紹更重要。手機版導覽要重新排序，不是照搬桌機版。

漢堡選單、頂部選單、底部導覽的適用情境

導覽模式	適合情境	使用提醒
漢堡選單	頁面較多、主選單需要收合	開啟後要有清楚關閉按鈕與返回上一層
頂部簡化選單	單頁網站、活動頁、入口少的品牌頁	文字要短，避免擠壓
底部導覽	高頻操作網站，例如會員、購物車、分類、客服	項目要少，通常保留最常用入口

點擊區域、關閉機制、返回上一層要清楚

手機版選單最常見的問題，是看得到卻不好點。文字太小、項目太密、關閉按鈕不明顯、下拉後回不去上一層，都會造成挫折。點擊區域要夠大，選單展開後也要能快速關閉。

台灣服務型網站常見入口：LINE、電話、地圖、預約

台灣使用者在手機上很常直接打電話、加 LINE、開地圖或預約。診所、餐飲、補習班、在地服務與顧問業，都應檢查這些入口是否在手機版容易找到。放在漢堡選單最底部，通常不如固定在明顯位置有效。

Mega Menu、下拉選單與站內搜尋該怎麼用

下拉選單、Mega Menu 與站內搜尋不是裝飾，而是處理頁面量、品類量與搜尋需求的導覽工具。當主選單放不下重要分類時，應依資訊複雜度選擇模式，不應把所有頁面硬塞進 Header。

何時需要下拉選單

當某個主選單底下有 3 到 6 個明確子項目時，可以使用下拉選單，例如「服務項目」底下放網站設計、SEO、內容行銷、廣告代操。若子項目彼此差異不明顯，先整理分類，比直接加下拉更重要。

Mega Menu 適合多品類、多服務、多地區網站

Mega Menu 適合品類多、服務線多、地區頁多的網站，例如大型電商、教育平台、SaaS 文件中心或多據點服務業。它的價值在於讓分類一次展開並分組，而不是把整個網站地圖搬到畫面上。

站內搜尋適合商品量大或內容量大的網站

商品很多、文章很多、文件很多時，站內搜尋會比深層選單有效。搜尋框應放在使用者期待的位置，結果頁也要能顯示分類、標題與摘要。若站內搜尋只回傳一堆不相關結果，反而會傷害信任。

防止選單變成內容垃圾桶的判斷規則

• 低頻頁面優先放頁尾，不急著進主選單。
• 法務、隱私、條款類頁面通常不放 Header。
• 內部部門名稱不要直接變成選單名稱。
• 短期活動可用 Banner 或活動頁，不一定要進主選單。
• 無法用一句話說清楚用途的頁面，先重整內容定位。

轉換導向導覽：把 CTA、信任訊號與使用者旅程放對位置

轉換導向導覽的重點，是讓使用者在準備好時看見下一步。CTA、案例、評價、FAQ、聯絡、購物車與會員入口要配合旅程階段，不是把 Header 變成一排按鈕。

導覽列 CTA 不等於塞滿按鈕

導覽列通常只需要一個最主要 CTA，例如「聯絡我們」、「預約諮詢」、「立即詢價」或「前往購物車」。如果同時放三個同樣醒目的按鈕，使用者反而要思考先點哪個。CTA 越克制，選擇越清楚。

不同使用者旅程應該放不同入口

剛認識品牌的人需要服務、案例、FAQ；正在比較的人需要價格邏輯、流程、評價；準備行動的人需要聯絡、預約、購物車。導覽列要讓不同階段的人都有路可走，但不能讓所有入口都搶同一個位置。

案例、評價、FAQ、關於我們何時進主選單

如果案例能直接證明專業，放主選單合理；如果評價只是少量補充，可放在服務頁中。FAQ 若能減少重複詢問，值得提高層級。關於我們通常適合放主選單或頁尾，取決於品牌信任是否是成交關鍵。

電商、服務業、B2B 的轉換導覽差異

網站類型	主要轉換	導覽列優先入口
電商網站	瀏覽商品、加入購物車、結帳	商品分類、活動、搜尋、購物車、會員
服務業網站	電話、LINE、預約、到店	服務項目、地圖、電話、LINE、預約
B2B 網站	理解方案、建立信任、留下需求	解決方案、案例、資源、FAQ、聯絡我們

導覽列 SEO 與可檢索性：內部連結、錨點文字與爬蟲友善

導覽列會影響 SEO，因為它提供重要頁面的內部連結、錨點文字與網站架構訊號。對使用者清楚的選單，通常也更容易讓搜尋引擎理解頁面關係。

主選單會影響重要頁面的內部連結權重

放在主選單的頁面通常會從多數頁面取得內部連結，因此應留給真正重要的服務、分類或轉換頁。把大量低價值頁面放進 Header，會分散網站架構訊號，也讓使用者更難判斷重點。

避免 JavaScript 讓選單內容難以讀取

前端可以使用 JavaScript 做互動，但選單連結本身應盡量保持可讀、可點、可被搜尋系統理解。若選單要等互動後才動態產生，或連結藏在不穩定元件中，可能影響爬蟲讀取與使用者操作。

主選單、麵包屑、頁尾導覽的分工

主選單負責高優先入口，麵包屑負責顯示頁面層級與返回路徑，頁尾導覽負責補足低頻但必要的頁面。這三者分工清楚時，網站架構會比只靠 Header 更穩。

讓頁面關係清楚，提升 AI 摘要與片段理解機會

清楚的導覽錨點文字、分類頁、麵包屑與內部連結，有助於搜尋系統理解頁面之間的主從關係。對 AI 摘要或搜尋片段來說，「服務項目」比「探索更多」更有描述性。

導覽列常見錯誤與避雷清單

導覽列最常見的錯誤，是選單太多、命名太抽象、層級太深、手機版 CTA 難找，以及互動狀態不清楚。這些問題會讓使用者迷路、跳出，甚至讓 SEO 訊號變得分散。

選單太多，使用者反而不知道先看哪裡

影響：使用者需要花更多時間判斷，重要頁面被淹沒。修正方向：把主選單縮回核心入口，低頻頁面放到頁尾，相關頁面用分類頁或下拉選單承接。

選單名稱太抽象，無法預測點進去會看到什麼

影響：使用者不敢點，或點進去後發現和期待不同。修正方向：用更直接的名稱，例如服務項目、客戶案例、常見問題、聯絡我們。品牌語氣可以留在頁面內容，不必塞進選單。

手機版找不到重要 CTA

影響：使用者想預約、詢價、打電話或加 LINE 時找不到入口，轉換自然流失。修正方向：把高頻行動入口放在手機版明顯位置，並確認點擊後真的能撥號、開啟 LINE 或跳到表單。

設計好看但鍵盤或輔助工具不好操作

影響：鍵盤使用者、螢幕閱讀器使用者與部分行動裝置使用者會卡在選單中。修正方向：檢查 Focus 順序、可見焦點、展開收合狀態、ARIA 標示與關閉機制。漂亮但不能操作的導覽列，在實務上不算完成。

導覽列驗收清單：網站上線前要測什麼

導覽列上線前要測跨裝置顯示、點擊區域、互動狀態、表單與聯絡入口、SEO 可讀性、速度指標與追蹤事件。委外網站設計時，導覽列應列入正式驗收項目，而不是只看畫面。

桌機、平板、手機版都要測

至少檢查桌機、平板、手機三種寬度，確認主選單是否換行、Logo 是否擠壓、漢堡選單是否正常展開、下拉選單是否超出畫面。單頁網站也要確認錨點跳轉是否準確，可參考 單頁網站規劃 與 單頁網站設計流程 的差異。

表單、電話、LINE、購物車、登入入口都要實測

不要只檢查連結有沒有藍字。電話要能撥出，LINE 要能開啟正確帳號，地圖要到正確地址，表單要能送出，購物車與會員登入要能完成流程。導覽列的入口如果不能完成動作，就只是裝飾。

檢查 CLS、互動延遲、字級與點擊區域

Header 載入時不應造成明顯版面位移，選單展開不應卡頓，手機版文字要能閱讀，點擊區域不能過小。Core Web Vitals 中的 CLS 與 INP 雖然不是只由導覽列決定，但 Header 常是問題來源之一。

委外網站設計時，導覽列應列入驗收項目

委外時要把導覽列驗收寫清楚，包括 RWD、可及性、互動狀態、追蹤事件、內部連結與後台維護方式。若你正在評估自做或委外，可以參考 DIY 與委外網站設計比較，但導覽列驗收標準應先獨立列出。

驗收項目	檢查重點	通過標準
桌機版導覽	Logo、主選單、CTA、Hover、Active、Focus	可辨識、可點擊、狀態清楚
手機版導覽	漢堡選單、底部入口、返回上一層、關閉按鈕	單手可操作，重要入口不被藏住
轉換入口	電話、LINE、表單、預約、購物車、會員登入	每個入口都能完成對應動作
SEO 可讀性	內部連結、錨點文字、麵包屑、頁尾導覽	連結可讀，頁面關係清楚
追蹤設定	GA 事件、GSC 收錄檢查、CTA 點擊	重要互動可被追蹤與回看
效能與穩定	CLS、INP、展開速度、版面位移	不影響主要閱讀與操作

網站導覽列是什麼？

網站導覽列是網站上用來引導使用者前往重要頁面的選單區塊，常見位置在 Header。它通常包含 Logo、主選單、搜尋、會員、購物車、聯絡我們或其他 CTA。

網站設計時，主選單應該放幾個項目？

多數網站的主選單可控制在 5 到 7 個核心項目。重點不是硬湊數字，而是避免把所有頁面都放進 Header。低頻頁面可放在頁尾、分類頁或下拉選單。

手機版網站一定要用漢堡選單嗎？

不一定。頁面少的網站可以用簡化頂部選單，操作頻率高的網站可使用底部導覽。漢堡選單適合頁面較多的網站，但開啟、關閉與返回上一層都要清楚。

導覽列要不要固定在畫面上方？

如果頁面很長、使用者需要頻繁切換區塊或隨時點 CTA，固定式導覽列有幫助。若 Header 太高或選單太多，固定在上方可能壓縮閱讀空間，反而影響 UX。

下拉選單和 Mega Menu 適合哪些網站？

下拉選單適合少量子分類，Mega Menu 適合多品類、多服務、多地區或內容量大的網站。若只是為了把所有頁面塞進選單，應先整理資訊架構。

導覽列 CTA 放幾個比較好？

通常放一個最主要 CTA 最清楚，例如聯絡我們、立即詢價、預約諮詢或購物車。若需要多個行動入口，可在手機版針對電話、LINE、地圖與預約重新安排。

導覽列會影響 SEO 嗎？

會。導覽列提供重要頁面的內部連結與錨點文字，也會影響搜尋引擎理解網站架構。清楚的主選單、麵包屑與頁尾導覽，都能讓頁面關係更穩定。

網頁設計很難嗎？導覽列可以自己先規劃嗎？

可以先規劃。即使不懂前端，也能先列出使用者任務、主要頁面、轉換入口與手機版需求。真正困難的不是畫選單，而是決定哪些頁面重要、哪些不該放進主選單。

免費網頁設計工具可以做好導覽列嗎？

可以做到基本導覽，但會受模板、元件與平台設定限制。若網站頁面不多，免費工具通常夠用；若需要複雜分類、會員、電商、站內搜尋或特殊互動，就要先確認平台能否支援。平台選擇可再參考 CMS 選擇指南。

委託網站設計公司時，導覽列要怎麼驗收？

驗收時要測桌機、平板、手機版，確認選單展開、關閉、返回、Focus、CTA、表單、電話、LINE、購物車與會員登入都能正常使用，也要檢查內部連結與追蹤事件。

不同產業的網站導覽列設計有差嗎？

有差。B2B 重視方案、案例與信任資訊；服務業重視電話、LINE、地圖與預約；電商重視商品分類、搜尋、購物車與會員；內容網站重視分類、熱門內容與站內搜尋。

導覽列最常見的錯誤是什麼？

最常見的是主選單太多、命名太抽象、層級太深、手機版 CTA 難找，以及互動狀態不清楚。修正時先刪掉低頻入口，再把核心頁面用使用者看得懂的名稱重新排序。