主導覽選單設計完整指南

主選單的項目數量

建議 5-7 個主項目（Miller's Law：人腦短期記憶可處理 7±2 個項目）。超過 9 個會讓使用者選擇癱瘓。優先放：

• 主商品分類（4-5 個）
• 重要功能頁：「新品」「特價」「關於我們」
• 次要項目（部落格、客服、會員）可放 Footer 或頂部小選單

主選單項目命名原則

• 用顧客熟悉的詞：「男裝」而非「Men's Wear」
• 簡潔：2-4 個字最好，太長視覺擁擠
• 明確：「保養」優於「美麗時刻」（明確指向品類）
• 常見順序：從顧客最關心到最不關心
• 新品/特價放醒目位置：主選單第一個或標紅色

Mega Menu vs 普通下拉

Mega Menu（多欄大選單）適合：

• 商品種類多（100+ SKU）
• 多層分類（如服飾分性別、品類、年齡）
• 想凸顯特定商品（如「新品系列」放在選單內）

普通下拉選單適合：

• SKU 較少（< 50）
• 分類層級簡單（1-2 層）
• 追求極簡設計風格

Mega Menu 內容規劃

Mega Menu 內可放：分類連結（4-5 欄整齊排列）；熱門商品縮圖（吸引點擊）；季節主題或品牌系列；分類縮圖（視覺引導）；客服連結（特別品類有專屬諮詢）。重點：不要塞太多（最好控制在一個視窗高度內，避免捲動）。

行動版漢堡選單設計

• 圖示明顯（右上或左上，至少 44px）
• 點擊後從左/右滑入全螢幕選單
• 第一層顯示主分類，點擊展開子分類
• 搜尋框放在選單頂部
• 會員/購物車快捷入口
• 關閉按鈕明顯（X 在右上）
• 動畫流暢（300ms 內滑入完成）

Sticky 固定選單

有 Sticky 選單的電商，每次造訪瀏覽頁數提升 20-35%。設計要點：

• 滾動時略縮小（不佔太多版面）
• 保持 Logo + 主選單 + 搜尋框 + 購物車
• 滑動向下時可隱藏，向上滑動再出現
• 行動版可在底部加 Sticky 工具列（首頁、分類、搜尋、會員）

選單與 SEO 的關係

主選單是「網站結構」的關鍵：每個主分類都是內鏈、Google 用選單理解網站架構、選單上的分類頁通常排名最好。SEO 建議：主分類連到對應的分類頁（不是 JS 動態載入）；錨文字用 SEO 關鍵字（「真皮短夾」而非「點此」）；麵包屑與選單分類一致；別在選單放 nofollow（限制 Google 爬行）。

頂部小選單的運用

主選單上方可放小選單（utility nav）：聯絡客服、會員登入、購物車（已包含在主選單也可重複）、語言切換、貨幣切換（跨境電商）、特殊優惠（如「免運活動」）。小選單字級較小，不搶主選單視覺份量。

常見問題解答