表單設計系統

表單設計系統 是做什麼的？

目的

「表單設計系統」技能提供了一套方法論，用於設計網頁表單的視覺與空間框架。當技術實作處理「如何」、成長優化處理「為什麼」時，設計系統則定義了「是什麼」與「在哪裡」。它確保表單元件——標籤、輸入欄位、選擇項目與操作按鈕——被組織成一個可預測、易於存取且高度可信的介面，從而降低認知負荷並預防使用者錯誤。

使用案例

• 設計用於表單的 UI Kit 或設計系統元件庫。
• 為複雜的多步驟資料輸入介面建立視覺標準。
• 稽核現有表單以找出視覺不一致或空間摩擦。
• 設計跨裝置保持資訊階層的回應式表單佈局。
• 標準化錯誤與驗證的視覺化模式。

何時不該使用

• 通用搜尋列： 簡單的單一輸入搜尋欄位通常不需要完整的設計系統處理。
• 實驗性互動媒體： 當表單式的互動是次要於敘事或藝術體驗時。
• 低風險微互動： 例如「讚/倒讚」或單純的切換開關，且沒有伴隨資料輸入。

輸入

1. 資訊結構： 要收集的特定資料點及其相互關係。
2. 裝置中斷點： 來自 responsive-grid-system 的回應式需求。
3. 品牌樣式： 字型尺度、色彩調色盤與間距記號（來自 fluid-spacing-system）。
4. 互動需求： 表單是否需要即時驗證、檔案上傳或複雜的選擇項目選取。

輸出

1. 輸入欄位結構規格： 標籤、輸入欄位、輔助文字、圖示與錯誤訊息的視覺定義。
2. 版面藍圖： 欄位分組、對齊（上方 vs. 左方）與操作按鈕放置的空間規則。
3. 選擇元件對應圖： 何時使用單選按鈕、核取方塊、開關或下拉選單的定義。
4. 回饋與狀態矩陣： 滑鼠懸停、焦點、停用、成功與錯誤狀態的視覺處理方式。

工作流程

1. 定義元件結構

為每個「欄位群組」建立一致的結構。一個欄位應包含：

• 標籤： 清晰簡潔的文字，用於辨識該欄位。
• 輸入欄位： 可互動的容器（文字輸入、下拉選單等）。
• 輔助/說明文字： 持續顯示的指引（例如「密碼必須為 8 個字元」）。
• 錯誤訊息： 僅在驗證失敗時出現的上下文相關回饋。

2. 建立空間佈局與對齊

決定標籤與輸入欄位之間的關係：

• 標籤上方對齊（建議）： 最適合掃讀性與行動裝置回應式設計。
• 標籤左方對齊： 僅適用於資料密集的桌面介面，且垂直空間極為重要時。
• 分組： 使用邏輯間距（例如 --space-l）區隔不同群組，並在群組內部使用較小的間距（例如 --space-s）。

3. 選擇互動模式

根據資料類型指派 UI 模式：

• 二元選擇： 使用核取方塊處理「是/否」或可多重選取。
• 互斥選擇： 使用單選按鈕處理 2–5 個選項；使用下拉選單處理 6 個以上選項。
• 即時切換： 使用開關處理無需「提交」按鈕即可立即生效的設定。

4. 設計回饋迴圈

建立驗證的視覺階層：

• 焦點狀態： 使用高對比度的外框來指示活動中的欄位。
• 錯誤狀態： 使用顏色（通常是紅色）、圖示與邊框粗細來標示錯誤。
• 成功狀態： 對於高風險欄位（例如使用者名稱可用性），使用微妙的提示（如綠色勾號）。

5. 規劃回應式適應

規劃表單在較小視口中的呈現方式：

• 堆疊： 桌面的多欄佈局必須在行動裝置上堆疊為單一欄。
• 觸控目標： 確保所有互動區域（單選按鈕、核取方塊、按鈕）至少為 24x24px（WCAG 2.2 SC 2.5.8 最小值）；以 44x44px 為首選，並應作為主要提交操作的預設值。

決策規則

• 單欄規則： 大多數表單使用單欄佈局，以維持清晰的垂直掃描路徑並減少視線追蹤疲勞。
• 標籤對齊： 預設使用標籤上方對齊。這樣可以減少處理表單時所需的視線停留次數。
• 佔位文字 vs. 標籤： 永遠不要使用佔位文字作為標籤。即使用戶開始輸入後，標籤仍必須保持可見。
• 按鈕階層： 主要的「提交」操作應在視覺上最為突出。次要操作（例如「取消」）應顯示為文字連結或低對比度的按鈕。
• 接近性： 將輔助文字和錯誤訊息盡可能靠近輸入欄位放置（通常直接在下方）。

限制條件

• 無障礙性： 標籤必須通過程式碼與輸入欄位關聯（<label for> 或包裹）。文字和邊框的對比度必須符合 WCAG AA（文字 4.5:1，UI 元件 3:1）。錯誤訊息必須透過 aria-describedby 與其輸入欄位程式化關聯，且無效欄位必須設定 aria-invalid="true"。焦點指示器不得被固定標頭、提示框或疊層遮擋（WCAG 2.4.11 焦點未被遮擋）。
• 回應式設計： 表單欄位不得溢出其容器，也不得使用超過行動裝置視口寬度的固定寬度。
• 視覺階層： 錯誤訊息必須在視覺上與輔助文字有所區別，以確保不會被忽略。

常見失敗模式

• 「佔位文字當標籤」陷阱： 使用佔位文字取代標籤，導致使用者在輸入時失去上下文。
• 過多欄位： 使用多欄佈局，混淆使用者自然由上而下的掃描路徑。
• 模糊的錯誤： 僅使用顏色來顯示錯誤（例如僅將邊框變紅），而沒有搭配圖示或文字訊息。
• 觸控目標太小： 設計的單選按鈕或核取方塊太小，無法在行動裝置上使用拇指操作。
• 「看不見的」焦點： 未能提供清晰的焦點外框，導致鍵盤使用者無法導航。

驗證準則

• 每個輸入欄位都有一個持續可見的標籤。
• 表單遵循邏輯的單欄垂直掃描路徑。
• 錯誤狀態結合使用顏色、圖示與文字。
• 焦點指示器為高對比度且清晰可見。
• 互動元素（輸入欄位、按鈕）符合 WCAG 2.2 24x24px 觸控目標最小值（建議 44x44px）。
• 佈局在行動裝置視口上能流暢地轉換為單欄。
• 主要、次要與第三級操作具有清晰的視覺階層。