Grid lists - 網(wǎng)格列表

Grid lists are an alternative to standard list views.

A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout.

Grid lists are best used on similar data types. They help improve the visual comprehension of the content they contain.

【翻譯】
網(wǎng)格列表是標(biāo)準(zhǔn)列表視圖的替代助币。
網(wǎng)格列表由以垂直和水平布局排列的單元的重復(fù)模式組成浪听。
網(wǎng)格列表最適用于類似的數(shù)據(jù)類型。 它們有助于改善他們所含內(nèi)容的視覺理解眉菱。

Types - 類型
Image-only
Single-line text (or with icon)
Two-line text (or with icon)

【翻譯】
僅圖像
單行文本（或帶圖標(biāo)）
雙行文本（或帶圖標(biāo)）

Actions - 操作
Vertical scrolling
Filtering

【翻譯】
垂直滾動(dòng)
過濾

Alternatives - 備擇方案
ListsCards

【翻譯】
列表
卡片

Usage - 用法

A grid list is best suited to presenting homogenous data,typically images, and is optimized for visual comprehensionand differentiating between similar data types.

【翻譯】
網(wǎng)格列表最適合于呈現(xiàn)同質(zhì)數(shù)據(jù)（通常是圖像）迹栓，并且被優(yōu)化用于視覺理解和類似數(shù)據(jù)類型之間的區(qū)分。

image

Example of grid list

【翻譯】
網(wǎng)格列表示例

A grid list consists of a repeated pattern of cells arrayed vertically and horizontally within the grid list.
Tiles hold content and can span one or more cells vertically or horizontally.

【翻譯】
網(wǎng)格列表由在網(wǎng)格列表中垂直和水平排列的單元的重復(fù)模式組成俭缓。
圖塊保存內(nèi)容克伊，可以垂直或水平跨越一個(gè)或多個(gè)單元格。

image

Example of grid list

【翻譯】
網(wǎng)格列表示例

[圖片上傳失敗...(image-326091-1552295205741)]
Example of a cell and tile

【翻譯】
單元格和圖塊的示例

If the text in tiles needs to be prominent enough to distinguish between primary content pieces, consider using a different container, like a list or cards, optimized for displaying text and facilitating reading comprehension.
**Lists: **Optimized for reading comprehension, particularly when comparing a set of data containing multiple data types.
Cards: Used for content with inconsistent formatting, such as photos with captions of variable length, or data sets with heterogeneous content, such as a mixed collection of photos and videos and books.

【翻譯】
如果圖塊中的文本需要足夠突出以區(qū)分主要內(nèi)容片段华坦，請(qǐng)考慮使用不同的容器（例如列表或卡片）愿吹，優(yōu)化顯示文本并便于閱讀理解。
列表：針對(duì)閱讀理解進(jìn)行了優(yōu)化惜姐，特別是在比較包含多個(gè)數(shù)據(jù)類型的一組數(shù)據(jù)時(shí)椿息。
卡片：用于格式不一致的內(nèi)容坷衍，例如可變長(zhǎng)度字幕的照片，或異質(zhì)內(nèi)容的數(shù)據(jù)集枫耳，例如照片和視頻和書籍的混合集合。

Content - 內(nèi)容

Content in tiles - 圖塊中的內(nèi)容

Tile content consists of primary content and secondary content. Primary content is the main differentiating element, typically an image. Secondary content can be an action or text.

Provide a default image for tiles that lack an image for primary content.

【翻譯】
平鋪內(nèi)容由主要內(nèi)容和輔助內(nèi)容組成妻熊。 主要內(nèi)容是主要的區(qū)分元素仑最，通常是圖像帆喇。 輔助內(nèi)容可以是操作或文本。
為缺少主要內(nèi)容圖片的圖塊提供默認(rèn)圖片坯钦。

[圖片上傳失敗...(image-c86d2-1552295205741)]
Example of tile content with primary and secondary actions

【翻譯】
具有主要和次要操作的切片內(nèi)容示例

Actions in tiles - 圖塊中的操作
Actions on both primary and secondary content – such as play, zoom in, delete, or select – are immediate and typically do not result in a submenu of options (action overflow) within the grid list.
Actions can open a subsequent view, such as a card.

【翻譯】
主要和次要內(nèi)容上的操作（例如播放，放大吟温，刪除或選擇）都是即時(shí)的，通常不會(huì)在網(wǎng)格列表中產(chǎn)生選項(xiàng)子菜單（操作溢出）鲁豪。
操作可以打開后續(xù)視圖，例如卡律秃。

