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

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

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

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

內(nèi)容

文本內(nèi)容

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

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

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

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

文本動(dòng)作

列表瓦片中空間大部分應(yīng)用專用于主要的動(dòng)作。

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

主要?jiǎng)幼骱皖~外動(dòng)作，比如播放、放大、刪除和選擇，是瞬時(shí)性的，并且通常不會(huì)在列表中彈出選項(xiàng)子菜單（動(dòng)作溢出列表， action overflow）。

動(dòng)作可以打開(kāi)一個(gè)隨后的視圖，如卡片或者懸浮卡片（hovercard）。

主要?jiǎng)幼?/strong>

充滿整個(gè)瓦片，因此不能通過(guò)圖標(biāo)、文本等元素呈現(xiàn)。

在特定的列表中所有瓦片的動(dòng)作是一致的。比如在指定的音樂(lè)列表中，瓦片的主要內(nèi)容是播放一首歌曲，或者在郵件列表中是打開(kāi)一封郵件來(lái)閱讀。

額外動(dòng)作

在瓦片中通過(guò)圖標(biāo)、次要文本等來(lái)呈現(xiàn)出來(lái)。

在指定的列表中所有瓦片的動(dòng)作是功能一致的，比如使用圖標(biāo)來(lái)標(biāo)識(shí)某人某人是否在線等。

在指定列表的瓦片中，動(dòng)作放置的位置是一致的。

避免不斷在瓦片中使用額外動(dòng)作來(lái)制造干擾因素，比如在每個(gè)瓦片中顯示分享動(dòng)作按鈕。然而比如星標(biāo)（starts）或者置針腳（pins）等開(kāi)關(guān)按鈕是一個(gè)特例，因?yàn)樗鼈兺ㄟ^(guò)顯示狀態(tài)來(lái)呈現(xiàn)出有效的信息。

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

行為

滾動(dòng)

列表只支持垂直滾動(dòng)。

手勢(shì)

在列表中，每個(gè)瓦片的滑動(dòng)（swipe）動(dòng)作應(yīng)當(dāng)是一致的。

在操作正確時(shí)，瓦片可以在列表和下拉目標(biāo)間移動(dòng)（比如，移動(dòng)一個(gè)文件到文件夾）。

在操作正確時(shí)，瓦片可以被選中并且在列表中可以手動(dòng)改變順序。

文本過(guò)濾與排序

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

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）

邊框

在單行列表中，每個(gè)瓦片包含了單行的文本。文本字?jǐn)?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)容

在兩行列表中，每個(gè)瓦片最多包含兩行的文本。文本字?jǐn)?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)容

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

文本的字?jǐn)?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)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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)容

帶有文本的圖標(biāo)

字體： Roboto Regular 16sp

瓦片高： 48dp

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

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

文本上部和下部?jī)?nèi)邊距： 16dp

在列表的上部和下部添加 8dp 的內(nèi)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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

文本上部和下部?jī)?nèi)邊距： 20dp

在列表的上部和下部添加8dp的內(nèi)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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

文本上部和下部?jī)?nèi)邊距： 16dp

圖標(biāo)和文本區(qū)域中心對(duì)齊。

在列表的上部和下部添加8dp的內(nèi)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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)容

帶有文本和圖標(biāo)的頭像

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

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

瓦片高： 72dp

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

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

文本上部和下部?jī)?nèi)邊距： 16dp

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

在列表的上部和下部添加 8dp 的內(nèi)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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

文本上部和下部?jī)?nèi)邊距： 16dp

頭像和主要文本上部對(duì)齊。

在列表的上部和下部添加8dp的內(nèi)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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)容

帶有文本和圖標(biāo)的頭像

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

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

瓦片高： 88dp

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

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

文本上部和下部?jī)?nèi)邊距： 16dp

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

頭像和圖標(biāo)與主要文本上部對(duì)齊。

在列表的上部和下部添加8dp的內(nèi)邊距。一個(gè)特例是在帶有表頭條目（subheader）的列表上部，因?yàn)楸眍^條目包含了它們自己的內(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 校對(duì)：K0ST

上一篇：真實(shí)的動(dòng)作下一篇：有意義的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

列表

用法

內(nèi)容

文本內(nèi)容

文本動(dòng)作

行為

滾動(dòng)

手勢(shì)

文本過(guò)濾與排序

邊框

單行列表

兩行列表

三行列表