Rozložení

Poznámka

Tento průvodce návrhem byl vytvořen pro Windows 7 a nebyl aktualizován pro novější verze Windows. Většina pokynů se stále používá v zásadě, ale prezentace a příklady neodráží naše aktuální pokyny k návrhu.

Rozložení je nastavení velikosti, mezery a umístění obsahu v okně nebo stránce. Efektivní rozložení je zásadní, když uživatelům pomáhá rychle najít, co hledají, a také vizuálně atraktivní vzhled. Efektivní rozložení může udělat rozdíl mezi návrhy, které uživatelé okamžitě chápou, a těmi, kteří uživatelé cítí hádanky a zahlcení.

Poznámka: Pokyny týkající se správy oken jsou uvedeny v samostatném článku. Doporučené konkrétní určení velikosti a mezery ovládacích prvků jsou uvedeny v příslušných článcích s pokyny.

Koncepty návrhu

Vizuální hierarchie

Okno nebo stránka mají jasnou vizuální hierarchii, když její vzhled označuje vztah a prioritu jejích prvků. Bez vizuální hierarchie by uživatelé museli tyto vztahy a priority sami zjistit.

Vizuální hierarchie se dosahuje dovednostmi kombinováním následujících atributů:

• Ohnisko. Rozložení označuje, kde se uživatelé musí podívat jako první.
• Téct. Oko hladce a přirozeně prochází povrchem a hledá prvky uživatelského rozhraní v pořadí vhodném pro jejich použití.
• Seskupení. Logicky související prvky uživatelského rozhraní mají jasný vizuální vztah. Související položky jsou seskupené dohromady; nesouvisející položky jsou oddělené.
• Důraz. Prvky uživatelského rozhraní se zvýrazňují na základě jejich relativní důležitosti.
• Zarovnání. Prvky uživatelského rozhraní mají koordinované umístění, takže se snadno prohledávají a zobrazují v pořadí.

Efektivní rozložení má navíc tyto atributy:

• Nezávislost zařízení. Rozložení se zobrazí jako zamýšlené bez ohledu na typ písma nebo velikost, tečky na palec (dpi), zobrazení nebo grafický adaptér.
• Snadné skenování. Uživatelé můžou najít obsah, který hledají, na první pohled.
• Efektivita. Prvky uživatelského rozhraní, které jsou velké, musí být velké a prvky, které jsou malé, dobře malé.
• Změna velikosti. Pokud je okno užitečné, je možné změnit velikost okna a jeho rozložení obsahu je efektivní bez ohledu na to, jak velká nebo malá je plocha.
• Rovnováha. Obsah se na povrchu rovnoměrně distribuuje.
• Vizuální jednoduchost. Vnímání, že rozložení není složitější, než musí být. Uživatelé se necítí zahlcení vzhledem rozložení.
• Konzistence. Podobná okna nebo stránky používají podobné rozložení, takže uživatelé mají vždy orientaci.

I když velikost, mezery a umístění jsou jednoduché koncepty, výzva s rozložením spočívá v dosažení správné kombinace těchto atributů.

Ve Windows se rozložení komunikuje pomocí metrik nezávislých na zařízení, jako jsou jednotky dialogových oken (DLU) a relativní pixely.

Návrhový model pro čtení

Uživatelé si vyberou, co čtou podle vzhledu a organizace obsahu. Pokud chcete vytvořit efektivní rozložení, budete muset pochopit, co uživatelé obvykle čtou a proč.

Při rozhodování o rozložení můžete použít tento návrhový model ke čtení:

• Lidé si čtou zleva doprava a shora dolů (v západních kulturách).

• Existují dva režimy čtení: imerzivní čtení a skenování. Cílem imerzivního čtení je porozumění.

  

  Tento diagram modeluje imerzivní čtení.

  Naproti tomu cílem skenování je najít věci. Celková cesta ke kontrole vypadá takto:

  

  Tato kontrola modelů diagramu.

  

  Pokud je text spuštěný podél levého okraje stránky, uživatelé nejprve naskenovali levý okraj.

• Při používání softwaru se uživatelé nevnoří do samotného uživatelského rozhraní, ale do své práce. Uživatelé proto obvykle nečtou text uživatelského rozhraní, který naskenují. Poté čtou části textu komplexně jen tehdy, když věří, že potřebují.

• Uživatelé mají tendenci přeskočit navigační podokna na levé nebo pravé straně stránky. Uživatelé si uvědomují, že jsou tam, ale navigační podokna se dívají jenom v případě, že chtějí procházet.

• Uživatelé mají tendenci přeskočit velké bloky neformátovaného textu, aniž by je museli vůbec číst.

  

  Uživatelé mají tendenci při procházení přeskakovat velké bloky textu a navigačních podoken.

• Všechny věci jsou stejné, uživatelé se nejprve podívá do levého horního rohu okna, naskenují stránku a ukončí kontrolu v pravém dolním rohu. Mají tendenci ignorovat levý dolní roh.

  

  Všechny věci jsou stejné, uživatelé budou tato čísla číst v následujícím pořadí: 1, 2, 4 a 3.

• Ale v interaktivním uživatelském rozhraní nejsou všechny věci stejné, takže různé prvky uživatelského rozhraní dostávají různé úrovně pozornosti. Uživatelé se obvykle dívají na interaktivní ovládací prvky, zejména ovládací prvky v levém horním rohu a uprostřed okna a na předním textu.

Uživatelé se zaměřují na hlavní interaktivní ovládací prvky a hlavní instrukce a dívají se na další věci jenom tehdy, když potřebují.

• Uživatelé mají tendenci číst interaktivní popisky ovládacích prvků, zejména ty, které se zobrazují relevantní pro dokončení úkolu. Naproti tomu uživatelé obvykle čtou statický text jenom tehdy, když si myslí, že potřebují.
• Položky, které se zobrazují odlišně, upoutají pozornost. Tučný text a velký text vyniknou od normálního textu. Položky uživatelského rozhraní s barvou nebo barevným pozadím vyniknou. Položky s ikonami vyniknou od položek bez ikon.
• Uživatelé se neposouvají, pokud nemají důvod k tomu. Pokud obsah nad přeloženým neposkytuje důvod k posouvání, nebudou.
• Jakmile se uživatelé rozhodnou, co dělat, okamžitě přestanou kontrolovat a dělat to.
• Vzhledem k tomu, že uživatelé přestanou kontrolovat, když si myslí, že jsou hotoví, obvykle ignorují cokoli, co se zdá být bodem dokončení.

