卡片
卡片是一個有紙張意義的物件,上面同時具有多種不同類型的物件,例如影像、字串、連結等,但不能擁有可滾動的元件。
使用時機
- 為一個容器,包含許多不同的物件和動作
- 不需要比較內容
- 可支援較長的文字內容
不應使用時機
- 列表
以卡片切割會影響使用者快速遊覽列表
- 不需要過多文字描述的圖片
組成一個卡片可能最多會有以下幾個組成:
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
圖示被標題和操作覆蓋
圖示被標題和操作覆蓋