比較與矩陣系統
目的
比較與矩陣系統提供了一套設計詳細探索與評估介面的方法論。雖然 pricing-table-ui-system 處理高層級的方案階層，而 data-table-ui-system 管理大型資料集，但此系統專注於屬性密集的少數特定項目（通常為 2–5 個）比較。它能確保使用者在評估複雜產品或服務時，即使面對數十個維度，也不會迷失方向、被資料淹沒，或因無響應的版面配置而困擾。
使用案例
- 電子商務產品比較： 比較電子產品、家電或車輛的技術規格。
- SaaS 功能矩陣： 詳細解析高層級定價卡之外的功能平台能力。
- 服務比較： 評估不同的保險方案、旅遊套裝行程或教育課程。
- 內部工具： 並排審視不同系統版本或配置。
何時不該使用
- 高層級定價： 對於簡單的 3 層方案摘要，請使用
pricing-table-ui-system。 - 大型資料集探索： 若使用者需要排序和篩選數百個項目，請使用
data-table-ui-system。 - 單一項目詳細資訊： 個別產品頁面請使用
article-layout-system或card-ui-system。 - 線性流程： 逐步流程請使用
step-progress-system。
輸入
- 比較集合： 選定進行評估的 2–5 個項目。
- 屬性分類法： 所有待比較的功能、規格和資料點的分類清單。
- 資料類型： 屬性對應到 UI 類型的對應表（例如：布林值/勾選標記、數值、評分、文字描述）。
- 選取脈絡： 這是個持續存在的頁面，還是從產品列表頁觸發的暫時性覆蓋層？
輸出
- 矩陣結構規格： 定義行標題（屬性）、列標題（項目）與資料儲存格。
- 分類框架： 將屬性分組為邏輯區塊並搭配可折疊標題的規則。
- 固定導覽計畫： 在垂直與水平捲動期間維持脈絡的行為規則。
- 響應式轉換圖： 將矩陣調整為行動版（例如：項目切換 vs. 垂直堆疊）的策略。
工作流程
1. 建立網格框架
定義矩陣的主要軸線：
- 列： 代表被比較的項目。
- 行： 代表屬性或功能。
- 前導欄： 最左邊的第一欄包含屬性標籤/標題。
2. 分類並分組屬性
透過將行組織成邏輯群集來防止「比較疲勞」：
- 區塊： 將相關屬性分組（例如「效能」、「連線能力」、「保固」）。
- 可折疊性： 允許使用者折疊/展開區塊，以專注於特定標準。
- 視覺區分： 使用微妙的背景變化或邊框來分隔區塊。
3. 標準化資料視覺化
對不同的資料類型應用一致的視覺語言：
- 布林值： 使用高對比度的勾選標記 (✓) 表示包含，使用破折號 (—) 或空白狀態表示排除。
- 評分： 使用一致的圖示比例（例如 5 顆星）。
- 細微文字： 對於描述，使用較小但易讀的字體大小，並確保儲存格內的行長度得到管理。
- 重點標示： 在視覺上區分某個項目明顯優於其他項目的儲存格（使用時需謹慎以保持中立性）。
4. 實作固定內容（路徑指引）
確保使用者永遠不會忘記他們正在檢視的內容：
- 固定列標題： 當使用者向下捲動行時，將項目名稱和圖片保持在視窗頂部可見。
- 固定行標題： 在桌機上，對於寬矩陣，當使用者水平捲動時，將屬性標籤保持在左側可見。
5. 規劃行動版適配
矩陣本質上是水平的，需針對垂直螢幕進行適配：
- 「選擇器」模式： 一次顯示屬性清單和 1–2 個項目，使用下拉式選單或滑動手勢來切換可見項目。
- 「垂直卡片」模式： 將矩陣轉換為一系列卡片，為每張卡片重複屬性標籤（僅建議用於非常簡單的比較）。
決策規則
- 五項規則： 在桌機上，限制並排矩陣中的最大項目數量為 5，以防止水平方向的資訊過載。
- 屬性相關性： 僅包含集合中至少有兩個項目之間存在差異的屬性。如果每個項目都有相同的值，請考慮將該資訊移至共用的「全域功能」區塊。
- 標題突出性： 項目標題（第 1、2 欄等）應包含產品的小圖片，以提供即時的視覺辨識。
- 行懸停狀態： 使用明顯的懸停背景顏色標記整行，以幫助視線跨欄追蹤。
限制條件
- 可近性： 行標題必須使用
scope="row"和scope="col"與儲存格正確關聯。確保勾選標記和圖示具有高對比度。固定的行/列標題不得遮擋下方儲存格或控制項的鍵盤焦點指示器 (WCAG 2.2 SC 2.4.11)。行動版上的任何項目切換器或下拉式控制項都必須滿足 24x24px 的最小目標尺寸 (SC 2.5.8)。 - 響應式設計： 水平捲動必須是有意為之（例如在容器內），且不得破壞整體頁面佈局。
- 視覺權重： 「前導欄」（屬性）應具有略微不同的視覺處理方式（例如淺灰背景或粗體文字），以與資料欄區分。
常見失敗模式
- 「遺失標題」問題： 在長矩陣中向下捲動，卻忘記哪個項目是哪個。
- 屬性過載： 顯示超過 50 行卻未分類，導致無法找到特定資訊。
- 行動版壓縮： 試圖將 4 欄擠入行動螢幕，導致文字無法閱讀。
- 模糊符號： 使用使用者無法立即理解的客製化圖示表示「是/否」。
- 不一致對齊： 在同一欄內混合使用置中圖示與左對齊文字。
驗證標準
- 垂直捲動時，項目標題保持在視窗頂部固定。
- 屬性已分組為邏輯的、可折疊的區塊。
- 資料類型（布林值、評分、文字）使用一致的視覺語言。
- 「前導欄」在視覺上與資料欄有所區分。
- 行動版檢視提供明確的項目比較機制（例如項目切換）。
- 已實作行懸停狀態以協助水平追蹤。
- 所有圖示和文字均符合 WCAG AA (4.5:1) 對比度要求。
- 固定標題不會遮擋儲存格或控制項的焦點指示器 (WCAG 2.2 SC 2.4.11)。
- 行動版項目切換器控制項符合 24x24px 的最小目標尺寸 (WCAG 2.2 SC 2.5.8)。