卡片

卡片是一個有紙張意義的物件,上面同時具有多種不同類型的物件,例如影像、字串、連結等,但不能擁有可滾動的元件。

使用時機
不應使用時機
主要操作
附屬操作
設計規範

使用時機

  • 為一個容器,包含許多不同的物件和動作

  • 不需要比較內容

  • 可支援較長的文字內容

不應使用時機

  • 列表

以卡片切割會影響使用者快速遊覽列表

  • 不需要過多文字描述的圖片

組成一個卡片可能最多會有以下幾個組成:

1. 標頭
2. 標題
3. 多媒體
4. 內文
5. 操作

組成排列方式可以有很多種,相同的是卡片提供一個可以獲得更多資訊的入口,不要在卡片上放置過多的訊息和操作。

每個卡片可以有不同物件和擺置

卡片組成在排列時需要盡量凸顯重點,例如以下兩個方法:

  • 圖片

圖片可讓使用者快速區別彼此差別,同時也要注意不要讓圖片影響文字的清晰程度

  • 字體

放大標題可以直接看出每個卡片的內容主旨

主要操作卡片的主要操作對象為其本身,有以下幾種:

  • 排序

使用拖拉的方式可以重新排列卡片順序,預設卡片排列方向為由左至右,由上至下

  • 滾動

卡片只能垂直方向滾動

附屬操作放置在卡片下方,可依照需求增加附屬操作,附屬操作可為以下兩種:

  • 按鈕

  • 控件

除了評分,也可以是日期選擇器

如果附屬操作過多,可以在卡片右上方增加一個選單按鈕,但也不要在此選單增加過多選項。

當卡片內容超過卡片最高高度時,由於卡片不能具有可滾動元件,所以有以下兩個方式處理:

  • 截斷內容

  • 使用附屬按鈕,讓卡片可進行暫時性延展

狀態

設計規範

卡片四周圓角:2dp
卡片與容器上下左右間距:8dp
卡片間間距:8 dp

標頭
圖片高:36 dp
圖片寬:36 dp
標題字體:14 sp
副標字體:14 sp
內容上下左右間距:16 dp

多媒體
高:與寬比為 9:16 或 1:1(建議)
寬:同螢幕寬

標題
標題字體:24 sp
副標字體:14 sp
上間距:24 dp
下間距:24 dp(下方無其他組成),16 dp(下方為內文或操作)高:依內容而定

內文
字體:14 sp
上間距:16 dp
下間距:24 dp(下方無其他組成),16 dp (下方為內文或操作)小點左間距:16 dp

操作(通用)
高:52 dp

操作(圖示)
上下間距:垂直置中左右間距:16 dp
圖示間間距:8dp

操作(按鈕)
同按鈕的設計規範
按鈕間間距:8 dp(橫向),4 dp(縱向)

以下顯示各種不同的組合,並提供上圖沒有的數值:

標頭
高:72 dp

標題
行間空白:8 dp(官方為 12 dp)

標題被圖片和操作覆蓋
圖片寬:80 dp(小圖),112 dp(大圖)
圖片高:80 dp(小圖),112 dp(大圖)

標題被圖片和操作覆蓋
圖片寬:240 dp
圖片高:240 dp
操作圖示右間距:28 dp

圖示被標題和操作覆蓋

圖示被標題和操作覆蓋