列表

列表作為一個單一的連續元素來以垂直排列的方式顯示多行條目。

用法

列表由單一連續的列構成,該列又等分成相同寬度稱為行(rows) 的子部分。行是瓦片(tiles) 的容器。

瓦片中存放內容,并且在列表中可以改變高度。

列表最適合應用于顯示同類的數據類型或者數據類型組(homogeneous data type or sets of data types),比如圖片和文本,目標是區分多個數據類型數據或單一類型的數據特性,使得理解起來更加簡單。

如果有超過三行的文本需要在列表中顯示,換用卡片(cards)代替。

如果內容的主要區別來源于圖片,換用網格列表(grid list)。

內容

文本內容

列表瓦片以一致的格式來顯示一組相關的內容,為一致性的類型或者一組內容指定優先順序來體現層次感以獲取更好的可讀性。比如,在時間戳上強調頭像和文本片段。這有助于使用者可以在一組內容中更容易地區分出他們要找的信息。

列表瓦片可以包含三行的文本,并且文本的字數可以在同一列表的不同瓦片間有所不同。要顯示多于三行的文本,使用卡片。

將最有區別的內容放在瓦片的最左側,和多行文字中的第一行。

文本動作

列表瓦片中空間大部分應用專用于主要的動作。

由于動作并不能用來區分列表中的各個瓦片,所以將額外的動作放置在瓦片的右邊。

主要動作和額外動作,比如播放、放大、刪除和選擇,是瞬時性的,并且通常不會在列表中彈出選項子菜單(動作溢出列表, action overflow)。

動作可以打開一個隨后的視圖,如卡片或者懸浮卡片(hovercard)。

主要動作

額外動作

避免不斷在瓦片中使用額外動作來制造干擾因素,比如在每個瓦片中顯示分享動作按鈕。然而比如星標(starts)或者置針腳(pins)等開關按鈕是一個特例,因為它們通過顯示狀態來呈現出有效的信息。

行為

滾動

列表只支持垂直滾動。

手勢

在列表中,每個瓦片的滑動(swipe)動作應當是一致的。

在操作正確時,瓦片可以在列表和下拉目標間移動(比如,移動一個文件到文件夾)。

在操作正確時,瓦片可以被選中并且在列表中可以手動改變順序。

文本過濾與排序

列表瓦片可以通過數據、文件大小、字母順序或者其它參數來編程改變其順序或者實現過濾。


要(Do)


不要(Don't)

邊框

單行列表中,每個瓦片包含了單行的文本。文本字數可以在同一列表的不同瓦片間有所改變。


元素


內容

兩行列表中,每個瓦片最多包含兩行的文本。文本字數可以在同一列表的不同瓦片間有所改變。


元素


內容

在三行列表中,每個瓦片最多包含三行文本。

文本的字數可以在同一列表的不同瓦片間有所改變。


元素


內容

單行列表

僅有文本

字體: Roboto Regular 16sp

瓦片高: 48dp

文本內邊距: 16dp

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

帶有文本的圖標

字體: Roboto Regular 16sp

瓦片高: 48dp

左邊圖標內邊距: 16dp

文本左內邊距: 72dp

文本上部和下部內邊距: 16dp

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

帶有文本的頭像

字體: Roboto Regular 16sp

瓦片高: 56dp

左邊頭像內邊距: 16dp

文本左內邊距: 72dp

文本上部和下部內邊距: 20dp

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

兩行列表

僅有文本

主要文本的字體: Roboto Regular 16sp

次要文本的字體: Roboto Regular 14sp

瓦片高: 72dp

文本內邊距: 16dp

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

帶有文本的頭像

主要文本的字體: Roboto Regular 16sp

次要文本的字體: Roboto Regular 14sp

瓦片高: 72dp

左邊頭像內邊距: 16dp

文本左內邊距: 72dp

文本上部和下部內邊距: 16dp

圖標和文本區域中心對齊。

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

帶有文本和圖標的頭像

主要文本的字體: Roboto Regular 16sp

次要文本的字體: Roboto Regular 14sp

瓦片高: 72dp

左邊頭像內邊距: 16dp

文本左內邊距: 72dp

文本上部和下部內邊距: 16dp

右邊圖標內邊距: 16dp

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

三行列表

僅有文本

主要文本的字體: Roboto Regular 16sp

次要文本的字體: Roboto Regular 14sp

瓦片高: 88dp

文本內邊距: 16dp

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。

???< HEAD
元素


元素


內容

帶有文本的頭像

主要文本的字體: Roboto Regular 16sp

次要文本的字體: Roboto Regular 14sp

瓦片高: 88dp

左邊頭像內邊距: 16dp

文本左內邊距: 72dp

文本上部和下部內邊距: 16dp

頭像和主要文本上部對齊。

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

帶有文本和圖標的頭像

主要文本的字體: Roboto Regular 16sp

次要文本的字體: Roboto Regular 14sp

瓦片高: 88dp

左邊頭像內邊距: 16dp

文本左內邊距: 72dp

文本上部和下部內邊距: 16dp

右邊圖標內邊距: 16dp

頭像和圖標與主要文本上部對齊。

在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目(subheader)的列表上部,因為表頭條目包含了它們自己的內邊距。


元素


元素


內容

原文:Lists 翻譯:CodeDiving 校對:K0ST

两码中特期期