列表
列表用於呈現一連串內容連續的資料,且可依照方塊內容做排序。
方塊組成
列表由行和方塊組成
使用相同的風格,運用結構上的編排來提升每一筆資訊的辨識度,以及提示各項細節的重要程度。
一般來說,較重要的資訊會擺在左邊,最不重要的擺在右邊。
在信箱中,寄件者的大頭像和內容比起時間還要重要
相同的,能進行的操作也依照其對應的功能重要性,分成主要操作和次要操作,並由左到右編排。
在整個列表中,所有的主要操作和次要操作都是相同的。
在信箱中,寄件者的大頭像和內容比起時間還要重要
如果文字內容超過三行,使用卡片代替;如果主要內容是圖片,使用網格列表
操作
點擊可以開啟一個新的畫面,但某些操作如刪除、播放和選擇等,因為會立刻被執行,所以不會再跳出任何選單。
滾動列表僅供垂直滾動
滑動列表中每一個選項應有一致的滑動動作
更新列表下拉啟動更新。
圖示會持續顯示到讀取完成,或是使用者進入其它頁面。同時使用者依然可以滾動列表
規範主要操作會佔滿大部分空間,因此通常不會只是一個圖案;相反的次要操作通常以圖片表示。
避免在每個選項都放上次要操作的圖示,降低視覺上的干擾。但如星星此類控制器則可,因為其以開關狀態顯示有用的資訊。
- 副標使用色彩鮮明的副標可以協助劃分列表內容
欄高:48 dp
左間距:16 dp
字型:Roboto Medium
字體:14 sp文字顏色:黑或主題色
不透明度:54 %(非主題色),100 %(主題色)
如果有浮動式按鈕,則因與文字對齊
左間距:72 dp
- 單行
列表上間距:8 dp(沒有標頭),0 dp(有標頭)
內容左右間距:16 dp
圖示
上下間距:12 dp(系統圖示),8 dp(大頭圖)文字
字體:16 dp
左間距:16 dp(左無圖),72 dp(左有圖)
上下間距:16 dp(左無圖或系統圖示),20 dp(左大頭圖)
欄位高:48 dp
欄位高:48 dp
圖示同系統圖示
欄位高:56 dp
欄位高:56 dp
右圖示
左右間距:16 dp
其他同系統圖示
- 雙行
列表上間距:8 dp(沒有標頭),0 dp(有標頭)
欄位高:72 dp
內容左右間距:16 dp圖示
直徑:24 dp(系統圖示),40 dp(大頭圖)
上下間距:24 dp(系統圖示),16 dp(大頭圖)文字
字體:16 dp(第一行),14 sp(第二行)
行間空白:6 dp
左間距:16 dp(左無圖),72 dp(左有圖)
上間距:20 dp
下間距:16 dp
圖示同系統圖示
右圖示同系統圖示
- 三行
列表上間距:8 dp(沒有標頭),0 dp(有標頭)
欄位高:88 dp
內容左右間距:16 dp圖示
直徑:24 dp(系統圖示),40 dp(大頭圖)
上間距:16 dp
下間距:48 dp(系統圖示),32 dp(大頭圖)文字
字體:16 dp(第一行),14 sp(第二三行)
行間空白:4 dp
左間距:16 dp(左無圖),72 dp(左有圖)
上下間距:16 dp
圖示同系統圖示
右圖示同系統圖示