Primary actions - 主要操作
Fill the entire tile and therefore are not represented via icons or text.
Are consistent throughout tiles in a specific grid list. For example, the primary action for all tiles in a single grid list could be to view details for an image.

【翻譯】
填充整個(gè)磁貼爬橡，因此不通過圖標(biāo)或文本表示。
在特定網(wǎng)格列表中的整個(gè)磁貼中是一致的棒动。例如糙申，單個(gè)網(wǎng)格列表中所有圖塊的主要操作可以是查看圖像的詳細(xì)信息。

Secondary actions or content - 次要操作或內(nèi)容
Are represented in tiles with icons or text.
Are consistent throughout tiles in a specific grid list.
Are placed in a consistent location within the tiles of a specific grid list, but that consistent location may vary between grid lists (at corners or edges). For example, all titles in one grid list could be located at the bottom left corner, while all tiles in another grid list might place titles in the top left corner.

【翻譯】
在帶有圖標(biāo)或文本的圖塊中表示船惨。
在特定網(wǎng)格列表中的整個(gè)磁貼中是一致的柜裸。
被放置在特定網(wǎng)格列表的圖塊內(nèi)的一致位置，但是該一致位置可以在網(wǎng)格列表（在角或邊緣）之間變化粱锐。 例如粘室，一個(gè)網(wǎng)格列表中的所有標(biāo)題可以位于左下角，而另一個(gè)網(wǎng)格列表中的所有標(biāo)題可以在左上角放置標(biāo)題卜范。

[圖片上傳失敗...(image-81de37-1552295205741)]
Example of secondary action with action and text positions

【翻譯】
帶操作和文本位置的輔助操作示例

Behavior - 行為

Scrolling - 滾動(dòng)

Grid lists typically scroll only vertically.

Horizontally scrolling grid lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. One notable exception is a horizontally-scrolling, single-line grid list of images, such as a gallery, which is compatible with typical reading patterns.

Cut off grid tiles in the view’s initial scroll position to communicate the scroll direction for content overflow.

【翻譯】
網(wǎng)格列表通常只能垂直滾動(dòng)衔统。
不建議水平滾動(dòng)網(wǎng)格列表，因?yàn)闈L動(dòng)會(huì)干擾典型的閱讀模式，影響理解锦爵。 一個(gè)顯著的例外是水平滾動(dòng)的單行網(wǎng)格圖像列表舱殿，例如圖庫，其與典型的閱讀模式兼容险掀。
在視圖的初始滾動(dòng)位置切割網(wǎng)格貼片沪袭，以傳達(dá)內(nèi)容溢出的滾動(dòng)方向。

正確的示范

Do.
Indicate content overflow by cutting off grid tiles.

【翻譯】
正確的示范
通過切斷網(wǎng)格圖塊來指示內(nèi)容溢出

[圖片上傳失敗...(image-2ad8fc-1552295205741)]
Don't.
Avoid aligning grid tiles along a view edge in the view’s initial scroll position. This positioning doesn’t effectively communicate that there is more content available.

【翻譯】
錯(cuò)誤的示范
避免在視圖的初始滾動(dòng)位置沿視圖邊緣對(duì)齊網(wǎng)格貼圖樟氢。這種定位沒有有效地傳達(dá)有更多的內(nèi)容可用冈绊。

Gestures - 手勢(shì)
Per-tile swipe actions are not permitted. Pick-up-and-move actions are discouraged.

【翻譯】
不允許進(jìn)行每個(gè)平鋪的滑動(dòng)操作。 不鼓勵(lì)接收和移動(dòng)動(dòng)作埠啃。

Tile filtering and sorting - 排序和過濾
Content in a grid list can be programmatically filtered or sorted by date, file size, alphabetical order, or other parameters.
The first item in the grid list is positioned at the top left of the grid list, and the order proceeds left to right and top to bottom.

【翻譯】
網(wǎng)格列表中的內(nèi)容可以按照日期死宣，文件大小，字母順序或其他參數(shù)進(jìn)行編程過濾或排序碴开。
網(wǎng)格列表中的第一個(gè)項(xiàng)目位于網(wǎng)格列表的左上角毅该，順序從左到右眶掌，從上到下。

Dimensions and resizing - 尺寸和調(diào)整大小
Resizing a grid list causes the tiles to re-sort as horizontal space becomes available. Full-bleed grid list tiles resize to fit the screen width.
A grid list does not transform into a list when horizontal space contracts. Grid lists and lists are separate structures for emphasizing different data types. Grid lists prioritize images over text and lists prioritize text over images.
To maintain a consistent rhythm throughout the grid list, truncate text content that is too long for the tile’s width. Alternatively, increase the grid size so that the tiles can accommodate the longer titles.

