卡片

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

设计元素应锚定到帧的底部。

原则

连贯:卡片将相关信息和操作分组到一个易于理解的单元中。

清晰:以清晰有序的方式呈现内容,提高可扫描性。

用途广泛:卡片可以适应各种内容,从简单的文字摘要到包含多个元素的更复杂的摘要。

模块化:旨在实现模块化,可在 Jetpack Compose Glimmer for Glasses 界面的不同部分重复使用。

使用和放置

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

设计元素应锚定到帧的底部。

使用 Jetpack Compose Glimmer 卡片模板来呈现内容,因为它们有多种变体,并且经过优化,可开箱即用地遵循眼镜设计原则。

确保内容简洁明了,并注意样式方面的最佳实践,例如颜色使用。
在卡片中放置过多内容,让用户感到不知所措,或者违反样式指南。

解剖学

卡片是使用预设的 slot 模板构建的。

设计元素应锚定到帧的底部。 1. 标题:卡片的顶部部分,用于放置图片。

2. 标题和副标题:这些文本字段用于提供卡片的主要标签和辅助标签。

3. 前导图标:显示在卡片内容区域开头的可选图标。

4. 尾随图标:显示在卡片内容区域末尾的可选图标。

5. 操作:主要交互元素(例如按钮)的槽位。这样,用户就可以直接从卡片执行操作。该槽位可在 Card 可组合函数的单独重载中找到。

6. 主要内容:卡片的正文部分,可放置主要文本或其他内容。

专注

对于主要用途是容纳特定互动元素(例如“操作”中的“按钮”)的卡片,焦点应直接移至该元素,而不是卡片容器。当卡片表示单个可导航项(例如列表中的条目)时,该卡片会变为可聚焦。这样一来,用户体验会更加直接且易于使用。

设计元素应锚定到帧的底部。 作为列表项具有焦点的卡片。

设计元素应锚定到帧的底部。 卡片中的按钮作为可操作元素获得焦点。

自定义

属性 自定义 默认值
形状
内边距 24 dp、24 dp
边框 2 dp,#606460
文本 小体型
前置图标 56 dp
尾随图标 56 dp