Pohyb v Windows

Pohyb popisuje způsob animace rozhraní a odpovídá na interakci uživatele. Pohyb v Windows je reaktivní, přímý a kontext vhodný. 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 pro aplikace Windows používá jazyk Fluent Design. Další informace naleznete v tématu Fluent Design - Motion.

Principy pohybu

Tyto zásady vedou k používání pohybu v 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é jsou vedeni sledováním prvků, které se pohybují z bodu na bod, což snižuje kognitivní zatížení při změnách statického stavu.

Příklad: Když se okno přepne mezi plovoucím, přichyceným a maximalizovaným stavem, vždy působí 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, aby se zajistila konzistence interakcí. Každý přechod by měl respektovat načasování, zjemnění a směr ostatních prvků, aby povrch působil 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 využívat chování operačního systému, aby se cítily rychle reagující, živé a usnadňovaly používání 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í okna způsobí, že se ikona aplikace odrazí nahoru.

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

Vynalézavý: 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žijte animační prostředky, jako jsou ovládací prvky WinUI 3 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 ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Usage

Vlastnosti animace

Pohyb oken je rychlý, přímý a vhodný pro kontext. Č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, rotace
Existující prvky	Bod k bodu	cubic-bezier(0.55, 0.55, 0, 1)	167, 250, 333 ms	Pozice, měřítko, rotace
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é ukončení	Měkké – ven	cubic-bezier(1,0,1,1)	167 ms	Pozice, měřítko
Nezbytné minimum	Zmizení – Vstup a Výstup	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	Cubic-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	Cubic-Bezier(0.85, 0, 0, 1)	333 ms

Ovládání

Tato verze Windows zavádí účelné mikroakakce 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 ve stejném rozhraní

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.