【翻譯】
調(diào)整網(wǎng)格列表的大小會(huì)導(dǎo)致圖塊在水平空間變?yōu)榭捎脮r(shí)重新排序召噩。 完全放出網(wǎng)格列表圖塊調(diào)整大小以適合屏幕寬度蚣常。
水平空間合同時(shí)抵蚊，網(wǎng)格列表不會(huì)轉(zhuǎn)換為列表贞绳。 網(wǎng)格列表和列表是用于強(qiáng)調(diào)不同數(shù)據(jù)類型的單獨(dú)結(jié)構(gòu)。 網(wǎng)格列表將圖像優(yōu)先于文本抖单，并列出文本優(yōu)先于圖像。
要在整個(gè)網(wǎng)格列表中保持一致的節(jié)奏刃永，請(qǐng)截?cái)鄬?duì)于圖塊寬度過長(zhǎng)的文本內(nèi)容斯够。 或者读规，增加網(wǎng)格大小束亏，以使圖塊可以容納較長(zhǎng)的標(biāo)題涌穆。

Responsive design - 響應(yīng)設(shè)計(jì)
Full-screen grid lists should use fluid image ratios with minimum and maximum widths, derived using the Ratio keylines. They should retain fixed heights, margins, and padding.
Centered grid lists have fluid margins with a minimum width. They maintain fixed image widths, heights, and padding.

【翻譯】
全屏網(wǎng)格列表應(yīng)使用具有最小和最大寬度的流體圖像比率宿稀，使用Ratio keylines導(dǎo)出祝沸。 它們應(yīng)該保持固定的高度罩锐，邊距和填充涩惑。
居中的網(wǎng)格列表具有最小寬度的流動(dòng)邊距跛蛋。 它們保持固定的圖像寬度赊级，高度和填充理逊。

Specs - 規(guī)格

Grid list header/footers - 網(wǎng)格列表標(biāo)題/頁腳
Single-line header/footer - 單行頁眉/頁腳
Height: 48dp
Text padding: 16dp
Default font size: 16sp
Secondary action is flush right to the footer.

【翻譯】
高：48dp
文本填充：16dp
默認(rèn)字體大薪弧：16sp
次要?jiǎng)幼髋c頁腳平齊墨微。

Two-line header/footer - 雙行頁眉/頁腳
Height: 68dp
Text padding: 16dp
Default font size for each line: 16sp/12sp or 14sp/14sp

【翻譯】
高：68dp
文本填充：16dp
每行的默認(rèn)字體大凶钣颉：16sp / 12sp或14sp / 14sp

[圖片上傳失敗...(image-406fa9-1552295205741)]
Type 14/14
Two-line bar (with icon) height: 68dp
Two-line bar height: 68dp
Single-line bar height: 48dp

【翻譯】
類型14/14
雙線條（帶圖標(biāo)）高度：68dp
雙線條高度：68dp
單線條高度：48dp

image

Type 16/12
Two-line bar (with icon) height: 68dp
Two-line bar height: 68dp
Single-line bar height: 48dp

【翻譯】
類型16/12
雙線條（帶圖標(biāo)）高度：68dp
雙線條高度：68dp
單線條高度：48dp

[圖片上傳失敗...(image-22b55c-1552295205741)]
Text truncation in header/footers.

【翻譯】
頁眉/頁腳中的文本截?cái)唷?/p>

Image-only grid list - 僅圖像網(wǎng)格列表

Grid list padding: 4dp or 1dp

Tiles in grid lists can span multiple columns.

Carefully consider whether secondary text is needed in grid lists that use multi-column tiles, as larger tiles can develop significant empty space.

【翻譯】
網(wǎng)格列表填充：4dp或1dp
網(wǎng)格列表中的內(nèi)容可以跨多列。
仔細(xì)考慮在使用多列圖塊的網(wǎng)格列表中是否需要輔助文本忘伞，因?yàn)檩^大的圖塊可能會(huì)顯著占用空間翘魄。

[圖片上傳失敗...(image-544aae-1552295205741)]
Image-only grid list

【翻譯】
僅圖像網(wǎng)格列表

[圖片上傳失敗...(image-4ba8fa-1552295205741)]
Image-only grid list photo album

【翻譯】
僅圖像網(wǎng)格列表相冊(cè)

Single-line grid list - 單行網(wǎng)格列表
Text only - 僅限文字
Height: 48dp
Text padding: 16dp
Default font size: 16sp
Grid list padding: 4dp or 1dp

