網(wǎng)格

網(wǎng)格列表是一種標(biāo)準(zhǔn)列表視圖的可選組件。網(wǎng)格列表與應(yīng)用于布局和其他可視視圖中的網(wǎng)格有著明顯的區(qū)別。

用法

網(wǎng)格列表最適合用于同類數(shù)據(jù)（homogeneous data type），典型的如圖片，并且對可視化理解（visual comprehension ）和相似數(shù)據(jù)類型的區(qū)別進(jìn)行了優(yōu)化。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-usage-spec_grid_drawings_01_large_mdpi.png" alt="" />

網(wǎng)格列表是一個連續(xù)元素（continuous element），該元素由棋盤式、規(guī)律性的小格子構(gòu)成，通常稱這些格子為單元格（cells）,單元格中包含有瓦片（tiles）。

單元格在網(wǎng)格中以垂直和水平的方式排列。

瓦片用以存放內(nèi)容，并且可以跨越一個或者多個垂直或者水平的單元格。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-usage-spec_grid_drawings_02a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-usage-spec_grid_drawings_02b_large_mdpi.png" alt="" />

如果瓦片中的文本需要與其他主要內(nèi)容有著足夠顯著的區(qū)別，可以考慮使用一個容器，比如列表（Lists）或者卡片（Cards）。這樣可以優(yōu)化文本顯示、增強閱讀理解的便利性。

Lists：增強閱讀理解的便利性，尤其是在比較一組具有多種數(shù)據(jù)類型的數(shù)據(jù)時。

Cards：用于不同格式的內(nèi)容，比如帶有不同長度標(biāo)題的圖片;用于不同類內(nèi)容的數(shù)據(jù)集合中，比如具有圖片、視頻和圖書的混合式數(shù)據(jù)集。

內(nèi)容

瓦片中的內(nèi)容

瓦片內(nèi)容包括主要內(nèi)容（primary content）和次要內(nèi)容(secondary content)。主要內(nèi)容是有著重要區(qū)別的內(nèi)容，典型的如圖片。次要內(nèi)容可以是一個動作按鈕或者文本。

為瓦片內(nèi)容提供一個默認(rèn)圖片。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-content-spec_grid_drawings_03_large_mdpi.png" alt="" />

瓦片中的動作

主要內(nèi)容和次要內(nèi)容中的動作--比如播放、放大、刪除或者選擇--是一種瞬時性動作，通常不會在網(wǎng)格列表中彈出選項子菜單（動作溢出列表，action voerflow）。

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

主要動作

• 充滿整個瓦片，因此不會通過圖標(biāo)或者文本呈現(xiàn)。
• 在指定的網(wǎng)格中，所有瓦片的動作是一致的。比如，在單個網(wǎng)格中，對于所有瓦片的主要動作可以用于查看圖片的詳細(xì)信息。

次要動作或者內(nèi)容

• 通過圖標(biāo)或者文本呈現(xiàn)出來。
• 在指定的網(wǎng)格中，所有瓦片的動作是一致的。
• 在指定網(wǎng)格的瓦片中放置的位置是一致的，但是位置可能會在不同的網(wǎng)格（邊角或者邊界， corners or edges）間有變化。比如，所有網(wǎng)格中的標(biāo)題可以放置在左下角。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-content-spec_grid_drawings_04_large_mdpi.png" alt="" />

行為

滾動

網(wǎng)格典型的滾動只有垂直滾動。

水平滾動的網(wǎng)格是不鼓勵使用的，這通常與用戶的閱讀習(xí)慣有關(guān)，影響閱讀上的理解。

砍去網(wǎng)格瓦片來通知內(nèi)容未結(jié)束。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-behavior-spec_grid_drawings_06_large_mdpi.png" alt="" />
要
（圖片用來）說明砍去網(wǎng)格瓦片提示內(nèi)容未結(jié)束

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-behavior-spec_grid_drawings_05_large_mdpi.png" alt="" />
不要

手勢

不允許使用輕掃(swipe)手勢。選中并移動(pick-up-and-move)動作不鼓勵使用。

瓦片過濾與排序

網(wǎng)格列表中的內(nèi)容可以編程實現(xiàn)其過濾和排序，比如通過數(shù)據(jù)類型、文件大小、字母順序或者其他參數(shù)等。

網(wǎng)格中的第一個條目置于網(wǎng)格的左上角，并且其順序為從左到右，自上而下。

維度與重置尺寸

重置網(wǎng)格列表的尺寸會導(dǎo)致瓦片在有水平空間可用時重新排序。但是瓦片并不會縮放以填充可用的水平空間。

當(dāng)水平空間受限時，網(wǎng)格列表不會轉(zhuǎn)換為列表。網(wǎng)格列表與列表在強調(diào)不同數(shù)據(jù)類型的不同結(jié)構(gòu)：圖片優(yōu)于文本與文本優(yōu)于圖片的區(qū)別。

邊框

網(wǎng)格列表表頭/表尾（header/footers）

單行表頭/表尾

高： 48dp

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

默認(rèn)字體大?。?16sp

次要動作與尾右對齊

兩行表頭/表尾

高： 68dp

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

每行的默認(rèn)字體大?。?16sp/12sp或者14sp/14sp

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-Grid_footer_overview_01a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-Grid_footer_overview_01b_large_mdpi.png" alt="" />

僅有圖片的網(wǎng)格列表

網(wǎng)格內(nèi)邊距： 4dp

網(wǎng)格列表中的瓦片可以跨多列。

仔細(xì)考慮網(wǎng)格列表中的次要文本是否需要使用多列瓦片，因為大的瓦片可能會造成很大的空間浪費。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-imageOnlyGrid_01_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-imageOnlyGrid_03_large_mdpi.png" alt="" />

單行網(wǎng)格列表

僅有文本

高: 48dp

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

默認(rèn)字體大小： 16sp

網(wǎng)格內(nèi)邊距： 4dp

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_01a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_01b_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_02_large_mdpi.png" alt="" />

帶圖標(biāo)的文本

高： 48dp

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

默認(rèn)字體大?。?16sp

網(wǎng)格內(nèi)邊距： 4dp

網(wǎng)格列表表尾或者表頭的中的次要文本可以右對齊或左對齊。

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03b_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03c_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_03d_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-SingleLineGrid_04_large_mdpi.png" alt="" />

兩行網(wǎng)格列表

僅有文本

高： 68dp

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

每行的默認(rèn)字體大?。?16sp/12sp或14sp/14sp

網(wǎng)格內(nèi)邊距： 4dp

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_01a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_01b_large_mdpi.png" alt="" />
元素

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

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

高： 68dp

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

每行的默認(rèn)字體大?。?16sp/12sp 或 14sp/14sp

網(wǎng)格列表表尾或者表頭中的次要文本可以右對齊或左對齊。

網(wǎng)格內(nèi)邊距是4dp

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03b_large_mdpi.png" alt="" />
元素

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03c_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-grids-keylines-TwoLineGrid_03d_large_mdpi.png" alt="" />

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

原文：Grids 翻譯：CodeDiving 校對：huanglizhuo