Layouts de formulário

Diretrizes de layouts de formulário

Projete formulários que ofereçam uma experiência de toque fantástica, otimize o uso do estado real da tela e minimize a funcionalidade de movimento panorâmico/rolagem no seu aplicativo da Windows Store.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação do usuário: entrada por toque... e mais

Recomendações

  • Utilize um layout de formulário apropriado para o conteúdo e o aplicativo.
  • Use o mesmo estilo de posicionamento de rótulo para todos os controles em um formulário.
  • Utilize o texto marcador de posição em linha quando o conteúdo do formulário for simples ou entendido facilmente.
  • Não use várias colunas quando há movimento panorâmico extenso.
  • Não posicione os rótulos à esquerda quando houver uma grande variação no tamanho dos rótulos.
  • Não ative automaticamente o teclado de toque, com entrada por toque.

Diretriz de uso adicional

Ao projetar o layout de formulários e de controles, pense em como deseja que o usuário preencha o formulário e nos efeitos que o movimento panorâmico/rolagem podem ter nessa experiência. Considere o impacto do teclado virtual (ele pode usar até 50% da tela na orientação paisagem) e das notificações de erro embutidas, se usadas.

Layouts de coluna única

Use um layout de coluna única para seu formulário quando:

  • Você quer encorajar os usuários a preencher o formulário em uma ordem específica.
  • O formulário se entende por várias páginas.
  • O aplicativo é redimensionado para um layout alto e estreito.
  • O aplicativo exibe notas e informações adicionais, instruções ou identidade visual e publicidade.

Veja o exemplo de um formulário curto que usa o layout de coluna única:

Formulário curto que usa o layout de coluna única

Veja o exemplo de um formulário mais extenso que usa o layout de coluna única:

Formulário mais extenso que usa o layout de coluna única

Em vez de tentar ajustar vários controles em um único formulário muito extenso, avalie a divisão da tarefa em uma sequência de vários formulários. Veja o exemplo de um formulário mais extenso dividido em grupos:

Um formulário mais extenso que usa grupos

Veja um exemplo de um formulário mais extenso dividido em várias páginas:

Formulário mais extenso que usa grupos

Veja um exemplo de um formulário que usa um layout de coluna única porque a IU contém notas e informações adicionais:

Um formulário que contém notas e informações adicionais

Quando usar layouts de duas colunas

Use um layout de duas colunas para formulários curtos com movimento panorâmico vertical limitado. O layout de duas colunas aproveita melhor o estado real da tela na orientação paisagem. Lembre-se de reservar um amplo espaço de medianiz entre as duas colunas.

Veja o exemplo de um formulário que usa duas colunas:

Formulário que usa duas colunas

Não use várias colunas quando há movimento panorâmico extenso. Para preencher o formulário, o usuário precisa chegar até o fim da primeira coluna, mover para o início da segunda coluna e depois ir até o fim novamente. Essa experiência fica ainda mais complicada quando o teclado virtual é exibido.

Veja o exemplo de um formulário que usa duas colunas de forma inadequada:

Formulário que usa duas colunas de forma inadequada

Quando usar três ou mais colunas

Use três ou mais colunas para aproveitar melhor o estado real da tela visível na orientação paisagem. Esse layout funciona bem em telas fixas ou com movimento panorâmico na horizontal, mas é inadequado para telas com movimento panorâmico na vertical. Só use esse layout quando a ordem de entrada não for importante.

Um formulário que usa três colunas

Posicionamento do rótulo

A maioria dos controles precisa de um rótulo.

  • Posicione os rótulos acima ou à esquerda de um controle.
  • Use o mesmo estilo de posicionamento de rótulo para todos os controles em um formulário.

Quando usar o posicionamento do rótulo na parte de cima

Em geral, posicione os rótulos acima dos controles. Ao usar layouts de formulário com várias colunas, sempre posicione os rótulos acima dos controles.

O posicionamento dos rótulos acima dos controles ajuda a estabelecer a relação entre um rótulo e o respectivo controle, bem como a criar um layout limpo, já que os rótulos e os controles podem ser alinhados à esquerda. Com o posicionamento dos rótulos acima dos controles, fica mais fácil apresentar cadeias longas e tratar de problemas de localização e acessibilidade.

