網格

網格列表是一種標準列表視圖的可選組件。網格列表與應用于布局和其他可視視圖中的網格有著明顯的區別。

用法

網格列表最適合用于同類數據(homogeneous data type),典型的如圖片,并且對可視化理解(visual comprehension )和相似數據類型的區別進行了優化。

網格列表是一個連續元素(continuous element),該元素由棋盤式、規律性的小格子構成,通常稱這些格子為單元格(cells),單元格中包含有瓦片(tiles)。

單元格在網格中以垂直和水平的方式排列。

瓦片用以存放內容,并且可以跨越一個或者多個垂直或者水平的單元格。

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

Lists:增強閱讀理解的便利性,尤其是在比較一組具有多種數據類型的數據時。

Cards:用于不同格式的內容,比如帶有不同長度標題的圖片;用于不同類內容的數據集合中,比如具有圖片、視頻和圖書的混合式數據集。

內容

瓦片中的內容

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

為瓦片內容提供一個默認圖片。

瓦片中的動作

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

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

主要動作

次要動作或者內容

行為

滾動

網格典型的滾動只有垂直滾動。

水平滾動的網格是不鼓勵使用的,這通常與用戶的閱讀習慣有關,影響閱讀上的理解。

砍去網格瓦片來通知內容未結束。



(圖片用來)說明砍去網格瓦片提示內容未結束


不要

手勢

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

瓦片過濾與排序

網格列表中的內容可以編程實現其過濾和排序,比如通過數據類型、文件大小、字母順序或者其他參數等。

網格中的第一個條目置于網格的左上角,并且其順序為從左到右,自上而下。

維度與重置尺寸

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

當水平空間受限時,網格列表不會轉換為列表。網格列表與列表在強調不同數據類型的不同結構:圖片優于文本與文本優于圖片的區別。

邊框

網格列表表頭/表尾(header/footers)

單行表頭/表尾

高: 48dp

文本內邊距: 16dp

默認字體大小: 16sp

次要動作與尾右對齊

兩行表頭/表尾

高: 68dp

文本內邊距: 16dp

每行的默認字體大小: 16sp/12sp或者14sp/14sp

僅有圖片的網格列表

網格內邊距: 4dp

網格列表中的瓦片可以跨多列。

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


元素

單行網格列表

僅有文本

高: 48dp

文本內邊距: 16dp

默認字體大小: 16sp

網格內邊距: 4dp


元素

帶圖標的文本

高: 48dp

文本內邊距: 16dp

默認字體大小: 16sp

網格內邊距: 4dp

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


元素

兩行網格列表

僅有文本

高: 68dp

文本內邊距: 16dp

每行的默認字體大小: 16sp/12sp或14sp/14sp

網格內邊距: 4dp


元素


內容

帶有圖標的文本

高: 68dp

文本內邊距: 16dp

每行的默認字體大小: 16sp/12sp或14sp/14sp

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

網格內邊距是4dp


元素


內容

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

两码中特期期