组件 网格列表

网格列表

网格列表是普通列表的替代方案。

网格列表是由一组重复样式的单元格以垂直和水平方式进行排列组成的。

网格列表最适用于同类数据,这有助于提高用户对列表内容的直观理解性。

类型

图片
图片+单行文本(或文本+图标)
图片+两行文本(或文本+图标)

操作

垂直滚动
筛选

替代方案

列表
卡片

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

网格列表最适用于呈现同类数据(通常是图片),来提升直观理解性以及辨别相似的数据类型。

网格列表示例

网格列表是由一组重复样式的单元格以垂直和水平方式进行排列组成的。

磁帖包含内容,并可以横向或纵向占用一个或多个单元格。

网格列表示例

单元格与磁帖示例

如果磁帖中的文本需要脱离主要内容块来突出显示,考虑使用其他的容器,例如列表或卡片,它们更利于文本展示和阅读理解。

列表:利于阅读理解,特别是比较多种类型的数据时。

卡片:用于多种内容的组合(如图片和长度不一的标题)或具有异构内容的数据集(如由照片、视频和书籍组成的集合)。

内容 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

磁帖中的内容

磁帖的内容由主要内容和次要内容组成。主要内容是最容易辨别的元素(通常是图片)。次要内容可以是操作或文本。

如果磁贴的主要内容缺少图片,应当提供一张默认图片。

磁帖中包含主要操作和次要操作

磁帖中的操作

主要内容和次要内容中的操作(例如播放、放大、删除或选择)都是即时生效的,并且通常不会在网格列表中弹出子菜单。

操作可以打开一个后续视图,例如卡片。

主要操作

  • 充满整个磁帖,因此不通过图标或文本来展现。
  • 在同个列表的磁帖中保持一致。例如同一个网格列表中,所有磁帖的主要操作都是查看图片详情。

次要操作和次要内容

  • 在磁帖中以图标或文本的形式展现。
  • 在同个列表的磁帖中保持一致。
  • 在同个列表的磁帖中处于相同位置,但在不同列表之间的位置可以不同(放置在拐角或边缘)。例如,一个网格列表中,磁帖的标题在左下角,而另一个网格列表中,磁帖的标题可以放在左上角。

次要操作和次要文本的位置示例

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

滚动

网格列表通常只能垂直滚动。

不建议进行水平滚动,因为水平滚动不符合传统的阅读方式,会影响拥护理解。但有一个例外:当网格列表中只有单行图片时,可以水平滚动,例如图片库,这符合传统的阅读方式。

在滚动开始前应当在视图中截断磁帖,来表明内容的滚动方向。

截断磁帖来暗示内容可以滚动

避免在滚动开始前把磁帖与视图边缘对齐。这样无法有效的传达列表中还有其他内容。

手势

不允许为每个磁帖都添加滑动手势。不推荐使用拾取并移动操作。

磁帖的筛选和排序

网格列表中的内容可以按照日期、文件大小、字母顺序或其他参数进行筛选和排序。

网格列表中的第一个元素位于左上角,顺序为从左到右、从上到下。

维度和调整尺寸

调整网格列表的尺寸影响水平空间,在空间稳定后磁帖会重新排序。全出血磁帖会自动调整大小来适应屏幕的宽度。

当水平空间缩小时,网格列表不会转换为列表。因为两者的结构不同,强调的数据类型也不同。网格列表强调图片,列表则强调文本。

为了保持网格列表的一致性,会截断超过磁帖宽度的文本。或者,也增加网格的大小,使磁帖能够包含更长的标题。

响应式设计

全屏网格列表应当使用可变的图片比例,但需要设置最小宽度和最大宽度,比例参考比例关键线。磁帖应保持固定的高度、外边距和内边距。

居中的网格列表的外边距是可变的,但有最小值。它们会保持固定的图片宽度、高度和边距。

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

网格列表头部/底部

单行头部/底部

高度:48dp
文本边距:16dp
默认字号:16sp
次要操作右对齐

两行头部/底部

高度:68dp
文本边距:16dp
各行的默认字号:16sp/12sp 或 14sp/14sp


类型 14/14
两行栏高(带图标):68dp
两行栏高:68dp
单行栏高:48dp


类型 16/12
两行栏高(带图标):68dp
两行栏高: 68dp
单行栏高:48dp

头部/底部的文本截断。

图片网格列表

网格列表边距:4dp 或 1dp

网格中的磁帖可以占用多列。

仔细考虑占用多列的磁帖是否需要次要文本,较大的磁帖可能出现大面积留白。

图片网格列表

图片网格列表的相册

单行网格列表

仅文本

高度:48dp
文本边距:16dp
默认字号:16sp
网格列表边距:4dp 或 1dp

单行网格列表的底部有 16dp 的边距

单行网格列表的头部有 16dp 的边距

单行网格列表的相册

文本和图标

高度:48dp
文本边距:16dp
默认字号:16sp
网格列表边距:4dp 或 1dp

次要操作位于头部或底部,可以左对齐或右对齐。

单行网格列表的底部有 16dp 的边距和图标

单行网格列表的头部有 16dp 的边距

相册中的单行网格列表底部有图标

单行网格列表底部有图标

单行网格列表头部有图标

两行网格列表

仅文本

高度:68dp
文本边距:16dp
各行的默认字号:16sp/12sp 或 14sp/14sp
网格列表边距:4dp 或 1dp

两行网格列表的底部有 16dp 的边距

边距为 4dp 的网格列表示例

两行网格列表的头部有 16dp 的边距

边距为 1dp 的两行网格列表示例

文本和图标

高度:68dp
文本边距:16dp
各行的默认字号:16sp/12sp 或 14sp/14sp

次要操作位于头部或底部,可以左对齐或右对齐。

网格边距:4dp 或 1dp

带底部图标的两行网格列表

文本边距:16dp

带头部图标的两行网格列表

文本边距:16dp

文本和图标示例

两行文本和图标

两行文本和图标