Diretrizes para caixas de seleção

Applies to Windows and Windows Phone

Aplicativo do Windows: estados da caixa de seleção

Aplicativo do Windows: estados da caixa de seleção

Aplicativo do Windows Phone: estados da caixa de seleção

Aplicativo do Windows Phone: estados da caixa de seleção

Descrição

Normalmente, uma caixa de seleção oferece ao usuário uma forma de registrar uma opção entre duas opções diferentes e opostas. A opção pode ser, por exemplo, assinar um boletim informativo ou selecionar cada email em uma lista. Em alguns casos raros, uma caixa de seleção não será marcada ou desmarcada, mas terá aquilo que chamamos de estado indeterminado. Por exemplo, o estado marcado de uma caixa de seleção é indeterminado quando representa uma coleção de subopções com valores misturados.

Conforme o usuário interage com a caixa, ela dá um feedback a ele alterando seu estado e sua aparência. Alguns exemplos de estados de caixas de marcação são normal, pressionada, desmarcada, marcada e desativada.

Para alternar o estado da caixa para seu valor oposto, o usuário deve tocar nela.

Exemplo

Uma captura de tela ilustrando o controle de caixa de seleção padrão

Este é o controle correto?

Use caixas de seleção para apresentar aos usuários uma opção binária, uma ou mais opções que não são mutuamente exclusivas, ou uma opção mista.

Use uma única caixa de seleção para uma opção binária do tipo sim ou não.

Uma única caixa de seleção usada para uma opção individual

Para uma opção binária, a principal diferença entre uma caixa de seleção e um botão de alternância é que a caixa de seleção serve para status e o botão de alternância serve para ação. Você pode atrasar a confirmação de interação de uma caixa de seleção (como parte do envio de um formulário, por exemplo), mas deve confirmar a interação do botão de alternância imediatamente. Além disso, apenas as caixas de seleção permitem várias seleções.

Crie um grupo de caixas de seleção quando os usuários podem selecionar qualquer combinação de opções.

Selecionando várias opções com caixas de seleção

Diferente dos botões de opção, em que um grupo de botões de opção representa uma única escolha, cada caixa de seleção em um grupo representa uma escolha separada independente. Quando há mais de uma opção, mas apenas uma pode ser selecionada, use um botão de opção.

Quando uma opção se aplicar a mais de um objeto, você pode usar uma caixa de seleção para indicar se ela se aplica a todos, alguns ou nenhum desses objetos. Quando a opção se aplicar a alguns objetos, mas não todos, use o estado indeterminado da caixa de seleção para representar uma opção mista. Um exemplo de caixa de seleção de opção mista é uma caixa de seleção "Selecionar tudo" que se torna indeterminada quando o usuário seleciona alguns, mas não todos os subitens.

Caixas de seleção usadas para mostrar uma opção mista

Para saber mais, veja:

O que fazer e o que não fazer

  • Verifique se a finalidade e o estado atual da caixa de seleção estão claros. Verifique se também está claro o que significa quando a caixa de seleção estiver desmarcada. Por exemplo, se você usar uma caixa de seleção para a orientação de paisagem, não ficará claro que a caixa desmarcada implica na orientação de retrato. Em vez disso, use dois botões de opção: paisagem e retrato.
  • Limite o conteúdo do texto da caixa de seleção a no máximo duas linhas.
  • Formule o texto como uma afirmação de que o estado marcado da caixa de seleção implica em verdadeiro, e o estado desmarcado, em falso.
  • Use fonte padrão, a menos que as diretrizes da marca o orientem de outra forma.
  • Se houver muitas opções a serem apresentadas, considere a possibilidade de usar um controle visualizador de rolagem com um painel de layout dentro dele.
  • Coloque a caixa de seleção dentro de um rótulo de forma que um clique no rótulo alterne seu estado. Isso aumenta o tamanho da área de seleção e torna a caixa de seleção mais acessível ao toque do usuário.

  • Use o estado indeterminado para indicar que uma opção está definida para algumas subopções, mas não todas.

  • Ao usar o estado indeterminado, use caixas de seleção subordinadas para mostrar as opções que estão e não estão selecionadas. Elabore a interface do usuário de forma que o usuário possa ver as subopções.

  • Se o conteúdo do texto for dinâmico, leve em consideração como o controle será redimensionado e o que acontecerá com a aparência ao seu redor.
  • Não coloque dois grupos de caixas de seleção lado a lado, pois os usuários não saberão quais opções pertencem a cada grupo. Use rótulos para separar os grupos.

  • Não use uma caixa de seleção como controle ativar/desativar. Em vez disso, use um botão de alternância.

  • Não use uma caixa de seleção para exibir outros controles, como uma caixa de diálogo.
  • Não use o estado indeterminado para representar um terceiro estado. O estado indeterminado é usado para indicar que uma opção está definida para algumas subopções, mas não todas. Por isso, não permita que os usuários definam um estado indeterminado diretamente.

    Como um exemplo do que não fazer, esta caixa de seleção usa o estado indeterminado para indicar um tempero médio:

    Uma caixa de seleção indeterminada

    Em vez disso, use um grupo de botões de opção com três opções: Não temperado, Temperado e Extra temperado.

    Grupo de botões de opção com três opções: Não temperado, Temperado e Extra temperado

Tópicos relacionados

Para designers
Diretrizes de botões
Diretrizes de botões de opção
Diretrizes do controle de seleção
Diretrizes de botões de alternância
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)
Início rápido: adicionando controles de caixa de seleção
Como definir o estilo de controles de caixa de seleção
input type="checkbox"
indeterminate property
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
Como adicionar uma caixa de seleção
Estilos e modelos de caixa de seleção
CheckBox
Indeterminate event

 

 

Mostrar:
© 2014 Microsoft