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中的文本需要足够突出以区分主要的内容片段,请考虑使用不同的容器,如listscards,可优化文本显示与加快阅读理解。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,186评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,858评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,620评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,888评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,009评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,149评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,204评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,956评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,385评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,544评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,185评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2 351

推荐阅读更多精彩内容