卡片 UI 系統

卡片 UI 系統 是做什麼的？

目的

卡片 UI 系統提供了一套設計和結構化卡片的方法論。卡片是模組化的建構區塊，用於將相關資訊和操作分組。卡片是「探索型」介面的基本建構元素，使用者可以在統一的網格或清單中掃描和比較多個不同的項目（產品、文章、個人檔案）。系統化的卡片方法可確保內容易於掃描、視覺上保持一致，並能優雅地適應不同的版面環境（網格、輪播、堆疊），同時維持無障礙性和清晰的意圖。

使用案例

• 為電子商務列表頁面 (PLP) 設計產品網格。
• 為內容中心建立文章或部落格貼文的預覽。
• 在登陸頁面上建立「功能」或「服務」區塊。
• 組織儀表板小工具、功能亮點或資料摘要。
• 在頁面底部實作「相關內容」區塊。
• 為搜尋或篩選檢視定義「結果」元件。

何時不該使用

• 密集的資料表格： 當使用者需要同時比較多行細粒度資料的特定屬性時，請改用 responsive-data-tables（然而卡片可以作為響應式後的備用方案）。
• 單一敘事內容 / 簡單的文字流程： 當內容遵循嚴格的線性故事或標準段落時，卡片容器只會增加不必要的視覺雜訊或干擾閱讀節奏。
• 極簡的純操作介面： 例如只有單一欄位的搜尋列或簡單的登入表單，卡片包裝會增加不必要的視覺雜訊。

輸入

1. 內容解剖： 所需元素的清單（例如：圖片、標題、類別、價格、描述、CTA）。
2. 互動意圖： 整個卡片是否可以點擊，或者是否有特定的操作目標？
3. 父層環境： 卡片將在何處呈現？（例如：3 欄網格、側邊欄、橫向滾動區？）
4. 內容變異性： 標題和描述預期的最小和最大文字量是多少？
5. 現有系統： 來自父層設計系統的流暢間距、排版比例和色彩調色盤。

輸出

1. 卡片解剖規格： 定義的區域（頁首、媒體、內容、頁尾）及其內部間距。
2. 卡片藍圖： 卡片內部佈局和層級的結構性定義。
3. 響應式變體： 卡片如何適應的規則（例如：在行動裝置上從垂直切換為水平）。
4. 互動規格： 定義的狀態（懸停、聚焦、啟用）和可點擊區域。
5. 無障礙對應表： 標題層級和鍵盤互動模式的指引。

工作流程

1. 應用「三要點規則」並定義解剖結構

每張卡片應有三個清晰的層級重點以確保可掃讀性：

1. 錨點（視覺）： 一個高品質的圖片或圖示，提供立即的識別。定義圖片的寬高比（例如 16:9、1:1）。
2. 背景（內容）： 標題和核心元資料（例如：價格、日期、類別）。
3. 目標（操作）： 一個清晰的主要操作（例如：「加入購物車」、「閱讀更多」）。

繪製完整的內部層級結構：頁首（元資訊，如標籤/日期）、媒體區、內容/主體（標題 + 描述）和頁尾/操作（CTA、價格、社交證明）。

2. 建立內部間距和內部網格

將 fluid-spacing-system 應用於卡片內部：

• 內距： 卡片邊緣與其內容之間的空間（通常是 --space-m）。
• 堆疊間距： 內部元素之間的垂直空間（通常是 --space-xs 或 --space-s）。

決定內容如何在卡片內部分佈：

• 由上而下（標準）： 圖片在上方，內容在中間，操作在底部。
• 並排（水平）： 圖片在左側，內容和操作在右側（最適合行動裝置清單或側邊欄）。
• 疊加： 內容位於圖片之上（需要高對比度處理以確保清晰易讀）。

3. 設計視覺層級並處理內容變異性

應用 visual-hierarchy-system 槓桿來區分內容：

• 粗細： 讓標題加粗且大於描述。
• 對比度： 對元文字（例如「發布於 10 月 24 日」）使用較柔和的顏色。
• 層級： 使用邊框或微妙的陰影來將卡片與背景區分開來。

為「最壞情況」的內容情境進行設計：

• 截斷 vs. 換行： 決定長標題應以省略號截斷還是換行到多行。
• 對齊： 在操作容器上使用 Flexbox margin-top: auto，確保所有按鈕在網格中不同高度的卡片之間完美對齊。

4. 建立互動模式

為互動選擇一個功能模式：

• 大方塊： 整張卡片是一個連結（需要仔細處理螢幕閱讀器的無障礙性）。
• 巢狀操作： 僅有特定按鈕或標題可以點擊。
• 混合型： 卡片表面有懸停效果，但特定操作執行不同任務（例如「加入購物車」vs.「檢視詳細資訊」）。

