Diretrizes de botões de opção

Applies to Windows and Windows Phone

Aplicativos do Windows: botões de opção

Aplicativos do Windows: botões de opção

Aplicativos do Windows Phone: botões de opção

Aplicativos do Windows Phone: botões de opção

Descrição

Botões de opção permitem que os usuários selecionem uma opção entre duas ou mais escolhas. Cada opção é representada por um botão de opção; um usuário pode selecionar apenas um botão de opção em um grupo de botões de opção.

Botões de opção são nomeados para o canal predefinir botões em uma lista de opções.

Exemplo

Uma captura de tela que ilustra o controle de botões de opção padrão

Este é o controle correto?

Use botões de opção para apresentar aos usuários duas ou mais opções mutuamente exclusivas, conforme ilustrado aqui.

Um grupo de botões de opção

Os botões acrescentam claridade e peso a opções importantes em seu aplicativo. Use botões de opção quando as opções sendo apresentadas forem importantes o bastante para comandar mais espaço na tela e em que a claridade da escolha demande opções muito explícitas.

Os botões de opção enfatizam todas as opções da mesma forma e isso pode chamar mais atenção para as opções que o necessário. Considere usar outros controles, a menos que as opções mereçam atenção adicional do usuário. Por exemplo, se a opção padrão for recomendada para a maioria dos usuários na maioria das situações, use uma lista suspensa.

Se houver apenas duas opções mutualmente exclusivas, combine-as em uma única caixa de seleção ou botão de alternância. Por exemplo, use uma caixa de seleção para "Concordo" em vez de dois botões de opção para "Concordo" e "Não concordo".

Duas formas de apresentar uma opção binária

Quando o usuário puder selecionar várias opções, use um controle de caixa de seleção ou caixa de listagem.

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

Não use botões de opção quando as opções forem números que possuem etapas fixas, como 10, 20, 30. Em vez disso, use um controle deslizante.

Se houver mais que oito opções, use uma lista suspensa, uma caixa de listagem de seleção única ou um modo de exibição de lista em vez disso.

Se as opções disponíveis estiverem baseadas no contexto atual do aplicativo ou, de outra forma, variar dinamicamente use uma caixa de listagem de seleção única em vez disso.

  • Applies to Windows

Um grupo de botões de opção se comportam como um controle único quando acessados pelo teclado. Apenas a opção selecionada pode ser acessada usando a tecla Tab, mas os usuários podem alternar pelo grupo usando as teclas de seta.

O que fazer e o que não fazer

  • Certifique-se de que a finalidade e o estado atual de um conjunto de botões de opção seja clara.
  • Sempre faça um comentário visual quando o usuário tocar um botão de opção.
  • Dê o comentário visual conforme o usuário interagir com os botões de opção. Normal, pressionado, verificado e desativado são exemplos de estados do botão de opção. Um usuário toca em botões de opção para ativar a opção relacionada. Tocar em uma opção ativada não a desativa, mas tocar em outra opção transfere a ativação àquela opção.
  • Reserve efeitos visuais e animações para o comentário de toque e para o estado verificado; no estado não verificado, os controles do botão de opção devem aparecer como não usados ou inativos (mas não desativados).
  • Limite o conteúdo em texto do botão de opção para uma única linha. Você pode personalizar os elementos visuais do botão de opção para exibir uma descrição da opção em uma fonte em tamanho menos abaixo da linha principal do texto.
  • Se o conteúdo do texto for dinâmico, considere como o botão redimensionará e o que acontecerá com os elementos visuais ao redor dele.
  • Use fonte padrão, a menos que as diretrizes da marca o orientem de outra forma.
  • Inclua o botão de opção em um elemento de rótulo para que o toque no rótulo selecione o botão de opção.
  • Coloque o texto do rótulo após o botão de opção, não antes ou acima dele.
  • Considere personalizar seus botões de opção. Por padrão, um botão de opção consiste em dois círculos concêntricos, o de dentro preenchido (e mostrado quando o botão de opção for assinalado) e o de fora com um traço, e com algum conteúdo em texto. Incentivamos a criatividade. Os usuários se sentem confortáveis ao interagir diretamente com o conteúdo de um aplicativo. Portanto, você pode escolher mostrar o conteúdo real em aberto, seja apresentado em gráficos ou com botões de alternância de texto sutis.
  • Não coloque mais que oito opções em um grupo de botão de opção. Quando for necessário apresentar mais opções, use uma lista suspensa, caixa de listagem ou um modo de exibição de lista em vez disso.
  • Não coloque dois grupos de botão de opção próximos um do outro. Quando dois grupos de botão de opção estão próximos um do outro é difícil determinar quais botões pertencem a qual grupo. Use rótulos de grupos para separá-los.

Diretriz de uso adicional

Esta ilustração mostra a maneira correta de posicionar e espaçar os botões de opção.

Um conjunto de botões de opção

Este diagrama realça o tamanho e o espaçamento usados na ilustração anterior.

Um conjunto de botões de opção

Tópicos relacionados

Para designers
Diretrizes de botões
Diretrizes de botões de alternância
Diretrizes de caixas de seleção
Diretrizes para listas suspensas
Diretrizes para modo de exibição de lista e controles de exibição de grade
Diretrizes de controles deslizantes
Diretrizes do controle de seleção
Para desenvolvedores (HTML)
input type="radio"
Adicionando controles de seleção
Para desenvolvedores (XAML)
Windows.UI.Xaml.Controls RadioButton class
Adicionando botões de opção

 

 

Mostrar:
© 2014 Microsoft