Diretrizes para caixas de listagem (ou de seleção)

Aplicativo Windows: caixas de listagem habilitadas e desabilitadas

Aplicativo Windows: caixas de listagem habilitadas e desabilitadas

Aplicativo Windows Phone: caixa de listagem

Aplicativo Windows Phone: caixa de listagem

Descrição

Uma caixa de listagem (também conhecida como selecionar) dá ao usuário um meio para escolher geralmente um item, mas algumas vezes diversos deles, entre uma lista de itens. Pode-se fazer a rolagem pelos itens em uma caixa de listagem se não há espaço para mostrar todos eles.

Exemplo

Uma captura de tela que ilustra o controle de seleção embutida padrão

Este é o controle correto?

Use uma caixa de listagem quando os itens são importantes o suficiente para serem mostrados com destaque. Uma caixa de listagem deve chamar a atenção do usuário para todo o conjunto de alternativas em uma escolha importante. Se puder, defina o tamanho de uma caixa de listagem de modo que a lista de itens presente nela não precise de rolagem nem de aplicação de movimento panorâmico. O melhor número para uma caixa de listagem é entre três e nove itens. Além disso, uma caixa de listagem funciona bem quando seus itens podem variar dinamicamente.

Fatores que vão contra a utilização de uma caixa de listagem incluem:

  • Há um número muito pequeno de itens. Uma caixa de listagem que tem sempre as mesmas duas opções pode ser melhor apresentada como botões radiais. Considere a possibilidade de utilizar botões radiais até quando há três ou mesmo quatro itens estáticos.
  • A caixa de listagem é de seleção única e apresenta sempre as mesmas 2 opções, onde uma pode ser imposta como o contrário da outra - como “ligado” e “desligado”. Use uma única caixa de seleção ou um botão de alternância.
  • Há um número muito grande de itens. Exibição de grade e exibição de lista são escolhas melhores para listas longas. Para listas muito longas de dados agrupados, prefere-se a aplicação de zoom semântico.
  • Os itens são valores numéricos contíguos. Considere a possibilidade de utilizar um controle deslizante.
  • Os itens de seleção são de importância secundária no fluxo de seu aplicativo, ou a opção padrão é recomendada para a maioria dos usuários na maioria das situações. Utilize uma lista suspensa em vez disso.

O que fazer e o que não fazer

  • Verifique se está claro o propósito da caixa de listagem e quais itens estão selecionados atualmente.
  • Reserve efeitos visuais e animações para feedback referente a toque e para o estado selecionado dos itens.
  • Limite o conteúdo de texto do item da caixa de listagem a uma única linha. Se os itens forem de tipo gráficos, você pode personalizar o tamanho. Se um item contém diversas linhas de texto ou imagens, utilize uma exibição de grade ou exibição de lista em vez disso.
  • Se a caixa de listagem é dimensionada automaticamente e os itens nela presentes são dinâmicos, pense em como a caixa de listagem se redimensionará e o que acontecerá aos itens gráficos ao redor dela. Uma caixa de listagem de tamanho fixo com itens dinâmicos não poderá ser redimensionada, mas permitirá rolagem.
  • Use fonte padrão, a menos que as diretrizes da marca o orientem de outra forma.
  • Classifique os itens de uma caixa de listagem em ordem lógica, como agrupar opções relacionadas, colocar as opções mais comuns primeiro ou utilizar ordem alfabética. Classifique os nomes em ordem alfabética, os números em ordem numérica e as datas em ordem cronológica.
  • Adicione preenchimento de 27 pixels no lado direito de seu conteúdo para impedir que as barras de rolagem sobreponham o conteúdo.
  • Não utilize uma caixa de listagem para executar comandos ou exibir ou ocultar dinamicamente outros controles.

Diretriz de uso adicional

Aparência e interação

Uma caixa de listagem está sempre aberta (ao contrário de uma lista suspensa). Seus itens podem ser cadeias de texto ou valores numéricos, ou podem ser personalizados para ser quaisquer outros gráficos. Você deve ser criativo. Os usuários se sentem confortáveis ao interagir diretamente com o conteúdo de um aplicativo. Portanto, você pode optar por exibir o conteúdo real de uma oferta, talvez desenhos ou fotos ou produtos. Lembre-se que um item deve sempre fornecer feedback visual quando é tocado e deve ficar limpo quando um item é selecionado.

Um controle de caixa de listagem apresenta sua lista de itens verticalmente por padrão. Se você deseja apresentar os itens horizontalmente - especialmente se os itens são gráficos ou fotos - então é possível personalizar o layout dos itens da caixa de listagem. Se você deseja itens dispostos em uma grade de encapsulamento horizontal ou vertical, você pode fazer isso também. Ou então simplesmente utilize uma exibição de grade que disponha os itens desse modo por padrão.

Conforme o usuário interage com eles, os itens fornecem feedback ao mudar de estado e também de aparência. Normal, pressionado, não selecionado, selecionado e desabilitado são exemplos de estados de item de caixa de listagem.

Tocar em um item resulta em sua seleção e, em modo multisseleção, tocar em um item selecionado desseleciona esse item. Em modo de seleção única, tocar em outro item transfere a seleção a esse item. Passar o dedo verticalmente faz com que a lista de itens role para cima ou para baixo com a inércia. Uma caixa de listagem tem uma barra de rolagem cuja posição indica a localização relativa do usuário dentro da lista de itens, e cujo tamanho indica a proporção dos itens em exibição. A barra de rolagem só fica visível durante a rolagem.

Tópicos relacionados

Para designers
Diretrizes para listas suspensas
Diretrizes para caixas de seleção
Diretrizes de botões de alternância
Diretrizes para exibição em grade e exibição de lista
Diretrizes de zoom semântico
Diretrizes de controles deslizantes
Diretrizes de botões de opção
Definindo o layout da interface do usuário
Para desenvolvedores (HTML)
select element | select object
Adicionando controles de seleção
Para desenvolvedores (XAML)
ListBox class
Adicionando caixas de combinação e caixas de listagem

 

 

Mostrar:
© 2015 Microsoft