列表是多个相关项目的视觉表示。它们通常用于显示选项集合。
资源
| 类型 | 链接 | 状态 |
|---|---|---|
| 设计 | 设计源 (Figma) | 可用 |
| 实现 | Jetpack Compose | 可用 |
亮点
- 列表是文本或图像的连续集合。
- 列表应感觉自然且易于扫描。
- 列表由包含由图标和文本表示的主要操作和补充操作的项目组成。
变体
列表有三种类型：单行列表、双行列表和三行列表。
- **单行列表**：使用单行来传达每个项目。这种简单的设计确保每个项目都与其他项目清晰区分。
- **双行列表**：使用两行并列来传达每个项目。这种结构化设计确保自然的可读性并避免认知超载。
- **三行列表**：使用三行并列来表示每个项目。这种装饰性设计创造了高级别的视觉突出效果。
结构
- **图标**：表示特定对象或操作的小图形，通常用于直观地传达想法或概念。
- **上划线**：出现在标题或副标题上方的简短文本行，通常用于提供其他上下文或强调。
- **标题**：大型粗体文本行，用作设计元素或页面的主要标题。
- **副标题**：较小的文本行，在主标题下方提供其他信息或上下文。
- **控件**：允许用户输入决策的交互式元素。
状态
规范
用法
列表是文本和图像的垂直组织组。列表经过优化以提高阅读理解能力，由单列连续项目组成。列表项目可以包含由图标和文本表示的主要操作和补充操作。
操作
列表项目不是按钮。项目没有容器。默认情况下，列表项目未选中且未聚焦。
注意
仅在必要时才使用容器背景作为列表项目。
选择控件
控件显示列表项目的信息和操作。它们可以与列表项目的开头或结尾对齐。
- **复选框**：选择一个或多个列表项目。
- **单选按钮**：选择列表中的一个项目。
- **开关**：打开或关闭控件。
操作
使用图标选择指示器清楚地显示列表中选定的项目。这将帮助用户轻松识别他们选择的项目并改善整体用户体验。
请勿
避免仅依赖背景颜色来指示列表中的选择。
请勿
避免将按钮放在列表项目内，因为它会导致对当前哪个元素处于焦点状态感到困惑。
图标
操作
如果在列表中显示相同类型的內容，请省略图标以减少视觉干扰并改善用户体验。如果图标无用且不提供其他信息，则避免在列表中使用图标。
请勿
避免在列表中对所有项目使用相同的图标。这在视觉上可能会不堪重负并让用户感到困惑。仅当图标增加价值或提供其他信息时才使用。
头像和图像
列表项目可以在圆形裁剪中包含图像以表示人员或实体。
