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.

Animovaný obrázek Na levé straně se ikony na hlavním panelu rozprostírají, když je odpojená klávesnice. Na pravé straně mají hrany oken různé vizuální efekty při manipulaci s kurzorem nebo dotykovým vstupem.

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.

Animovaný obrázek s ikonou aplikace se po minimalizaci okna odrazí dolů a po obnovení okna se 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.

Ikona galerie WinUI 3

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í připojených animací můžete při zachování kontextu zvýraznit konkrétní části informací na stránce nebo surface.

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

Animovaný obrázek aplikace Microsoft Store, který na stránce zobrazuje obrázek, který se animací přibližuje.

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.

Animovaný obrázek znázorňující mřížku různých příkladů animovaných ovládacích prvků ikon

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