Listas

As listas são uma representação visual de um ou mais itens relacionados. Elas são usadas com frequência para mostrar uma coleção de opções.

Capa de listas

Recursos

Tipo Link Status
Design Fonte do 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 precisam parecer naturais e serem legíveis.
  • As listas são compostas por itens que contêm ações principais e complementares representadas por ícones e texto.

Variantes

Há três tipos de listas: de uma linha, de duas linhas e de três linhas.

Anatomia das listas

  1. Lista de uma linha: uma única linha para comunicar cada item. Esse design simples garante que cada item seja claramente distinto do outro.
  2. Lista de duas linhas: usa duas linhas paralelas para comunicar cada item. Esse design estruturado garante a legibilidade natural e evita a sobrecarga cognitiva.
  3. 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

Anatomia das listas

  1. Ícone: um pequeno gráfico que representa um objeto ou uma ação específica, muitas vezes usado para comunicar visualmente uma ideia ou um conceito.
  2. Overline: uma linha curta de texto que aparece acima do título ou do subtítulo, geralmente usada para fornecer mais contexto ou ênfase.
  3. Título: uma linha de texto grande e em negrito que serve como título principal de um elemento de design ou página.
  4. Subtítulo: uma linha menor de texto que fornece informações ou contexto adicionais abaixo de um título principal.
  5. Controle: um elemento interativo que permite ao usuário tomar uma decisão.

Estados

Listar estados

Especificações

Especificações da lista

Sugestão de altura da lista

Espaçamento entre itens da lista

Uso

As listas são grupos de texto e imagens organizados verticalmente. Otimizada para compreensão de leitura, uma lista consiste em uma única coluna contínua de itens. Os itens da lista podem conter ações principais e complementares representadas por ícones e texto.

Os itens da lista não são botões. Os itens não têm contêineres. Por padrão, os itens da lista não são selecionados nem recebem foco.
Use o plano de fundo do contêiner para itens de lista somente quando necessário.

Controles de seleção

Controla a exibição de informações e ações para itens de lista. Elas podem ser alinhadas à borda inicial ou final do item da lista.

Caixa de seleção de seleção

Botão de seleção

Troca de seleção

  1. Caixas de seleção: selecione um ou mais itens da lista.
  2. Botões de opção: selecione exatamente um item na lista.
  3. Chaves: ative ou desative um controle.
Use um indicador de seleção de ícones para mostrar claramente o item selecionado em uma lista. Isso vai ajudar os usuários a identificar facilmente qual item foi selecionado e melhorar a experiência geral.
Evite depender apenas da cor de fundo para indicar a seleção em uma lista.
Evite colocar botões dentro de um item da lista, porque isso pode causar confusão sobre qual elemento está em foco.

Ícones

Se você estiver mostrando o mesmo tipo de conteúdo na lista, omita os ícones para reduzir o ruído visual e melhorar a experiência do usuário. Evite usar ícones em uma lista quando eles não têm uma finalidade e não fornecem informações adicionais.
Evite usar o mesmo ícone para todos os itens de uma lista. Isso pode ser visualmente avassalador e confuso para os usuários. Use ícones apenas quando eles agregam valor ou fornecem informações adicionais.

Avatares e imagens

Os itens da lista podem incluir imagens em um corte circular para representar uma pessoa ou entidade.

Avatares e imagens