卡片可以包含各种信息,例如文本、图标、图片、Gemini 回答或操作。

原则
凝聚性:卡片将相关信息和操作分组到一个易于理解的 单元中。
清晰:卡片以清晰、有条理的方式呈现内容,从而提高 可扫描性。
多功能性:卡片可以适应各种内容,从简短的 文本摘要到包含多个元素的复杂摘要。
模块化:卡片采用模块化设计,可在 Jetpack Compose Glimmer for Glasses 界面的不同部分重复使用。
使用和放置
卡片可以包含各种信息,例如文本、图标、图片、操作或 Gemini 回答。

请使用 Jetpack Compose Glimmer 卡片模板来显示内容,因为这些模板有多种变体,并且经过优化,可开箱即用,遵循眼镜设计原则。
正确做法
错误做法
使用包含卡片的按钮组来显示多个操作。
正确做法
错误做法
解剖结构
卡片是使用预设槽位模板构建的。
1. 标题:卡片的顶部区域,用于放置图片。
2. 标题和副标题:这些文本字段提供卡片的主要标签和辅助标签。
3. 前置图标:一个可选图标,显示在卡片内容区域的开头。
4. 后置图标:一个可选图标,显示在卡片内容区域的末尾。
5. 操作:主要交互元素(例如按钮)的槽位。这样,用户就可以直接从卡片执行操作。如果卡片包含操作,则只能包含一个操作。
6. 主要内容:卡片的正文部分,可放置主要文本或其他内容。
焦点
对于主要用途是容纳特定交互元素(例如“操作”中的按钮)的卡片,焦点应直接移至该元素,而不是卡片容器。当卡片表示单个可导航项(例如列表中的条目)时,卡片会变为可聚焦。这样可以提供更直接、更易于访问的用户体验。
作为列表项的卡片具有焦点。
卡片中的按钮被赋予焦点,作为可操作元素。
自定义
| 属性 | 自定义 | 默认值 |
|---|---|---|
| 形状 | 是 | 媒介 |
| 内边距 | 是 | 24 dp、24 dp |
| 镶边 | 是 | 2 dp、#606460 |
| 文本 | 是 | 正文小号 |
| 前置图标 | 是 | 56 dp |
| 后置图标 | 是 | 56 dp |