Exibições de lista
Observação
Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.
Com uma exibição de lista, os usuários podem exibir e interagir com uma coleção de objetos de dados, usando seleção única ou múltipla.
Uma exibição de lista comum.
Os modos de exibição de lista têm mais flexibilidade e funcionalidade do que as caixas de listagem. Ao contrário das caixas de listagem, elas suportam a alteração de visualizações, agrupamento, várias colunas com títulos, classificação por colunas, alteração de larguras e ordem das colunas, sendo uma fonte de arrastar ou um destino de soltar e copiando dados de e para a área de transferência.
Observação
As diretrizes relacionadas a layout e caixas de listagem são apresentadas em artigos separados.
Esse é o controle correto?
Uma visualização de lista é mais do que apenas uma caixa de listagem mais flexível e funcional: sua funcionalidade extra resulta em uso diferente. A seguinte tabela mostra a comparação.
| Uso | Caixas de listagem | Exibições de lista |
|---|---|---|
| Tipo de dado |
Opções de dados e programas. |
Somente dados. |
| Conteúdo |
Apenas rótulos. |
Rótulos e dados auxiliares, possivelmente em várias colunas. |
| Interação |
Usado para fazer seleções. |
Pode ser usado para fazer seleções, mas geralmente usado para exibir e interagir com dados. Pode ser uma fonte de arrastar ou um destino de soltar. |
| Apresentação |
Fixo. |
Os usuários podem alterar visualizações, agrupar, classificar por colunas e alterar larguras e ordem das colunas. |
Para decidir se esse é o controle correto, considere estas perguntas:
- A lista apresenta dados, em vez de opções de programa? Caso contrário, considere usar uma caixa de listagem.
- Os usuários precisam alterar as exibições, agrupar, classificar por colunas ou alterar as larguras e a ordem das colunas? Caso contrário, use uma caixa de listagem.
- O controle precisa ser uma fonte de arrastar ou um destino de soltar? Em caso afirmativo, use um modo de exibição de lista.
- Os itens da lista precisam ser copiados ou colados da área de transferência? Em caso afirmativo, use um modo de exibição de lista.
Modos de exibição de lista de caixas de seleção
- O controle é usado para escolher zero ou mais itens de uma lista de dados? Para escolher um item, use uma única seleção.
- A seleção múltipla é essencial para a tarefa ou comumente usada? Nesse caso, use uma exibição de lista de caixas de seleção para tornar óbvia a seleção múltipla, especialmente se os usuários-alvo não forem avançados. Caso contrário, use um modo de exibição de lista de seleção múltipla padrão se as caixas de seleção chamarem muita atenção para a seleção múltipla ou resultarem em muita confusão na tela.
- A estabilidade da seleção múltipla é importante? Nesse caso, use uma lista de caixas de seleção, um construtor de listas ou uma lista de adicionar/remover, pois clicar altera apenas um único item por vez. Com uma lista de seleção múltipla padrão, é muito fácil limpar todas as seleções, mesmo por acidente.
Observação
Às vezes, um controle que se parece com um modo de exibição de lista é implementado usando uma caixa de listagem e vice-versa. Nesses casos, aplique as diretrizes com base no uso, não na implementação.
Padrões de uso
Todas as exibições oferecem suporte à seleção única, em que os usuários podem selecionar apenas um item por vez, e à seleção múltipla, em que os usuários podem selecionar qualquer número de itens, incluindo nenhum. Os modos de exibição de lista oferecem suporte ao modo de seleção estendida, em que a seleção pode ser estendida arrastando ou com Shift+clique ou Ctrl+clique para selecionar grupos de valores contíguos ou não adjacentes, respectivamente. Ao contrário das caixas de listagem, elas não oferecem suporte ao modo de seleção múltipla, em que clicar em qualquer item alterna seu estado de seleção, independentemente das teclas Shift e Ctrl.
Exibição de lista padrão
O controle de exibição de lista é compatível com cinco modos de exibição padrão:
| Uso | Exemplo |
|---|---|
| Bloco cada item aparece como um ícone médio, com um rótulo e detalhes opcionais à direita. |
 A visualização lado a lado mostra ícones médios com rótulos e detalhes opcionais à direita. |
