Listas
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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
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.
check_circle
O que fazer
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 ficam desmarcados e sem foco.
warning
Cuidado
Use o plano de fundo do contêiner para itens de lista somente quando necessário.
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.
check_circle
O que fazer
Use um indicador de seleção de ícone para mostrar claramente o item selecionado em uma lista. Isso ajuda os usuários a identificar facilmente qual item eles selecionaram e a melhorar a experiência geral do usuário.
cancel
O que não fazer
Evite depender apenas da cor do plano de fundo para indicar a seleção em uma lista.
cancel
O que não fazer
Evite colocar botões dentro de um item da lista, porque isso pode causar confusão sobre qual elemento está em foco no momento.
Ícones
check_circle
O que fazer
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 servem a propósito e não fornecem informações adicionais.
cancel
O que não fazer
Evite usar o mesmo ícone para todos os itens de uma lista. Isso pode ser visualmente sobrecarregado e confuso para os usuários. Em vez disso, use os ícones somente quando eles agregarem valor ou fornecerem informações adicionais.
Avatares e imagens
Os itens da lista podem incluir imagens em um corte circular para representar
pessoa ou entidade.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Não contém as informações de que eu preciso"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muito complicado / etapas demais"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desatualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema na tradução"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema com as amostras / o código"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Outro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de entender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Meu problema foi resolvido"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Outro"
}]
{"lastModified": "\u00daltima atualiza\u00e7\u00e3o 2024-08-19 UTC."}
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2024-08-19 UTC."]]