Material Design — 网格列表（Grid lists）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

Grid lists

Material Design链接：Grid lists

网格列表

网格列表（Grid lists）

网格列表是标准列表视图的替代方法。

Grid lists由以垂直和水平布局排列的cell重复后组成。

Grid lists最适用于同质数据类型。 它们有助于提高用户对Grid lists所含内容的视觉理解。

类型

仅图像

单行文本（可带图标）

两行文字（可带图标）

操作

垂直滚动

筛选

替代

Lists

Cards

---

用法

网格列表最适合呈现同类数据，通常为图像，并且针对视觉理解和区分类似数据类型进行了优化。

浏览路径

一个grid list由在其内部的垂直和水平排列的重复cells组成。

Tiles可容纳内容，并可垂直或水平地涵盖一个或多个cells。

如果tiles中的文本需要足够突出以区分主要的内容片段，请考虑使用不同的容器，如lists或cards，可优化文本显示与加快阅读理解。

Lists：针对阅读理解进行了优化，特别是在比较一组包含多种数据类型的数据时。

Cards：用于格式不一致的内容，例如带有可变长度标题的照片或具有异质内容的数据集，例如照片，视频和书籍的混合集合。

---

内容

Tiles中的内容

Tiles中的内容由主要内容和辅助内容组成。 主要内容是主要的区分元素，通常是图像。 次要内容可以是操作或文本。

为缺少主要内容图像的tiles提供默认图像。

包含主要操作和次要操作的tiles

Tiles中的操作

主要和次要内容上的操作（如播放，放大，删除或选择）都是即时操作，并且通常不会引发grid lists内的选项子菜单（溢出操作）。

操作可以打开后续的视图，如一张card。

主要操作

·填充整个tile，因此不会通过图标或文字的形式呈现

·在一个特定grid list中的所有tile中都保持一致。 例如，单个grid list中所有tiles的主要操作可能都是查看图像的详细信息。

次要操作或内容

·在tiles内，通过图标或文字的形式呈现

·在一个特定grid list中的所有tile中都保持一致

·放置在一个特定grid list中所有tiles中的相同位置，但是不同grid lists（角落或边缘）之间的相同位置可能会有所不同。 例如，一个grid list中的所有标题可能位于左下角，而另一个网格列表中的所有标题可能会放置在左上角。

次要操作与文案的位置

---

行为

滚动

grid lists通常只能垂直滚动。

不鼓励横向滚动grid lists，因为滚动会干扰典型的阅读模式，影响理解。 一个明显的例外是水平滚动的单行图像grid list，例如图库，它与典型的阅读模式相符合。

切断grid lists初始滚动位置中的网格图块，以传递出内容溢出的滚动方向。

手势

不允许对每个tile进行滑动（swipe）操作。拾取并移动（Pick-up-and-move）行为是不鼓励的。

Tile筛选和分类

Grid lists中的内容可以通过编程方式、日期、文件大小、字母顺序或其他参数进行筛选。

Grid lists中的第一个项目位于grid list的左上角，并且顺序为从左至右，从上至下。

尺寸和调整大小

调整grid list的大小会导致tiles在水平空间变为可用时重新排序。全屏的grid list会调整大小以适应屏幕宽度。

水平空间收缩时，grid list不会转换为list。grid list和list是用于强调不同数据类型的独立结构。Grid lists展示图像优先于文字，Lists展示文字优先于图像。

要在整个网格列表中保持一致的节奏，请截断过长的文本内容。或者，增加grid的大小，以便tiles可以容纳较长的标题。

响应式设计

全屏grid lists应该使用Ratio Keylines导出的具有最小和最大宽度的流体图像比率。他们应该保留固定的高度，margins和padding。

居中的grid lists具有最小宽度的fluid margins。它们保持固定的图像宽度，高度和padding。

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）