Direktionalität und Schwerkraft

Direktionale Signale helfen, das mentale Modell der Reise zu festigen, die ein Benutzer über Erfahrungen hinweg nimmt. Es ist wichtig, dass die Richtung jeder Bewegung sowohl die Kontinuität des Raumes als auch die Integrität der Objekte im Raum unterstützt.

Die richtungsgerichtete Bewegung unterliegt Kräften wie der Schwerkraft. Das Anwenden von Bewegungskräften verstärkt das natürliche Gefühl der Bewegung.

Beispiele

WinUI-Katalog

Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und Bewegung in Aktion zu sehen.

Bewegungsrichtung

Die Bewegungsrichtung entspricht der physischen Bewegung. Genau wie in der Natur können Sich Objekte auf jeder Weltachse bewegen - X, Y, Z. So stellen wir uns die Bewegung von Objekten auf dem Bildschirm vor. Vermeiden Sie beim Verschieben von Objekten unnatürliche Kollisionen. Denken Sie daran, wo Objekte herkommen und zu gehen, und unterstützen Sie immer Konstrukte höherer Ebene, die in der Szene verwendet werden können, z. B. Bildlaufrichtung oder Layouthierarchie.

Kurzes Video, das einen Kreis und dann das Hinzufügen einer X-Achse, einer Y-Achse und einer Z-Achse zeigt.

Navigationsrichtung

Die Richtung der Navigation zwischen Szenen in Ihrer App ist konzeptionell. Benutzer navigieren vorwärts und zurück. Szenen werden ein- und aus der Sicht verschoben. Diese Konzepte kombinieren sich mit physischer Bewegung, um den Benutzer zu leiten.

Wenn die Navigation bewirkt, dass ein Objekt von der vorherigen Szene zur neuen Szene wechselt, bewegt sich das Objekt einfach von A nach B auf dem Bildschirm. Um sicherzustellen, dass sich die Bewegung körperlicher anfühlt, werden die Standard-Erleichterungen hinzugefügt, sowie das Gefühl der Schwerkraft.

Bei der Rückwärtsnavigation wird die Verschiebung umgekehrt (B-zu-A). Wenn der Benutzer zurück navigiert, wird erwartet, dass er so bald wie möglich wieder in den vorherigen Zustand versetzt wird. Die Zeitsteuerung ist schneller, direkter und verwendet die Beschleunigung der Beschleunigung.

Hier werden diese Prinzipien angewendet, wenn das ausgewählte Element während der Vorwärts- und Rückwärtsnavigation auf dem Bildschirm bleibt.

UI-Beispiel für kontinuierliche Bewegung

Wenn die Navigation bewirkt, dass Elemente auf dem Bildschirm ersetzt werden, ist es wichtig, anzuzeigen, wo die ausgehende Szene hingegangen ist und wo die neue Szene herkommt.

Dies hat mehrere Vorteile:

  • Es festigt das mentale Modell des Benutzers des Raums.
  • Die Dauer der ausgehenden Szene bietet mehr Zeit zum Vorbereiten von Inhalten, die für die eingehende Szene animiert werden sollen.
  • Es verbessert die wahrgenommene Leistung der App.

Es gibt 4 diskrete Navigationsrichtungen zu berücksichtigen.

Forward-In Feiern Sie Inhalte, die in die Szene gelangen, auf eine Weise, die nicht mit ausgehenden Inhalten kollidiert. Der Inhalt verlangsamt sich in die Szene.

Richtung vorwärts in

Forward-Out Der Inhalt wird schnell beendet. Objekte beschleunigen außerhalb des Bildschirms.

Richtung nach vorne nach außen

Rückwärts Identisch mit Forward-In, aber umgekehrt.

Kurzes Video, das einen Kreis zeigt, der von rechts vom Frame eintritt und in der Mitte des Frames anhält.

Rückwärts nach außen Identisch mit Forward-Out, aber umgekehrt.

Richtung rückwärts nach außen

Gravity

Mit der Schwerkraft fühlen sich Ihre Erfahrungen natürlicher an. Objekte, die sich auf der Z-Achse bewegen und nicht durch ein Bildschirmangebot in der Szene verankert sind, haben das Potenzial, von der Schwerkraft beeinflusst zu werden. Wenn ein Objekt sich von der Szene löst und bevor es die Fluchtgeschwindigkeit erreicht, zieht die Schwerkraft auf das Objekt ab und erzeugt eine natürlichere Kurve der Objektbahn, während es sich bewegt.

Schwerkraft manifestiert sich in der Regel, wenn ein Objekt von einer Szene zur anderen springen muss. Aus diesem Gründen verwendet die verbundene Animation das Konzept der Schwerkraft.

Hier wird ein Element in der obersten Zeile des Rasters von der Schwerkraft beeinflusst, wodurch es leicht fällt, wenn es seinen Platz verlässt und nach vorne bewegt.

Kurzes Video, das ein Rechteckelement zeigt, das die obere Zeile eines Rasters verlässt, leicht fällt und dann an die Vorderseite des Fensters zoomt.