列表

列表是一个或多个相关项的直观表示形式。它们通常用于显示选项集合。

列表涵盖范围

资源

类型 关联 状态
设计 设计源代码 (Figma) 可用
实施步骤 Jetpack Compose 敬请期待

亮点

  • 列表是文本或图片的连续集合。
  • 列表应感觉自然且易于浏览。
  • 列表由包含主要操作和补充操作的项(以图标和文本表示)组成。

变体

列表有三种类型:一行列表、两行列表和三行列表。

列表剖析

  1. 单行式列表:用一行文字来传达各项内容。这种简单的设计可确保每项内容之间都明显区分开来。
  2. 两行式列表:使用两条平行线来传达每项内容。 这种结构化设计可确保自然的可读性,并避免认知过载。
  3. 三行式列表:使用三条平行线表示每个项目。 这种装饰设计具有很高的视觉显眼程度。

解剖学

列表剖析

  1. 图标:表示特定对象或操作的小图形,通常用于直观地传达某个想法或概念。
  2. 上划线:显示在标题或副标题上方的短文本行,通常用于提供额外的背景信息或进行强调。
  3. 标题:以粗体显示的大型文本行,用作设计元素或页面的主标题。
  4. 副标题 (Subtitle):在主标题下方提供更多信息或上下文的较小文本行。
  5. 控制:允许用户输入决定的互动式元素。

状态

列出状态

规格

列出规范

列表高度建议

列表间距

用法

列表是垂直整理的文本和图片组。一个列表针对用户阅读进行了优化,由一列连续的项目组成。列表项可以包含由图标和文本表示的主要操作和补充操作。

列表项不是按钮。这些项目没有容器。默认情况下,列表项处于未选中和未聚焦状态。
仅在必要时对列表项使用容器背景。

选择控件

控制列表项的显示信息和操作。它们可与列表项的前边缘或尾边缘对齐。

选择复选框 用于选择内容的单选按钮 选择开关
  1. 复选框:选择一个或多个列表项。
  2. 单选按钮:仅选择列表中的一项。
  3. 开关:开启或关闭控件。
使用图标选择指示器可在列表中清楚地显示所选项。这有助于用户轻松识别他们所选择的商品,并提升整体用户体验。
避免仅依赖背景颜色来指明列表中的选项。
避免将按钮放置在列表项内,因为这会导致用户混淆哪个元素当前获得焦点。

图标

如果列表中显示的是相同类型的内容,请省略图标,以减少视觉干扰并改善用户体验。如果图标毫无用途且不提供额外信息,请避免在列表中使用图标。
避免为列表中的所有项使用相同的图标。这可能会让用户感到不知所措并感到困惑。正确的做法是,只有在图标能够带来价值或提供额外信息时才使用图标。

头像和图片

列表项可以包含圆形剪裁的图片,以表示人物或实体。

头像和图片