【翻譯】
高：48dp
文本填充：16dp
默認(rèn)字體大惺罹埂：16sp
網(wǎng)格列表填充：4dp或1dp

[圖片上傳失敗...(image-db55a5-1552295205741)]
Single-line grid list footer with 16dp padding

【翻譯】
具有16dp填充的單行網(wǎng)格列表頁腳

image

Single-line grid list photo album

【翻譯】
單行網(wǎng)格列表相冊(cè)

[圖片上傳失敗...(image-bc8c8-1552295205741)]
Single-line grid list header with 16dp padding

【翻譯】
帶有16dp填充的單行網(wǎng)格列表頭

Text with icon - 帶有圖標(biāo)的文本
Height: 48dp
Text padding: 16dp
Default font size: 16sp
Grid list padding: 4dp or 1dp
The secondary action can be flush right or flush left within the footer or header.

【翻譯】
高：48dp
文本填充：16dp
默認(rèn)字體大小：16sp
網(wǎng)格列表填充：4dp或1dp
次要操作可以在頁腳或頁眉中向右沖洗或向左沖洗腹躁。

image

Single-line grid list footer with 16dp padding and icon

【翻譯】
具有16dp填充和圖標(biāo)的單行網(wǎng)格列表頁腳

[圖片上傳失敗...(image-299eba-1552295205741)]
Single-line grid list footer with icon

【翻譯】
帶有圖標(biāo)的單行網(wǎng)格列表頁腳

[圖片上傳失敗...(image-1f3d12-1552295205741)]
Single-line grid list header with 16dp padding and icon

【翻譯】
帶有16dp填充和圖標(biāo)的單行網(wǎng)格列表標(biāo)題

[圖片上傳失敗...(image-a9c205-1552295205741)]
Single-line grid list header with icon

【翻譯】
具有圖標(biāo)的單行網(wǎng)格列表標(biāo)題

[圖片上傳失敗...(image-95e60a-1552295205741)]
Single-line grid list footer with icon in photo album

【翻譯】
單行網(wǎng)格列表頁腳，在相冊(cè)中有圖標(biāo)

Two-line grid list - 雙線網(wǎng)格列表
Text only - 僅限文字
Height: 68dp
Text padding: 16dp
Default font size for each line: 16sp/12sp or 14sp/14sp
Grid list padding: 4dp or 1dp

【翻譯】
高：68dp
文本填充：16dp
每行的默認(rèn)字體大蓄盱拧：16sp / 12sp或14sp / 14sp
網(wǎng)格列表填充：4dp或1dp

[圖片上傳失敗...(image-a4fa73-1552295205741)]
Two-line grid list footer with 16dp of padding

【翻譯】
帶有16dp填充的兩行網(wǎng)格列表頁腳

[圖片上傳失敗...(image-8ea4bf-1552295205741)]
Two-line grid list header with 16dp of padding

【翻譯】
兩行網(wǎng)格列表頭，帶有16dp的填充

image

Two-line grid list, 4dp example

【翻譯】
雙行網(wǎng)格列表鳖悠，4dp示例

[圖片上傳失敗...(image-dae07a-1552295205741)]
Two-line grid list, 1dp example

【翻譯】
雙行網(wǎng)格列表，1dp示例

Text with icon - 帶有圖標(biāo)的文本
Height: 68dp
Text padding: 16dp
Default font size for each line: 16sp/12sp or 14sp/14sp
The secondary action can be flush right or flush left within the footer or header.
Grid list padding: 4dp or 1dp

【翻譯】
高：68dp
文本填充：16dp
每行的默認(rèn)字體大性髡恕：16sp / 12sp或14sp / 14sp
次要操作可以在頁腳或頁眉中向右刷新或向左刷新。
網(wǎng)格列表填充：4dp或1dp

image

Two-line text with icon footer
Text padding: 16dp

【翻譯】
帶圖標(biāo)頁腳的兩行文本
文本填充：16dp

image

Two-line text with icon

【翻譯】
雙線文本的圖標(biāo)

[圖片上傳失敗...(image-a517d5-1552295205741)]
Two-line text with icon header
Text padding: 16dp

【翻譯】
兩行文本與圖標(biāo)標(biāo)題
文本填充：16dp

[圖片上傳失敗...(image-d459ea-1552295205741)]
Two-line text with icon

【翻譯】
雙線文本的圖標(biāo)

image

Example of text with icon

【翻譯】
帶有圖標(biāo)的文本示例