在懸停時使用微妙的轉換效果（例如輕微上移、邊框顏色變化）來指示互動性。

5. 定義響應式調整並驗證無障礙性

規劃卡片在不同視口下的生存方式：

• 垂直轉水平： 對於行動裝置，卡片可能從圖片在上方的佈局切換為圖片在左側的佈局，以節省垂直空間。

在簽核前驗證無障礙性：

• 標題層級： 確保卡片標題使用適當的標題層級（通常是 H3 或 H4）以維持頁面的文件大綱。
• 觸控目標： 卡片內任何互動元素都必須符合 WCAG 2.2 SC 2.5.8（最小 24x24px，如果無法避免較小的目標，則需有足夠的間距）；在空間允許的情況下，建議使用 44x44px。
• 替代文字： 每個錨點圖片都必須有描述性的替代文字，或標記為裝飾性。
• 鍵盤導航： 卡片內部的每個互動元素都必須可透過 Tab 鍵到達，並且擁有不被相鄰卡片或固定頁首裁剪或隱藏的焦點指示器（WCAG 2.2 SC 2.4.11，焦點未被遮擋）。

決策規則

• 「三要點」規則： 一張卡片不應有超過 3 個不同的優先級（例如：1. 圖片，2. 標題，3. 價格）。細節太多會使其變成「迷你頁面」，而不是卡片。
• 寬高比規則： 對圖片使用一致的寬高比（例如 4:3、16:9 或 1:1），以防止網格中的版面「跳動」。
• 接近度分數： 標題和描述之間的間距應小於描述和 CTA 之間的間距。
• 「無孤兒」規則： 如果卡片是網格的一部分，網格必須優雅地處理剩餘空間（例如 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))）。
• 等高： 在網格中，同一列的卡片最好高度相同（使用 Flexbox align-items: stretch）。
• 主要操作 vs. 次要操作： 只能有一個操作在視覺上佔主導地位（主要 CTA）。其他操作（例如「儲存至願望清單」）應為圖示或低對比度的連結。
• 互動提示： 如果卡片可以點擊，則必須有可見的懸停狀態。

限制條件

• 響應式： 卡片絕不能超過視口寬度或具有固定寬度；它們應跨越 responsive-grid-system 中的欄位，並在小型螢幕上垂直堆疊或切換為水平佈局。
• 無障礙性： 必須支援鍵盤導航（透過 Tab 鍵瀏覽互動元素）並維持文字至少 4.5:1 的對比度。如果整張卡片都可以點擊，請使用「拉伸連結」模式，以避免螢幕閱讀器出現冗餘連結。
• 效能： 避免使用過大的圖片；使用 srcset 為卡片容器提供適當大小的資源。
• 佈局： 優先使用帶有 auto-fill/auto-fit 和基於 clamp() 間距的 CSS Grid，而非固定的中斷點，以便卡片能自然重排；當卡片的內部佈局必須根據其自身寬度（而非視口）進行調整時（例如同一張卡片在全寬網格和狹窄側邊欄中），請使用容器查詢（@container）。

常見失敗模式

• 「階梯 / 交錯按鈕」效果： 由於標題長度不同，按鈕位於不同的高度，使網格看起來雜亂無章。
• 過度裝飾： 使用過多的邊框、陰影和漸層，使內容難以閱讀。
• 資訊密度過低： 卡片過大但內容過少，導致不必要的滾動。
• 資訊過載： 試圖將太多細節塞入一張卡片，破壞了三要點規則，並使用戶感到困惑。
• 無法存取的 / 看不見的點擊目標： 在行動裝置上難以點擊的小按鈕或連結，或者讓卡片看起來可點擊但實際觸發器只是一個小圖示。
• 缺乏內距： 將文字緊貼卡片的邊緣或圖片。

驗證標準

• 「三要點規則」（錨點、背景、目標）清晰可見。
• 內部間距（內距/間距）使用流暢間距系統中的 token。
• 字體排版遵循網站既定的比例和層級。
• 主要操作（按鈕）在網格行的底部對齊。
• 系統中所有卡片的圖片寬高比一致。
• 互動狀態（懸停/聚焦）已定義且可存取。
• 網格中的卡片正確對齊，並能優雅地處理可變的內容長度。
• 標題層級遵循頁面內的邏輯層級結構。
• 觸控目標符合 WCAG 2.2 SC 2.5.8（24x24px 最小尺寸）。
• 焦點指示器絕不會被重疊的卡片、圖片或固定元素遮擋（WCAG 2.2 SC 2.4.11）。