列表

列表用於呈現一連串內容連續的資料,且可依照方塊內容做排序。

方塊組成
操作
規範

方塊組成

列表由行和方塊組成

使用相同的風格,運用結構上的編排來提升每一筆資訊的辨識度,以及提示各項細節的重要程度。

一般來說,較重要的資訊會擺在左邊,最不重要的擺在右邊。

在信箱中,寄件者的大頭像和內容比起時間還要重要

相同的,能進行的操作也依照其對應的功能重要性,分成主要操作和次要操作,並由左到右編排。

在整個列表中,所有的主要操作和次要操作都是相同的。

在信箱中,寄件者的大頭像和內容比起時間還要重要

如果文字內容超過三行,使用卡片代替;如果主要內容是圖片,使用網格列表

操作

  • 點擊可以開啟一個新的畫面,但某些操作如刪除、播放和選擇等,因為會立刻被執行,所以不會再跳出任何選單。

  • 滾動列表僅供垂直滾動

  • 滑動列表中每一個選項應有一致的滑動動作

  • 更新列表下拉啟動更新。

圖示會持續顯示到讀取完成,或是使用者進入其它頁面。同時使用者依然可以滾動列表

規範主要操作會佔滿大部分空間,因此通常不會只是一個圖案;相反的次要操作通常以圖片表示。

避免在每個選項都放上次要操作的圖示,降低視覺上的干擾。但如星星此類控制器則可,因為其以開關狀態顯示有用的資訊。

  • 副標使用色彩鮮明的副標可以協助劃分列表內容

欄高: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

圖示同系統圖示

右圖示同系統圖示