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是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）