Bewegung für Windows-Apps

In einer App sind fließende Bewegungen wichtig. Sie geben intelligentes Feedback basierend auf dem Verhalten des Benutzers, lassen die Benutzeroberfläche lebendig wirken und unterstützen den Benutzer bei der Navigation in der App. Durch fließende Bewegungen entsteht eine gewisse emotionale Verbindung zwischen einem Benutzer und der digitalen Benutzeroberfläche. Wir gehen von grundlegenden natürlichen Bewegungen aus, die der Benutzer bereits aus der physischen Welt kennt, und erweitern unser System darauf aufbauend.

Beispiele

Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und Bewegung in Aktion zu sehen. Abrufen der WinUI 2-Katalog-App (Microsoft Store) Abrufen des Quellcodes (GitHub)

Prinzipien fließender Bewegungen

Physisch

Bewegte Objekte verhalten sich wie Objekte in der realen Welt. Objekte in Bewegung zeigen Verhalten von Objekten in der realen Welt. Dynamische, reaktionsfähige Bewegungen machen das Erlebnis natürlich, wodurch emotionale Verbindungen erstellt und Persönlichkeiten hinzugefügt werden.

Wenn Sie per Toucheingabe mit der UI interagieren, entspricht die Bewegung auf der Benutzeroberfläche der Geschwindigkeit der Interaktion. Die Toucheingabe ist eine direkte Eingabe. Daher beeinflusst das Objekt, mit dem Sie interagieren, die umgebenden Objekte.

Funktionell

Bewegung dient einem Zweck und muss überzeugend sein. Sie unterstützt den Benutzer in komplexen Umgebungen und hilft beim Festlegen der Hierarchie. Bewegung vermittelt den Eindruck einer besseren Leistung und optimiert das Benutzererlebnis, da keine Latenz wahrgenommen wird.

Seitenübergänge sind zweckorientiert gestaltet. Sie geben Hinweise darauf, wie Seiten zusammenhängen. Sie erfolgen auf eine Weise, die selbst dann als schnell empfunden wird, wenn die Leistung nicht optimal ist.

Kontinuierlich

Durch fließende Bewegungen wird die Aufmerksamkeit des Benutzers geschickt auf bestimmte Punkte gelenkt.​Dadurch werden die einzelnen Schritte einer Aufgabe elegant miteinander verknüpft, um den Benutzer bei der Ausführung zu unterstützen.

Objekte können sich von Szene zu Szene bewegen oder in einer Szene die Gestalt ändern, um Kontinuität zu schaffen und den Kontext für Benutzer aufrechtzuerhalten.

Kontextbezogen

Dank intelligenter Bewegung erhält der Benutzer eine Rückmeldung, die sich an seiner Interaktion mit der Benutzeroberfläche orientiert. Die Interaktion ist auf den Benutzer ausgerichtet. Die Bewegung muss dem Formfaktor angemessen und dem Szenario entsprechend gestaltet sein. Sie sollte jedem Benutzer vertraut sein.​

Eine Animation sollte mit der Benutzerinteraktion verknüpft sein. Ein Kontextmenü wird dort bereitgestellt, wo es vom Benutzer aktiviert wurde.

Artikel zu Bewegungen

Timing und Beschleunigung

Timing und Beschleunigung sind wichtige Elemente, um die Bewegung von Objekten natürlich erscheinen zu lassen, die in die Benutzeroberfläche hineinkommen, sie verlassen oder sich darin bewegen.​

Richtung und Schwerkraft

Richtungssignale festigen das mentale Modell der Erlebnisse, die ein Benutzer auf einer Oberfläche macht. Eine gerichtete Bewegung unterliegt Kräften – z.B. der Schwerkraft –, die die Natürlichkeit der Bewegung verstärken.​

Seitenübergänge

Seitenübergänge dienen der Navigation, wenn Benutzer zwischen Seiten in einer App wechseln, und liefern Feedback über die Beziehung zwischen Seiten. Mithilfe von Seitenübergängen wissen Benutzer immer, an welcher Stelle der Navigationshierarchie sie sich gerade befinden.

Verbundene Animationen

Mit verbundenen Animationen können Sie dynamische und ansprechende Navigationsfunktionen erstellen, indem Sie den Übergang eines Elements zwischen zwei verschiedenen Ansichten animieren.​