列表是一个或多个相关项的可视化表示。 它们通常用于显示一系列选项。
资源
类型 | 链接 | 状态 |
---|---|---|
设计 | 设计源代码 (Figma) | 可用 |
实现 | Jetpack Compose | 可用 |
亮点
- 列表是连续的文字或图片集合。
- 列表应该自然且便于浏览。
- 列表由包含主要数据和补充数据的项组成 以图标和文字表示的操作
变体
有三种类型的列表:一行式列表、两行式列表和 三行式列表
- 单行式列表:每行一个,用于传达各项内容。这个简单的 设计确保每项内容都有明显的不同。
- 两行式列表:使用两条平行线来传达每一项。 这种结构化设计可确保自然的可读性,并避免 超载。
- 三行式列表:使用三条平行线来表示每一项。 这种装饰设计可以产生较高的视觉显眼程度。
解剖学
- 图标:通常代表特定对象或操作的小图形 用于以视觉方式传达理念或概念。
- 上横线:显示在标题或副标题上方的一小段文字。 通常用于提供额外的背景信息或强调内容。
- 标题:一行大号的粗体文字,用作 设计元素或页面。
- 副标题:提供更多信息的一行较小的文字 或上下文。
- 控件:可让用户输入决定的交互式元素。
状态
规格
用法
列表是垂直整理的文本和图片组。 列表经过优化,便于用户理解,每个列表包含一个 一组连续的项。 列表项可以包含所表示的主要操作和补充操作 按图标和文字区分
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=7&hl=hr)
正确做法
列表项不是按钮。这些项没有容器。默认情况下,列表项处于未选中状态,且处于未聚焦状态。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=7&hl=hr)
注意
仅在必要时为列表项使用容器背景。
选择控件
控件,用于显示列表项的信息和操作。它们可以对齐 。
![选择复选框](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=7&hl=hr)
![选择电台](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=7&hl=hr)
![选择开关](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=7&hl=hr)
- 复选框:选中一个或多个列表项。
- 单选按钮:仅选择一个 列表中。
- 开关:开启或关闭某个控件。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=7&hl=hr)
正确做法
使用图标选择指示器可清楚地显示列表中的选定项。这有助于用户轻松识别他们所选择的内容,从而提升整体用户体验。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=7&hl=hr)
错误做法
请勿完全依赖背景颜色来指示列表中的选择。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=7&hl=hr)
错误做法
避免将按钮放置在列表项内,因为这可能会混淆哪个元素当前获得焦点。
图标
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=7&hl=hr)
正确做法
如果您在列表中显示同一类型的内容,请省略相应图标,以减少视觉干扰并改善用户体验。如果图标没有任何用途,且不提供额外信息,请避免在列表中使用图标。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=7&hl=hr)
错误做法
避免为列表中的所有项使用相同的图标。这可能会让用户感到无所适从并感到困惑。而应仅在图标具有附加价值或提供更多信息时才使用它们。
头像和图片
列表项可以包含圆形剪裁的图片,以表示 。