Uživatelé přestanou kontrolovat, když si myslí, že jsou hotoví.

Samozřejmě, že v tomto obecném modelu budou existovat výjimky. Zařízení sledování očí naznačují, že chování skutečných uživatelů je docela erratické. Cílem tohoto modelu je pomoci při rozhodování a kompromisech, nikoli k přesnému modelování chování uživatelů. Ale když jste si tento seznam přečetli, snad jste také poznali mnoho vlastních vzorů čtení.

Návrh pro skenování

Uživatelé nečtou, naskenují, takže byste měli navrhnout plochy uživatelského rozhraní pro kontrolu. Nepředpokládáme, že uživatelé budou číst text jako napsaný v pořadí zleva doprava, shora dolů, ale místo toho, aby se podívali na prvky uživatelského rozhraní, které upoutaly pozornost.

Návrh kontroly:

• Předpokládejme, že uživatelé začínají rychlou kontrolou celého okna a pak čtou prvky uživatelského rozhraní zhruba v následujícím pořadí:
  • Interaktivní ovládací prvky v centru
  • Tlačítka potvrzení
  • Interaktivní ovládací prvky nalezené jinde
  • Hlavní instrukce
  • Doplňková vysvětlení
  • Text zobrazený s ikonou upozornění
  • Název okna
  • Jiný statický text v hlavním textu
  • Poznámka pod čarou
• Umístěte prvky uživatelského rozhraní, které iniciují úlohu v levém horním rohu nebo v horním rohu.
• Umístěte prvky uživatelského rozhraní, které dokončí úlohu v pravém dolním rohu.
• Kdykoli je to možné, umístěte zásadní text na interaktivní ovládací prvky místo statického textu.
• Vyhněte se vkládání důležitých informací do levého dolního rohu nebo do dolní části dlouhého posouvatelného ovládacího prvku nebo stránky.
• Nepředvádějte velké bloky textu. Eliminujte nepotřebný text. Použijte invertovaný jehlan styl prezentace.
• Pokud něco přilákáte pozornost uživatelů, ujistěte se, že je tato pozornost zaručována.

Kdykoli je to možné, pracujte s tímto modelem a ne bojujte s ním; ale v některých případech budete muset zvýraznit nebo zrušit zdůraznění konkrétních prvků uživatelského rozhraní.

Zvýraznění primárních prvků uživatelského rozhraní:

• Umístěte primární prvky uživatelského rozhraní do cesty kontroly .

• Vložte jakékoli uživatelské rozhraní, které zahájí úlohu v levém horním rohu nebo v horním rohu.

• Umístěte tlačítka potvrzení do pravého dolního rohu.

• Umístěte zbývající primární uživatelské rozhraní do středu.

• Používejte ovládací prvky, které upoutají pozornost, jako jsou příkazová tlačítka, příkazové odkazy a ikony.

• Používejte výrazný text, včetně velkého textu a tučného textu.

• Textoví uživatelé musí číst v interaktivních ovládacích prvcích nebo pomocí ikon nebo na bannery.

• Používejte tmavý text na světlém pozadí.

• Obklopte prvky velkorysým prostorem.

• K zobrazení prvku, který kladete důraz, nevyžadují žádnou interakci, jako je například nasměrování nebo najetí myší.

  

  Tento příklad ukazuje mnoho způsobů, jak zdůraznit primární prvky uživatelského rozhraní.

Zrušení zvýraznění sekundárních prvků uživatelského rozhraní:

• Umístěte sekundární prvky uživatelského rozhraní mimo cestu kontroly.

• V levém dolním rohu nebo v dolním rohu okna obvykle nemusíte vidět nic, co uživatelé potřebují.

• Používejte ovládací prvky, které nepřilákají pozornost, například odkazy na úkoly místo příkazových tlačítek.

• Používejte normální nebo šedý text.

• Používejte světlý text na tmavém pozadí. Bílý text na tmavě šedém nebo modrém pozadí funguje dobře.

• Obklopte prvky s minimálním prostorem.

• Zvažte použití progresivního zpřístupnění ke skrytí sekundárních prvků uživatelského rozhraní.

  

  Tento příklad ukazuje mnoho způsobů, jak zrušit zvýraznění sekundárních prvků uživatelského rozhraní.

Efektivní používání místa na obrazovce

Efektivní používání prostoru na obrazovce vyžaduje vyvážení několika faktorů: použití příliš velkého prostoru a okna se cítí těžké a plýtvání, a dokonce obtížné používat na základě Fitts zákon.

nesprávná odpověď:

V tomto příkladu je okno pro jeho obsah příliš velké.

Na druhé straně používejte příliš málo místa a okno cítí křeče, nepříjemné a zastrašující, a obtížné použít, pokud vyžaduje posouvání a další manipulaci s použitím.

nesprávná odpověď:

V tomto příkladu je okno pro jeho obsah příliš malé.

I když se kritické uživatelské rozhraní musí vejít do minimální podporované efektivního rozlišení, nepředpokládáte, že efektivní použití místa na obrazovce znamená, že okna by měla být co nejmenší, by neměla být. Efektivní rozložení má respekt k otevřenému prostoru a nepokouší se ho zahlcovat do nejmenšího možného prostoru. Moderní displeje mají značné místo na obrazovce a dává smysl tento prostor efektivně používat, když můžete. V důsledku toho se na straně použití příliš velkého místa na obrazovce místo příliš malého. Díky tomu jsou okna světlejší a přístupnější.

Víte, že rozložení efektivně využívá místo na obrazovce, když:

• Okna, podokna oken a ovládací prvky se nemusí měnit, aby je bylo možné použít. Pokud je první věc, kterou uživatelé dělají, změna velikosti okna, podokna nebo ovládacího prvku, jeho velikost je špatná.
• Data nejsou zkrácena. Většina dat v zobrazeních seznamu a stromových zobrazeních nemá tři tečky a data v jiných ovládacích prvcích nejsou oříznutá, pokud není délka dat neobvykle velká. Data, která musí být přečtená, aby bylo možné provést úlohu, by neměla být zkrácena.
• Okna a ovládací prvky mají správnou velikost, aby se zabránilo zbytečnému posouvání. Existuje několik vodorovných posuvníků a nepotřebné svislé posuvníky.
• Ovládací prvky většinou používají jejich standardní velikosti. Snažte se snížit počet velikostí ovládacích prvků, například pomocí jedné nebo dvou šířek příkazového tlačítka na povrchu.
• Povrch uživatelského rozhraní je vyvážený. Nejsou velké nepoužívané oblasti obrazovky.