| Ícone grande cada item aparece como um ícone extra grande, grande ou médio com um rótulo abaixo dele. |
 O modo de exibição com ícone grande mostra cada item como um ícone grande com um rótulo abaixo dele. |
| Ícones pequenos Cada item aparece como um pequeno ícone com um rótulo à direita. |
 A visualização de ícone pequeno mostra cada item como um ícone pequeno com seu rótulo à direita. |
| Lista Cada item aparece como um pequeno ícone com um rótulo à direita. |
No modo de lista, essa exibição ordena os itens em colunas e usa uma barra de rolagem horizontal. Por outro lado, os modos de exibição de ícones ordenam os itens em linhas e usam uma barra de rolagem vertical.  O modo de lista mostra cada item como um pequeno ícone com seu rótulo à direita. |
| Detalhes Cada item aparece como uma linha em um formato tabular. A coluna mais à esquerda contém o ícone e o rótulo opcionais do item, e as colunas subsequentes contêm informações adicionais, como propriedades do item. |
Além disso, as colunas podem ser adicionadas ou removidas, reordenadas e redimensionadas. As linhas podem ser agrupadas, classificadas por coluna.  A exibição de detalhes mostra cada item como uma linha em um formato de tabela. |
Variações de exibição de lista
| Rótulo | Valor |
|---|---|
| Seletor de colunas Às vezes, os modos de exibição de lista têm tantas colunas que não é prático mostrar todas elas. Nesse caso, a melhor abordagem é exibir as colunas mais úteis por padrão e permitir que os usuários adicionem ou removam colunas conforme necessário. |
 Clicar com o botão direito do mouse no cabeçalho da coluna exibe um menu de contexto que permite aos usuários adicionar ou remover colunas.  Clicar em Mais no menu de contexto do cabeçalho da coluna exibe a caixa de diálogo Escolher colunas, que permite aos usuários adicionar, remover ou reordenar colunas. |
| Caixa de seleção do Modo de exibição de lista Permitir que os usuários selecionem vários itens. |
Os modos de exibição de lista de seleção múltipla têm exatamente a mesma aparência que os modos de exibição de lista de seleção única, portanto, não há nenhuma pista visual de que eles ofereçam suporte a várias seleções. Uma exibição de lista de caixas de seleção pode ser usada para indicar claramente que a seleção múltipla é possível. Consequentemente, esse padrão deve ser usado para tarefas em que a seleção múltipla é essencial ou comumente usada. Neste exemplo, um modo de exibição de ícones pequenos usa caixas de seleção porque a seleção múltipla é essencial para a tarefa. |
| Modos de exibição de lista com grupos Organize dados em grupos. |
Embora os modos de exibição em detalhes geralmente ofereçam suporte à classificação dos dados por qualquer uma das colunas, os modos de exibição de lista permitem que os usuários organizem os itens em grupos. Estes são alguns dos benefícios do agrupamento:
 Neste exemplo, o Centro de Boas-vindas do Windows mostra itens agrupados em um modo de exibição em lista. |
