【Material Design视觉设计语言】UI组件设计（八）：列表

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：[email protected]
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

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

一 列表用途

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

二 列表布局

列表由一下构成：

• 行（Row）：列表中等分成相同宽度的子部分。
• 瓷砖（Tile）：用来填充行的内容。瓷砖中存放内容，并且在列表中可以改变高度。

2.1 瓷砖内容

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

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

将最有区别的内容放在瓷砖的最左侧，和多行文字中的第一行。

2.2 瓷砖动作

主要动作

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

次要动作

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

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

2.3 瓷砖的过滤与排序

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

下面我们来看几组实际的列表布局。

举例1

单行列表

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

举例2

两行列表

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

举例3

三行列表

在三行列表中，每个瓷砖最多包含三行文本。文本的字数可以在同一列表的不同瓷砖间有所改变。