Mozgásfunkciók a Windowsban

A mozgás azt ismerteti, hogy a felület hogyan animál és reagál a felhasználói interakciókra. A Windows mozgása reaktív, közvetlen és környezetfüggő. Visszajelzést nyújt a felhasználói bemenetekről, és megerősíti az útkeresést támogató térbeli paradigmákat.

Jótanács

Ez a cikk a Fluent Design nyelv alkalmazását ismerteti Windows alkalmazásokra. További információ: Fluent Design - Motion.

Mozgási alapelvek

Ezek az alapelvek vezérlik a mozgás használatát Windows.

Csatlakoztatva: A műveletek elemei zökkenőmentesen csatlakoznak egymáshoz

A pozíciót és méretet módosító elemeknek vizuálisan csatlakozniuk kell az egyik állapotból a másikhoz, még akkor is, ha nincsenek csatlakoztatva a motorháztető alatt. A felhasználók a pontról pontra haladva követik az elemeket, csökkentve a statikus állapot változásainak kognitív terhelését.

Példa: Amikor egy ablak átvált a lebegő, a dokkolt és a teljes méret között, mindig ugyanannak az ablaknak tűnik.

Jótanács

Az akadálymentesség és az olvashatóság javítása érdekében ez a lap állóképeket használ az alapértelmezett nézetben. Az animált verzió megjelenítéséhez kattintson egy képre.

Konzisztens: Az elemeknek hasonlóan kell viselkedniük a belépési pontok megosztásakor

Az azonos felhasználói felületi belépési ponttal rendelkező felületeknek ugyanúgy kell meghívni és bezárni a következetességet az interakciókban biztosítva. Minden átmenetnek figyelembe kell vennie a többi elem időzítését, lazítását és irányát, hogy a surface összetartónak érezhesse magát.

Példa: Az összes tálcai előugró panel felfelé csúszik, amikor megnyitják, és lefelé csúszik, amikor bezárják.

Kattintson a képre az animált megjelenítéséhez.

Rugalmas: A rendszer válaszol, és alkalmazkodik a felhasználói bemenethez és a választási lehetőségekhez

A világos jelzők azt mutatják, hogy a rendszer felismeri és elegánsan alkalmazkodik a különböző bemenetekhez, testtartásokhoz és tájolásokhoz. Az alkalmazásoknak az operációs rendszer viselkedésére kell épülnie, hogy rugalmasnak, élőnek érezzék magukat, és segítsék a használatot a bemeneti módszerektől függően.

Példa: A tálcán megjelenő ikonok szétterülnek a billentyűzet leválasztásakor. Az ablak szélei a kurzortól vagy az érintéses bemenettől függően eltérő vizualizációt hívnak meg.

Kattintson a képre az animált megjelenítéséhez.

Örömteli: Váratlan örömteli pillanatok céltudatossággal

A mozgás személyiséget és energiát ad a tapasztalathoz, hogy az egyszerű műveleteket öröm pillanatává alakítsa. Ezek a pillanatok mindig rövidek és mulandóak, és segítenek a felhasználói műveletek megerősítésében.

Példa: Az ablak minimalizálása esetén az alkalmazás ikonja lepattan, a visszaállítás közben pedig felfelé pattog egy alkalmazásikon.

Egy animált kép, amely az alkalmazás ikonját mutatja, amikor az ablak le van kicsinyítve, és az ikon lefelé pattan ekkor, majd felfelé pattan, amikor az ablak visszaáll.

Kattintson a képre az animált megjelenítéséhez.

Erőforrás:Meglévő vezérlők használata a konzisztenciához, ahol lehetséges

Lehetőség szerint kerülje az egyéni animációkat. Használjon animációs erőforrásokat, például WinUI 3 vezérlőket az oldaláttűnésekhez, az oldalfókuszhoz és a mikro interakciókhoz. Ha nem tudja használni a WinUI-vezérlőket, az alkalmazás belépési pontjának helye alapján utánozza a meglévő operációsrendszer-viselkedéseket.

Példa:Az oldaláttűnések, a csatlakoztatott animációk és az animált ikonok az ajánlott WinUI-vezérlők, amelyek kellemes és szükséges mozgást adnak az alkalmazásokhoz.

Kattintson a képre az animált megjelenítéséhez.

Példák

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a mozgási példákat működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Usage

Animáció tulajdonságai

Windows mozgás gyors, közvetlen és környezetfüggő. Az időzítési és lazítási görbék az animáció célja alapján vannak igazítva, hogy koherens élményt teremtsen.

Cél	Definition	** Könnyedség	Időzítés	A következőhöz használatos:
Közvetlen bejárat	Gyors – Be	cubic-bezier(0,0,0,1)	167, 250, 333	Pozíció, Skálázás, Forgatás
Meglévő elemek	Pont–pont	cubic-bezier(0.55,0.55,0,1)	167, 250, 333 ms	Pozíció, Skálázás, Forgatás
Közvetlen kilépés	Gyors – Kikapcsolva	cubic-bezier(0,0,0,1)	167 ms	Pozíció, Skálázás, Forgatás (MINDIG kombinálva az elhalványulással)
Gyengéd kilépés	Puha – Ki	Cubic-bezier(1,0,1,1)	167 ms	Pozíció, Skálázás
A szükséges minimum	Elhalványulás – Be + Ki	Lineáris	83 ms	Átlátszatlanság
Erős bejárat	Rugalmas in (3 kulcskeret)	(3 érték alább)	(3 érték alább)	Pozíció, Skálázás
	Keyframe 1	Kubic-Bezier(0.85, 0, 0, 1)	167 ms
	Keyframe 2	Kocka-bézier(0.85, 0, 0.75, 1)	167 ms
	Keyframe 3	Kubic-Bezier(0.85, 0, 0, 1)	333 ms

Vezérlők

A Windows ezen kiadása céltudatos mikro-interakciókat vezet be WinUI vezérlőkben. Adja hozzá ezeket a vezérlőket az alkalmazásához, hogy jobban megszervezhesse az információkat, és segítse az alkalmazás felhasználóinak gördülékeny átmenetet a lapok, rétegek és az interakció állapotai között.

Áttűnés lapról lapra: Lapról lapra áttűnés ugyanabban a felületen

Az oldaláttűnések használatával zökkenőmentesen válthat lapról lapra, és animációs irányokat konfigurálhat az alkalmazások folyamatának tiszteletben tartásához.

Az oldaláttűnések a felhasználói szemeket a bejövő és kimenő tartalmakra irányítják, csökkentve a kognitív terhelést.

Kattintson a képre az animált megjelenítéséhez.

Csatlakoztatott animáció: Rétegről rétegre áttűnések ugyanazon az oldalon

A összekapcsolt animációk segítségével kiemelhet bizonyos információkat egy lapon vagy felületen, miközben megőrzi az összefüggéseket.

A csatlakoztatott animációk a kijelölt elemekre összpontosítanak, és zökkenőmentesen váltanak a fókuszált és a nem fókuszált állapotok között.

Kattintson a képre az animált megjelenítéséhez.

Animált ikon: Örömöt ad hozzá, és mikro interakciókon keresztül mutatja be az információkat

Animált ikonok használatával egyszerű, vektoralapú ikonokat és ábrákat valósíthat meg mozgással Lottie-animációk használatával.

Az animált ikonok felhívják a figyelmet bizonyos belépési pontokra, állapotról állapotra vonatkozó visszajelzést adnak, és örömet adnak az interakcióknak.

Kattintson a képre az animált megjelenítéséhez.