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. |
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.
Windows developer