Material Design 组件图鉴 —— Lists

Lists present multiple line items vertically as a single continuous element.

用法

list 清单又若干纵向排列的 row 组成,row 内放置 tiles(瓦片)。 tiles 作为容器防止内容,它的高度是自由的。

Lists 最适宜用于呈现类型相近的数据,例如文字与图片(短信、文件),便于用户对各类条目进行对比。

其他状况:

  • 如果需要展现三行以上文字或需要展示的内容形式过多时,尝试使用卡片代替 lists。
  • 如果展示对象的图像比文字重要的话,尝试使用 grid list 作为替代。

密度

假如是以鼠标或键盘作为主要输入手段时,lists 的密度可以适当增加以展示更多内容。


行为

滚动 Lists 只能纵向滚动。

手势 Lists 内的 tiles 通常支持横划操作手势。 也支持 pick & drop 重新排列,跟卡片类似。

排序 Lists 清单内的 tiles 默认应该按照某种规则进行排列,时间、文件大小或其他参数。


内容

list tiles 以具有严格一致性的方式承载内容。通过层级关系突出重点内容,方便用户找到最重要的信息,例如在邮件、信息里面,头像和文字就会比事件信息来得更加重要。

List tiles 内最多有三行文字(标题,内容),如超过三行请考虑使用卡片。

  • 第一动作出发区域应该是最大的。
  • 区别物应该靠左放置。
  • 区别文字靠上摆放。
  • 补充/第二动作放置在右侧。


动作

第一动作与补充动作有可能会被放置在后续的 view 里面,譬如一张卡片,或者 Action Sheet,不要在 List 上使用 overflow menu。

第一动作

  • tile 必须尽量填满,不可以出现只有一枚头像后面什么都没有的情况。
  • 第一动作的触发区在同一个 List 里面要保持一致性。

补充动作

  • 以 icon 或二级文字区域作为触发对象
  • 保持一致性

重复

  • Secondary 操作按钮有可能会重复出现多次,如果第二操作无关紧要(如分享),尽量不外露。
  • Star、pin 这类勾选状态的操作除外

尺寸

单行 List 只有一行文字。

  • icon 左边距:16dp
  • list 左边距:72dp
  • list 右边距:16dp

双行 List

  • icon 左边距:16dp
  • list 左边距:72dp
  • list 右边距:16dp

三行 List

  • icon 左边距:16dp
  • list 左边距:72dp
  • list 右边距:16dp

单行纯/带图标 List

其他一样,首一行上边距在原上边距的基础上增加 8dp。

底部边距由文字的 baseline 开始计算起。

  • 一般 tile 高度:48dp
  • 带头像高度:56dp
  • 字号:16sp

双行

  • 一般 tile 高度:72dp
  • 带头像高度:72dp
  • 第一字号:16sp
  • 第二字号:14sp
  • 两行文字间距:20dp(由第一行的baseline算起)
  • icon 与 avatar 跟文字居中对齐

三行

  • 一般 tile 高度:88dp
  • 带头像高度:88dp
  • 第一字号:16sp
  • 第二字号:14sp
  • 两行文字间距:20dp(由第一行的baseline算起)
  • icon 与 avatar 跟文字居顶部对齐