Diretrizes para modos de exibição de lista e de grade
[Este artigo contém informações que são específicas a aplicativos UWP e ao Windows 10. Para obter as diretrizes do Windows 8.1, baixe o PDF de diretrizes do Windows 8.1.]
As listas oferecem maneiras consistentes e otimizadas para toque a fim de exibir e interagir com conteúdo do aplicativo baseado na coleção. Os controles de modo de exibição de lista e de grade podem ajudar a exibir listas de forma eficiente. Com os controles de modo de exibição de lista e de grade, você pode classificar itens e atribuir cabeçalhos de grupo, arrastar e soltar itens, reunir conteúdo e reordenar os itens.
Modo de exibição de lista ou de grade?
Apesar de os modos de exibição de lista e de grade terem recursos semelhantes, seu uso varia.
Exibições de lista são recomendadas para:
- Exibir coleções de conteúdo que são principalmente de texto.
- Navegação em uma coleção de conteúdo única ou categorizada.
- Criar o painel mestre no padrão mestre/detalhes. O padrão mestre/detalhes é usado com frequência em aplicativos de email, em que um painel tem uma lista de itens selecionáveis e o outro tem uma exibição detalhada do item selecionado. Consulte escolher o padrão certo neste artigo para ver um exemplo dessa exibição.
O layout de lista tem cabeçalhos de grupo e é exibido em uma única coluna, lido de cima para baixo, com movimento panorâmico ou rolagem vertical.
.png "Exemplo de um modo de exibição de lista com quatro tipos de unidades principais")
Exibições de grade são recomendadas para:
- Exibir coleções de conteúdo que incluem principalmente imagens.
- Exibir bibliotecas de conteúdo. Consulte escolher o padrão certo neste artigo para ver um exemplo dessa exibição.
- Formatação de suas exibições de conteúdo associadas ao zoom semântico.
O layout de grade tem movimento panorâmico vertical e os itens são dispostos na ordem de leitura da esquerda para a direita, depois de cima para baixo.
.png "Exemplo de um layout de exibição de grade")
Escolher o padrão correto
As listas são usadas para exibir bibliotecas de conteúdo, dados mestres/detalhados ou dados estáticos.
Biblioteca de conteúdo
Use uma biblioteca de conteúdo para exibir uma coleção ou biblioteca de conteúdo. Isso é tipicamente usado na apresentação de mídia, como fotos e vídeos. Em uma biblioteca de conteúdo, os usuários esperam tocar em um item para invocar uma ação.
.png "Exemplo de uma biblioteca de conteúdo")
Dados de mestre/detalhes
Ao usar um padrão mestre/detalhes, você pode usar a exibição de lista para organizar o painel mestre. O painel mestre exibe uma lista de itens para seleção. Quando o usuário seleciona um item no painel mestre, outras informações sobre o item selecionado são exibidas no painel de detalhes. Muitas vezes, o painel de detalhes contém um modo de exibição de grade.
.png "Exemplo de um padrão mestre/detalhes")
Você pode encadear várias listas para criar hierarquias mestre/detalhes complexas. Para saber mais, veja o padrão mestre/detalhes.
Dados estáticos
Dados estáticos são usados exclusivamente para apresentar conteúdo não interativo, pois a maioria dos tipos de interatividade está desabilitada. Isso é útil para coleções de itens que são somente leitura e não podem ser ativados ou navegados.
Modo de seleção
Este modo permite aos usuários selecionar e executar uma ação em itens. Ele pode ser invocado por meio de um menu de contexto usando CTRL+clique ou SHIFT+clique em um item ou rolando um destino em um item em um modo de exibição de galeria.
Há três modos de seleção diferentes:
- Única - O usuário pode selecionar apenas um item de cada vez.
- Múltipla - O usuário pode selecionar vários itens sem usar um modificador.
- Estendida - O usuário pode selecionar vários itens com um modificador, por exemplo, segurando a tecla SHIFT.
Quando o modo de seleção está ativo, as caixas de seleção aparecem ao lado de cada item da lista, e as ações podem aparecer na parte superior ou inferior da tela.
Tocar em qualquer lugar em um item seleciona-o. Tocar na ação da barra de comandos afeta todos os itens selecionados. Se nenhum item estiver selecionado, as ações da barra de comandos devem estar inativas, com exceção de "Selecionar Tudo".
O modo de seleção não tem um modelo light dismiss; tocar fora do quadro no qual o modo de seleção está ativo não cancelará o modo. Isso é para evitar a desativação acidental do modo. Clicar no botão Voltar ignora o modo de seleção múltipla.
Deve haver uma confirmação visual quando uma ação é selecionada. Mostrar animações quando apropriado. Considere exibir uma caixa de diálogo de confirmação para determinadas ações, especialmente ações destrutivas, como excluir.
O modo de seleção está limitado à página na qual ele está ativo e não pode afetar os itens fora da página.
O ponto de entrada para o modo de seleção deve estar justaposto em relação ao conteúdo que ele afeta.
Veja recomendações sobre a barra de comandos em Diretrizes de barras de comandos.
Modo de seleção múltipla
O modo de edição permite que itens de linha sejam manipulados. Pode ser invocado usando o botão de modo de edição na barra de comandos ou por meio de um menu de contexto.
Um ponto de entrada para o modo de seleção múltipla deve ser colocado pela lista modificada.
Clicar no botão Voltar ignora o modo de seleção múltipla. Entrar no modo de edição remove todas as barras de comandos. Se outros quadros estiverem visíveis ao entrar no modo de seleção, esses quadros ficarão esmaecidos.
O modo de edição não tem um modelo light dismiss; tocar fora do quadro no qual o modo de seleção está ativo não cancelará o modo. Isso é para evitar a desativação acidental do modo.
O modo de edição está limitado à página na qual ele está ativo e não pode afetar os itens fora da página.
Recomendações
- Itens no mesmo modo de exibição de lista ou de grade devem ter o mesmo comportamento.
- Se a sua lista estiver dividida em grupos, use o zoom semântico, que torna mais fácil para os usuários navegarem pelo conteúdo agrupado.