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

【翻譯】
帶有圖標的文本示例