Zvolte velikosti oken, které jsou dostatečně velké, aby splňovaly jejich účel dobře. (A pokud je okno možné změnit velikost, tento cíl se vztahuje na výchozí velikost.) Kombinace zkrácených dat nebo posuvníků a spousty dostupných prostorů na obrazovce je jasné znamení neefektivního rozložení.

Určení velikosti ovládacího prvku

Prvním krokem při efektivním používání prostoru na obrazovce je obvykle určení správné velikosti pro různé prvky uživatelského rozhraní. Podívejte se na tabulku Určení velikosti ovládacích prvků a doporučené nastavení velikosti v konkrétních článcích s pokyny k ovládacím prvkům.

Fitts' Law uvádí, že menší cíl je, čím déle trvá jeho získání myší. Navíc u počítačů používajících technologii Windows Tablet a Touch může být "myš" ve skutečnosti perem nebo prstem uživatele, takže byste při určování velikostí malých ovládacích prvků měli zvážit alternativní vstupní zařízení. Velikost ovládacího prvku 16 × 16 relativních pixelů je dobrá minimální velikost pro jakékoli vstupní zařízení. Naproti tomu standardní číselná tlačítka 15x9 relativních pixelů jsou příliš malá, aby je bylo možné efektivně používat pery.

Rozteč

Díky velkorysému (ale ne nadměrnému) prostoru je rozložení pohodlnější a snadnější parsování. Efektivní prostor není nevyužitý prostor, který hraje důležitou roli při vylepšování schopnosti uživatelů skenovat a také přidává vizuální odvolání vašeho návrhu. Pokyny najdete v tabulce mezer.

U počítačů používajících windows Tablet a dotykovou technologii může být "myš" ve skutečnosti perem nebo prstem uživatele. Cílení je obtížnější při použití pera nebo prstu jako bodujícího zařízení, což vede k tomu, že uživatelé klepnou mimo zamýšlený cíl. Když se interaktivní ovládací prvky umístí velmi blízko sebe, ale ve skutečnosti se dotkne, uživatelé můžou kliknout na neaktivní prostor mezi ovládacími prvky. Vzhledem k tomu, že kliknutí na neaktivní místo nemá žádný výsledek nebo vizuální zpětnou vazbu, uživatelé si často nejsou jistí, co se nepovedlo. Pokud jsou malé ovládací prvky příliš úzce rozmístěné, musí uživatel klepnout s přesností, aby se zabránilo klepnutí na nesprávný objekt. Aby se tyto problémy vyřešily, měly by cílové oblasti interaktivních ovládacích prvků být buď dotknuty, nebo by měly mít alespoň 3 DLU (5 relativních pixelů) prostoru mezi nimi.

Víte, že rozložení má dobré mezery, když:

• Celkově je povrch uživatelského rozhraní pohodlný a necítí se stísněně.
• Prostor se zobrazuje jednotně a vyváženě.
• Související prvky jsou blízko sebe a nesouvisející prvky jsou relativně daleko.
• Mezi ovládacími prvky, které mají být společně, například tlačítka panelu nástrojů, neexistuje žádné prázdné místo.

Změna velikosti oken

Změna velikosti oken je také faktorem efektivního používání místa na obrazovce. Některá okna se skládají z pevného obsahu a nemají prospěch z možnosti změny velikosti, ale okna s obsahem s možností změny velikosti by měla být možné měnit velikost. Důvodem, proč uživatelé mění velikost okna, je samozřejmě upřesnit další místo na obrazovce, takže obsah by se měl odpovídajícím způsobem rozšířit tím, že poskytne více místa prvkům uživatelského rozhraní, které ho potřebují. Windows s dynamickým obsahem, dokumenty, obrázky, seznamy a stromy využívají nejvíce možností změny velikosti oken.

snímek obrazovky

V tomto příkladu změna velikosti okna změní velikost ovládacího prvku zobrazení seznamu.

To znamená, že okna mohou být roztažena příliš široké. Mnoho stránek ovládacích panelů se například stává nepraktným, pokud je obsah širší než 600 relativních pixelů. V tomto případě není lepší změnit velikost oblasti obsahu nad tuto maximální šířku nebo změnit původ obsahu, protože okno je větší. Místo toho ponechte maximální šířku a pevný původ vlevo nahoře.

Text se při zvýšení délky řádku obtížně čte. U textových dokumentů zvažte maximální délku řádku 80 znaků, aby byl text snadno čitelný. (Znaky zahrnují písmena, interpunkci a mezery.)

nesprávná odpověď:

V tomto příkladu je dlouhá délka textu obtížná pro čtení.

A konečně, změna velikosti oken také musí efektivně používat místo na obrazovce, když se zmenší, tím, že zmenšíte velikost obsahu a odeberete místo z prvků uživatelského rozhraní, které můžou efektivně fungovat bez něj. V určitém okamžiku se okno nebo jeho prvky uživatelského rozhraní stanou příliš malými, aby bylo možné je použít, takže by měly být přiřazeny minimální velikost nebo některé prvky by měly být zcela odebrány.

pásu karet

V tomto příkladu má podokno minimální velikost.

Některé programy mohou využívat zcela jinou prezentaci, aby byl obsah použitelný v menších velikostech.

V tomto příkladu windows Media Player změní formát, když se okno změní na příliš malý formát standardního formátu.

Ohnisko

Rozložení má fokus, když je na prvním místě, kde je vidět jedno zjevných míst. Fokus je důležitý, když chcete uživatelům ukázat, kde začít skenovat okno nebo stránku. Bez jasného fokusu bude oko uživatele bezcílně putovat. Ústředním bodem by mělo být něco důležitého, co uživatelé potřebují rychle najít a pochopit a měli by mít největší vizuální důraz. Levý horní roh je přirozeným ústředním bodem většiny oken.

Měl by existovat jen jeden ústřední bod. Stejně jako v reálném životě se oko může soustředit jenom na jednu věc současně, uživatelé se nemůžou soustředit na více míst současně.

