看板 UI 系統
目的
看板 UI 系統提供了一個標準化、高密度且可親近的佈局框架，用於管理工作流程狀態欄位、卡片式任務項目和流程管線。看板是現代 SaaS 應用程式、專案管理工具、求職者追蹤系統和銷售 CRM 管線中的核心互動畫布。
設計一個有效的看板介面需要在高視覺密度、獨立欄位捲動、清晰的空間層級、即時進行中工作限制回饋以及跨視窗的流暢響應性之間取得平衡。此外，傳統僅限指標操作的拖放實作經常造成嚴重的可親近性障礙。此技能橋接了設計與技術執行，為欄位容器、任務卡片結構、觸控目標以及符合 WCAG AA 標準的鍵盤/螢幕閱讀器重新排序工作流程建立了空間規則。
使用案例
- 專案與任務管理系統： 結構化衝刺板、待辦事項欄位（例如，待辦、進行中、程式碼審查、完成）以及問題追蹤板。
- 求職者追蹤系統： 將求職者招募階段視覺化（例如，已應徵、篩選中、面試、錄取、已雇用）。
- 銷售與 CRM 交易管線： 以彙總的交易金額和每個欄位的階段機率來管理銷售線索階段。
- 內容編輯日曆： 追蹤文章和媒體製作工作流程，從發想、草稿、審查到發布。
- 訂單履行工作空間： 監控物流或廚房顯示介面中的多步驟訂單處理流程。
何時不該使用
- 資料表格與財務列表： 對於需要排序、篩選和大量儲存格編輯的密集多欄位行資料，請使用
data-table-ui-system。 - 層級式文件或檔案樹： 對於深度巢狀的檔案結構和文件大綱，請使用
tree-view-navigation-system。 - 鎖定視窗的 SaaS 外殼佈局： 對於整體應用程式外殼（導覽列、頂部欄、可摺疊面板），請使用
dashboard-layout-system。 - 單欄活動動態： 對於時間順序的串流動態或簡單的垂直任務列表，請使用
timeline-activity-system或card-ui-system。
輸入
- 工作流程階段與欄位分類法： 工作流程狀態的有序列表（例如，待辦事項、進行中、審查、完成）及其欄位元資料（進行中工作限制、狀態強調色、交易總額）。
- 卡片資料密度矩陣： 每張任務卡片要顯示的屬性（例如，任務 ID、標題、優先順序標籤、截止日期、負責人頭像、子任務進度、附件數量）。
- 視窗與外殼上下文： 由上層應用程式外殼（來自
dashboard-layout-system）提供的佈局邊界。 - 設計 Token： 色彩調色盤、高程表面、間距尺度和字型 Token（來自
accessible-color-system、elevation-and-depth-system和fluid-spacing-system）。
輸出
- 水平欄位畫布規格： 針對鎖定視窗的水平捲動容器、固定欄位寬度和間距的空間佈局定義。
- 欄位標題與進行中工作限制結構： 欄位標題、徽章計數器、進行中工作限制警告閾值（正常、接近、超過）以及快速新增動作觸發器的視覺設計。
- 任務卡片元件規格： 標準、緊湊和展開任務卡片的結構化佈局藍圖，包括拖曳手柄目標、元資料網格以及懸停/聚焦/抓取互動狀態。
- 可親近的鍵盤與拖放模型： ARIA 角色對應（
role="region"、role="list"、role="listitem"）、焦點管理路徑、鍵盤重新排序快捷鍵以及aria-live宣告模式。 - 響應式行動裝置轉換策略： 佈局適應指南，在小螢幕上將多欄水平佈局切換為區段式分頁檢視或堆疊式摺疊面板。
工作流程
1. 建立水平欄位畫布結構
在鎖定視窗的外殼（dashboard-layout-system）內結構化主要的看板工作區：
- 容器尺寸： 設定看板包裝器為
display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden;，以允許跨欄位水平捲動，同時保持看板標題固定。 - 欄位尺寸： 定義固定或彈性收縮的欄位寬度（
min-width: 280px; max-width: 340px; width: 300px;）。避免欄位收縮至280px以下，以防止文字截斷和擠壓觸控目標。 - 間距與內距： 設定一致的欄位間距（例如，
gap: var(--space-m, 16px)）和水平內距（例如，padding: 16px 24px）。 - 欄位容器外殼： 將每個欄位樣式設定為獨立的 flex 容器（
display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);）。
2. 設計欄位標題與進行中工作限制信號
每個欄位標題作為欄位堆疊頂部的黏性控制列：
- 黏性欄位標題： 將標題定位在欄位 flex 堆疊的頂部（
flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;）。 - 標題元素：
- 狀態強調指示器： 一個 10x10px 的彩色藥丸或左側邊框，對應於階段（例如，藍色 = 進行中，紫色 = 審查中，綠色 = 完成）。
- 欄位標題： 截斷的文字（
font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)）。 - 卡片計數器與進行中工作限制徽章： 顯示項目計數以及進行中工作限制（例如，“3/5”）。
- 欄位動作選單： 一個 32x32px 的圖示按鈕（
...），用於存取欄位設定、排序或摺疊選項。
- 進行中工作限制視覺狀態：
- 正常（低於限制）： 微弱的中性徽章背景（
background: var(--surface-neutral-muted); color: var(--text-secondary)）。 - 警告（達到限制）： 琥珀色徽章背景（
background: var(--surface-warning-subtle); color: var(--text-warning-bold)）。 - 超過（超過限制）： 純紅色徽章或高亮顯示的欄位標題邊框（
background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)），並帶有可親近的警告圖示和解釋工作流程瓶頸的工具提示。
- 正常（低於限制）： 微弱的中性徽章背景（
3. 建構獨立的欄位捲動區域
防止在檢查單一欄位中的長列表卡片時整個看板或頁面垂直捲動：
- 卡片列表容器： 對列表容器（
role="list"）套用flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px;。 - 慣性與平滑捲動： 啟用
-webkit-overflow-scrolling: touch;和自訂捲軸（微妙的 6px 捲軸），使個別欄位順暢捲動，而不觸發整體頁面移動。 - 空狀態容器： 如果欄位包含 0 張卡片，顯示一個虛線拖放區域輪廓（
border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;），並帶有微妙的標籤（“此階段無任務”）和一個快速的「新增卡片」按鈕。
4. 建構任務卡片元件層級
使用 visual-hierarchy-system 設計具有清晰視覺掃描順序的任務卡片：
- 卡片基礎結構： 將每張卡片呈現為不同的列表項目（
role="listitem"/article），具有background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab;。 - 卡片區域分解：
- 頂部行（標籤與動作）： 優先順序徽章（例如，高對比藥丸中的“High”、“Urgent”）和任務參考 ID（例如，“PROJ-1042”）。包含一個 24x24px 的拖曳手柄按鈕（
aria-label="Reorder card PROJ-1042"）。 - 中間區域（標題與描述）： 主要任務標題（
font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;）。可選的 1 行淡化文字摘要。 - 底部元資料行（進度與負責人）： 左側顯示截止日期指示器（如果過期則以紅色突出顯示）和子任務核對清單進度（例如，“3/5 ✓”）。右側顯示堆疊的負責人頭像（
user-avatar-system）。
- 頂部行（標籤與動作）： 優先順序徽章（例如，高對比藥丸中的“High”、“Urgent”）和任務參考 ID（例如，“PROJ-1042”）。包含一個 24x24px 的拖曳手柄按鈕（
- 卡片互動狀態：
- 懸停： 略微提高陰影高程（
box-shadow: var(--shadow-md); border-color: var(--border-hover)）。 - 聚焦： 高度可見的 2px 偏移焦點環（
outline: 2px solid var(--focus-ring); outline-offset: 2px）。 - 拖曳/抓取狀態：
opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;。 - 放置目標提示： 當將卡片懸停在欄位放置區域上方時，顯示一個動畫插入佔位間隙（
height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);）。
- 懸停： 略微提高陰影高程（
5. 實作可親近的鍵盤與螢幕閱讀器拖放
標準的拖放框架（HTML5 拖放 API）通常對純鍵盤和螢幕閱讀器使用者來說是不可親近的。實作一個明確的替代鍵盤導航模式：
- 鍵盤重新排序觸發器： 允許使用者聚焦拖曳手柄或卡片，然後按下
Space或Enter進入「移動模式」。 - 選取時的焦點與宣告： 當移動模式啟動時，設定
aria-grabbed="true"（或在移動觸發器上設定aria-pressed="true"），在卡片周圍顯示視覺化的「已抓取」光暈，並透過一個不可見的aria-live="polite"區域宣告：「卡片 PROJ-1042 已抓取。目前在「進行中」欄位，位置 2/5。使用方向鍵或 Alt+方向鍵來移動，按 Space 放下，按 Escape 取消。」 - 跨欄位與欄位內移動：
- 上/下方向鍵： 在目前欄位列表中重新排序卡片。
- 左/右方向鍵： 將卡片移動到相鄰的左側或右側欄位，並將其附加到該欄位的列表。
- 放下與取消確認：
- Space / Enter： 確認放置。更新 DOM 位置，釋放抓取狀態，將焦點設定到已放置的卡片，並宣告：「卡片 PROJ-1042 已放入「審查中」欄位，位置 1/3。」
- Escape： 取消移動。將卡片返回到原始位置並宣告：「移動已取消。卡片已返回「進行中」欄位，位置 2。」
6. 行動裝置視口適配
在小螢幕行動裝置上（<768px）的多欄位水平捲動會導致嚴重的水平滑動疲勞和尷尬的卡片放置。實作一個響應式轉換策略：
- 區段式欄位分頁（推薦的行動模式）： 在低於 768px 的螢幕上，隱藏水平捲動畫布。在看板頂部呈現一個黏性的區段式分頁控制項（
segmented-control-system），顯示帶有項目計數徽章的欄位標題（例如，[ 待辦 (4) ] [ 進行中 (3) ] [ 完成 (8) ]）。 - 單欄位活動檢視： 僅顯示全寬度的活動欄位列表（
width: 100%）。 - 情境式「移動到」模態/動作面板： 當在行動裝置上點選卡片時，在卡片選單中提供一個明確的「移動到...」按鈕。點擊它會開啟一個底部面板（
accessible-bottom-sheet-implementation），列出目標欄位，以便一次點擊重新定位，完全消除行動螢幕上的觸控拖曳手勢。
決策規則
行動裝置欄位佈局策略
| 視窗寬度 | 推薦的 UI 模式 | 互動機制 |
|---|---|---|
| 桌面 (>1024px) | 多欄位水平網格畫布 | 並行可見欄位，指標拖放 + 鍵盤移動模式。 |
| 平板 (768px - 1023px) | 緊湊欄位看板（水平捲動） | 較窄的欄位 (260px)，順暢的觸控水平滑動吸附。 |
| 行動裝置 (<768px) | 區段式欄位分頁 + 單一活動欄位 | 頂部狀態分頁，單欄全寬卡片，「移動到」底部面板。 |
欄位寬度策略
- 固定欄位寬度 (
300px)： 最適合具有 3-6 個欄位的標準看板。欄位保持可預測的寬度，額外的欄位會乾淨地流入水平溢出區域。 - 流體彈性欄位 (
flex: 1; min-width: 280px)： 最適合在寬螢幕上恰好具有 3 個欄位（例如，待辦事項、進行中、完成）的看板，允許欄位均勻地填滿整個視窗寬度，而不會留下未使用的右側空白。
進行中工作限制超過處理
- 軟性進行中工作限制（僅警告）： 以琥珀色/紅色突出顯示欄位標題並帶有超過限制的徽章，但允許使用者將卡片移入該欄位。建議用於創意和敏捷團隊工作流程，其中會發生暫時的瓶頸。
- 硬性進行中工作限制（封鎖）： 當達到限制時，阻止將卡片放入欄位，並顯示一個模態或內嵌警示：「已達到進行中工作限制 (5/5)。在新增更多任務之前，請先解決現有任務。」 停用進入該欄位的鍵盤移動。建議用於嚴格規範的營運工作流程。
限制條件
- 可親近性 (WCAG 2.1 AA)：
- SC 2.1.1 鍵盤： 每項卡片功能（編輯、重新排序、刪除、移動）必須僅使用鍵盤即可觸及和操作。
- SC 2.4.7 焦點可見： 聚焦的卡片和拖曳手柄必須具有未被裁切的焦點環，且與背景的最小對比度為 3:1。
- SC 4.1.3 狀態訊息： 卡片移動動作、進行中工作限制警告和篩選結果必須透過
aria-live="polite"區域進行宣告。 - SC 2.5.8 目標尺寸： 拖曳手柄、卡片選單觸發器 (
...) 和快速新增按鈕必須提供 24x24px 的最小觸控目標（在觸控裝置上建議使用 44x44px）。
- 佈局包含與 CLS： 欄位列表容器必須指定
overflow-y: auto和固定的標題，以防止在動態更新卡片時發生佈局崩潰或頁面層級的跳動。 - 效能： 高效渲染卡片列表。對於包含超過 200 張卡片的看板，請為每個欄位實作虛擬列表捲動（
virtual-list-implementation），以在拖曳操作期間保持 60fps 的渲染。