Diretrizes
Apresentação
Classifique os itens da lista em uma ordem lógica. Classificar nomes em ordem alfabética, números em ordem numérica e datas em ordem cronológica.
Se apropriado, permita que os usuários alterem a ordem de classificação. A classificação do usuário é importante se a lista tiver muitos itens ou se houver cenários em que os itens são encontrados com mais eficiência usando uma ordem de classificação diferente da padrão.
Use o atributo Always Show Selection para que os usuários possam determinar prontamente o item selecionado, mesmo quando o controle não tiver foco.
Evite apresentar exibições de lista vazias. Se os usuários criarem uma lista, inicialize a lista com instruções ou itens de exemplo que os usuários podem precisar.
Neste exemplo, o modo de exibição de lista de pesquisa apresenta instruções inicialmente.
Se os usuários puderem alterar modos de exibição, agrupar, classificar por colunas ou alterar colunas e suas larguras e ordem, faça com que essas configurações persistam para que entrem em vigor na próxima vez que o modo de exibição de lista for exibido. Faça-os persistir em uma exibição por lista, por usuário.
Interação
Use um clique único para selecionar o item de lista para o qual o usuário está apontando. Exceção: para o padrão de lista de links de comando, um clique único seleciona o item e fecha a janela ou navega para a próxima página.
Considere fornecer o comportamento de clique duplo. O clique duplo deve ter o mesmo efeito que selecionar um item e executar seu comando padrão.
Torne redundante o comportamento de clique duplo. Sempre deve haver um botão de comando ou comando de menu de contexto que tenha o mesmo efeito.
Se um item de lista exigir mais explicações, forneça a explicação em uma dica de informações. Use frases completas e pontuação final.
Neste exemplo, essa dica é usada para fornecer mais informações.
Forneça menus de contexto de comandos relevantes. Esses comandos incluem Recortar, Copiar, Colar, Remover ou Excluir, Renomear e Propriedades.
Se os usuários puderem alterar a ordem de classificação e o agrupamento, forneça os menus de contexto Classificar por e Agrupar por. O primeiro clique no nome de uma coluna classifica ou agrupa a lista em ordem crescente para essa coluna, o segundo clique classifica ou agrupa em ordem decrescente. Use a ordem anterior (de outra coluna) como a chave secundária.
Neste exemplo, o menu de contexto Classificar por altera a ordem de classificação. Clicar em Nome uma vez classifica por nome em ordem crescente. Clicar em Nome novamente classifica por nome em ordem decrescente.
Torne o cabeçalho da coluna do modo de exibição de lista acessível usando o teclado.
- Desenvolvedores: é possível fazer isso definindo o foco no controle de cabeçalho da coluna. Esse recurso é novo no Windows Vista.
Ao desabilitar um modo de exibição de lista, desative também todos os rótulos e botões de comando associados.
Evite a rolagem de tela horizontal. O modo de lista usa rolagem horizontal. Esse modo geralmente é o mais compacto, mas a rolagem horizontal geralmente é mais difícil de usar do que a rolagem vertical. Considere usar o modo de exibição com ícones pequenos se a compactação não for importante. No entanto, o modo de lista é uma boa opção quando há muitos itens classificados em ordem alfabética e espaço de tela suficiente para um controle amplo.
Aceitável:
Neste exemplo, o modo em lista é usado porque há muitos itens e muito espaço de tela disponível para um controle amplo.
Listas de várias seleções
Considere exibir o número de itens selecionados abaixo da lista, especialmente se os usuários provavelmente selecionarem vários itens. Essas informações não apenas fornecem comentários úteis, mas também indicam claramente que o modo de exibição de lista oferece suporte a várias seleções.
Neste exemplo, o número de itens selecionados é exibido abaixo da lista.
Como alternativa, em vez do número de itens selecionados, você pode fornecer outras métricas de seleção que podem ser mais significativas, como os recursos necessários para as seleções.
Neste exemplo, o espaço em disco necessário para instalar os componentes é mais significativo do que o número de componentes selecionados.
Para modos de exibição de lista de caixas de seleção, se houver potencialmente muitos itens e for provável que você selecione ou desmarque todos eles, adicione os botões de comando Selecionar tudo e Limpar tudo.
Use caixas de seleção de estado misto para indicar a seleção parcial dos itens em um contêiner. O estado misto não é usado como um terceiro estado para um item individual.
Alterar exibições
Se os usuários puderem alterar as visualizações:
Escolha a visualização mais conveniente por padrão. Todas as alterações feitas pelos usuários devem ser persistentes por exibição de lista e por usuário.
Altere a visualização usando um botão de divisão, botão de menu ou lista suspensa. Sempre que possível, use um botão de split na barra de ferramentas e altere o rótulo do botão para refletir a exibição atual.
Neste exemplo, um botão de divisão na barra de ferramentas é usado para alterar os modos de exibição.
Forneça um menu de contexto de exibição.
Neste exemplo, um menu de contexto Exibir é usado para alterar as exibições.
Exibições de detalhes
Considere o uso da exibição de blocos para melhorar a legibilidade.
Aceitável:
Neste exemplo, há muitos dados e a janela, a lista e as colunas são muito pequenas, dificultando a leitura dos itens da lista.
Melhor:
Neste exemplo, o modo de exibição Lado a lado exibe os dados sem truncamento.
Escolha as larguras de coluna padrão apropriadas para os dados mais longos. As exibições de lista truncam automaticamente dados longos com reticências, portanto, as larguras das colunas são apropriadas se poucas reticências forem exibidas por padrão. Embora os usuários possam redimensionar colunas, prefira outras soluções:
- Dimensione cada largura de coluna para caber em seus dados.
- Dimensione a largura do controle para caber em suas colunas, além de quaisquer barras de rolagem prováveis.
- Se necessário, use a rolagem horizontal.
- Ter dados truncados apenas para itens de tamanho ímpar ou como último recurso.
Se os dados de tamanho normal precisarem ser truncados por padrão, torne a janela e o modo de exibição de lista redimensionáveis. Inclua um adicional de 30% (até 200% para texto mais curto) para qualquer texto (mas não números) que será localizado.
Incorreto:
Neste exemplo, a maioria dos dados é truncada. As muitas reticências indicam claramente que as larguras de controle e coluna são muito pequenas para os dados.
Incorreto:
Neste exemplo, os dados ficaram truncados sem motivo.
Escolha uma ordem de coluna padrão apropriada. Geralmente, ordene as colunas da seguinte maneira:
- Primeiro, o nome do item ou os dados de identificação.
- Em seguida, outros dados úteis para diferenciar os itens da lista.
- Em seguida, os dados mais úteis (de preferência de comprimento curto ou fixo).
- Em seguida, dados menos úteis (de preferência de comprimento curto ou fixo).
- Por último, dados longos e de comprimento variável.
Dados longos e variáveis de comprimento são colocados nas últimas colunas para reduzir a necessidade de rolagem horizontal. Dentro dessas categorias, coloque as informações relacionadas juntas em uma sequência lógica.
Quando apropriado, permita que os usuários adicionem e removam colunas, bem como alterem a ordem. Exibir as colunas mais úteis por padrão. Isso é obtido com o atributo Header Drag Drop.
Escolha um alinhamento apropriado para os dados. Use as seguintes regras:
- Alinhe números, moedas e horas à direita.
- Alinhe à esquerda texto, IDs (mesmo que numéricos) e datas.
Para títulos de coluna classificáveis, o primeiro clique em um título classifica a lista em ordem crescente para a coluna, o segundo clique classifica em ordem decrescente. Use a ordem de classificação anterior (de outra coluna) como a chave de classificação secundária.
Neste exemplo, a coluna Name foi clicada primeiro e, em seguida, a coluna Type. Como resultado, Tipo em ordem crescente é a chave de classificação primária e Nome em ordem crescente é a secundária.
Use o atributo Full Row Select para que os usuários possam determinar prontamente os itens selecionados em todas as colunas.
Não use um cabeçalho de coluna classificável, a menos que os dados possam ser classificados.
Não use um cabeçalho de coluna se houver apenas uma coluna e não houver necessidade de classificação reversa. Em vez disso, use um rótulo para identificar os dados.
Incorreto:
Correto:
No exemplo correto, um rótulo é usado em vez de um cabeçalho de coluna.
Dimensionamento e espaçamento recomendados
Dimensionamento e espaçamento recomendados para modos de exibição de lista.
- Escolha uma altura de exibição de lista que exiba um número inteiro de itens. Evite truncar itens verticalmente.
- Escolha um tamanho de exibição de lista que elimine a rolagem vertical e horizontal desnecessária em todas as exibições com suporte. As exibições de lista devem exibir entre 3 e 20 itens. Considere tornar um modo de exibição de lista um pouco maior se isso eliminar uma barra de rolagem. Listas com potencialmente muitos itens devem exibir pelo menos cinco itens para facilitar a rolagem, mostrando mais itens por vez e facilitando o posicionamento da barra de rolagem.
- Se os usuários se beneficiarem ao aumentar o modo de exibição de lista, torne o modo de exibição de lista e sua janela pai redimensionáveis. Isso permite que os usuários ajustem o tamanho do modo de exibição de lista conforme necessário. No entanto, os modos de exibição de lista redimensionáveis devem exibir pelo menos três itens.
Rótulos
Rótulos de controle
Todos os modos de exibição de lista precisam de rótulos. Escreva o rótulo como uma palavra ou frase, não como uma frase, terminando com dois pontos usando texto estático.
Atribua uma chave de acesso exclusiva para cada rótulo. Para obter diretrizes, consulte Teclado.
Posicione o rótulo acima do controle e alinhe o rótulo com a borda esquerda do controle.
Para exibições de lista de seleção múltipla, escreva o rótulo que indica claramente que a seleção múltipla é possível. Os rótulos de exibição de lista de caixas de seleção podem ser menos explícitos.
Correto:
Neste exemplo, o rótulo indica claramente que a seleção múltipla é possível.
Incorreto:
Neste exemplo, o rótulo não fornece informações sobre seleção múltipla.
Aceitável:
Neste exemplo, as caixas de seleção indicam claramente que a seleção múltipla é possível, portanto, o rótulo não precisa ser explícito.
Você pode especificar unidades (segundos, conexões e assim por diante) em parênteses após o rótulo.
Rótulos de cabeçalho
- Mantenha os rótulos dos títulos breves (três palavras ou menos).
- Use um único substantivo ou frase nominal sem pontuação final.
- Use capitalizaçãono estilo de frase.
- Alinhe o título da mesma forma que os dados.
Rótulos de grupo
- Use os seguintes rótulos de grupo para coleções de alto nível:
- Nomes: use a primeira letra do nome ou intervalos de letras.
- Tamanhos: Não especificado, 0 KB, 0-10 KB, 10-100 KB, 100 KB - 1 MB, 1-16 MB, 16-128 MB
- Datas: Hoje, Ontem, Semana passada, No início deste ano e Há muito tempo.
- Caso contrário, os rótulos de grupo usam o texto exato dos dados que estão sendo agrupados, incluindo letras maiúsculas e pontuação.
Texto de dados
Texto de instrução
- Se você precisar adicionar texto instrucional sobre um modo de exibição de lista, adicione-o acima do rótulo. Use frases completas com pontuação final.
- Use capitalizaçãono estilo de frase.
- Informações adicionais úteis, mas não necessárias, devem ser mantidas curtas. Coloque essas informações entre parênteses entre o rótulo e os dois pontos ou sem parênteses abaixo do controle.
Documentação
Ao se referir a modos de exibição de lista:
- Use o texto exato do rótulo, incluindo suas letras maiúsculas, mas não inclua o sublinhado ou os dois pontos da chave de acesso. Inclua a lista de palavras. Não se refira a uma caixa de listagem como uma caixa de listagem, exibição de lista ou campo.
- Para dados de lista, use o texto de dados exato, incluindo suas letras maiúsculas.
- Consulte os modos de exibição de lista como modos de exibição de lista somente na programação e em outras documentações técnicas. Em todos os outros lugares use a lista.
- Para descrever a interação do usuário, use select para os dados e clique para os títulos.
- Quando possível, formate as opções de rótulo e lista usando texto em negrito. Caso contrário, coloque o rótulo e as opções entre aspas somente se necessário para evitar confusão.
Exemplo: Na lista Programas e serviços , selecione Compartilhamento de arquivos e impressoras.
Ao se referir a caixas de seleção em um modo de exibição de lista:
- Use o texto exato do rótulo, incluindo suas letras maiúsculas, e inclua a caixa de seleção da palavra. Não inclua o sublinhado da chave de acesso.
- Para descrever a interação do usuário, use selecionar e limpar.
- Quando possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas somente se necessário para evitar confusão.
Exemplo: marque a caixa de seleção Sublinhado.