Pokud chcete, aby prvek uživatelského rozhraní byl ústředním bodem, můžete ho vizuálně zdůraznit:

• Umístěte ho do levé horní nebo horní části povrchu uprostřed.
• Použití interaktivních ovládacích prvků, které jsou důležité a snadno srozumitelné.
• Použití hlavního textu, například hlavní instrukce
• Dává ovládacím prvkům výchozí výběr a počáteční fokus vstupu.
• Umístění ovládacích prvků do jiného barevného pozadí

Zvažte službu Windows Search. Ústředním bodem služby Windows Search by mělo být vyhledávací pole, protože se jedná o výchozí bod úkolu. Nachází se však v pravém horním rohu, aby byla konzistentní se standardním umístěním vyhledávacího pole. Vyhledávací pole má vstupní fokus, ale vzhledem k jeho umístění v cestě kontroly nestačí.

Pokud chcete tento problém vyřešit, v horní části okna je k dispozici významná instrukce, která uživatele nasměruje na správné místo.

přijatelné :

V tomto příkladu hlavní instrukce v horní části okna směruje uživatele do vyhledávacího pole.

Bez pokynů by okno nemělo očividný ústřední bod.

nesprávná odpověď:

Tento příklad nemá žádný očividný ústřední bod. Uživatelé neví, kde se mají hledat.

Pokud zvýrazníte vizuální prvek uživatelského rozhraní, ujistěte se, že je vyžadována pozornost. V předchozím nesprávném příkladu Windows Search je zvýrazněné tlačítko Vše v levém horním rohu a má největší vizuální důraz, ale nejedná se o zamýšlený ústřední bod. Uživatelé se můžou zaseknout, když se na toto tlačítko snaží zjistit, co s tím dělat.

nesprávná odpověď:

Bez výrazné instrukce jako ústřední bod je zvýrazněné tlačítko Vše neúmyslným ústředním bodem.

Téct

Rozložení má tok, když se uživatelé hladce a přirozeně řídí jasnou cestou přes jeho plochu a hledají prvky uživatelského rozhraní v pořadí vhodném pro jejich použití. Jakmile uživatelé identifikují kontaktní bod, musí určit, jak úkol dokončit. Umístění prvků uživatelského rozhraní vyjadřuje jejich vztah a měl by zrcadlit kroky k provedení úlohy. Obvykle to znamená, že kroky úlohy by měly být přirozeně v pořadí zleva doprava a shora dolů (v západních kulturách).

Víte, že rozložení má dobrý tok, když:

• Umístění prvků uživatelského rozhraní odráží kroky, které uživatelé potřebují k provedení úlohy.
• Prvky uživatelského rozhraní, které spouští úlohu, jsou v levém horním rohu nebo v horním rohu.
• Prvky uživatelského rozhraní, které dokončí úlohu, jsou v pravém dolním rohu.
• Související prvky uživatelského rozhraní jsou společně; nesouvisející prvky jsou oddělené.
• Požadované kroky jsou v hlavním toku.
• Volitelné kroky jsou mimo hlavní tok, pravděpodobně se zvýrazňují pomocí vhodného pozadí nebo progresivního zveřejnění.
• Často používané prvky se zobrazují před zřídka používanými prvky v cestě kontroly.
• Uživatelé vždy vědí, co dělat dál. V toku úloh nejsou žádné neočekávané přeskakování nebo přerušení.

nesprávná odpověď:

V tomto příkladu uživatelé neví, co dělat dál. V toku úloh dochází k neočekávaným skokům a přerušením.

správně:

V tomto příkladu prezentace prvků uživatelského rozhraní odráží kroky k provedení úlohy.

Seskupení

Rozložení má seskupení, pokud logicky související prvky uživatelského rozhraní mají jasný vizuální vztah. Skupiny jsou důležité, protože uživatelům je snazší porozumět skupině souvisejících položek a zaměřit se na ně samostatně. Skupiny usnadňují rozložení a usnadňují parsování.

Seskupení můžete zobrazit následujícími způsoby (při zvyšování tíhy):

• Rozložení. Související ovládací prvky můžete seskupit vedle sebe a umístit nadbytečné mezery mezi nesouvisejícími ovládacími prvky.

  

  V tomto příkladu se k zobrazení relací ovládacích prvků používá samotné rozložení.

• Oddělovače. Oddělovač je vodorovná nebo svislá čára, která sjednocuje skupinu ovládacích prvků. Oddělovače poskytují jednodušší a přehlednější vzhled. Na rozdíl od skupinových polí ale fungují nejlépe, když překlenují celý povrch.

  

  V tomto příkladu se k zobrazení vztahů ovládacích prvků používají oddělovače označených popiskem.

• Agregátory. Agregátor je grafika, která vytváří vizuální vztah mezi ovládacími prvky se silnými souvislostmi.

  elipsy

  V tomto příkladu se agregátor hranic používá ke zdůraznění vztahu mezi ovládacími prvky a aby se cítily jako jeden ovládací prvek místo osmi.

• Seskupovací pole Pole skupiny je označený obdélníkový rámeček, který obklopuje sadu souvisejících ovládacích prvků.

  

  V tomto příkladu se skupinový rámeček ohraničí a označí sadou souvisejících ovládacích prvků.

• Pozadí. Pozadí můžete použít ke zvýraznění nebo zrušení zvýraznění různých typů obsahu.

  

  V tomto příkladu se podokno úloh ovládacího panelu používá k seskupení souvisejících úkolů a položek ovládacích panelů.

  Abyste se vyhnuli vizuálnímu nepotřebným prvkům, je nejlepší volbou nejlehčí seskupení hmotnosti, které dobře funguje. Další informace naleznete v tématu Skupinové rámečky, tabulátory, oddělovače a pozadí.

Bez ohledu na styl seskupení můžete pomocí odsazení zobrazit vztah ovládacích prvků ve skupině. Ovládací prvky, které jsou mezi sebou, by měly být zarovnané doleva a závislé ovládací prvky jsou odsazené 12 DLU nebo 18 relativních pixelů.

Závislé ovládací prvky jsou odsazené 12 DLUS nebo 18 relativních pixelů, což je podle návrhu vzdálenost mezi zaškrtávacími políčky a přepínači od jejich popisků.

Víte, že rozložení má dobré seskupení, když:

• Okno nebo stránky mají maximálně 7 skupin.
• Účel každé skupiny je zřejmé.
• Vztah ovládacích prvků v rámci každé skupiny je zřejmý, zejména závislost ovládacích prvků.
• Seskupování zjednodušuje obsah a nekompiluje ho.

Zarovnání

Zarovnání je koordinované umístění prvků uživatelského rozhraní. Zarovnání je důležité, protože usnadňuje prohledávání obsahu a ovlivňuje vnímání vizuální složitosti uživatelů.

Při určování sladění je potřeba zvážit několik cílů:

• Snadné vodorovné skenování. Uživatelé můžou číst vodorovně a hledat související položky vedle sebe, aniž by museli mít mezery.
• Snadné vertikální skenování. Uživatelé můžou prohledávat sloupce souvisejících položek a okamžitě najít, co hledají, s minimálním horizontálním pohybem oka.
• Minimální vizuální složitost. Uživatelé vnímají, že rozložení je vizuálně složité, pokud má nepotřebné svislé zarovnání čar mřížky.

Vodorovné zarovnání

zarovnání doleva

Vzhledem k pořadí čtení zleva doprava funguje zarovnání doleva dobře pro většinu obsahu. Zarovnání doleva usnadňuje procházení sloupcových dat svisle.

zarovnání doprava

Správné zarovnání je nejlepší volbou pro číselná data, zejména pro sloupce číselných dat. Správné zarovnání funguje také pro tlačítka potvrzení a ovládací prvky zarovnané s pravým okrajem okna.

V tomto příkladu je ovládací prvek progresivního zpřístupnění rozšířeného vyhledávání zarovnaný, protože je umístěn proti pravému okraji okna.

zarovnání na střed

Zarovnání na střed je nejvhodnější pro situace, kdy je nevhodné zarovnání doleva nebo doprava nebo je nevyrovnané.

V tomto příkladu je ovládací prvek přehrávače médií zarovnán na střed, aby se dal vyvážený vzhled.

Necentrujte obsah okna jen kvůli vyplnění místa.

nesprávná odpověď:

V tomto příkladu se obsah nesprávně zacentruje do okna s možností změny velikosti, aby se vyplnilo místo.

Svislé zarovnání

horní elementů

Vzhledem k pořadí čtení shora dolů funguje nejlepší zarovnání pro většinu obsahu. Horní zarovnání usnadňuje procházení prvků uživatelského rozhraní vodorovně.

účaří textu

Při svislém zarovnání ovládacích prvků s textem zarovnejte účaří textu, aby byl plynulý vodorovný tok čtení.

správně:

nesprávná odpověď:

Ve správném příkladu je ovládací prvek a jeho popisek svisle zarovnané podle účaří textu.

Víte, že rozložení má dobré zarovnání, když:

• Je snadné prohledávat vodorovně i svisle.
• Má jednoduchý vizuální vzhled.

Zarovnání popisků

Obecná pravidla zarovnání platí pro popisky ovládacích prvků, ale jedná se o běžný problém, který stojí za zvláštní pozornost. Zarovnání popisků má tyto cíle:

• Snadné vertikální skenování a nalezení správného ovládacího prvku.
• Snadné vodorovné skenování pro přidružení popisků k ovládacím prvkům
• Zjednodušte lokalizaci, zpracování popisků, které se liší délkou v různých jazycích.
• Dobře funguje se kombinací různých délek štítků.
• Umožňuje efektivní využití dostupného místa a vyhněte se zkrácení textu.

Celkovým cílem je snížit množství pohybu očí potřebného k nalezení toho, co uživatelé pravděpodobně hledají, ale povaha ovládacích prvků a to, co uživatelé hledají, závisí na kontextu.

Existují čtyři společné styly umístění popisků a zarovnání, z nichž každá má své výhody:

• Popisky s zarovnáním doleva nad ovládacími prvky
• Popisky s zarovnáním doleva nalevo od ovládacích prvků
• Popisky s odůvodněním vlevo od ovládacích prvků, ovládací prvky nepravidelné na levé straně
• Popisky zprava do bloku vlevo od ovládacích prvků

popisky s zarovnáním doleva nad ovládacími prvky

Tento styl je nejjednodušší lokalizovat, protože rozložení nezávisí na délce popisků, ale zabírá nejvíce svislého prostoru.

Tento styl zabírá nejvíce svislého prostoru, ale je nejjednodušší lokalizovat. Je lepší volbou pro označování převážně interaktivních ovládacích prvků.

Nejvhodnější pro:

• Ovládací prvky označené popisky jsou interaktivní (nejen text).
• Uživatelské rozhraní bude lokalizované. Tento styl si často umožňuje zdvojnásobit nebo dokonce trojitou délku štítku.
• Uživatelské rozhraní používá technologii s pevným rozložením (například Win32).
• Existuje deset nebo méně ovládacích prvků. S více ovládacími prvky se popisky těžko prohledávají.
• Pro popisky je dostatek svislého prostoru.
• Rozložení musí být volné, nejen sloupce.

popisky nalevo od ovládacích prvků doleva

Tento styl je nejjednodušší naskenovat svisle a funguje dobře i v případě, že se popisky výrazně liší v délce, ale je obtížnější přidružit popisek k jeho ovládacímu prvku. Tento styl může v případě potřeby používat víceřádkové popisky.

Tento styl funguje dobře. Existují však dva sloupce, ale vizuálně to vypadá, že existují čtyři, takže se data zobrazují složitější.

Nejvhodnější pro:

• Uživatelé budou pravděpodobně vyhledávat konkrétní popisky svisle.
• Uživatelé pravděpodobně nebudou popisky a ovládací prvky číst zleva doprava a shora dolů.
• Pro přizpůsobení popisků je dostatek vodorovného prostoru.
• Popisky se výrazně liší v délce.
• Existuje mnoho ovládacích prvků, jako jsou formuláře.
• Existuje několik sloupců. Popisky a ovládací prvky se vizuálně zobrazují jako dva jednotlivé sloupce.

popisky s odůvodněním vlevo od ovládacích prvků, ovládací prvky nepravidelné na levé straně

Tento styl usnadňuje procházení popisků svisle a popisků a ovládacích prvků vodorovně a je velmi prostorově efektivní; je ale obtížnější kontrolovat ovládací prvky svisle. Ovládací prvky jsou správné, aby plně využily dostupné místo.

