Android设计规范Material Design-Components(8列表)

9月11日,很抱歉的跟大家说,这个更新目前到此了~~可能是因为原文章,开始校对了,所以后面的就被撤掉了,但是大家应该也有所了解了~所以我们会继续跟踪的~~如果校正完毕或者有新消息,会第一时间想到我们学ui网的小伙伴的~~

列表

用法

列表由单一连续的列构成,该列又等分成相同宽度称为行(rows)的子部分。行是瓦片(tiles)的容器。

瓦片中存放内容,并且在列表中可以改变高度。

列表最适合应用于显示同类的数据类型或者数据类型组(homogeneous data type or sets of data types),比如图片和文本,目标是区分多个数据类型数据或单一类型的数据特性,使得理解起来更加简单。

如果有超过三行的文本需要在列表中显示,换用卡片(cards)代替。

如果内容的主要区别来源于图片,换用网格列表(grid list)。

内容

文本内容

列表瓦片以一致的格式来显示一组相关的内容,为一致性的类型或者一组内容指定优先顺序来体现层次感以获取更好的可读性。比如,在时间戳上强调头像和文本片段。这有助于使用者可以在一组内容中更容易地区分出他们要找的信息。

列表瓦片可以包含三行的文本,并且文本的字数可以在同一列表的不同瓦片间有所不同。要显示多于三行的文本,使用卡片。

将最有区别的内容放在瓦片的最左侧,和多行文字中的第一行。

文本动作

列表瓦片中空间大部分应用专用于主要的动作。

由于动作并不能用来区分列表中的各个瓦片,所以将额外的动作放置在瓦片的右边。

主要动作和额外动作,比如播放、放大、删除和选择,是瞬时性的,并且通常不会在列表中弹出选项子菜单(动作溢出列表, action overflow)。

动作可以打开一个随后的视图,如卡片或者悬浮卡片(hovercard)。

主要动作

  • 充满整个瓦片,因此不能通过图标、文本等元素呈现。
  • 在特定的列表中所有瓦片的动作是一致的。比如在指定的音乐列表中,瓦片的主要内容是播放一首歌曲,或者在邮件列表中是打开一封邮件来阅读。

额外动作

  • 在瓦片中通过图标、次要文本等来呈现出来。
  • 在指定的列表中所有瓦片的动作是功能一致的,比如使用图标来标识某人某人是否在线等。
  • 在指定列表的瓦片中,动作放置的位置是一致的。

避免不断在瓦片中使用额外动作来制造干扰因素,比如在每个瓦片中显示分享动作按钮。然而比如星标(starts)或者置针脚(pins)等开关按钮是一个特例,因为它们通过显示状态来呈现出有效的信息。

行为

滚动

列表只支持垂直滚动。

手势

在列表中,每个瓦片的滑动(swipe)动作应当是一致的。

在操作正确时,瓦片可以在列表和下拉目标间移动(比如,移动一个文件到文件夹)。

在操作正确时,瓦片可以被选中并且在列表中可以手动改变顺序。

文本过滤与排序

列表瓦片可以通过数据、文件大小、字母顺序或者其它参数来编程改变其顺序或者实现过滤。


要(Do)


不要(Don’t)

边框

单行列表中,每个瓦片包含了单行的文本。文本字数可以在同一列表的不同瓦片间有所改变。


元素


内容

两行列表中,每个瓦片最多包含两行的文本。文本字数可以在同一列表的不同瓦片间有所改变。


元素


内容

在三行列表中,每个瓦片最多包含三行文本。

文本的字数可以在同一列表的不同瓦片间有所改变。


元素


内容

单行列表

仅有文本

字体: Roboto Regular 16sp

瓦片高: 48dp

文本内边距: 16dp

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

带有文本的图标

字体: Roboto Regular 16sp

瓦片高: 48dp

左边图标内边距: 16dp

文本左内边距: 72dp

文本上部和下部内边距: 16dp

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

带有文本的头像

字体: Roboto Regular 16sp

瓦片高: 56dp

左边头像内边距: 16dp

文本左内边距: 72dp

文本上部和下部内边距: 20dp

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

两行列表

仅有文本

主要文本的字体: Roboto Regular 16sp

次要文本的字体: Roboto Regular 14sp

瓦片高: 72dp

文本内边距: 16dp

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

带有文本的头像

主要文本的字体: Roboto Regular 16sp

次要文本的字体: Roboto Regular 14sp

