Cards 卡片
概述
卡片是一種用於呈現內容的組合元件，透過圖片、色彩和排版，將相關資訊組織在一起，以提供與內容互動的方式，使資訊更易於使用者閱讀和理解。卡片內可以包含各種元件，如圖片、文字、按鈕、連結等，以滿足不同資訊呈現的需求。
使用時機
卡片常用於以下情境：
- 內容展示：當需要以視覺化方式呈現多個內容區塊時，卡片是個很好的選擇。例如「產品列表」、「新聞列表」、「活動列表」等。
- 資訊摘要：卡片可以用於摘要顯示文章、產品或服務的重點資訊。例如「推薦內容」、「檔案總覽」等。
- 導覽入口：卡片可以作為導覽入口，引導使用者前往其他頁面或內容。例如「分類導覽」、「功能入口」等。
- 行動呼籲：當希望使用者執行特定動作時，可以使用帶有行動呼籲按鈕的卡片。例如「了解更多」、「立即註冊」等。
使用規範
當您取用卡片元件進行設計時，應考慮以下原則：
- 內容簡潔：卡片上的內容應簡潔明瞭，避免過多文字或元素。
- 圖片清晰：如果卡片包含圖片，應確保圖片清晰、高品質。
- 排版一致：卡片中的元件應保持一致的排版風格，確保視覺上的統一性。
- 互動明確：如果卡片包含互動元素，應確保其功能明確，讓使用者知道點擊後會發生什麼。
設計範例
標準卡片 (Standard Card)
標準卡片是最基礎的卡片類型，用於呈現單一主題的內容。它通常包含標題、輔助文字，結構簡單，易於閱讀和理解。
![]()
- 標題 (Headline)：簡要概述卡片內容。
- 副標題 (Subheadline) (選擇性)
- 輔助文字 (Supporting Text)：提供更多上下文或說明。
![]()
- 標題 (Headline)：簡要概述卡片內容。
- 副標題 (Subheadline) (選擇性)
- 輔助文字 (Supporting Text)：提供更多上下文或說明。
- 主要按鈕 (Primary
Button)：最重要的行動呼籲按鈕，通常使用突出的顏色和明確的文字，例如「了解更多」，請使用填充按鈕樣式。
- 更多按鈕 (More Button)
(選擇性)：將不常用的資訊或次要操作隱藏在此按鈕中，點擊此按鈕後彈出選單、展開更多內容，請視產品需求與主次操作行為斟酌使用。使用圖示按鈕樣式，請確保此按鈕具有足夠的感應區域。
多媒體卡片 (Card with Media)
多媒體卡片是在標準卡片的基礎上，增加了多媒體元件（如圖片、插圖或影片）的卡片類型。多媒體元件通常佔據卡片的主要視覺區域，用於吸引使用者的注意力，並提供關於卡片內容的視覺線索。
![]()
- 標題 (Headline)：簡要概述卡片內容，需與置入的媒體內容相關。
- 副標題 (Subheadline) (選擇性)
- 媒體 (Media)：卡片的主要視覺元素，可以是：
- 圖片：產品圖片、風景照、人物照片等。
- 插圖：繪圖、圖表、資訊圖等。
- 影片：短片、動畫、預告片等。
- 輔助文字 (Supporting Text) (選擇性)：提供更多上下文或說明，可以是媒體內容的描述、摘要或相關資訊。
- 主要按鈕 (Primary Button) (選擇性)：引導使用者執行特定動作的互動按鈕。
- 更多按鈕 (More Button) (選擇性)：將不常用的資訊或次要操作隱藏在此按鈕中，請視操作情境與需求斟酌使用。
