基本卡片

使用基本資訊卡 (也稱為實體卡片) 來向使用者顯示圖片和文字。

以下示範基本資訊卡和所有選填欄位的填寫範例。


需求條件

這個視覺元件目前支援自訂

欄位名稱 是否必要? 限制/自訂
前景圖片 是 (如果沒有說明時加入)
  • 最多 1 張前景圖片。
  • 寬度和高度因螢幕而異。如果圖片的長寬比與畫面不同,圖片在頂端或側邊會有長條。
  • 圖片來源是網址。如果圖片連結無效,系統會改用預留位置圖片。
  • 可自訂的圖片形狀 (有角或圓角)。
  • 允許使用動態 GIF。
  • 無障礙工具必須提供替代文字。
卡片背景
  • 可自訂圖片或顏色。
標題
  • 可自訂字型系列和顏色。
  • 建議最多 1 行。
  • 如未指定標題,系統會收合資訊卡高度。
子標題
  • 純文字。固定字型和大小。
  • 建議最多 1 行。
  • 如未指定子標題,資訊卡高度會收合。
說明

(也稱為內文或格式化文字)

是 (如果沒有圖片時則需要)
  • 預設是疊加文字。固定字型和大小。
  • 只有部分 Markdown 可以使用粗體、斜體和換行符號。
  • 含圖片,最多 10 行。視畫面而定,長度約為 500 個字元。必須刪掉其他字元。
  • 最多 15 行 (沒有圖片)。大約 750 個半形字元,視畫面而定。必須刪掉其他字元。
動作連結
  • 文字卡結尾可以指定 1 個連結。
  • 連結可以直接導向網頁或產生其他視覺元件,讓對話方塊更完整。但也可能是應用程式的深層連結。
  • 必須提供連結標題,且不可誤導觀眾。我們在核准程序期間會進行這項檢查。

指南

基本資訊卡是用來描述實體 (例如人物、地點或事物等主題),最適合在需要「定義樣式」回應板型規格時使用。這類摘要資訊可用來提供資訊,或是為使用者提供其他相關資訊。

正確做法:

使用基本資訊卡概略說明事件詳細資料。這樣一來,使用者就能快速掃描以找到所需資訊。

錯誤。

在提示內顯示事件詳細資料等資訊會更有效率。

正確做法:

使用語音和螢幕提示,針對使用者的問題提供特定答案 (在此範例中為早上 11:30)。如需相關詳細資料,請使用影像內容。

錯誤。

避免在口述提示、顯示提示和視覺元素之間建立備援功能。

正確做法:

有時候,圖片是傳達資訊的最佳方式。

錯誤。

雖然說明可以做得好,但相片的效果更好。