Tento styl je kompaktní a snadno čitelný, ale je obtížné kontrolovat ovládací prvky svisle.

Nejvhodnější pro:

• Uživatelské rozhraní používá technologii rozložení proměnných (například Windows Presentation Foundation).
• Uživatelé budou pravděpodobně vyhledávat konkrétní popisky svisle.
• Uživatelé budou pravděpodobně popisky a ovládací prvky číst zleva doprava a shora dolů.
• Uživatelé pravděpodobně nebudou kontrolovat ovládací prvky svisle.
• Text ovládacího prvku se liší podle délky a bude pravděpodobně zkrácen, pokud byl použit jiný styl.
• Ovládací prvky jsou jen pro čtení, například jen pro čtení textových polí. U jiných ovládacích prvků bude toto zarovnání vypadat šedě. Ovládací prvky se ale můžou po kliknutí upravit.
• Existuje mnoho sloupců, ale několik ovládacích prvků ve sloupci.

popisky zprava nalevo od ovládacích prvků

Tento styl je nejjednodušší číst vodorovně, aby bylo možné popisky přidružit k ovládacím prvkům, ale je obtížné popisky skenovat svisle a nefunguje dobře, když se popiskyList s odsazenými popisky a ovládacími prvky výrazně liší délkou.

Tento styl umožňuje snadnou svislou kontrolu ovládacích prvků, ale ztěžuje procházení popisků svisle.

Nejvhodnější pro:

• Uživatelé budou pravděpodobně popisky a ovládací prvky číst zleva doprava a shora dolů.
• Uživatelé pravděpodobně nebudou prohledávat svisle, aby našli konkrétní popisky, pravděpodobně proto, že:
  • Existuje několik ovládacích prvků.
  • Popisky jsou dobře známé.
  • Ovládací prvky jsou většinou vysvětlující a jsou zřídka prázdné (pravděpodobně mají výchozí hodnoty, aby se zabránilo prázdným ovládacím prvkům).
• Pro přizpůsobení popisků je dostatek vodorovného prostoru.
• Popisky se výrazně neliší v délce.
• Existuje mnoho sloupců. Popisky a ovládací prvky se vizuálně zobrazují jako jeden sloupec.

Před přijetím některého z těchto stylů však zvažte dva další faktory:

• Preferujte styl, který můžete používat konzistentně v rámci programu.
• Popisky s odůvodněním vlevo nad ovládacími prvky nalevo od ovládacích prvků jsou nejběžnějšími styly, takže by měly mít přednost.

Rovnováha

Okno nebo stránka mají rovnováhu, když se jeho obsah rovnoměrně distribuuje na jeho povrchu. Pokud by povrch fyzicky měl stejnou hmotnost, jakou má vizuálně, vyvážené rozložení by nepřecházelo na jednu stranu.

Nejběžnějším problémem s vyrovnáváním je příliš mnoho obsahu na levé straně okna nebo stránky. Zůstatek můžete vytvořit následujícími způsoby:

• Použití větších okrajů na levé straně než vpravo
• Umístění prvků uživatelského rozhraní použitých k dokončení úkolu vpravo
• Umístění prvků uživatelského rozhraní použitých v celém úkolu v centru
• Prodloužení změny velikosti nebo víceřádkových ovládacích prvků
• Strategicky pomocí zarovnání na střed.

Toto dobře vyvážené rozložení stránky průvodce zobrazuje větší levý okraj než pravý, aby se zlepšil zůstatek.

Pokud tyto techniky nedosáhnou rovnováhy, zvažte snížení šířky okna nebo stránky, aby lépe odpovídaly jeho obsahu.

U měnitelných povrchů nezarovnávejte obsah jen na střed, abyste dosáhli rovnováhy. Místo toho udržujte pevný levý horní počátku, definujte maximální plochu povrchu a vyrovnávejte obsah v použitém prostoru.

Rošty

Mřížka je neviditelný základní systém zarovnání. Mřížky můžou být symetrické, ale asymetrické mřížky fungují stejně dobře. Při použití jedním oknem nebo stránkou pomáhají mřížky uspořádat obsah na povrchu. Při opakovaném použití vytvářejí mřížky konzistentní rozložení mezi povrchy.

Počet čar mřížky ovlivňuje vnímání vizuální složitosti. Rozložení s menším počtem čar mřížky je jednodušší než rozložení s více čarami mřížky.

vizuálně složité:

vizuálně jednoduché:

Nepotřebné čáry mřížky vytvářejí vizuální složitost.

Víte, že rozložení efektivně používá mřížky v následujících případech:

• Okna nebo stránky s podobným obsahem nebo funkcí mají podobné rozložení.
• Opakované prvky návrhu se zobrazují v podobných umístěních napříč okny a stránkami.
• Neexistují žádné zbytečné svislé a vodorovné čáry mřížky zarovnání.

Vizuální jednoduchost

Vizuální jednoduchost je vnímání, že rozložení není složitější, než musí být.

Víte, že rozložení má vizuální jednoduchost, když:

• Eliminuje nepotřebné vrstvy okenního chromu.
• Prezentuje obsah s maximálně sedmi snadno identifikovatelnými skupinami.
• Používá zjednodušené seskupení, například rozložení a oddělovače místo skupinových polí.
• Používá zjednodušené ovládací prvky, jako jsou odkazy místo příkazových tlačítek pro sekundární příkazy, a rozevírací seznamy místo seznamů pro volby.
• Zmenšuje počet svislých a vodorovných čar mřížky zarovnání.
• Zmenší počet velikostí ovládacích prvků, například pomocí jedné nebo dvou šířek příkazového tlačítka na povrchu.
• Pomocí progresivního zpřístupnění skryje prvky uživatelského rozhraní, dokud nebudou potřeba.
• Používá dostatek místa, aby se okno nebo stránka necítily stísněné.
• Velikost oken a ovládacíchprvkůch
• Používá jedno písmo s malým počtem velikostí a barev textu.

Obecně platí, že pokud lze prvek rozložení odstranit bez poškození účinnosti uživatelského rozhraní, pravděpodobně by měl být.

Pokyny

Rozlišení obrazovky a dpi

