coastdigitalgroup/coastai-skills

大型選單導覽系統

目的

大型選單導覽系統為高密度、多欄位的二維下拉面板提供了系統化的視覺、結構與互動框架。當網站成長到超越簡單的一維線性導覽列表時，大型選單能在一個可展開的視圖中，展現結構化的內容層級、分類的產品階層、功能展示、重點提示以及促銷卡片。

作為企業平台、大型電子商務商店和內容中樞的關鍵架構入口，大型選單解決了主要的導覽摩擦點：隱藏的深層連結、不穩定的懸停跳出（「滑鼠對角線移動陷阱」）、無法存取的鍵盤遍歷、混亂的多欄位佈局，以及在觸控視口上不良的響應式適應。

使用案例

• 企業SaaS與B2B平台： 將複雜的產品生態系（例如：產品、產業解決方案、平台功能、資源、客戶案例）組織成不同的主題欄位，並搭配促銷卡片。
• 大型電子商務型錄： 顯示多層級產品分類法（例如：類別 -> 子類別 -> 精選系列與熱門品牌），並搭配豐富的視覺縮圖與徽章標示。
• 大學與知識入口網站： 將行政部門、學術學院、學生入口網站和研究目錄分組到高密度的分類面板中。
• 出版者與媒體中樞： 在多個編輯垂直領域、精選影片系列、熱門標籤以及新聞通訊訂閱觸發機制之間進行導覽。

何時不該使用

• 小型到中型網站（總頁面 < 10）： 對於扁平或淺層的資訊架構，請使用 site-navigation-system 或 breadcrumb-wayfinding-system。
• 應用程式內工具導覽： 對於動態SaaS應用程式工具列或工作區工具，請使用 sidebar-navigation-system 或 command-palette-system。
• 循序多步驟工作流程： 對於線性任務進程（例如多步驟結帳或引導式導覽），請使用 step-progress-system 或 onboarding-tour-system。
• 頁內線性閱讀導覽： 對於在活動文章或文件內跳轉章節，請使用 table-of-contents-system。

輸入

1. 資訊架構（IA）： 分類的樹狀結構（父觸發器 -> 欄位分組 -> 子連結 -> 描述/徽章元資料）。
2. 設計代碼： 全域排版比例、間距代碼（gap、padding）、背景填色、邊框圓角、陰影層級以及強調色調色盤。
3. 促銷素材內容： 圖片長寬比、標題、副文字以及面板內特色卡片的CTA按鈕標籤。
4. 互動規格： 懸停意圖計時閾值（延遲進入、延遲離開、游標路徑緩衝區幾何）以及焦點管理策略。
5. 斷點邊界： 定義桌面二維面板何時轉換為行動多層級向下鑽研抽屜或手風琴選單的視口閾值。

輸出

1. 大型選單面板幾何與空間網格： 二維欄位佈局規格（例如：3欄連結矩陣 + 1欄特色促銷卡片），並具有嚴格的內邊距和欄間距邊界。
2. 觸發器-面板互動系統： 懸停意圖緩衝區規格、焦點管理路由、鍵盤控制對應以及離開行為。
3. 無障礙標記架構： 帶有完整ARIA語意（aria-expanded、aria-controls、aria-haspopup、role="navigation"）的HTML結構模板。
4. 響應式行動裝置適應策略： 將桌面大型面板轉換為觸控最佳化的向下鑽研面板或巢狀手風琴的轉換規格。

---

工作流程

1. 結構化空間網格（二維欄位構成）

一個大型選單面板必須在資訊密度與高度視覺可掃描性之間取得平衡。將下拉面板設計為一個結構化的網格容器，直接對齊主導覽列或全視口寬度：

• 容器幾何： 將面板相對於主導覽標頭或標頭容器進行絕對定位（top: 100%）。使用全寬（在最大容器範圍內，例如 1200px 或全視口覆蓋層，寬度為 100%），並帶有充足的內部內邊距（例如 padding: 24px 32px 或 var(--space-l)）。
• 欄位分配模式：
  • 標準4欄佈局（3欄連結 + 1欄促銷）： 3欄專用於連結分組（每欄寬度22–25%）+ 1欄保留給特色促銷卡片或快速CTA區塊（寬度25–30%）。
  • 分類3欄矩陣： 3個等寬欄位，用於高密度類別列表，包含類別標題、子連結和描述。
  • 主從分割面板： 左側邊欄（寬度20–25%）包含垂直類別頁籤，驅動右側動態顯示面板（寬度75–80%）的內容。
