Partilhar via


Caixas de grupo

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 orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .

Uma caixa de grupo é um quadro retangular rotulado que envolve um conjunto de controles relacionados. Uma caixa de grupo é uma forma de mostrar relações visualmente; Além de possivelmente fornecer uma chave de acesso para um grupo de controles, ele não fornece nenhuma funcionalidade.

captura de ecrã da caixa de grupo que contém caixas de verificação

Uma caixa de grupo típica.

Observação

As diretrizes relacionadas ao layout são apresentadas em um artigo separado.

 

Será este o controlo correto?

Embora as caixas de grupo sejam um meio visual forte de indicar relações, o uso excessivo delas adiciona confusão visual e reduz muito o espaço disponível em uma superfície. Eles são visualmente pesados e devem ser usados com moderação — apenas quando não há uma solução melhor.

Uma tendência de design no Windows é uma aparência mais simples e limpa, eliminando linhas desnecessárias.

Para decidir se uma caixa de grupo é necessária, considere estas perguntas:

  • Existe mais do que um controlo no grupo? Caso contrário, use um rótulo de texto sem formatação. Uma exceção rara é usar uma caixa de grupo com um único controle para manter a consistência com outras caixas de grupo na mesma superfície.

Incorreto:captura de tela da caixa de grupo contendo uma caixa de texto

Neste exemplo, a caixa de grupo tem apenas um único controle.

  • Os controlos estão relacionados? Mostrar a relação acrescenta clareza? Caso contrário, apresente os controles separadamente fora de uma caixa de grupo.
  • Todos os controles estão dentro do grupo? Em caso afirmativo, indique a relação na superfície maior, como a caixa de diálogo pai ou a página.

Incorreto:captura de tela da caixa de grupo contendo todos os controles

Neste exemplo, todos os controles (exceto os botões de confirmação) na caixa de diálogo estão dentro da caixa de grupo.

  • Você consegue comunicar efetivamente as relações usando apenas o layout? Em caso afirmativo, use layout em vez disso. Você pode colocar controles relacionados próximos uns dos outros e colocar espaçamento extra entre controles não relacionados. Você também pode usar cabeçalhos e recuo para mostrar relações hierárquicas.

figura de quatro ícones mostrando quatro grupos de tarefas

Neste exemplo, o layout sozinho é usado para mostrar relações de controle.

  • Você pode comunicar eficazmente as relações usando um separador? Em caso afirmativo, utilize um separador. Um separador é uma linha horizontal que unifica os controles abaixo dele. Os separadores proporcionam um aspeto mais simples e limpo. No entanto, ao contrário das caixas de grupo, elas funcionam melhor quando abrangem toda a largura da superfície.
    • Desenvolvedores: Você pode implementar um separador com um retângulo gravado com uma altura de um.

Captura de tela que mostra controles de e-mail separados por separadores de retângulo gravados.

Neste exemplo, separadores rotulados são usados para mostrar relações de controle.

captura de tela de controles separados por separadores

Neste exemplo, separadores sem rótulo são usados para mostrar relações de controle.

  • Consegue comunicar eficazmente as relações sem texto? Em caso afirmativo, considere o uso de elementos gráficos, como planos de fundo ou agregadores.

Orientações

  • Não aninhar caixas de grupo. Use o layout para mostrar relações dentro de uma caixa de grupo.

Incorreto:captura de tela de uma caixa de grupo dentro de uma caixa de grupo

Neste exemplo, as caixas de grupo aninhadas resultam em desordem visual desnecessária.

Correto:captura de tela dos mesmos controles dentro de uma caixa de grupo

Neste exemplo, a mesma relação de controle é mostrada usando layout.

  • Não coloque controles em rótulos de caixa de grupo.
    • Exceção: Você pode usar uma caixa de seleção como um rótulo de caixa de grupo se todos os controles dentro da caixa estiverem habilitados e desabilitados pela caixa de seleção.

Incorreto:captura de tela da lista suspensa em um rótulo de caixa de grupo

Neste exemplo, uma lista suspensa é colocada incorretamente em uma caixa de grupo. Este exemplo deve usar guias em vez disso.

  • Não desative as caixas de grupo. Para indicar que um grupo de controles não se aplica no momento, desative todos os controles dentro da caixa de grupo, mas não a caixa de grupo em si. Essa abordagem é mais acessível e pode ser suportada de forma consistente por todas as estruturas de interface do usuário.

Rótulos

  • Rotule todas as caixas de grupo.
  • Não atribua uma chave de acesso ao rótulo. Fazer isso é desnecessário e torna as outras chaves de acesso mais difíceis de atribuir. Em vez disso, atribua chaves de acesso aos controles dentro da caixa de grupo.
    • Exceção: Se uma superfície tiver muitos controles, pode não haver chaves de acesso suficientes disponíveis. Em caso afirmativo, reduza o número de chaves de acesso atribuindo-as a caixas de grupo em vez dos controles dentro das caixas de grupo.
  • Use de maiúsculas no estilo de frase.
  • Escreva o rótulo usando um substantivo ou uma frase nominal, não como uma frase, e não use pontuação final, incluindo dois pontos.
  • Use frases paralelas para rótulos de caixa de grupo dentro da mesma superfície.
  • Mantenha as etiquetas das caixas de grupo concisas. Não use texto instrucional como rótulo. No entanto, você pode ter texto instrutivo dentro da caixa de grupo.
  • Não repita o rótulo da caixa de grupo nos rótulos de controle dentro da caixa. Por exemplo, se a caixa de grupo estiver rotulada como Alinhamento, rotule os botões de opção Esquerda, Direita e assim por diante, não Alinhamento esquerdo ou Alinhamento direito.
  • Não se refira a caixas de grupo no texto da interface do usuário.

Documentação

Quando se refere a caixas de grupo:

  • Consulte as caixas de grupo apenas no programador e em outra documentação técnica. Para caixa de grupo, use duas palavras minúsculas.
  • Em todos os outros lugares, é desnecessário incluir o nome da caixa de grupo em um procedimento, a menos que uma caixa de diálogo contenha mais de uma opção com o mesmo nome. Nesses casos, use em com o nome da caixa de grupo.
  • Sempre que possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas apenas se necessário para evitar confusão.

Exemplo: em Efeitos, selecione oculto .