Tab UI 系統
目的
Tab UI 系統提供了一種設計和建構標籤頁的方法論——標籤頁是允許用戶在同一上下文中的相關內容面板之間切換的導航元素。標籤頁是漸進式揭露的關鍵模式，透過將資訊組織成邏輯群組來減少認知負擔，且無需重新載入頁面。系統化的方法確保標籤頁具有清晰的活動狀態、邏輯分組，並能優雅地適應不同裝置。
使用案例
- 商品詳情頁： 將規格、評價、運送詳情和常見問題整理成易於掃描的區塊。
- 帳戶設定： 將個人資料、安全性、通知和帳單設定分組。
- 儀表板： 在不同資料檢視之間切換（例如「概覽」、「分析」、「歷史記錄」）。
- 搜尋結果： 依類型篩選結果（例如「全部」、「圖片」、「影片」、「新聞」）。
- 複雜表單： 將大型表單分解為主題區塊（如果步驟不需要按嚴格順序完成）。
何時不該使用
- 循序步驟： 如果用戶必須按特定順序完成內容，請改用
step-progress-system。 - 全域導航： 標籤頁應管理頁面內的內容；請使用
site-navigation-system在不同頁面之間移動。 - 比較資訊： 如果用戶需要同時查看兩個區塊的內容，請勿使用標籤頁。請考慮使用手風琴或並排佈局。
- 項目太少： 如果只有兩個項目且內容簡短，請考慮同時顯示兩者或使用簡單的切換開關。
- 項目太多： 如果超過 6-7 個標籤頁，介面會變得雜亂。請考慮使用側邊欄導覽或下拉式篩選器。
輸入
- 內容清單： 標籤標籤及其對應內容面板的列表。
- 使用情境： 標籤頁將放置的位置（例如主要內容區、側邊欄或模態框內）。
- 優先級別： 這是頁面的主要焦點還是次要細節？
- 現有系統： 流體間距、字體大小比例和互動狀態定義。
輸出
- 標籤頁解剖規格： 觸發器（標籤頁）、標籤列表（容器）和面板（內容）的視覺定義。
- 狀態矩陣： 針對預設、懸停、活動、聚焦和禁用狀態定義的視覺處理。
- 響應式策略： 處理溢出的規則（可滾動、換行或折疊為手風琴/下拉式選單）。
- 無障礙藍圖： ARIA 角色、鍵盤對應和焦點管理規則。
工作流程
1. 定義內容關係
確保所有標籤頁位於同一層級且與相同父實體相關。標籤應簡短（1-3 個詞）並使用一致的大小寫格式。
2. 建立視覺解剖學
應用 visual-hierarchy-system 來定義標籤列表：
- 活動標籤頁： 必須最突出。應結合顏色、字重和視覺指示器（如下邊框或背景填充）。
- 非活動標籤頁： 應看起來可互動但較次要。
- 內容面板： 通常與活動標籤頁共用視覺容器或對齊，以營造「連貫」的感覺。
3. 定義互動邏輯
- 即時切換： 內容應在互動時立即改變。
- 懸停 vs. 點擊： 標籤頁絕不能在懸停時切換；它們需要明確的點擊或觸碰。
- 預設狀態： 通常第一個標籤頁預設為活動，除非用戶返回特定狀態。
4. 優化間距與觸控
應用 fluid-spacing-system 和 interactive-state-system：
- 觸控目標： 每個標籤觸發器應符合 WCAG 2.2 SC 2.5.8（最小 24x24px）；主要標籤頁 UI 偏好 44x44px。
- 內部間隙： 在標籤頁之間使用一致的間距（通常為
--space-s或--space-m）。 - 活動指示器： 確保「活動」線條或背景夠粗，能夠清晰看見。
5. 規劃響應式設計
決定標籤列表如何處理狹窄視口：
- 水平滾動： 最常見的行動裝置模式。允許標籤列表水平溢出，並使用微弱的漸層或箭頭指示更多內容。
- 手風琴轉換： 對於長內容，在行動裝置上將標籤頁轉換為手風琴佈局。
- 下拉選單： 對於實用性較重的標籤頁，在行動裝置上用
<select>元素取代標籤列表。
決策規則
- 「標籤長度」規則： 如果標籤長度差異很大，請使用左對齊標籤頁。如果標籤長度一致且數量少，請使用置中或分散對齊標籤頁。
- 水平 vs. 垂直：
- 水平： 內容頂部組織的標準方式。
- 垂直： 最適合較深的列表（設定）或水平空間有限但垂直空間充足的情況。
- 「七」規則： 水平標籤頁限制為 7 個項目。如果需要更多，請重新評估資訊架構或使用垂直佈局。
- 活動指示器： 永遠不要只用顏色來表示活動狀態（例如，應使用 2px-3px 的底線或粗體字重變化）。
限制條件
- 無障礙性： 遵循 ARIA APG 標籤頁模式——容器使用
role="tablist"，每個觸發器使用role="tab"並搭配aria-selected和aria-controls，以及面板使用role="tabpanel"並搭配指向其標籤頁的aria-labelledby。只有活動標籤頁有tabindex="0"；非活動標籤頁使用tabindex="-1"（漫遊 tabindex）。 - 啟動模式： 對於快速、輕量級的面板，偏好自動啟動（方向鍵移動焦點並立即切換面板內容）。如果切換觸發昂貴的網路請求，請使用手動啟動（方向鍵僅移動焦點；
Enter/Space確認）。 - 鍵盤導航： 左/右方向鍵（垂直標籤頁為上/下）在標籤頁之間移動；
Home/End跳至第一個/最後一個標籤頁；Tab將焦點移出標籤列表至活動面板。 - 對比度： 活動和非活動狀態必須符合 WCAG AA 標準（文字 4.5:1）。
- 響應式設計： 標籤頁絕不能導致頁面橫向滾動；標籤列表本身應處理溢出。
常見失敗模式
- 隱藏的活動狀態： 使用難以察覺的細微顏色變化，導致用戶不確定正在檢視哪個區塊。
- 內容跳動： 標籤面板高度差異過大，導致頁尾在用戶切換標籤頁時上下跳動。
- 誤用為導航： 使用標籤頁連結到不同頁面，打破了用戶對即時內容切換的期望。
- 行動裝置截斷： 在行動裝置上截斷標籤標籤，卻沒有提供查看其餘內容的方式。
- 缺少焦點狀態： 忘記為鍵盤用戶設計可見的焦點環。
驗證標準
- 所有標籤頁都與相同上下文相關。
- 活動狀態在視覺上清晰可辨（不僅僅是顏色）。
- 每個標籤觸發器至少符合 WCAG 2.2 24x24px 的觸控目標最小值（偏好 44x44px）。
- ARIA 角色（
tablist、tab、tabpanel）正確分配，並實作了aria-selected和漫遊tabindex。 - 根據 ARIA APG 標籤頁模式支援鍵盤導航（方向鍵、Home/End）。
- 已定義響應式行為（滾動、手風琴或下拉選單）。
- 內容面板與標籤頁保持一致的視覺關係。