Veja aqui dois exemplos de posicionamento de rótulo superior.

Um formulário com os rótulos posicionados acima de seus controles

Quando usar o posicionamento do rótulo à esquerda

Em formulários de coluna única, em que o estado real vertical deve ser preservado, posicione os rótulos à esquerda dos controles nas seguintes situações:

  • Quando as cadeias de caracteres do rótulo forem curtas e tiverem aproximadamente o mesmo comprimento.
  • Quando houver espaço horizontal suficiente para a cadeia de caracteres de rótulo mais longa (em qualquer localização).

Veja o exemplo de um formulário que posiciona os rótulos à esquerda.

Formulário que posiciona os rótulos à esquerda

Não posicione os rótulos à esquerda quando houver uma grande variação no tamanho dos rótulos, pois alguns rótulos ficarão muito longe dos respectivos controles.

Formulário que posiciona o rótulo à esquerda de forma inadequada

Não use posicionamento de rótulo à esquerda em layouts de formulário com várias colunas. Os próprios rótulos podem dar a impressão de constituírem uma coluna separada.

Formulário que posiciona o rótulo à esquerda de forma inadequada

Texto de espaço reservado embutido

Às vezes você pode simplificar o layout usando texto de espaço reservado embutido em vez de rótulos. Use texto de espaço reservado embutido quando:

  • O padrão do formulário for bastante difundido (por exemplo, um campo de entrada de senha ou controle de logon).
  • O rótulo pode ser facilmente subentendido ou construído depois que os dados são inseridos no campo de entrada (desde que o texto de dica desapareça após a inserção dos dados).
  • Há um número limitado de campos de entrada.

Veja um exemplo de um formulário que usa texto de espaço reservado embutido:

Um formulário que usa texto de espaço reservado embutido

Posicionamento do botão

Alinhe os botões do formulário à direita, exceto quando houver vários botões inseridos em outros controles. Para conferir maior coesão a um formulário, os botões devem corresponder ao alinhamento dos outros controles. Por exemplo, na tela Configurações do PC, os botões inseridos são alinhados à esquerda:

Uma tela Configurações do PC que mostra os botões alinhados à esquerda

Para saber mais sobre o posicionamento dos botões, veja Diretrizes para botões.

Foco e navegação

O controle com o qual o usuário está interagindo no formulário está no estado focalizado. O usuário pode utilizar a tecla Tab no teclado para navegar pelos controles do formulário, incluindo os controles que não são exibidos no momento. Verifique se a região de movimento panorâmico que contém o controle focado é movida automaticamente para que o controle inteiro seja exibido. Deve haver pelo menos 30 pixels entre o controle em foco e a borda da tela ou a parte superior do teclado virtual (se visível) para deixar espaço para vários gestos de borda, elementos de interface do usuário e para a garra de seleção de texto.

Formulário com e sem o teclado virtual habilitado

Em alguns casos, há elementos da IU que devem ficar na tela o tempo todo. Projete a IU de forma que os controles do formulário fiquem em uma região de movimento panorâmico e os elementos importantes da IU fiquem estáticos. Por exemplo:

Um formulário que contém áreas que devem ser sempre exibidas

Invocando e dispensando o teclado virtual

Para dispositivos que dão suporte a toque, o teclado virtual é exibido quando o usuário toca em um campo de entrada de texto. Não faça com que seu aplicativo inicie automaticamente o teclado virtual sem essa interação.

O teclado pode ser dispensado de uma de duas maneiras:

  • Quando o formulário é enviado.
  • O comando Ocultar teclado é invocado como mostrado aqui.

    O comando Ocultar teclado no teclado virtual

Normalmente, o teclado virtual permanece visível enquanto o usuário navega entre controles em um formulário. Esse comportamento pode variar com base nos outros tipos de controle no formulário.

Para saber mais, consulte as Diretrizes de design do teclado.

Exemplos de layout

Veja um exemplo de formulário de registro que segue as diretrizes deste documento:

Um formulário de registro

Veja aqui os tamanhos recomendados para vários elementos, com diretrizes para espaçamento:

Dimensionamento e espaçamento do formulário de registro

Tópicos relacionados

Para designers
Diretrizes de botões
Diretrizes de design do teclado

 

 

Mostrar:
© 2017 Microsoft