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 跟文字居顶部对齐