卡片

卡片可以包含各种信息,例如文本、图标、图片、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