As listas são uma representação visual de um ou mais itens relacionados. Eles são normalmente usados para mostrar uma coleção de opções.
Recursos
Tipo | Link | Status |
---|---|---|
Design | Fonte de design (Figma) | Disponível |
Implementação | Jetpack Compose | Disponível |
Destaques
- As listas são uma coleção contínua de textos ou imagens.
- As listas devem ser naturais e fáceis de analisar.
- As listas são compostas de itens que contêm ações representadas por ícones e texto.
Variantes
Existem três tipos de listas: lista de uma linha, lista de duas linhas e lista de três linhas.
- Lista de uma linha: uma única linha para comunicar cada item. Essa abordagem o design garante que cada item seja claramente diferente do outro.
- Lista de duas linhas: usa duas linhas paralelas para comunicar cada item. Esse design estruturado garante a leitura natural e evita problemas cognitivos em excesso.
- Lista de três linhas: usa três linhas paralelas para representar cada item. Esse design decorativo cria um alto nível de destaque visual.
Anatomia
- Ícone: um pequeno elemento gráfico que representa uma ação ou objeto específico, geralmente usado para comunicar visualmente uma ideia ou conceito.
- Sobrelinha: uma linha curta de texto que aparece acima do título ou subtítulo. frequentemente usado para fornecer contexto ou ênfase adicional.
- Título: uma linha de texto grande e em negrito que serve como título principal um elemento ou página de design.
- Subtítulo: uma linha menor de texto que fornece informações adicionais ou contexto abaixo de um título principal.
- Controle: um elemento interativo que permite ao usuário inserir uma decisão.
Estados
Especificações
Uso
As listas são grupos de texto e imagens organizados verticalmente. Otimizada para compreensão de leitura, uma lista consiste em um único coluna contínua de itens. Os itens da lista podem conter ações principais e complementares representadas por ícones e texto.

O que fazer

Cuidado
Controles de seleção
Controla informações e ações para itens da lista. Eles podem ser alinhados à borda inicial ou final do item da lista.



- Caixas de seleção: selecione um ou mais itens da lista.
- Botões de opção: selecione exatamente um. item na lista.
- Chaves: ativa ou desativa um controle.

O que fazer

O que não fazer

O que não fazer
Ícones

O que fazer

O que não fazer
Avatares e imagens
Os itens da lista podem incluir imagens em um corte circular para representar pessoa ou entidade.