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

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

如果內(nèi)容的主要區(qū)別來源于圖片，換用網(wǎng)格列表（grid list）。

http://wiki.jikexueyuan.com/project/material-design/images/components-lists-3_large_mdpi.png" alt="" />

內(nèi)容

文本內(nèi)容

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

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

將最有區(qū)別的內(nèi)容放在瓦片的最左側(cè)，和多行文字中的第一行。

http://wiki.jikexueyuan.com/project/material-design/images/components-lists-4_large_mdpi.png" alt="" />

文本動作

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

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

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

動作可以打開一個隨后的視圖，如卡片或者懸浮卡片（hovercard）。

主要動作

充滿整個瓦片，因此不能通過圖標、文本等元素呈現(xiàn)。
在特定的列表中所有瓦片的動作是一致的。比如在指定的音樂列表中，瓦片的主要內(nèi)容是播放一首歌曲，或者在郵件列表中是打開一封郵件來閱讀。

額外動作

在瓦片中通過圖標、次要文本等來呈現(xiàn)出來。
在指定的列表中所有瓦片的動作是功能一致的，比如使用圖標來標識某人某人是否在線等。
在指定列表的瓦片中，動作放置的位置是一致的。

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

http://wiki.jikexueyuan.com/project/material-design/images/components-lists-5_large_mdpi.png" alt="" />

行為

滾動

列表只支持垂直滾動。

手勢

在列表中，每個瓦片的滑動（swipe）動作應當是一致的。

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

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

文本過濾與排序

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

http://wiki.jikexueyuan.com/project/material-design/images/components-lists-6_large_mdpi.png" alt="" />
要(Do)

http://wiki.jikexueyuan.com/project/material-design/images/components-lists-7_large_mdpi.png" alt="" />
不要（Don't）

邊框

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

http://wiki.jikexueyuan.com/project/material-design/images/components-keylinesinlists-1_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-keylinesinlists-2_large_mdpi.png" alt="" />
內(nèi)容

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

http://wiki.jikexueyuan.com/project/material-design/images/components-keylinesinlists-3_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-keylinesinlists-4_large_mdpi.png" alt="" />
內(nèi)容

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

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

http://wiki.jikexueyuan.com/project/material-design/images/components-keylinesinlists-5_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-keylinesinlists-6_large_mdpi.png" alt="" />
內(nèi)容

單行列表

僅有文本

字體： Roboto Regular 16sp

瓦片高： 48dp

文本內(nèi)邊距： 16dp

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

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-1_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-2_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-6_large_mdpi.png" alt="" />
內(nèi)容

帶有文本的圖標

字體： Roboto Regular 16sp

瓦片高： 48dp

左邊圖標內(nèi)邊距： 16dp

文本左內(nèi)邊距： 72dp

文本上部和下部內(nèi)邊距： 16dp

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

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-7_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-8_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-3_large_mdpi.png" alt="" />
內(nèi)容

帶有文本的頭像

字體： Roboto Regular 16sp

瓦片高： 56dp

左邊頭像內(nèi)邊距： 16dp

文本左內(nèi)邊距： 72dp

文本上部和下部內(nèi)邊距： 20dp

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

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-7_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-8_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-singlelinelists-11_large_mdpi.png" alt="" />
內(nèi)容

兩行列表

僅有文本

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

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

瓦片高： 72dp

文本內(nèi)邊距： 16dp

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

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-1_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-2_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-3_large_mdpi.png" alt="" />
內(nèi)容

帶有文本的頭像

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

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

瓦片高： 72dp

左邊頭像內(nèi)邊距： 16dp

文本左內(nèi)邊距： 72dp

文本上部和下部內(nèi)邊距： 16dp

圖標和文本區(qū)域中心對齊。

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

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-6_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-7_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-8_large_mdpi.png" alt="" />
內(nèi)容

帶有文本和圖標的頭像

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

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

瓦片高： 72dp

左邊頭像內(nèi)邊距： 16dp

文本左內(nèi)邊距： 72dp

文本上部和下部內(nèi)邊距： 16dp

右邊圖標內(nèi)邊距： 16dp

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

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-9_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-10_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedtwolinelists-11_large_mdpi.png" alt="" />
內(nèi)容

三行列表

僅有文本

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

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

瓦片高： 88dp

文本內(nèi)邊距： 16dp

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

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-1_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-2_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-3_large_mdpi.png" alt="" />
內(nèi)容

帶有文本的頭像

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

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

瓦片高： 88dp

左邊頭像內(nèi)邊距： 16dp

文本左內(nèi)邊距： 72dp

文本上部和下部內(nèi)邊距： 16dp

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

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

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-6_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-7_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-10_large_mdpi.png" alt="" />
內(nèi)容

帶有文本和圖標的頭像

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

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

瓦片高： 88dp

左邊頭像內(nèi)邊距： 16dp

文本左內(nèi)邊距： 72dp

文本上部和下部內(nèi)邊距： 16dp

右邊圖標內(nèi)邊距： 16dp

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

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

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-8_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-9_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-recommendedthreelinelists-12_large_mdpi.png" alt="" />
內(nèi)容

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

上一篇：真實的動作下一篇：有意義的轉(zhuǎn)場動畫