• 欄間距與間距比例： 在欄位之間保持嚴格的流體間隙（gap: 24px 到 32px），以確保清晰的可視區隔而不致碎裂。

2. 在欄位內設計內容結構

每個欄位代表一個獨特的語意分組。依階層優先順序組織元素：

• 欄位標題 / 區段標題： 為群組標題使用清晰的可視區別（例如：大寫/粗體、font-size: 0.875rem、letter-spacing: 0.05em、柔和品牌色）。
• 連結項目列結構：
  • 標題： 主要標籤，高對比度文字（最低 4.5:1）。
  • 圖示 / 徽章（可選）： 前導的20x20px圖示或尾部內聯徽章（例如「新」、「Beta」、「熱門」）。
  • 描述（可選）： 柔和的輔助文字（1–2行，font-size: 0.8125rem，顏色對比度 4.5:1），解釋目的地。
• 特色促銷卡片結構：
  • 突顯高轉換價值的目標（例如：新功能發布、電子書、示範請求）。
  • 結構包含視覺縮圖（aspect-ratio: 16/9）、粗體標題、簡潔文案以及樣式化的按鈕/連結CTA。卡片背景應使用微妙的色調或表面對比（background: var(--surface-subtle)）。

3. 實作懸停意圖與游標遍歷保護

「滑鼠對角線移動陷阱」發生在使用者將滑鼠從選單觸發器對角線移向大型面板中的連結時，意外經過相鄰觸發器而導致選單過早關閉。

• 懸停意圖緩衝區：
  • 延遲閾值： 在開啟選單前應用最小懸停延遲（150ms–200ms），防止游標快速掃過導覽列時產生閃爍。
  • 離開寬限期： 在游標離開觸發器/面板邊界後，保持面板開啟狀態 200ms–300ms。
• 安全懸停幾何（瞄準三角形）：
  • 實作一個從活動觸發器位置延伸到開啟之大型選單面板頂部和底部角落的動態方向緩衝區多邊形（瞄準三角形）。
  • 只要滑鼠指標在此三角形邊界內移動，就忽略兄弟導覽觸發器上的懸停狀態轉換。

4. 建立無障礙鍵盤導覽與ARIA邏輯

大型選單必須能100%透過鍵盤操作，並完全可被輔助技術理解：

• 觸發器語意：
  • 使用HTML <button> 元素作為開啟面板的觸發器，而不是普通的 <a> 標籤或 <div>。
  • 根據面板狀態動態設定 aria-expanded="true|false"。
  • 設定 aria-controls="mega-panel-[id]" 指向對應的面板容器ID。
  • 設定 aria-haspopup="true"（或 aria-haspopup="dialog" / aria-haspopup="menu"，取決於內部角色）。
• 鍵盤遍歷模式：
  • Tab：當選單關閉時，聚焦到標題列中的下一個觸發器。當選單開啟時，將焦點依序移入開啟的大型選單面板中的連結。
  • Escape：立即關閉任何開啟的大型選單面板，並將焦點返回給父觸發器按鈕。
  • 方向鍵（左/右）：在頂層主要標題觸發器之間導覽。
  • 方向鍵（下/上）：在開啟的大型面板欄位內的連結中從上到下導覽。

5. 定義響應式行動裝置適應策略

桌面多欄大型面板無法水平容納在行動螢幕上（< 768px/1024px）。

• 行動向下鑽研抽屜模式（建議）：
  • 將桌面標題轉換為滑動式行動抽屜（100vw 或 320px–400px 固定滑出）。
  • 使用多層級滑動面板堆疊：點擊主觸發器會將抽屜滑動到第2層（類別連結），並帶有顯眼的「← 返回」頂部按鈕。
• 手風琴堆疊替代方案：
  • 主觸發器垂直折疊成手風琴標題。點擊觸發器會在其下方內聯展開欄位連結。
  • 確保所有行動類別觸發器和連結的觸控目標至少達到 44x44px。

---

決策規則

大型選單佈局模式的選擇

