分段控制系統
目的
分段控制系統提供了一種適用於緊湊、互斥選擇器（也稱為按鈕組、滑動切換或分段按鈕）的設計方法論。與導航選單或內容面板標籤不同，分段控制作為單一上下文或表單中的內聯修飾器。它允許使用者在高度受限的空間範圍內，立即更改顯示格式、過濾單一資料集或選擇輸入選項。
系統化的方法可確保這些控制元件具有凝聚的視覺關係、清晰的互動提示、無縫的佈局縮放，以及正確的語義無障礙模式，以防止它們被誤認為是通用按鈕或標籤導航。
使用案例
- 視圖切換： 切換相同內容的顯示方式（例如，「網格 vs. 列表 vs. 地圖」或「看板 vs. 日曆」）。
- 定價與帳單切換： 選擇帳單頻率（例如，「月繳 vs. 年繳」），直接更改價格顯示。
- 微過濾 / 子區隔： 在特定子類別中過濾活動列表（例如，訊息的「全部 vs. 未讀 vs. 已加星號」）。
- 內聯選項選擇： 在表單中，用於 2 到 5 個高優先級選項，取代體積龐大的下拉式選單（例如，「小 vs. 中 vs. 大」）。
- 互動狀態切換器： 在即時圖表中修改活動指標參數（例如，時間範圍的「7D vs. 30D vs. 1Y」）。
何時不應使用
- 全頁導航： 如果點擊項目會更改頁面 URL 或將使用者導離當前視圖上下文，請使用
site-navigation-system。 - 大型內容面板切換： 如果切換選項會顯示包含複雜佈局的完全不相關內容區塊（例如設定面板或文件標籤），請使用
tab-ui-system。 - 選項數量過多： 如果有超過 5 個選項，請使用下拉選擇或篩選抽屜，以防止視覺擁擠和水平文字溢出。
- 多選設定： 如果使用者可以同時選取多個活動選項，請使用分組的核取方塊或標籤（
badge-and-tag-system）。 - 二元動態切換： 對於會觸發立即背景處理程序的單一開關設定（例如「啟用通知」），請使用標準的切換開關（
accessible-switch-implementation）。
輸入
- 選項清單： 互斥標籤、圖示或值的列表（通常為 2 到 5 個項目）。
- 控制範圍： 控制元件是作為表單輸入、佈局視圖修改器，還是指標切換器。
- 容器限制： 確切的寬度和佈局環境（例如，搜尋框旁的內聯、定價卡片中居中，或行動裝置上的全寬）。
- 樣式代碼： 字體排印比例、間距變數（
fluid-spacing-system）、互動狀態（interactive-state-system）和顏色代碼。
輸出
- 控制元件解剖結構規格： 軌道（背景容器）、分段（個別按鈕）和活動指示器（滑動或高亮的背景）的視覺定義。
- 行為 ARIA 對應： 選擇正確的 ARIA 角色（
role="radiogroup"或role="tablist"）和鍵盤導航規則。 - 狀態轉換矩陣： 預設、懸停、活動/選中、焦點和禁用狀態的樣式定義。
- 響應式流動規則： 水平縮放、全寬流體行為及行動裝置重排或回退至
<select>的規格。
工作流程
1. 識別語義意圖
確定控制元件是修改值還是修改顯示視圖：
- 表單輸入或微過濾： 語義上作為 Radio Group。它變更儲存或在提交時發送的值，或立即重新過濾內聯列表。
- 視圖控制器： 語義上作為 Tablist。它在同一容器內切換活動的可見面板或呈現方式。
2. 設計視覺解剖結構
構建一個高度精緻、統一的視覺元件。設計包含三個核心層：
- 軌道： 單一水平容器，具有微妙的背景顏色（例如，低對比度灰色）、小內距（通常為 2px 到 4px）和圓角（半圓角或藥丸形）。
- 分段： 在軌道內肩並肩放置的按鈕。它們必須共享相等寬度（齊行）或適應內容寬度並具有一致的內距。
- 活動指示器： 一個滑動的實體卡片或高亮，具有鮮明的背景（通常是白色或主題主色）和微妙的陰影（
elevation-and-depth-system），位於活動文字下方以在視覺上將其抬起。
3. 建立狀態與動作編排
為每個互動階段配置不同的視覺反饋：
- 預設狀態： 非活動文字使用輔助中性色，並具有足夠高的對比度（至少 4.5:1）。
- 懸停狀態： 在目標分段上添加微妙的懸停背景高亮，以表示可點擊性。
- 選中狀態： 文字變為主色/粗體樣式，並且活動指示器滑動到其下方。
- 焦點狀態： 使用鍵盤導航時，在活動分段周圍繪製一個鮮明、高對比的焦點輪廓。焦點指示器不得超出軌道邊界。
- 禁用狀態： 降低透明度（通常為 40%）並禁用游標指針。
4. 程式碼與交付註解
為實作註解結構性要求：
- 等寬分佈： 指定 flexbox 對齊方式（
flex: 1 1 0%），以便在適當時均勻分佈分段。 - 滑動指示器過渡： 為滑動的活動指示器卡片指定 CSS 過渡規則（
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)），確保其通過使用硬體加速屬性（transform和opacity，而不是直接更改left/width屬性）來避免觸發累積佈局位移（CLS）。
5. 規劃響應式行為
定義分段控制在小視口上的縮放方式：
- 流體齊行： 在行動裝置螢幕上，展開軌道和分段以佔據 100% 的寬度，作為全寬底部欄或標題組件。
- 標籤截斷與最小寬度： 為分段強制設定嚴格的最小寬度，以防止文字換行在單一按鈕內堆疊成多行。
- 溢位下拉選單回退： 如果選項無法在不造成視覺破損的情況下容納在 320px 的視口內，則使用響應式 CSS 媒體查詢將分段控制佈局切換為原生的
<select>下拉選單。
決策規則
Radio Group 與 Tablist 模式
| 標準 | 使用 Radio Group 模式 (role="radiogroup") | 使用 Tablist 模式 (role="tablist") |
|---|---|---|
| 主要功能 | 編輯資料屬性或內聯過濾列表。 | 切換不同的佈局視圖或面板。 |
| 表單整合 | 整合在 <form> 內部或作為輸入元件。 | 在標準表單之外；管理佈局視圖模式。 |
| ARIA 角色 | 父層級：role="radiogroup"，子層級：role="radio" 搭配 aria-checked="true/false"。 | 父層級：role="tablist"，子層級：role="tab" 搭配 aria-selected="true/false"。 |
| 鍵盤導航 | 方向鍵立即移動選擇；Tab 鍵退出群組。 | 方向鍵立即移動焦點；空白鍵/Enter 鍵啟動。 |
視覺佈局：固定等寬 vs. 自動流體寬度
- 固定等寬： 最適合簡短、統一的標籤（例如，「7D」、「30D」、「90D」或「網格」、「列表」）。每個分段寬度相同，提供視覺對稱性。
- 自動流體寬度： 最適合標籤字元長度差異較大時（例如，「所有項目」與「待驗證」）。每個分段圍繞其文字，並具有一致的內距（例如，
12px 16px）。
限制條件
- 對比度： 活動和非活動文字分段相對於其背景，都必須滿足 WCAG AA 最低對比度 4.5:1 的要求。
- 觸控目標尺寸： 每個獨立分段必須提供至少 24x24px 的互動區域（WCAG 2.2 SC 2.5.8），但強烈建議最低高度為 40px 到 44px，以確保在行動裝置上能流暢地用手指點擊。
- 焦點指示器： 鍵盤焦點必須在當前選中的分段或活動焦點目標上清晰可見。確保焦點環不會被相鄰分段裁剪或隱藏。
- 無文字換行： 分段文字應為單行，且絕不能在按鈕內換行成多行。這會破壞垂直韻律並導致視覺重疊。
- 減少動畫效果： 如果實作了動畫滑動指示器，請透過
@media (prefers-reduced-motion: reduce)尊重使用者的作業系統偏好，方法是禁用滑動效果，並立即切換透明度或輪廓高亮。
常見失敗模式
- 佈局位移 (CLS)： 更改活動分段會改變活動按鈕的寬度，導致相鄰元素向左或向右跳動。
- 導航謬誤： 將主要全域頁面導航設計成類似分段控制，讓使用者誤以為可以在頁面內立即更改內容。
- 缺少選中提示： 僅使用微妙的字體粗細變化或低對比度指示器，使低視力使用者難以識別哪個選項被選中。
- 鍵盤陷阱： 未能將標準的方向鍵繫結到控制元件內部，迫使僅使用鍵盤的使用者必須逐個按
Tab鍵瀏覽每個選項。 - 行動裝置擠壓： 允許 4 段控制元件在行動裝置上縮小，直到標籤重疊、截斷到無法辨認，或剪裁到軌道邊界之外。
驗證標準
- 已根據控制元件的功能（Radio Group 或 Tablist）選擇了清晰的語義 ARIA 模式。
- 獨立分段達到最小的 24x24px 觸控目標尺寸（行動裝置上首選 44px）。
- 非活動和活動文字對比度符合 WCAG AA 標準（>= 4.5:1 比例）。
- 活動指示器在滑動過渡期間使用硬體加速的 CSS 屬性（
transform），以防止累積佈局位移（CLS）。 - 已定義響應式行為（流體齊行、最小寬度或下拉選單回退）。
- 分段內文字保持為單行，無垂直換行或裁剪。
- 已明確處理
@media (prefers-reduced-motion: reduce)的過渡回退方案。