Pohyb ve Windows

Pohyb popisuje způsob animace rozhraní a odpovídá na interakci uživatele. Pohyb ve Windows je vhodný jako reaktivní, přímý a kontext. Poskytuje zpětnou vazbu k uživatelským vstupům a posiluje prostorová paradigmata, která podporují hledání cest.

Návod

Tento článek popisuje, jak se u aplikací pro Windows používá jazyk Fluent Design . Další informace naleznete v tématu Fluent Design - Motion.

Principy pohybu

Tyto principy vedou k používání pohybu ve Windows.

Připojeno: Prvky akcí se bezproblémově připojují

Prvky, které mění umístění a velikost, by se měly vizuálně propojit z jednoho stavu do druhého, i když nejsou propojené pod kapotou. Uživatelé se řídí sledováním prvků směřujících z bodu do bodu a snížení kognitivního zatížení změn statického stavu.

Příklad: Když se okno přepne mezi plovoucí, přichycenou a maximalizovanou, bude vždy vypadat jako stejné okno.

Návod

Pro zlepšení přístupnosti a čitelnosti tato stránka používá obrázky ve výchozím zobrazení. Kliknutím na obrázek můžete zobrazit animovanou verzi.

Konzistentní: Prvky by se měly při sdílení vstupních bodů chovat podobným způsobem.

Povrchy, které sdílejí stejný vstupní bod uživatelského rozhraní, by se měly vyvolat a zavřít stejným způsobem, jak zajistit konzistenci interakcí. Každý přechod by měl respektovat načasování, usnadnění a směr ostatních prvků, takže povrch je soudržný.

Příklad: Všechny kontextové rámečky hlavního panelu se při vyvolání posunou nahoru a po zavření se posunou dolů.

Kliknutím na obrázek ho zobrazíte animovaným.

Responzivní: Systém reaguje a přizpůsobuje se uživatelským vstupům a možnostem

Jasné indikátory ukazují, že systém rozpoznává a přizpůsobuje se elegantně různým vstupům, postojům a orientacem. Aplikace by měly stavět na chování operačního systému, aby se cítily responzivní, naživu a v závislosti na metodách vstupu.

Příklad: Ikony na hlavním panelu se rozprostírají, když jsou klávesnice odpojené. Hrany oken vyvolávají jiný vizuál v závislosti na kurzoru nebo dotykovém vstupu.

Kliknutím na obrázek ho zobrazíte animovaným.

Nádherné: Neočekávané momenty radosti s účelem

Pohyb do prostředí přidává osobnost a energii, aby se jednoduché akce přeměnily na okamžiky potěšení. Tyto momenty jsou vždy stručné a letmé a pomáhají posílit akce uživatelů.

Příklad: Minimalizace okna způsobí, že se ikona aplikace odrazí dolů, zatímco obnovení ikony aplikace nahoru.

Kliknutím na obrázek ho zobrazíte animovaným.

Zdroj: Využívá existující ovládací prvky k zajištění konzistence tam, kde je to možné

Pokud je to možné, vyhněte se vlastním animacím. Používejte animační prostředky, jako jsou ovládací prvky WinUI pro přechody stránek, fokus na stránce a mikro interakce. Pokud nemůžete použít ovládací prvky WinUI, napodobujte stávající chování operačního systému na základě toho, kde se nachází vstupní bod aplikace.

Příklad:Přechody stránek, propojené animace a animované ikony jsou doporučené ovládací prvky WinUI, které do aplikací přidávají nádherný a nezbytný pohyb.

Kliknutím na obrázek ho zobrazíte animovaným.

Examples

Otevřete aplikaci Galerie WinUI 3 a podívejte se na příklady pohybu v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady většiny ovládacích prvků, funkcí a funkcí WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Usage

Vlastnosti animace

Pohyb ve Windows je rychlý, přímý a kontext vhodný. Časování a odlehčení křivek se upraví na základě účelu animace a vytvoří koherentní prostředí.

Účel	Definition	Snadnost	Načasování	Používá se pro
Přímý vstup	Rychle – v	Krychlový bezier(0,0;1)	167, 250, 333	Pozice, měřítko, otočení
Existující prvky	Bod k bodu	Krychlový bezier(0,55;0,55;0;1)	167, 250, 333 ms	Pozice, měřítko, otočení
Přímý východ	Rychlé – ven	Krychlový bezier(0,0;1)	167 ms	Pozice, měřítko, otočení (VŽDY kombinovat s vyblednutím)
Jemný východ	Měkké – ven	Krychlový bezier(1,0;1;1)	167 ms	Pozice, měřítko
Minimum	Fade – In + Out	Lineární	83 ms	Neprůhlednost
Silný vchod	Elastic in (3 klíčové snímky)	(3 níže uvedené hodnoty)	(3 níže uvedené hodnoty)	Pozice, měřítko
	Klíčový snímek 1	Krychlový Bezier(0,85; 0; 0; 1)	167 ms
	Klíčový snímek 2	Krychlový Bezier(0,85, 0, 0,75; 1)	167 ms
	Keyframe 3	Krychlový Bezier(0,85; 0; 0; 1)	333 ms

Ovládání

Tato verze Windows zavádí účelné mikro interakce v ovládacích prvcích WinUI . Přidejte tyto ovládací prvky do aplikace, které pomáhají lépe uspořádat informace a pomoci uživatelům aplikace přejít ze stránky na stránku, vrstvu na vrstvu a stav interakce.

Přechod stránky: Přechody mezi stránkami v rámci stejného povrchu

Přechody stránek můžete použít k hladkému přechodu ze stránky na stránku a ke konfiguraci navigačních pokynů animace, aby respektovaly tok aplikace.

Přechody stránek vedou uživatele k příchozímu a odchozímu obsahu a snižují kognitivní zatížení.

Kliknutím na obrázek ho zobrazíte animovaným.

Připojená animace: Přechody vrstvy na vrstvu na stejné stránce

Pomocí propojených animací můžete zvýraznit určité informace na stránce nebo povrchu a zachovat kontext.

Připojené animace poskytují fokus vybraným prvkům a bezproblémově přecházejí mezi fokusem a nestředěné stavy.

Kliknutím na obrázek ho zobrazíte animovaným.

Animované ikony: Přidá radost a odhalí informace prostřednictvím mikro interakcí

Pomocí animovaných ikon můžete implementovat jednoduché vektorové ikony a ilustrace s pohybem pomocí animací Lottie .

Animované ikony upoutají pozornost na konkrétní vstupní body, poskytují zpětnou vazbu ze stavu do stavu a přidávají radost k interakci.

Kliknutím na obrázek ho zobrazíte animovaným.