導覽的唯一目的：幫助用戶找到他想要的
網站導覽的設計不是「讓設計看起來整潔」，也不是「展示我們的品牌結構」，而是「讓用戶在最短時間內找到他需要的資訊或行動」。
這意味著導覽的設計決策應該從用戶的角度出發：他進來這個頁面，最可能想做什麼？他的下一步目標是什麼？
主導覽選單設計
選單項目數量
一般建議：主導覽選單 4–7 個項目。
少於 4 個：訪客可能找不到重要的內容入口。
多於 7 個：選項過多，出現「選擇困難」——用戶需要消化太多選項才能決定點哪裡。
Miller's Law（米勒定律）說明人類的工作記憶一次只能處理 7±2 個元素，這個發現支持了導覽項目數量的最佳實踐。
選單項目的命名
用「用戶語言」，不要用「公司內部術語」。
例子：
- 「我們的解決方案」→ 改成「服務」或具體的服務類型
- 「媒體中心」→ 改成「部落格」或「文章」
- 「關於我們」→ 可以保留，但加上副標題「認識簡創」更有人情味
測試方法：把你的導覽選單給完全不了解你品牌的人看，問他們「如果你想知道這個網站提供什麼服務，你會點哪裡？」他們的選擇往往告訴你很多。
Sticky vs 靜態 Header
Sticky Header（固定在頁面頂端，滾動不消失）在內容豐富的網站（部落格、文件頁）特別有用——用戶在任何位置都能快速跳轉。
靜態 Header 適合一頁式的品牌展示官網，因為內容區塊是線性閱讀的，主要的 CTA 在 Hero 和 Footer 都有。
如果使用 Sticky Header，建議在用戶往下滾動時讓 Header 「壓縮」（隱藏 Logo 的副標題、減小 padding）——這讓更多垂直空間給主要內容。
下拉選單（Dropdown）
下拉選單的使用要謹慎。
好的使用場景：你的服務有清楚的分類（例如：「服務」下分「官網設計」「品牌識別」「SEO 優化」）。
不好的使用場景：每個主選單項目都有 10+ 個子項目（mega menu），這讓用戶在選單本身的瀏覽就已經不知所措。
如果下拉選單有超過 6 個子項目，考慮用獨立的「服務概覽頁」代替下拉選單。
行動端導覽設計
Hamburger Menu（漢堡選單）
行動端最常見的導覽模式——三條橫線圖示，點選後展開側邊欄或全屏選單。
優點：節省頁面頂部空間。
缺點：「Discovery 問題」——用戶需要先知道按了漢堡才有選單，對不熟悉數位介面的用戶可能不直覺。
優化建議：在漢堡圖示旁加上「選單」或「Menu」的文字標籤，提升可發現性。
Bottom Navigation Bar（底部導覽欄）
如果你的網站有 4–5 個核心頁面且行動端是主要使用場景，底部導覽欄比頂部漢堡更適合——拇指可以輕鬆操作，比頂部操作更符合手機單手操作習慣。
App 化的網站（PWA）特別適合這個模式。
行動端選單的觸控區域
每個可點擊的選單項目，最小觸控大小：44×44px（Apple Human Interface Guidelines 建議值，Google 建議 48×48px）。
導覽連結之間要有足夠的間距——避免誤觸。
Footer 導覽
Footer 是「第二層導覽」——訪客沒有在主導覽找到想去的頁面，往往會往 Footer 找。
Footer 導覽最重要的是：清楚分類 + 完整覆蓋。
對品牌官網，Footer 通常包含：
- 快速連結（主要頁面的重複入口）
- 服務介紹連結
- 部落格 / 文章
- 聯絡資訊
- 法律頁面（隱私政策、服務條款）
導覽的 SEO 考量
導覽連結是網站的「內部連結」之一，搜尋引擎爬蟲會跟著導覽連結索引你的頁面。
確保所有重要頁面都能從主導覽或 Footer 達到，避免出現「孤立頁面」（只有直接輸入 URL 才能訪問的頁面）。
導覽項目的連結文字（Anchor Text）要使用描述性的關鍵字，而非「點這裡」——這對 SEO 有輕微但正面的影響。
常見導覽設計錯誤
當前頁面不突顯：用戶不知道自己在哪個頁面。修正：active 狀態的不同顏色或底線標示。
回到上一層困難：在子頁面中，用戶不知道如何回到上一個層級。修正：清楚的麵包屑導覽（Breadcrumb）。
選單沒有無障礙支援：鍵盤用戶無法使用 Tab 鍵瀏覽選單。修正：確保所有導覽元素都有 focus state 樣式，下拉選單支援 Escape 鍵關閉。