Techniky responzivního návrhu

Responzivní návrh používá pouze jedno rozložení, ve kterém je obsah proměnlivý a může se přizpůsobit měnícím se velikostem oken. Responzivní návrh umožňuje vytvořit funkci jednou a očekávat, že bude fungovat ve všech velikostech obrazovky. Adaptivní návrh je podobný, ale nahrazuje jedno rozložení jiným rozložením.

Aplikace XAML používají efektivní pixely, aby se zajistilo, že uživatelské rozhraní bude čitelné a použitelné na všech Windows zařízeních. Proč byste tedy někdy chtěli uživatelské rozhraní aplikace přizpůsobit pro konkrétní zařízení nebo velikost obrazovky?

• Pokud chcete co nejefektivnější využití místa a snížit potřebu navigace

  Pokud navrhnete aplikaci tak, aby vypadala dobře na zařízení, které má malou obrazovku, jako je tablet, bude aplikace použitelná na počítači s mnohem větším displejem, ale pravděpodobně bude nějaký nedostatek místa. Aplikaci můžete přizpůsobit tak, aby zobrazovala více obsahu, když je obrazovka nad určitou velikostí. Například nákupní aplikace může na tabletu současně zobrazovat jednu kategorii zboží, ale současně zobrazovat více kategorií a produktů na počítači nebo přenosném počítači.

  Umístěním dalšího obsahu na obrazovku snížíte množství navigace, kterou uživatel potřebuje provést.

• Využití možnostízařízeních

  Některá zařízení bývají vybavena určitými funkcemi. Například přenosné počítače budou mít pravděpodobně senzor polohy a kameru, zatímco televize nemusí mít ani jeden. Vaše aplikace dokáže zjistit, které funkce jsou k dispozici, a povolit funkce, které je používají.

• Optimalizace pro vstup

  Univerzální knihovna ovládacích prvků funguje se všemi typy zadávání (dotykové ovládání, pero, klávesnice, myš), ale můžete i tak optimalizovat určité typy zadávání tím, že znovu uspořádáte prvky uživatelského rozhraní.

Když optimalizujete uživatelské rozhraní aplikace pro konkrétní šířky obrazovky, říkáme, že vytváříte responzivní návrh. Tady jsou některé techniky responzivního návrhu, které můžete použít k přizpůsobení uživatelského rozhraní aplikace.

Přemístit

Umístění a pozici prvků uživatelského rozhraní můžete změnit, aby co nejlépe využily velikost okna. V tomto příkladu menší okno rozmisťuje prvky svisle. Když se aplikace přeloží na větší okno, můžou prvky využívat širší šířku okna.

V tomto příkladu návrhu fotoaplikace přemísťuje aplikace fotky svůj obsah na větší obrazovky.

Změnit velikost

Velikost okna můžete optimalizovat úpravou okrajů a velikosti prvků uživatelského rozhraní. To by například mohlo rozšířit prostředí pro čtení na větší obrazovce tím, že jednoduše zvětší rámec obsahu.

Přeložení

Změnou toku prvků uživatelského rozhraní na základě zařízení a orientace může vaše aplikace nabídnout optimální zobrazení obsahu. Například při přechodu na větší obrazovku může být vhodné přidávat sloupce, používat větší kontejnery nebo generovat položky seznamu jiným způsobem.

Tento příklad ukazuje, jak lze na menší obrazovce zobrazit jeden sloupec obsahu posouvajícího se vertikálně, který může být na větší obrazovce přeformátován tak, aby zobrazoval dva sloupce textu.

Zobrazit/skrýt

Prvky uživatelského rozhraní můžete zobrazit nebo skrýt na základě dostupného prostoru na obrazovce nebo při/chce-li zařízení podporovat další funkce, určité situace, případně preferovanou orientaci obrazovky.

Ovládací prvky přehrávače médií například snižují nastavení tlačítka na menších obrazovkách a rozbalují se na větších obrazovkách. Přehrávač médií ve větším okně dokáže zvládnout mnohem více funkcí na obrazovce, než může v menším okně.

Součástí techniky odhalení nebo skrytí je volba, kdy se mají zobrazit další metadata. V menších oknech je nejlepší zobrazit minimální množství metadat. Při větších oknech se může zobrazit značné množství metadat. Mezi příklady zobrazení nebo skrytí metadat patří:

• V e-mailové aplikaci můžete zobrazit avatar uživatele.
• V hudební aplikaci můžete zobrazit další informace o albu nebo interpretovi.
• Ve video appu můžete zobrazit další informace o filmu nebo show, například zobrazení podrobností o obsazení a posádkě.
• V libovolné aplikaci můžete rozdělit sloupce a zobrazit další podrobnosti.
• V libovolné aplikaci můžete vzít něco, co je svisle skládané, a rozložit to vodorovně. Při přechodu z malého okna do většího okna se položky skládaného seznamu můžou změnit, aby se zobrazily řádky položek seznamu a sloupců metadat.

Změna architektury

Pokud chcete lépe cílit na konkrétní zařízení, můžete architekturu aplikace sbalit nebo vytvořit fork. V tomto příkladu se rozbalením okna zobrazí celý vzor seznamu a podrobností.

Adaptivní rozložení

Adaptivní rozložení je podobné responzivnímu rozložení, ale zcela nahrazuje uživatelské rozhraní na základě formátu, ve který je prezentován. Adaptivní návrh má několik pevných velikostí rozložení a aktivuje stránku pro načtení daného rozložení na základě dostupného prostoru.

Tato technika umožňuje přepnout uživatelské rozhraní pro konkrétní mezní body. V tomto příkladu funguje navigační podokno a jeho kompaktní dočasné uživatelské rozhraní dobře pro menší obrazovku, ale na větší obrazovce mohou být lepší volbou karty.

Ovládací prvek NavigationView tuto techniku podporuje tím, že umožňuje uživatelům nastavit pozici podokna na horní nebo levou.

Příbuzná témata

• Fluent Design – rozložení
• Velikosti obrazovky a zarážky
• Responzivní rozložení s XAML
• Ovládací prvky XAML