<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" lang="pt-BR">

  <info>
    <credit type="author">
      <name>Allan Day</name>
      <email>aday@gnome.org</email>
    </credit>
    <credit>
      <name>Calum Benson</name>
    </credit>
    <credit>
      <name>Adam Elman</name>
    </credit>
    <credit>
      <name>Seth Nickell</name>
    </credit>
    <credit>
      <name>Colin Robertson</name>
    </credit>
    <license xmlns="http://projectmallard.org/1.0/" href="http://creativecommons.org/licenses/by-sa/4.0/">

  <p>This work is licensed under a
  <link href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
  Commons Attribution-Share Alike 4.0 International License</link>.</p>

</license>
    <desc>Organizando elementos em uma interface de usuário.</desc>
  <credit type="translator copyright"><name>Georges Neto</name><email>georges.stavracas@gmail.com</email><years>2014,</years></credit><credit type="translator copyright"><name>Rafael Fontenelle</name><email>rafaelff@gnome.org</email><years>2017-2021</years></credit></info>

<title>Layout visual</title>

<p>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.</p>

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

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

<section id="general-guidelines">
<title>Diretrizes gerais</title>

<list>
<item><p>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.</p></item>
<item><p>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.</p></item>
<item><p>Ser consistente. Use as mesmas quantidades de espaçamento por toda parte.</p></item>
<item><p>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.</p>
<list>
<item><p>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.</p></item>
<item><p>Entre rótulos e componentes associados, deixe 12 pixels horizontais.</p></item>
<item><p>Para o espaçamento vertical entre grupos de componentes, 18 pixels é adequado.</p></item>
<item><p>Recomenda-se um preenchimento geral de 18 pixels entre o conteúdo de uma janela de diálogo e as bordas da janela.</p></item>
</list></item>
<item><p>Recue os elementos em 12 pixels para denotar hierarquia e associação.</p></item>
<item><p>Evite usar quadros com bordas visíveis para separar grupos de controles – use espaçamento e cabeçalhos.</p></item>
</list>

<p>Espaçamento e alinhamento incorreto:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

<p>Espaçamento e alinhamento correto:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

<p>Espaçamento correto, com unidades (pixels):</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">
<title>Alinhamento de rótulo</title>

<p>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.</p>

<media type="image" mime="image/svg" src="figures/label-alignment.svg"/>

</section>

<section id="hierarchy">
<title>Hierarquia visual</title>

<p>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.</p>

</section>

</page>
