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