Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Bewegung beschreibt die Art und Weise, wie die Oberfläche animiert wird und auf Benutzerinteraktionen reagiert. Bewegung in Windows ist reaktiv, direkt und kontextgerecht. Sie reagiert auf Benutzereingaben und verstärkt räumliche Paradigmen, die es Benutzern ermöglichen,. ihren Weg zu finden.
Tipp
In diesem Artikel wird beschrieben, wie die Fluent Designsprache auf Windows Apps angewendet wird. Weitere Informationen finden Sie unter Fluent Design – Motion.
Bewegungsprinzipien
Diese Prinzipien leiten den Einsatz von Bewegung in Windows.
Verbunden: Elemente von Aktionen verbinden sich nahtlos
Elemente, die die Position und Größe ändern, sollten in ihrem visuellen Erscheinungsbild von einem Zustand zum anderen wechseln, auch wenn sie im Hintergrund nicht verbunden sind. Benutzer werden angeleitet, Elemente von Punkt zu Punkt zu verfolgen, um die kognitive Belastung bei statischen Zustandsänderungen zu verringern.
Beispiel: Wenn ein Fenster zwischen schwebend, angeschlossen und maximiert wechselt, fühlt es sich immer wie dasselbe Fenster an.
Tipp
Um die Barrierefreiheit und Lesbarkeit zu verbessern, verwendet diese Seite weiterhin Bilder in der Standardansicht. Sie können auf ein Bild klicken, um die animierte Version anzuzeigen.
Konsistent: Elemente sollten sich bei der gemeinsamen Nutzung von Einstiegspunkten auf ähnliche Weise verhalten
Oberflächen, die denselben Einstiegspunkt in die Benutzeroberfläche verwenden, sollten auf dieselbe Weise aufgerufen und geschlossen werden, um konsistente Interaktionen zu gewährleisten. Jeder Übergang sollte die Dauer, Beschleunigung und Richtung anderer Elemente respektieren, sodass eine Oberfläche sich kohärent anfühlt.
Beispiel: Alle Taskleisten-Flyouts schieben sich beim Aufrufen nach oben und gleiten nach unten, wenn sie geschlossen werden.
Klicken Sie auf das Bild, um es animiert anzuzeigen.
Reaktionsfähig: Das System reagiert und passt sich an Benutzereingaben und -auswahlen an.
Klare Indikatoren zeigen, dass das System unterschiedliche Eingaben, Haltungen und Ausrichtungen erkennt und anpasst. Apps sollten auf dem Verhalten des Betriebssystems aufbauen, um je nach Art der Eingabemethode reaktionsfähig und lebendig zu wirken sowie die Bedienbarkeit zu unterstützen.
Beispiel: Taskleistensymbole verteilen sich, wenn Tastaturen abgetrennt werden. Fensterränder rufen je nach Cursor- oder Toucheingabe ein anderes visuelles Element auf.
Klicken Sie auf das Bild, um es animiert anzuzeigen.
Reizvoll: Unerwartete Momente der Freude mit Zweck
Bewegung fügt der Erfahrung Persönlichkeit und Energie hinzu, um einfache Aktionen in Momente der Freude umzuwandeln. Diese Momente sind immer kurz und flüchtend und helfen, Benutzeraktionen zu stärken.
Beispiel: Das Minimieren eines Fensters bewirkt, dass ein App-Symbol abspringt, während beim Wiederherstellen ein App-Symbol nach oben springt.
Klicken Sie auf das Bild, um es animiert anzuzeigen.
Ressourcenschonend: Nutzt vorhandene Steuerelemente, um Konsistenz zu gewährleisten, wenn möglich
Vermeiden Sie nach Möglichkeit benutzerdefinierte Animationen. Verwenden Sie Animationsressourcen wie WinUI 3-Steuerelemente für Seitenübergänge, den Seitenfokus und Mikrointeraktionen. Wenn Sie WinUI-Steuerelemente nicht verwenden können, imitieren Sie vorhandene Betriebssystemverhalten basierend auf dem Ort, an dem sich der App-Einstiegspunkt befindet.
Beispiel:Seitenübergänge, verbundene Animationen und animierte Symbole sind die empfohlenen WinUI-Steuerelemente, die Apps ansprechende und notwendige Bewegungen hinzufügen.
Klicken Sie auf das Bild, um es animiert anzuzeigen.
Beispiele
Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.
Verbrauch
Animationseigenschaften
Windows Bewegung ist schnell, direkt und kontextgerecht. Timing- und Easing-Kurven werden basierend auf dem Zweck der Animation angepasst, um für ein stimmiges Erlebnis zu sorgen.
| Zweck | Definition | Leichtigkeit | Zeitsteuerung | Verwendet für |
|---|---|---|---|---|
| Direkter Eingang | Schnell – In | Kubikbezier (0,0,0,1) | 167, 250, 333 | Position, Skalierung, Drehung |
| Vorhandene Elemente | Punkt zu Punkt | Cubic-Bezier-Kurve (0,55, 0,55, 0,1) | 167, 250, 333 ms | Position, Skalierung, Drehung |
| Direkter Austritt | Schnell – Inaktiv | Kubikbezier (0,0,0,1) | 167 ms | Position, Skalierung, Drehung (IMMER mit Ausblendung kombinieren) |
| Sanfter Ausstieg | Weich – Aus | cubic-bezier(1,0,1,1) | 167 ms | Position, Skalierung |
| Das absolute Minimum | Ein- und Ausblendung | Linear | 83 ms | Opazität |
| Starker Eingang | Elastic In (3 Schlüsselframes) | (3 Werte unten) | (3 Werte unten) | Position, Skalierung |
| Keyframe 1 | Kubikbezier(0,85, 0, 0, 1) | 167 ms | ||
| Keyframe 2 | Cubic-Bezier(0.85, 0, 0.75, 1) | 167 ms | ||
| Keyframe 3 | Kubikbezier(0,85, 0, 0, 1) | 333 ms |
Steuerelemente
Diese Version von Windows führt zielgerichtete Mikrointeraktionen in WinUI-Steuerelementen ein. Fügen Sie Ihrer App diese Steuerelemente hinzu, um Informationen besser zu organisieren, und helfen Sie den Benutzern Ihrer App beim Übergang von Seite zu Seite, Ebene zu Ebene und Zustand zum Zustand einer Interaktion.
Seitenübergang: Seitenübergänge innerhalb derselben Oberfläche
Verwenden Sie Seitenübergänge , um reibungslos von Seite zu Seite zu wechseln, und konfigurieren Sie Animationsrichtungen, um den Fluss einer App zu respektieren.
Seitenübergänge führen die Augen Ihres Benutzers zu eingehenden und ausgehenden Inhalten und verringern die kognitive Belastung.
Ein animiertes Bild, das die Navigation zwischen mehreren Seiten in den Windows-Einstellungen zeigt. Seiten der obersten Ebene gleiten von unten nach oben. Beim Navigieren zwischen Seiten auf oberster Ebene und Unterseiten gleiten die Seiten nach links und rechts.
Klicken Sie auf das Bild, um es animiert anzuzeigen.
Verbundene Animation: Layer-zu-Layer-Übergänge innerhalb derselben Seite
Verwenden Sie verbundene Animationen, um bestimmte Informationen innerhalb einer Seite oder Oberfläche hervorzuheben und dabei den Kontext beizubehalten.
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: Fügt Freude hinzu und zeigt Informationen durch Mikrointeraktionen an.
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 vom Zustand zum Zustand und verleihen einer Interaktion Freude.
Klicken Sie auf das Bild, um es animiert anzuzeigen.
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
Windows developer