Allan Day
aday@gnome.org
Calum Benson
Adam Elman
Seth Nickell
Colin Robertson
Uspořádání prvků v uživatelském rozhraní

# Vizuální rozvržení

Vizuální rozvržení ovládacích prvků, informací a obsahu ovlivňuje, jak lehce je vaše aplikace pochopitelná. Jako součástí to všeho 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ší.

Správné vizuální rozložení dělá aplikaci obvykle více atraktivní a lahodící oku.

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í.

# Obecné zásady

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ší.

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ě.

Buďte konzistentní. Používejte všude stejné rozestupy.

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í.

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

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

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

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

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

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.

Nesprávné rozestupy a zarovnání:

Správné rozestupy a zarovnání:

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

# Zarovnání popisků

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.

# Vizuální hierarchie

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.