資料表格 UI 系統
目的
資料表格 UI 系統技能提供一套組織與呈現結構化、多屬性資料的方法。它透過建立明確的對齊、間距、層級以及表格格式內互動元素的規則，確保大型資料集易於掃描、比較與操作。
使用案例
- 為庫存管理、使用者管理或帳單功能設計 SaaS 儀表板
- 為電子商務或行銷網站建立產品比較矩陣
- 為技術應用程式實作日誌檢視器或稽核軌跡
- 在結構化檢視中組織財務資料或績效指標
- 為「資料表格」或「資料網格」建立元件庫標準
何時不應使用
- 簡單的鍵值對： 如果只有兩欄（例如：標籤：值），請改用描述清單（
<dl>）或簡單清單。 - 敘述性內容： 長篇文字或故事應使用標準排版與章節結構，而非表格。
- 版面網格： 頁面佈局請使用「響應式網格系統」；表格僅限於資料呈現。
- 低資料量的卡片： 如果資料視覺化程度高且屬性很少，請使用「卡片 UI 系統」以獲得更好的互動效果。
輸入
- 資料結構： 要顯示的資料類型（字串、數字、日期、布林值、動作）。
- 欄位優先級： 哪些屬性是識別的主要關鍵，哪些是次要細節。
- 使用者任務： 使用者需要尋找特定行、跨行比較值，還是執行大量動作？
- 資料量預估： 典型檢視中預期有多少行與欄？
輸出
- 表格結構規格： 定義的區域（表頭、列、儲存格、表尾）及其內部間距。
- 對齊規則矩陣： 根據資料類型制定的水平對齊規則。
- 密度變體： 「緊湊」、「標準」與「寬鬆」行高的定義。
- 互動對應： 排序、篩選、選取行與內嵌動作的行為說明。
工作流程
1. 定義欄位類型與對齊
應用「對齊經驗法則」以確保可掃描性：
- 文字（預設）： 靠左對齊（幫助視線跟隨單詞的開頭）。
- 數字／指標： 靠右對齊（對齊小數點，便於快速比較數值大小）。
- 日期／狀態標籤： 置中或靠左對齊（視欄位寬度而定）。
- 動作： 靠右對齊（通常是最後一欄）。
2. 建立視覺層級（表頭）
表格表頭必須與資料清楚區分：
- 樣式： 使用不同的背景顏色、粗體或全大寫字體處理
<th>元素。 - 固定性： 對於長表格，使用固定表頭（sticky header），讓使用者在捲動時仍能保持上下文。
3. 設定行密度與節奏
根據使用案例選擇密度等級：
- 緊湊： 高資料密度（例如 32px 高度）。最適合專業使用者與儀表板。
- 標準： 平衡（例如 48px 高度）。最適合一般用途。
- 寬鬆： 低密度（例如 64px 高度）。最適合行銷或簡單清單。 使用斑馬條紋或微妙的邊框來分隔行，減少「跳行」情況。
4. 設計互動式資料
定義使用者如何操作資料：
- 排序： 在支援排序的表頭中加入指示器（例如上下箭頭）。
- 行狀態： 定義行的「懸停」、「選取」與「聚焦」狀態。
- 大量動作： 如果需要，在最左側加入核取方塊欄。
5. 規劃內容變異
處理資料長度的邊界情況：
- 截斷： 對於非關鍵識別的長文字，使用省略號。
- 換行： 對於重要的描述性文字，允許換行。
- 固定寬度： 為穩定的欄位（例如狀態、日期）指定固定寬度，為主要識別欄位（例如名稱）使用流動寬度。
決策規則
- 可掃描性規則： 第一欄應始終是最重要的識別欄位（例如名稱、ID），作為該行的錨點。
- 數字對齊： 如果比較數值是主要任務，請為數字使用等寬字體，以保持數字完美對齊。
- 斑馬條紋 vs. 邊框： 對於非常寬的表格，使用斑馬條紋幫助視線水平追蹤；對於較短、較簡單的表格，使用邊框。
- 動作放置： 將動作集中在最後一欄，或使用可見的「更多」選單來保持介面整潔。
- 空白儲存格： 絕不要讓儲存格留空。使用破折號（—）或「N/A」來確認資料缺失，而非載入錯誤。
限制條件
- 無障礙性： 必須使用語意化的
<table>標籤。表頭必須設定scope="col"。必須使用<caption>提供上下文。固定表頭不得遮蓋捲動至其下方的儲存格或行動作的焦點指示器（WCAG 2.2 SC 2.4.11）。內嵌的動作按鈕／連結必須符合 24x24px 的最小目標尺寸（SC 2.5.8）。 - 響應式： 當檢視埠縮小時，表格必須遵循「響應式資料表格」（捲動、堆疊或切換）的模式。
- 對比度： 表頭文字與狀態指示器必須符合 WCAG AA（4.5:1）的對比度要求。
常見失敗模式
- 數字未對齊： 將數字靠左對齊會導致無法一眼比較數值大小。
- 「文字牆」： 使用高密度行卻沒有斑馬條紋或清楚的表頭區別，造成「視覺疲勞」。
- 不明顯的表頭： 表頭與資料過於相似，難以知道各欄代表什麼。
- 缺少動作提示： 儲存格內的按鈕或連結太小，難以點擊，或看起來不像可互動的元素。
- 無空狀態： 顯示空白表格，卻沒有「找不到結果」的訊息。
驗證標準
- 欄位對齊遵循資料類型規則（文字靠左，數字靠右）。
- 表格表頭在視覺上與行資料有明顯區別。
- 主要識別欄位固定在第一欄。
- 使用語意化 HTML（
<table>、<th>、scope）建立結構。 - 空白儲存格使用佔位符號（例如 —），而非留空。
- 已清楚定義互動狀態（懸停／選取）。
- 設計能優雅處理長內容（截斷或換行）。
- 固定表頭絕不遮蓋行或儲存格動作的焦點指示器（WCAG 2.2 SC 2.4.11）。
- 行動作符合 24x24px 的最小目標尺寸（WCAG 2.2 SC 2.5.8）。