列表

列表是包含元素的容器,具有内置的滚动和焦点功能。

设计元素应锚定到帧的底部。

原则

清晰的组织结构:列表应以清晰且易于浏览的垂直排列方式呈现信息。

一致的商品呈现方式:列表项应遵循一致的视觉结构。

可聚焦性与导航:在依赖方向性导航的界面中,列表必须清晰指示聚焦的项。

互动性:列表项通常表示可选择或可操作的元素。

用法与位置

列表可以包含各种具有可重复元素的同级内容。与堆栈不同,列表会填充应用数据视图容器。

设计元素应锚定到帧的底部。
列表可以在视图中显示一个或多个可选择的项目。

设计元素应锚定到帧的底部。

使用遮罩来指示溢出内容 当列表包含的项数超出视图可容纳的项数时,会在列表边界附近使用黑色遮罩。

设计元素应锚定到帧的底部。

列表可以根据需要使用标题 列表可以使用静态或固定的标题,为清晰起见。

每个视图包含多个列表,这在视觉上和专注度方面都令人难以承受。

设计元素应锚定到帧的底部。

使用深度来指示焦点

列表项在未聚焦状态和聚焦状态下,深度介于 0 和 +4 之间。

设计元素应锚定到帧的底部

列表项可以是可操作的

列表中的项目可以充当操作。将操作保留在列表项中

突出显示点按时将激活的控件,即使您可以滚动其他内容。如果列表或卡片可以滚动到另一个元素后面,则仅聚焦于响应点按的项。

仅突出显示当前聚焦的元素,以便用户发现可聚焦的控件。
突出显示多个可聚焦的界面元素,因为这会让人混淆哪些元素与点按输入相关联。

解剖学

列表由滚动容器和间距一致的列表项组成。当列表中的项数超过视口时,列表应可垂直滚动,且过冲程度应尽可能小。

设计元素应锚定到帧的底部。 A. 容器 - 可滚动区域

B. 列表项

C. 系统栏

设计元素应锚定到帧的底部。 List Item:列表中的每个单独元素。

A. 形状

B. 边框

C. 前置图标

D. 文字内容

E. 尾随指标

自定义

大多数自定义操作都是通过列表项完成的。

属性 自定义 默认值
列表项:形状 40 dp
列表项:前置和后置图标 中等符号图标
列表项:填充值 2 天 dp,20 天 dp
列表项:内容 单行:一个 Text 可组合函数,用于显示主要标签,使用 Body Small 双行:一个 Column,包含两个 Text 可组合函数,用于显示主要标签和次要标签 主要:Title Small 次要:Body Small
列表:verticalArrangement 20 dp