Material Design 组件图鉴 —— Grid Lists

Grid lists are an alternative to standard list views.

种类:

  • 只有图片
  • 单行文字(带 icon)
  • 双行文字(带 icon)

Grid lists 是不允许大小不一的。

用法

Grid list 适合用于呈现类型一直的信息,尤其是图片为主的信息。 最多不能超过两行文字。

List 的个体小单位是 tiles。 Grid 的个体小单位也是称为 tiles。

  • List:适合呈现文字丰富,阅读为主的内容。
  • Cards:宽容度更高,没有很高的一致性要求,形成 collection 可以摆放各式各样的内容。


瓦片内容

Tiles 内放置一级内容与二级内容,通常一级内容是图片,二级内容放置文字于操作按钮。假如没有图片的话一级内容区域要放置默认图片。

tiles内的动作区域

无论是一级动作还是二级动作,都不应该被放置在一个 overflow menu 里面。更多的动作请放到由 tile 打开的二级页面里面。

第一动作

  • Gird list 的第一动作要填满 tiles 的主体,而不是用文字或小 icon 作为按钮。
  • 第一动作要保持一致性,比如说相册每个 tiles 的第一动作都是打开看大图。

第二动作

  • 只能以文字或 icon 作为触发按钮
  • 只能在四个角落戴着,并且要保持一致性。


行为

滚动

只能纵向滚动。

不鼓励使用横向滚动来操作 Grid List。

一切都要由 reading patterns(阅读模式) 出发。

Gird list 一定要有 cut off 以暗喻滚动方向。

手势

单个 tiles 的横划时不被允许的,也不鼓励用 pick-up-and-move 手势。

分类与过滤

依照一定的逻辑顺序来摆放 tiles。

左上起,右下止。(与苹果的规范相反)

维度与大小改变

支持横竖屏显示。

Grid list 不会因为维度改变而变为 List。

自适应设计

Grid 里面的 tiles 根据屏幕的大小按照固定的比例进行缩放。


尺寸

单行文字 tiles 的头部与脚部 区域高度:48dp 文字间距:16dp 文字大小:16sp 二级动作 icon 靠右边摆放/头部却靠左

双行文字 tiles 的标题与脚部 区域高度:68dp 文字间距:16dp 文字大小:16sp/12sp or 14sp/14sp 二级动作 icon 靠左或靠右都行

纯图片 Grid list

图片padding:4dp or 1dp