Allan Day
aday@gnome.org
Calum Benson
Adam Elman
Seth Nickell
Colin Robertson

This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.

Organizando elementos em uma interface de usuário.
Georges Neto
georges.stavracas@gmail.com 2014,
Rafael Fontenelle
rafaelff@gnome.org 2017-2021

# Layout visual

O layout visual dos controles, informações e conteúdo afeta a facilidade de entender seu aplicativo. Como parte disso, é importante reconhecer que o design visual tem um forte impacto sobre o quanto de trabalho está envolvido no uso de um aplicativo – resultados de layout insatisfatórios em que os usuários precisam fazer um esforço adicional, enquanto um bom layout exige menos esforço.

Um bom layout visual também torna as aplicações mais atraentes e visualmente agradáveis.

Seguir estas diretrizes de layout visual ajudará você a produzir um aplicativo que seja bonito, fácil de entender e eficiente de usar.

# Diretrizes gerais

Um ponto de alinhamento é uma linha vertical ou horizontal imaginária na sua janela que toca a borda de um ou mais rótulos ou controles na janela. Minimize o número deles – quanto menos houver, mais limpo e mais simples será o layout, e mais fácil será para as pessoas entenderem.

Alinhe conteúdo e controle em seu layout de forma exata. O olho é muito sensível a objetos alinhados e não alinhados. Se elementos visuais não estiver alinhados, eles serão difíceis para alguém lê-los. Elementos que não estão bem alinhados se tornarão distração.

Ser consistente. Use as mesmas quantidades de espaçamento por toda parte.

Organize os controles e informações relacionados em grupos e use o espaçamento para diferenciá-los. Isso facilita muito a leitura e a compreensão de uma interface.

Como regra geral, deixe o espaço entre os elementos em incrementos de 6 pixels, subindo à medida que a relação entre os elementos relacionados se torna mais distante.

Entre rótulos e componentes associados, deixe 12 pixels horizontais.

Para o espaçamento vertical entre grupos de componentes, 18 pixels é adequado.

Recomenda-se um preenchimento geral de 18 pixels entre o conteúdo de uma janela de diálogo e as bordas da janela.

Recue os elementos em 12 pixels para denotar hierarquia e associação.

Evite usar quadros com bordas visíveis para separar grupos de controles – use espaçamento e cabeçalhos.

Espaçamento e alinhamento incorreto:

Espaçamento e alinhamento correto:

Espaçamento correto, com unidades (pixels):

# Alinhamento de rótulo

Se possível, justifique os rótulos à direita (veja o diagrama abaixo). Isso evitará grandes lacunas entre os rótulos e seus controles associados. Esse tipo de justificação à direita não é possível se você tiver controles recuados: aqui, a justificação à esquerda deve ser usada em seu lugar.

# Hierarquia visual

Organize elementos visuais de cima para baixo e da esquerda para a direita. Esta é a direção que as pessoas de locais ocidentais tendem a ler uma interface, para que os itens no canto superior esquerdo sejam encontrados primeiro. Essa ordenação dá às interfaces uma hierarquia: os componentes que são vistos primeiro são percebidos como tendo prioridade sobre aqueles que vêm depois deles. Por esse motivo, você deve colocar os controles dominantes acima e à esquerda dos controles e conteúdos que eles afetam. Barras de cabeçalho são um padrão de design chave a esse respeito.