• Podpora minimálního efektivního rozlišení Windows 800 × 600 pixelů. U kritických uživatelských rozhraní, které musí fungovat v nouzovém režimu, podporují efektivní rozlišení 640 × 480 pixelů. Nezapomeňte počítat s místem používaným hlavním panelem tak, že si rezervujete 48 svislých relativních pixelů pro okna zobrazená na hlavním panelu.
• Optimalizujte rozložení oken umožňující změnu velikosti pro efektivní rozlišení 1024 × 768 pixelů. Automaticky změňte velikost těchto oken pro nižší rozlišení obrazovky způsobem, který je stále funkční.
• Nezapomeňte otestovat okna v 96 bodech na palec (dpi) (při 800 × 600 pixelů), 120 dpi (při 1024 × 768 pixelů) a 144 dpi (při 1200 × 900 pixelů). Zkontrolujte problémy s rozložením, jako je výřez ovládacích prvků, textu a oken a roztažení ikon a rastrových obrázků.
• Pro programy se scénáři dotykového ovládání a mobilního použití optimalizujte 120 dpi. Na dotykových a mobilních počítačích aktuálně převládají obrazovky s vysokým rozlišením dpi.

Velikost okna

• Zvolte výchozí velikost okna odpovídající jeho obsahu. Nebojte se použít větší počáteční velikosti oken, pokud můžete prostor efektivně používat.
• Použijte vyváženou výšku k poměru stran šířky. Preferuje se poměr stran mezi 3:5 a 5:3, i když poměr stran 1:3 lze použít pro dialogová okna zpráv (například chyby a upozornění).
• Používejte okna s možností změny velikosti, kdykoli je to praktické, abyste se vyhnuli posuvníkům a zkráceným datům. Windows s dynamickým obsahem, dokumenty, obrázky, seznamy a stromy využívají nejvíce možností změny velikosti oken.
• U textových dokumentů zvažte maximální délku řádku 80 znaků, aby byl text snadno čitelný. (Znaky zahrnují písmena, interpunkci a mezery.)
• Okna s pevnou velikostí:
  • okna s pevnou velikostí musí být zcela viditelná a musí se vejít do pracovní oblasti.
• Okna s možností změny velikosti:

  • můžou být okna s možností změny velikosti optimalizovaná pro vyšší rozlišení, ale velikost je v době zobrazení až do skutečného rozlišení obrazovky nižší.

  • Postupně větší velikosti oken musí zobrazovat postupně více informací. Ujistěte se, že alespoň jedna část okna nebo ovládací prvek má měnitelný obsah.

  • Ponechte levý horní počátku obsahu pevně nastavený při změně velikosti okna. Nepřesouvejte zdroj, aby se při změně velikosti okna vyrovnaly obsah.

  • Pokud je možné obsah příliš roztáhnout, nastavte maximální velikost obsahu. Pokud se obsah stane nepraktným, neměňte velikost oblasti obsahu nad jeho maximální šířku nebo změňte jeho původ, protože se velikost okna zvětší. Místo toho ponechte maximální šířku a pevný původ vlevo nahoře.

  • Pokud je velikost okna nižší, než je obsah použitelný, nastavte minimální velikost okna. U ovládacích prvků s možností změny velikosti nastavte minimální velikosti prvků s možnou velikostí na nejmenší funkční velikosti, například minimální funkční šířky sloupců v zobrazeních seznamů. Volitelné prvky uživatelského rozhraní by se měly úplně odebrat.

  • Zvažte změnu prezentace tak, aby byl obsah použitelný v menších velikostech.

    

    V tomto příkladu windows Media Player změní formát, když se okno změní na příliš malý formát standardního formátu.

Velikost ovládacího prvku

• Nastavení všech interaktivních ovládacích prvků alespoň relativních 16 × 16 pixelů To funguje dobře pro všechna vstupní zařízení, včetně windows tabletu a dotykové technologie.

• Ovládací prvky velikosti, aby nedocházelo ke zkrácení dat. Nezkrátí data, která musí být přečtená, aby bylo možné provést úlohu. Velikost sloupců zobrazení seznamu, aby nedocházelo ke zkrácení dat.

• Ovládací prvky velikosti, které eliminují zbytečné posouvání. Pokud to uděláte, zvětší se ovládací prvky. Měl by existovat několik svislých posuvníků a žádné zbytečné vodorovné posuvníky.

  posuvníku

  V tomto příkladu je rozevírací seznam velikostí, která eliminuje posuvník.

• Snižte počet velikostí ovládacích prvků na povrchu. Preferujte použití standardních doporučených velikostí ovládacích prvků a v případě potřeby použijte několik konzistentně větších nebo menších ovládacích prvků. Zkuste použít jednu šířku pro seznamová pole a stromová zobrazení a ne více než tři šířky pro příkazová tlačítka a rozevírací seznamy. Šířky textového pole a pole se seznamem by ale měly navrhovat délku jejich nejdelšího nebo očekávaného vstupu.

  

  V tomto příkladu se konzistentně používá jedno pole seznamu a velikost příkazového tlačítka.

• U ovládacích prvků, které mají velikost na základě textu, uveďte dalších 30 procent (až 200 procent pro kratší text) pro libovolný text, který bude lokalizován. Toto vodítko předpokládá, že rozložení je navržené pomocí anglického textu. Všimněte si také, že toto vodítko odkazuje na lokalizovaný text, ne čísla.

• Rozšiřte ovládací prvky statického textu, zaškrtávací políčka a přepínače na maximální šířku, která se vejde do rozložení. Tím se vyhnete zkrácení textu a lokalizace s proměnlivou délkou.

  nesprávná odpověď:

  

  V tomto příkladu je text ovládacího prvku zbytečně zkrácený.

Mezery ovládacích prvků

• Pokud se ovládací prvky nedotknou, mají mezi nimi alespoň 3 DLU (5 relativních pixelů). V opačném případě mohou uživatelé kliknout na neaktivní mezeru mezi ovládacími prvky. Vzhledem k tomu, že kliknutí na neaktivní místo nemá žádný výsledek nebo vizuální zpětnou vazbu, uživatelé si často nejsou jistí, co se nepovedlo.

Umístění

