Os cards podem conter uma grande variedade de informações, como texto, ícones, imagens, respostas do Gemini ou ações.
Princípios
Coesão: os cards agrupam informações e ações relacionadas em uma única unidade fácil de entender.
Claro: eles apresentam o conteúdo de maneira clara e organizada, facilitando a leitura.
Versátil: os cards podem se adaptar para mostrar uma ampla variedade de conteúdo, desde textos simples até resumos mais complexos com vários elementos.
Modular: projetado para ser modular e reutilizável em diferentes partes da interface do Glimmer para óculos do Jetpack Compose.
Uso e posicionamento
Os cards podem conter uma grande variedade de informações, como texto, ícones, imagens, ações ou respostas do Gemini.
Use os modelos de card Glimmer do Jetpack Compose para conteúdo, já que eles vêm em muitas variações e são otimizados para seguir os princípios de design de óculos.
O que fazer
O que não fazer
Anatomia
Os cards são criados com modelos de slot predefinidos.
1. Cabeçalho: a seção superior do card, projetada para conter uma imagem.
2. Título e subtítulo: esses campos de texto fornecem os rótulos principal e secundário do card.
3. Ícone principal: um ícone opcional que aparece no início da área de conteúdo do card.
4. Ícone à direita: um ícone opcional que aparece no final da área de conteúdo do card.
5. Ação: um slot para um elemento interativo principal, como um botão. Isso permite que os usuários realizem uma ação diretamente do card. O slot está disponível em uma sobrecarga separada do elemento combinável Card.
6. Conteúdo principal: o corpo principal do card, onde você coloca o texto principal ou outro conteúdo.
Foco
Para cards cujo objetivo principal é abrigar um elemento interativo específico (como o botão na ação), o foco precisa ir diretamente para esse elemento, e não para o contêiner do card. Um card se torna focalizável quando representa um único item navegável, como uma entrada em uma lista. Isso oferece uma experiência do usuário mais direta e acessível.
Um card que tem foco como um item de lista.
Um botão em um card recebe foco como o elemento acionável.
Personalização
| Propriedades | Personalização | Padrões |
|---|---|---|
| Forma | Sim | Médio |
| Padding | Sim | 24 dp, 24 dp |
| Borda | Sim | 2 dp, #606460 |
| Texto | Sim | Body Small |
| Ícone principal | Sim | 56 dp |
| Ícone à direita | Sim | 56 dp |