列表是一个或多个相关项的可视化表示。它们通常用于显示选项集合。
资源
类型 | 链接 | 状态 |
---|---|---|
设计 | 设计源代码 (Figma) | 可用 |
实施步骤 | Jetpack Compose | 即将推出 |
亮点
- 列表是文本或图片的连续集合。
- 列表应让人感觉自然且易于浏览。
- 列表由项组成,包含主要操作和补充操作(以图标和文本表示)。
变体
列表有三种类型:单行列表、两行列表和三行列表。
- 单行式列表:用一行文字说明各项内容。这种简单的设计可确保每项内容之间都明显不同。
- 双行列表:使用两行平行说明每项内容。 这种结构化设计可以确保自然的可读性,并避免认知过载。
- 三行式列表:使用三条平行线表示每一项。 这种装饰设计具有较高的视觉显眼程度。
解剖学
- 图标:代表特定对象或操作的小图形,通常用于直观地传达某个想法或概念。
- Overline:显示在标题或副标题上方的一行简短文本,通常用于提供额外的上下文或强调内容。
- 标题:一大行粗体文本,用作设计元素或页面的主要标题。
- 副标题 (Subtitle):在主标题下方提供更多信息或上下文的较小文本行。
- 控制元素:一种允许用户输入决定的互动式元素。
州
规格
用法
列表是垂直组织的文本和图片组。一个列表由一个连续的列项目组成,旨在提高阅读理解能力。列表项可以包含由图标和文本表示的主要操作和补充操作。

Do
列表项不是按钮。商品没有容器。默认情况下,列表项处于未选中状态且未处于聚焦状态。

注意
仅在必要时对列表项使用容器背景。
选择控件
控制列表项的显示信息和操作。它们可与列表项的前边缘或尾边缘对齐。



- 复选框:选择一个或多个列表项。
- 单选按钮:请仅选择列表中的一项。
- 开关:开启或关闭某个控件。

Do
使用图标选择指示器可在列表中清楚地显示所选项。这有助于用户轻松识别自己选择了哪个商品,并提升整体用户体验。

错误做法
避免仅依赖于背景颜色来表明列表中的选项。

错误做法
请避免将按钮放置在列表项中,因为这样做可能会导致混淆哪个元素当前获得焦点。
图标

Do
如果您在列表中显示相同类型的内容,请省略图标,以减少视觉干扰并改善用户体验。避免在列表中使用图标没有任何用途且没有提供额外信息的情况。

错误做法
避免为列表中的所有项使用同一图标。这可能会让用户感到应接不暇。相反,只有在图标能够带来价值或提供额外信息时才使用图标。
头像和图片
列表项可以包含圆形剪裁的图片,以代表人物或实体。