起航学习网

- 让每个人都能学到最前沿新知识、新技能!
起航学习网
当前位置: 起航学习网 > 短期培训 > 设计培训 > Android设计规范Material Design-Components(8列表)

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

时间:2016-05-19 09:40:00来源:UI设计网 作者:起航学习网 已有: 名学员访问该课程

  快捷搜索:经验Android教程APP设计


机构名称:我爱学习网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:

前言: 9月11日,很抱歉的跟大家说,这个更新目前到此了~~可能是因为原文章,开始校对了,所以后面的就被撤掉了,但是

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

列表

列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

用法

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn

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

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn

内容

文本内容

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

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn

文本动作

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

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

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

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

主要动作

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

额外动作

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn

行为

滚动

列表只支持垂直滚动。

手势

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

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

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

文本过滤与排序

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
要(Do)

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
不要(Don’t)

边框

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

单行列表

仅有文本

字体: Roboto Regular 16sp

瓦片高: 48dp

文本内边距: 16dp

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

带有文本的图标

字体: Roboto Regular 16sp

瓦片高: 48dp

左边图标内边距: 16dp

文本左内边距: 72dp

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

带有文本的头像

字体: Roboto Regular 16sp

瓦片高: 56dp

左边头像内边距: 16dp

文本左内边距: 72dp

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

两行列表

仅有文本

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

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

瓦片高: 72dp

文本内边距: 16dp

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

带有文本的头像

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

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

瓦片高: 72dp

左边头像内边距: 16dp

文本左内边距: 72dp

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

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

带有文本和图标的头像

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

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

瓦片高: 72dp

左边头像内边距: 16dp

文本左内边距: 72dp

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

右边图标内边距: 16dp

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

三行列表

仅有文本

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

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

瓦片高: 88dp

文本内边距: 16dp

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

«««< HEAD Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

带有文本的头像

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

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

瓦片高: 88dp

左边头像内边距: 16dp

文本左内边距: 72dp

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

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
内容

带有文本和图标的头像

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

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

瓦片高: 88dp

左边头像内边距: 16dp

文本左内边距: 72dp

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

右边图标内边距: 16dp

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

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

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn
元素

Android设计规范Material Design-Components(8列表)_qh.itpxw.cn

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

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

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

 =========================关于起航学习网=========================

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

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

转载请注明:起航学习网 » Android设计规范Material Design-Components(8列表)

文章出自:http://qh.itpxw.cn/peixun/ui/201613741.html

文章标题:Android设计规范Material Design-Components(8列表)



免责声明:本站文章均由入驻起航学习网的会员所发或者网络转载,所述观点仅代表作者本人,不代表起航学习网立场。如有侵权或者其他问题,请联系举报,必删。侵权投诉


机构名称:我爱学习网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:

(责任编辑:深圳学历教育网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------