Bewegung in Windows 11

Bewegung beschreibt die Art und Weise, wie die Oberfläche animiert wird und auf Benutzerinteraktionen reagiert. Bewegung in Windows ist reaktiv, direkt und kontextangemessen. Sie reagiert auf Benutzereingaben und verstärkt räumliche Paradigmen, die es Benutzern ermöglichen,. ihren Weg zu finden.

Bewegungsprinzipien

Diese Prinzipien leiten die Verwendung von Bewegung in Windows.

Verbunden: Elemente von Aktionen verbinden sich nahtlos

Elemente, die Position und Größe ändern, sollten sich visuell von einem Zustand zum anderen verbinden, auch wenn sie nicht unter der Haube verbunden sind. Benutzer werden angeleitet, Elemente von Punkt zu Punkt zu folgen, wodurch die kognitive Last statischer Zustandsänderungen verringert wird.

Beispiel: Wenn ein Fenster zwischen schwebend, angeknockt und maximiert wechselt, fühlt es sich immer wie dasselbe Fenster an.

Tipp

Um die Barrierefreiheit und Lesbarkeit zu verbessern, verwendet diese Seite Standbilder in der Standardansicht. Sie können auf ein Bild klicken, um die animierte Version anzuzeigen.

Konsistent: Elemente sollten sich beim Freigeben von Einstiegspunkten ähnlich verhalten

Oberflächen, die denselben Benutzeroberflächeneinstiegspunkt verwenden, sollten die gleiche Methode aufrufen und schließen, um Konsistenz in Interaktionen zu bringen. Jeder Übergang sollte das Timing, die Beschleunigung und die Richtung anderer Elemente berücksichtigen, damit sich eine Oberfläche kohärent anfühlt.

Beispiel: Alle Taskleisten-Flyouts werden beim Aufruf nach oben und nach unten verschoben, wenn sie geschlossen werden.

Klicken Sie auf das Bild, um es animiert anzuzeigen.

Reaktionsfähig: Das System reagiert und passt sich an Benutzereingaben und -optionen an

Klare Indikatoren zeigen, dass das System unterschiedliche Eingaben, Haltungen und Ausrichtungen erkennt und sich an diese anpasst. Apps sollten auf Betriebssystemverhalten aufbauen, um sich je nach Eingabemethoden reaktionsfähig, lebendig und die Nutzung zu unterstützen.

Beispiel: Taskleistensymbole werden verteilt, wenn Tastaturen getrennt werden. Fensterränder rufen je nach Cursor- oder Toucheingabe ein anderes Visual auf.

Klicken Sie auf das Bild, um es animiert anzuzeigen.

Genussvoll: Unerwartete Freudenmomente mit Absicht

Bewegung fügt der Erfahrung Persönlichkeit und Energie hinzu, um einfache Handlungen in Momente der Freude zu verwandeln. Diese Momente sind immer kurz und flüchtigend und helfen, die Aktionen der Benutzer zu verstärken.

Beispiel: Das Minimieren eines Fensters führt dazu, dass ein App-Symbol abspringt, während das Wiederherstellen ein App-Symbol nach oben abhebt.

Klicken Sie auf das Bild, um es animiert anzuzeigen.

Einfallsreich: Nutzt vorhandene Steuerelemente, um nach Möglichkeit Konsistenz zu erzielen

Vermeiden Sie nach Möglichkeit benutzerdefinierte Animationen. Verwenden Sie Animationsressourcen wie WinUI-Steuerelemente für Seitenübergänge, Seitenfokus und Mikrointeraktionen. Wenn Sie WinUI-Steuerelemente nicht verwenden können, imitieren Sie vorhandene Betriebssystemverhalten basierend auf dem Speicherort des App-Einstiegspunkts.

Beispiel:Seitenübergänge, verbundene Animationen und animierte Symbole sind die empfohlenen WinUI-Steuerelemente, die Apps ansprechende und erforderliche Bewegungen hinzufügen.

Klicken Sie auf das Bild, um es animiert anzuzeigen.

Verwendung

Animationseigenschaften

Windows-Bewegung ist schnell, direkt und kontextgerecht. Timing- und Beschleunigungskurven werden basierend auf dem Zweck der Animation angepasst, um ein kohärentes Erlebnis zu schaffen.

Zweck	Definition	Leichtigkeit	Zeitliche Steuerung	Verwendung
Direkter Eingang	Schnell – Ein	Kubisch bezier(0,0,0,1)	167, 250, 333	Position, Skalierung, Drehung
Vorhandene Elemente	Punkt zu Punkt	Kubisch(0,55,0,55,0,1)	167, 250, 333 ms	Position, Skalierung, Drehung
Direktes Beenden	Schnell – Out	Kubisch bezier(0,0,0,1)	167 ms	Position, Skalierung, Drehung (IMMER mit Ausblenden kombinieren)
Sanftes Beenden	Weich – Out	Kubisch(1,0,1,1)	167 ms	Position, Skalierung
Absolutes Minimum	Ausblenden – Ein+ Aus	Linear	83 ms	Opacity
Starker Eingang	Elastic In (3 Keyframes)	(3 Werte unten)	(3 Werte unten)	Position, Skalierung
	Keyframe 1	Kubisch-Bezier(0,85, 0, 0, 1)	167 ms
	Keyframe 2	Cubic-Bezier(0.85, 0, 0.75, 1)	167 ms
	Keyframe 3	Kubisch-Bezier(0,85, 0, 0, 1)	333 ms

Steuerelemente

In dieser Version von Windows werden zielgerichtete Mikrointeraktionen in WinUI-Steuerelementen eingeführt. Fügen Sie Ihrer App diese Steuerelemente hinzu, um Informationen besser zu organisieren und den Benutzern Ihrer App beim Übergang von Seite zu Seite, Ebene zu Ebene und Zustand zum Zustand einer Interaktion zu helfen.

Seitenübergang: Übergänge von Seiten zu Seite innerhalb derselben Oberfläche

Verwenden Sie Seitenübergänge , um reibungslos von Seite zu Seite zu wechseln, und konfigurieren Sie Animationsanweisungen, um den Fluss einer App zu berücksichtigen.

Seitenübergänge führen die Augen Ihres Benutzers zu eingehenden und ausgehenden Inhalten, wodurch die kognitive Last verringert wird.

Klicken Sie auf das Bild, um es animiert anzuzeigen.

Verbundene Animation: Layer-to-Layer-Übergänge innerhalb derselben Seite

Verwenden Sie verbundene Animationen , um bestimmte Informationen innerhalb einer Seite oder Oberfläche hervorzuheben, während der Kontext beibehalten wird.

Verbundene Animationen konzentrieren sich auf ausgewählte Elemente und wechseln nahtlos zwischen den fokussierten und nicht fokussierten Zuständen.

Klicken Sie auf das Bild, um es animiert anzuzeigen.

Animiertes Symbol: Sorgt für Freude und offenbart Informationen durch Mikrointeraktionen

Verwenden Sie animierte Symbole , um einfache, vektorbasierte Symbole und Illustrationen mit Bewegung mithilfe von Lottie-Animationen zu implementieren.

Animierte Symbole lenken die Aufmerksamkeit auf bestimmte Einstiegspunkte, geben Feedback von Zustand zu Zustand und verleihen einer Interaktion Freude.

Klicken Sie auf das Bild, um es animiert anzuzeigen.