• Uspořádejte prvky uživatelského rozhraní na povrchu tak, aby se přirozeně spouštěly v pořadí zleva doprava a shora dolů (v západních kulturách). Umístění prvků uživatelského rozhraní vyjadřuje jejich vztah a měl by zrcadlit kroky k provedení úlohy.
• Umístěte prvky uživatelského rozhraní, které iniciují úlohu v levém horním rohu nebo v horním rohu. Dejte prvku uživatelského rozhraní, na který by se uživatelé měli podívat jako na největší vizuální důraz.
• Umístit prvky uživatelského rozhraní, které dokončí úlohu v pravém dolním rohu.
• Umístit související prvky uživatelského rozhraní dohromady a oddělit nesouvisející prvky.
• Umístěte požadované kroky do hlavního toku.
• Umístěte volitelné kroky mimo hlavní tok, pravděpodobně zvýraznit pomocí vhodného pozadí nebo progresivního zveřejnění.
• Umístit často používané prvky před zřídka používanými prvky v cestě kontroly.

Ohnisko

• Zvolte jeden prvek uživatelského rozhraní, na který se uživatelé musí podívat, aby se nejprve mohli zaměřit na ústřední bod. Ústředním bodem by mělo být něco důležitého, co uživatelé potřebují rychle najít a pochopit.
• Umístěte ústřední bod do levého horního rohu nebo do horního středu.
• Dejte ústřednímu bodu největší vizuální důraz,, jako je výrazný text, výchozí výběr nebo počáteční fokus vstupu.

Zarovnání

• Za normálních okolností použijte zarovnání doleva.
• Používejte správné zarovnání pro číselná data, zejména sloupce číselných dat.
• Pro tlačítka potvrzení a ovládací prvky zarovnané s pravým okrajem okna použijte správné zarovnání.
• Zarovnání na střed použijte, pokud je zarovnání doleva nebo doprava nevhodné nebo je nevyvážené.
• Při svislém zarovnání ovládacích prvků s textem zarovnejte účaří textu, aby byl plynulý vodorovný tok čtení.
• Zarovnání popisků najdete v části Zarovnání popisků v konceptech návrhu.

Přístupnost

• Nepoužívejte rozložení jako jediný způsob, jak sdělit důležité informace o uživatelském rozhraní. Uživatelé, kteří mají zrakové postižení, nemusí být schopni tuto prezentaci interpretovat. Ujistěte se například, že ovládací prvky komunikují se svým vztahem k jiným položkám.

• Nevkládejte podřízené ovládací prvky do popisků ovládacích prvků a vytvořte větu nebo frázi. Taková přidružení jsou založena čistě na rozložení a nejsou dobře zpracována pomocí navigace pomocí klávesnice nebo technologie usnadnění přístupnosti. Tato technika navíc není lokalizovatelná, protože struktura vět se liší podle jazyka.

  nesprávná odpověď:

  

  V tomto příkladu je textové pole nesprávně umístěné v popisku zaškrtávacího políčka.

  správně:

  

  Toto textové pole se umístí za popisek zaškrtávacího políčka.

• Usnadnění seskupování Skupiny definované pomocí podoken oken, skupinových polí, oddělovačů, popisků textu a agregátorů se automaticky zpracovávají pomocí usnadnění přístupu. Skupiny definované pouze umístěním a pozadími však nejsou a musí být definovány programově pro usnadnění přístupu.

Další pokyny najdete v tématu přístupnosti .

Doporučená velikost a mezery

nastavení velikosti ovládacích prvků

V následující tabulce jsou uvedeny doporučené velikosti (šířka x výška nebo výška, pokud je jedno číslo) pro běžné prvky uživatelského rozhraní (pro 9 bodů. Segoe UI při 96 dpi). Šířky založené na nejdelší položce v angličtině přičtou 30 procent pro lokalizaci (až 200 procent pro kratší text) pro libovolný text (ale ne čísla), které budou lokalizovány.

Příklad	Řízení	Jednotky dialogového okna	Relativní pixely
	Políčka	10	17
pole se seznamem	Seznamem	šířka nejdelší položky + 30% x 14	šířka nejdelší položky + 30% x 23
	Příkazová tlačítka	50 x 14	75 x 23
	Příkazové odkazy	25 (jedna čára) nebo 35 (dvě čáry)	41 (jeden řádek) nebo 58 (dvě čáry)
	Rozevírací seznamy	šířka nejdelších platných dat + 30% x 14	šířka nejdelší položky + 30% x 23
	Seznam polí	šířka nejdelší položky + 30% x celočíselný počet položek (minimálně 3 položky)
	Zobrazení seznamu	šířky sloupců, které se vyhýbají zkrácení dat x celočíselnému počtu položek
	Indikátory průběhu	107 nebo 237 x 8	160 nebo 355 x 15
	Přepínače	10	17
posuvníku	Jezdců	15	24
	Text (statický)	8	13
	Textová	šířka nejdelšího nebo očekávaného vstupu + 30% x 14 (jeden řádek) + 10 pro každou další čáru	šířka nejdelších platných dat + 30% x 23 relativních pixelů (jedna čára) + 16 pro každou další čáru
	Stromová zobrazení	šířka nejdelší položky + 30% x celočíselný počet položek (minimálně 5 položek)

mezery

Následující tabulka uvádí doporučené mezery mezi běžnými prvky uživatelského rozhraní (pro 9 bodů. Segoe UI při 96 dpi).

	Element	Jednotky dialogového okna	Relativní pixely
	Okraje dialogového okna	7 na všech stranách	11 na všech stranách
	Mezi textovými popisky a souvisejícími ovládacími prvky (například textová pole a seznam)	3	5
	Mezi souvisejícími ovládacími prvky	4	7
	Mezi nesouvisejícími ovládacími prvky	7	11
	První ovládací prvek v poli skupiny	11 dolů od horní části skupinového rámečku; Zarovnat svisle k názvu pole skupiny	16 dolů od horní části skupinového rámečku; Zarovnat svisle k názvu pole skupiny
	Mezi ovládacími prvky v poli skupiny	4	7
	Mezi vodorovně nebo svisle uspořádanými tlačítky	4	7
	Poslední ovládací prvek v poli skupiny	7 nad dolní částí skupinového rámečku	11 nad dolní částí skupinového rámečku
	Z levého okraje skupinového pole	6	9
	Textový popisek vedle ovládacího prvku	3 dolů od horní části ovládacího prvku	5 dolů od horní části ovládacího prvku
	Mezi odstavci textu	7	11
	Nejmenší prostor mezi interaktivními ovládacími prvky	3 nebo bez mezery	5 nebo žádné mezery
	Nejmenší mezera mezi neinteraktivním ovládacím prvku a jakýmkoli jiným ovládacím prvku	2	3