<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" xml: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>
    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
    <desc>Organizando elementos em uma interface de usuário.</desc>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Georges Neto</mal:name>
      <mal:email>georges.stavracas@gmail.com</mal:email>
      <mal:years>2014,</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Rafael Fontenelle</mal:name>
      <mal:email>rafaelff@gnome.org</mal:email>
      <mal:years>2017-2021</mal:years>
    </mal: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>
