Grid lists - 网格列表

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.

【翻译】
网格列表是标准列表视图的替代。
网格列表由以垂直和水平布局排列的单元的重复模式组成。
网格列表最适用于类似的数据类型。 它们有助于改善他们所含内容的视觉理解。

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

【翻译】
仅图像
单行文本（或带图标）
双行文本（或带图标）

Actions - 操作
Vertical scrolling
Filtering

【翻译】
垂直滚动
过滤

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.

【翻译】
网格列表最适合于呈现同质数据（通常是图像），并且被优化用于视觉理解和类似数据类型之间的区分。

image

Example of grid list

【翻译】
网格列表示例

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.

【翻译】
网格列表由在网格列表中垂直和水平排列的单元的重复模式组成。
图块保存内容，可以垂直或水平跨越一个或多个单元格。

image

Example of grid list

【翻译】
网格列表示例

[图片上传失败...(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.

【翻译】
如果图块中的文本需要足够突出以区分主要内容片段，请考虑使用不同的容器（例如列表或卡片），优化显示文本并便于阅读理解。
列表：针对阅读理解进行了优化，特别是在比较包含多个数据类型的一组数据时。
卡片：用于格式不一致的内容，例如可变长度字幕的照片，或异质内容的数据集，例如照片和视频和书籍的混合集合。

Content - 内容

Content in tiles - 图块中的内容

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.

【翻译】
平铺内容由主要内容和辅助内容组成。 主要内容是主要的区分元素，通常是图像。 辅助内容可以是操作或文本。
为缺少主要内容图片的图块提供默认图片。

[图片上传失败...(image-c86d2-1552295205741)]
Example of tile content with primary and secondary actions

【翻译】
具有主要和次要操作的切片内容示例

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.

【翻译】
主要和次要内容上的操作（例如播放，放大，删除或选择）都是即时的，通常不会在网格列表中产生选项子菜单（操作溢出）。
操作可以打开后续视图，例如卡。

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.

【翻译】
填充整个磁贴，因此不通过图标或文本表示。
在特定网格列表中的整个磁贴中是一致的。例如，单个网格列表中所有图块的主要操作可以是查看图像的详细信息。

Secondary actions or content - 次要操作或内容
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.

【翻译】
在带有图标或文本的图块中表示。
在特定网格列表中的整个磁贴中是一致的。
被放置在特定网格列表的图块内的一致位置，但是该一致位置可以在网格列表（在角或边缘）之间变化。 例如，一个网格列表中的所有标题可以位于左下角，而另一个网格列表中的所有标题可以在左上角放置标题。

[图片上传失败...(image-81de37-1552295205741)]
Example of secondary action with action and text positions

【翻译】
带操作和文本位置的辅助操作示例

Behavior - 行为

Scrolling - 滚动

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.

【翻译】
网格列表通常只能垂直滚动。
不建议水平滚动网格列表，因为滚动会干扰典型的阅读模式，影响理解。 一个显着的例外是水平滚动的单行网格图像列表，例如图库，其与典型的阅读模式兼容。
在视图的初始滚动位置切割网格贴片，以传达内容溢出的滚动方向。

正确的示范

Do.
Indicate content overflow by cutting off grid tiles.

【翻译】
正确的示范
通过切断网格图块来指示内容溢出

[图片上传失败...(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.

【翻译】
错误的示范
避免在视图的初始滚动位置沿视图边缘对齐网格贴图。这种定位没有有效地传达有更多的内容可用。

Gestures - 手势
Per-tile swipe actions are not permitted. Pick-up-and-move actions are discouraged.

【翻译】
不允许进行每个平铺的滑动操作。 不鼓励接收和移动动作。

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.

【翻译】
网格列表中的内容可以按照日期，文件大小，字母顺序或其他参数进行编程过滤或排序。
网格列表中的第一个项目位于网格列表的左上角，顺序从左到右，从上到下。

Dimensions and resizing - 尺寸和调整大小
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.

【翻译】
调整网格列表的大小会导致图块在水平空间变为可用时重新排序。 完全放出网格列表图块调整大小以适合屏幕宽度。
水平空间合同时，网格列表不会转换为列表。 网格列表和列表是用于强调不同数据类型的单独结构。 网格列表将图像优先于文本，并列出文本优先于图像。
要在整个网格列表中保持一致的节奏，请截断对于图块宽度过长的文本内容。 或者，增加网格大小，以使图块可以容纳较长的标题。

Responsive design - 响应设计
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.

【翻译】
全屏网格列表应使用具有最小和最大宽度的流体图像比率，使用Ratio keylines导出。 它们应该保持固定的高度，边距和填充。
居中的网格列表具有最小宽度的流动边距。 它们保持固定的图像宽度，高度和填充。

Specs - 规格

Grid list header/footers - 网格列表标题/页脚
Single-line header/footer - 单行页眉/页脚
Height: 48dp
Text padding: 16dp
Default font size: 16sp
Secondary action is flush right to the footer.

【翻译】
高：48dp
文本填充：16dp
默认字体大小：16sp
次要动作与页脚平齐。

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

【翻译】
高：68dp
文本填充：16dp
每行的默认字体大小：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
双线条（带图标）高度：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
双线条（带图标）高度：68dp
双线条高度：68dp
单线条高度：48dp

[图片上传失败...(image-22b55c-1552295205741)]
Text truncation in header/footers.

【翻译】
页眉/页脚中的文本截断。

Image-only grid list - 仅图像网格列表

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.

【翻译】
网格列表填充：4dp或1dp
网格列表中的内容可以跨多列。
仔细考虑在使用多列图块的网格列表中是否需要辅助文本，因为较大的图块可能会显着占用空间。

[图片上传失败...(image-544aae-1552295205741)]
Image-only grid list

【翻译】
仅图像网格列表

[图片上传失败...(image-4ba8fa-1552295205741)]
Image-only grid list photo album

【翻译】
仅图像网格列表相册

Single-line grid list - 单行网格列表
Text only - 仅限文字
Height: 48dp
Text padding: 16dp
Default font size: 16sp
Grid list padding: 4dp or 1dp

【翻译】
高：48dp
文本填充：16dp
默认字体大小：16sp
网格列表填充：4dp或1dp

[图片上传失败...(image-db55a5-1552295205741)]
Single-line grid list footer with 16dp padding

【翻译】
具有16dp填充的单行网格列表页脚

image

Single-line grid list photo album

【翻译】
单行网格列表相册

[图片上传失败...(image-bc8c8-1552295205741)]
Single-line grid list header with 16dp padding

【翻译】
带有16dp填充的单行网格列表头

Text with icon - 带有图标的文本
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
默认字体大小：16sp
网格列表填充：4dp或1dp
次要操作可以在页脚或页眉中向右冲洗或向左冲洗。

image

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

【翻译】
具有16dp填充和图标的单行网格列表页脚

[图片上传失败...(image-299eba-1552295205741)]
Single-line grid list footer with icon

【翻译】
带有图标的单行网格列表页脚

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

【翻译】
带有16dp填充和图标的单行网格列表标题

[图片上传失败...(image-a9c205-1552295205741)]
Single-line grid list header with icon

【翻译】
具有图标的单行网格列表标题

[图片上传失败...(image-95e60a-1552295205741)]
Single-line grid list footer with icon in photo album

【翻译】
单行网格列表页脚，在相册中有图标

Two-line grid list - 双线网格列表
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
每行的默认字体大小：16sp / 12sp或14sp / 14sp
网格列表填充：4dp或1dp

[图片上传失败...(image-a4fa73-1552295205741)]
Two-line grid list footer with 16dp of padding

【翻译】
带有16dp填充的两行网格列表页脚

[图片上传失败...(image-8ea4bf-1552295205741)]
Two-line grid list header with 16dp of padding

【翻译】
两行网格列表头，带有16dp的填充

image

Two-line grid list, 4dp example

【翻译】
双行网格列表，4dp示例

[图片上传失败...(image-dae07a-1552295205741)]
Two-line grid list, 1dp example

【翻译】
双行网格列表，1dp示例

Text with icon - 带有图标的文本
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
每行的默认字体大小：16sp / 12sp或14sp / 14sp
次要操作可以在页脚或页眉中向右刷新或向左刷新。
网格列表填充：4dp或1dp

image

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

【翻译】
带图标页脚的两行文本
文本填充：16dp

image

Two-line text with icon

【翻译】
双线文本的图标

[图片上传失败...(image-a517d5-1552295205741)]
Two-line text with icon header
Text padding: 16dp

【翻译】
两行文本与图标标题
文本填充：16dp

[图片上传失败...(image-d459ea-1552295205741)]
Two-line text with icon

【翻译】
双线文本的图标

image

Example of text with icon

【翻译】
带有图标的文本示例