瓦片高: 72dp

左边头像内边距: 16dp

文本左内边距: 72dp

文本上部和下部内边距: 16dp

图标和文本区域中心对齐。

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

带有文本和图标的头像

主要文本的字体: Roboto Regular 16sp

次要文本的字体: Roboto Regular 14sp

瓦片高: 72dp

左边头像内边距: 16dp

文本左内边距: 72dp

文本上部和下部内边距: 16dp

右边图标内边距: 16dp

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

三行列表

仅有文本

主要文本的字体: Roboto Regular 16sp

次要文本的字体: Roboto Regular 14sp

瓦片高: 88dp

文本内边距: 16dp

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。

«««< HEAD
元素


元素


内容

带有文本的头像

主要文本的字体: Roboto Regular 16sp

次要文本的字体: Roboto Regular 14sp

瓦片高: 88dp

左边头像内边距: 16dp

文本左内边距: 72dp

文本上部和下部内边距: 16dp

头像和主要文本上部对齐。

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素


内容

带有文本和图标的头像

主要文本的字体: Roboto Regular 16sp

次要文本的字体: Roboto Regular 14sp

瓦片高: 88dp

左边头像内边距: 16dp

文本左内边距: 72dp

文本上部和下部内边距: 16dp

右边图标内边距: 16dp

头像和图标与主要文本上部对齐。

在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目(subheader)的列表上部,因为表头条目包含了它们自己的内边距。


元素


元素

非常感谢这些辛苦翻译的小伙伴!!

原文:Lists翻译:CodeDiving校对:K0ST

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn海量APP截图,让你灵感爆发!

(0)

相关推荐

  • Android设计规范 Material Design

    阔别多日,不知道小伙伴们,有没有想我呀~~这里补充上Android设计规范 Material Design的目录,方便小伙伴们阅读~~ Style 色彩 – Color 字体排版 – Typograp ...

  • Android设计规范Material Design-Components(11进度和动态)

    9月15日,昨天和小伙伴谈论了一下这个谷歌新出的Material Design设计语言,我之前刚看到的时候也以为是一种程序或者系统之类的~~但是越到后面才发现这更像是一种设计规范~~就我看来这就是一种 ...

  • Android设计规范 Material Design-Layout(1准则)

    9月3日,又是新的一天,今天开始翻开新的篇章,,Material Design的第二部分Layout.其实我是不知道什么是Layout,所以我为了方便大家,随便是给自己涨涨知识,不好意思的又去找了找度 ...

  • Android设计规范 Material Design-Style(1.色彩)

    八月已过去,九月刚来到~暑假已过去~九月上学季~~又迎来了一个桂花飘香的季节,你是否有了新的目标和计划~~所以在九月初始给大家带来一个全新的东西(ps:对于我来说是全新的东西)--Material D ...

  • Android设计规范 Material Design-Style(4图像)

    接着图标,来说说图像,图标是一种视觉语言,图形则更能带来视觉冲击,给人带来不同的心境,所以下面就是图像的重要性,以及图像运用原则. 图像(Imagery) 图像 在material design中,图 ...

  • Android设计规范 Material Design-Resources(1布局模板)

    9月29日~~昨天天气好好呀,阳光明媚,多么希望十一也这样,那感觉简直是倍儿爽~~话说,今天以后更新的基本都是干货~~所以收获总在最后~~(ps:所有关于 Material Design的下载都在文章 ...

  • Android设计规范Material Design-Components(9列表控制)

    9月12日,是不是很奇怪,昨天才说可能要有段时间不能更新了,但是为什么今天又更新了,主要是因为小编我昨天眼拙,搬文章的网站改版了,没有找到,就以为没有了~~拖出去赏五十大板~~顺便告诉大家一个好消息~ ...

  • Android设计规范 Material Design-Components(10菜单)

    9月13日,谷歌设计语言~~接着列表控制,讲讲菜单,我们平时看到手机上的各种下拉菜单什么的,对于我们来讲在应用中主要是用于导航,而在这种谷歌新的设计语言中它不仅仅是用于导航,或者说导航只是一部分作用~ ...

  • Android设计规范Material Design-Components(7网格)

    又学习了新的知识~~今天的网格内容基本都是基于Android中APP设计时的规范~~,满满的都是干货呀~~不怎么得了~~小伙伴们high起来~ 网格 网格 网格列表是一种标准列表视图的可选组件.网格列 ...