Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsCards
卡片是顯示單一主題內容和操作的元件。
⚡️ 相關資源：
Figma Components
Figma File
UI Spec
Figma File （無整理）
Anatomy
解構
- Image 預覽圖片，例如：歌單、專輯、Podcast 頻道的封面等等。
- Title 標題文字，用於顯示歌單、專輯、Podcast 頻道的名稱。
- Supporting Text 支援文字用於對內容的更多描述，包含屬性（歌單/專輯）、特徵和其他相關資訊，讓使用者便於檢索。例如：摘要、作者、發布日期、關鍵字等等。
- Avator 與內容相關的人物頭像。
- Indicator & Action 通常置於卡片底部，用於表示特定狀態，例如：時長、進度條、數字等等，以及其他對內容的操作。
Variants
變形
❶ Vertical Card
Vertical Card for Audio Contents
可呈現多種內容的卡片形式，包含歌單、專輯、人物、Podcast，通常一次顯示複數個卡片，並且提供左右橫滑。
Article and Video Contents legacy components
用於呈現文章或影音內容，目前較少使用。
此 Components 沒有使用 Design System 的 Typography 和 Semantic color
考古時間
我們過去以「媒體形象」運營產品，所以利用 KKBOX App 推廣文章或影音內容。如今目標不同以往，但仍有媒體模組被遺留在產品中沒有更新。
❷ Horizontal Card
Audio Contents
用於呈現重點內容。
因為此類卡片運用無包框設計，所以不建議左右排列；若要左右排列，需使用包框設計。
❸ Horizontal Card with Footer
Podcast Contents
主要用於呈現 Podcast 內容，可顯示複數個卡片。
State
狀態
Pressed 點擊
點擊時卡片等比縮小 94%
Loading 載入
載入卡片時顯示 Skeleton UI，可以讓使用者預期將會在此顯示內容。
目前只有 Vertical Card for Audio Contents 使用 Skeleton UI（參考 Figma 設計檔案），其餘卡片無 Loading 設計，請設計師透過專案開發陸續補上。
Usage Guideline
規範
Cards Placement 卡片配置
Single 單一
Collection - Horizontal 水平集合
Collection - Vertical 垂直集合
Carousel 輪播
橫式卡片的包框設計
橫式卡片的內容物較複雜，在無包框的設計下，無法讓使用者清楚的辨識出整個卡片的區域，所以比較適合「單獨」出現，若需要左右或上下排列，建議使用有包框的卡片設計。
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
February 8, 2023 | 1.12 | ・新增 Cards 草稿 | Cards |  Verna Wang |