<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" xml:lang="cs">

  <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>Uspořádání prvků v uživatelském rozhraní</desc>

  </info>

<title>Vizuální rozvržení</title>

Vizuální rozvržení ovládacích prvků, informací a obsahu ovlivňuje, jak lehce je vaše aplikace pochopitelná, a zároveň, jak je hezká na pohled. Je důležité si uvědomit, že vizuální návrh má silný dopad na to, jak pracné bude používání aplikace. Špatné rozvržení má za následek, že uživatel musí vyvinou větší úsilí, s dobrým rozvržením je toto úsilí menší.

Dodržování těchto pokynů pro vizuální rozvržení vám pomůže vytvořit aplikaci, která bude hezká, snadná k pochopení a účinná na používání.

<section id="general-guidelines">

<title>Obecné rady</title>

<list>

<item>
Linie zarovnání je pomyslná svislá nebo vodorovná čára přes vaše okno, která se dotýká hrany jednoho nebo více popisků a ovládacích prvků v okně. Počet těchto bodů byste měli minimalizovat. Čím méně jich je, tím jasnější a jednodušší se rozvržení zdá, a bude pro lidi pochopitelnější.
</item>

<item>
Zarovnávejte obsah a ovládací prvky v rozvržení přesně. Lidské oko vnímá zarovnané a nezarovnané objekty velmi citlivě. Pokud vizuální prvky nedrží čáru, je některým lidem nepříjemné se si je prohlížet. Prvky, které čáru nedrží, totiž působí rušivě.
</item>

<item>
Buďte konzistentní. Používejte všude stejné rozestupy.
</item>

<item>
Uspořádejte související ovládací prvky a informace do skupin a k jejich rozlišení použijte rozestupy. Tím se rozhraní zjednoduší pro čtení a pochopení.

<list>

<item>
Podle nepsaných pravidel ponechávejte mezi prvky rozestupy 6 pixelů, a zvětšujte je, když vzájemná souvislost mezi prvky slábne.
</item>

<item>
Mezi popiskem a k němu patřícím ovládacím prvkem ponechejte 12 vodorovných pixelů.
</item>

<item>
Ke svislému oddělení skupin komponent se hodí 18 pixelů.
</item>

<item>
Obecně je doporučováno odsazení 18 pixelů mezi obsahem dialogového okna a okrajem okna.
</item>

</list></item>

<item>
Pro vyjádření hierarchie a návaznosti odsazujte prvky o 12 pixelů.
</item>

<item>
Vyhněte se používání viditelných rámečků k oddělení skupin ovládacích prvků. Místo toho používejte mezery a nadpisy.
</item>

</list>

Nesprávné rozestupy a zarovnání:

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

Správné rozestupy a zarovnání:

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

Správné rozestupy s hodnotami (v pixelech):

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

</section>

<section id="label-alignment">

<title>Zarovnání popisků</title>

Pokud je to možné, použijte u popisků zarovnání doprava (viz nákres níže). Předejdete tím velkým mezerám mezi popisky a k nim patřícím ovládacím prvkům. Tento typ zarovnání není ale možný, když máte ovládací prvky s navzájem hodně odlišnými rozměry: zde místo toho musíte použít zarovnání doleva.

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

</section>

<section id="hierarchy">

<title>Vizuální hierarchie</title>

Vizuální prvky uspořádejte shora dolů a zleva doprava. To je směr, kterým mají lidé ze západních zemí tendenci číst uživatelské rozhraní, takže položek vlevo nahoře si všimnou jako první. Toto uspořádání dá uživatelskému rozhraní hierarchii: komponenty, které jsou spatřené jako první, jsou vnímány jako přednostní před těmi, co přijdou na oči později. Z tohoto důvodu byste měli umístit hlavní ovládací prvky nad a doleva od ovládacích prvků a obsahu, které jsou jimi ovlivňovány. Hlavičkové lišty jsou z tohoto hlediska klíčovým návrhovými vzory.

</section>

</page>