架構類型	建議的佈局模式	決策標準
企業SaaS（產品、解決方案、資源）	3欄連結 + 1欄特色卡片	高度需要在產品列表旁突顯頂級轉換資產（例如客戶案例、示範）。
深度電子商務（100+ 類別）	主從分割面板（頁籤式類別）	需要瀏覽數十個子類別而不使垂直視口高度過載。
內容中樞 / 出版者	分類3欄矩陣 + 底部橫幅	專注於多垂直領域文章類別，並搭配熱門標籤徽章和新聞通訊列。
公用程式重的平台（開發工具、API文件）	高密度4欄文字連結搭配徽章	優先考慮直接連結存取和速度，而非視覺促銷媒體。

懸停 vs. 點擊觸發機制

觸發行為	使用案例應用	設計與無障礙理由
懸停搭配意圖緩衝區 + 點擊支援	桌面網路入口網站、企業SaaS	為滑鼠使用者提供快速、低摩擦的掃描體驗，同時為混合裝置保留點擊/觸控功能。
嚴格的點擊開啟	複雜儀表板、高密度網頁應用程式	消除快速游標移動期間的意外開啟；適用於視口精準度至關重要的應用程式。
觸控點擊切換	行動與平板視口	觸控視口上不存在滑鼠懸停事件；點擊必須明確切換開啟狀態或向下鑽研。

---

限制條件

• 無障礙（WCAG 2.2 AA 最低標準）：
  • SC 2.4.7 焦點可見： 在所有觸發器、子連結和促銷CTA按鈕上，有可見、無裁剪的高對比度焦點環（2px 實色強調色搭配偏移）。
  • SC 2.4.11 焦點不被遮蔽： 大型選單面板絕不能遮蔽向後導覽時觸發器按鈕的活動焦點指示器。
  • SC 2.5.8 目標尺寸： 行動抽屜和桌面連結內的所有觸控目標必須至少為 24x24px（桌面）和 44x44px（行動）。
  • SC 1.4.3 對比度： 連結標題必須與面板背景保持至少 4.5:1 的對比度；次要描述性副本也必須滿足 4.5:1。
• 視口邊界包含： 大型選單面板絕不能在頁面上產生水平捲動（在視口邊界上設定 overflow-x: hidden）或超出邊緣邊界。
• 動態Z-Index堆疊： 大型選單必須使用清晰的z-index圖層比例（例如 z-index: 1000），使其位於英雄元素、黏性標題和頁面內容之上，但位於模態對話框和提示之下。

---

常見失敗模式

• 滑鼠陷阱（無懸停意圖）： 游標一離開嚴格的直線路徑就關閉大型面板，讓試圖對角線移動到連結的使用者感到沮喪。
• 鍵盤黑洞： 在懸停時視覺上開啟大型面板，但未能允許鍵盤 Tab 焦點進入面板，使得螢幕閱讀器和鍵盤使用者無法存取深層連結。
• 非語意錨點觸發器： 使用 <a href="/products"> 作為大型選單切換，但沒有ARIA屬性，導致螢幕閱讀器將其宣告為一個簡單連結，而不是一個可展開的選單按鈕。
• 視口溢出： 在中型桌面螢幕（例如 1024px）上對大型面板硬編碼固定像素寬度（例如 1200px），導致水平捲軸。
• 行動桌面面板擠壓： 將桌面4欄大型面板縮小到行動螢幕上，迫使文字無法閱讀且觸控目標變得微小。

---

驗證標準

• 結構化二維空間網格： 大型選單面板使用清晰的多欄位佈局，具有明確的內邊距、欄間距和可選的促銷卡片容器。
• 無障礙按鈕觸發器： 頂層觸發器使用帶有 aria-expanded、aria-controls 和 aria-haspopup 屬性的 <button> 元素。
• 鍵盤可導覽： 完整的鍵盤支援，允許循序 Tab 遍歷進入面板、Escape 鍵關閉，並將焦點返回給父觸發器。
• 懸停意圖與安全緩衝區： 實作懸停延遲（150ms–200ms）和離開寬限期（200ms–300ms）或安全的游標幾何緩衝區。
• 行動堆疊/向下鑽研： 在螢幕 < 768px 時，能乾淨地轉換為行動優化的抽屜，配備向下鑽研面板或垂直手風琴。
• 對比度AA合規： 所有文字（連結標題、類別標題、輔助描述）與面板背景的對比度至少達到 4.5:1。
• 未遮蔽的焦點環： 大型選單內的每個可聚焦連結和按鈕都有一個活動、可見、高對比度的焦點指示器。