Die vorausschauende Zurück-Bewegung ist das Ergebnis einer Bedienung über Gesten, bei der ein Nutzer zurückgewischt hat, um eine Vorschau des Ziels der „Zurück“-Touch-Geste anzuzeigen, bevor er den Vorgang vollständig abgeschlossen hat. So kann der Nutzer entscheiden, ob er fortfahren oder die aktuelle Ansicht beibehalten möchte.
Die Vorhersagefunktion ermöglicht eine reibungslosere, intuitivere Navigation während der Bedienung über Gesten. Die integrierten Animationen informieren Nutzer darüber, wohin sie ausgeführt werden, um unerwartete Ergebnisse zu vermeiden.
Verwenden Sie die Designanleitung auf dieser Seite, wenn Ihr App-Design die Rückwärtsnavigation für benutzerdefinierte Übergänge und Animationen für wichtige Momente erfordert.
Unterstützung für vorausschauende Rückkehr
Die Unterstützung der vorausschauenden Zurück-Navigation ist verfügbar, unabhängig davon, ob eine standardmäßige oder benutzerdefinierte Zurück-Navigation verwendet wird. Wenn Sie die Standardnavigation verwenden, können Sie die Funktion ganz einfach aktivieren. Weitere Informationen zur Unterstützung von vorausschauenden Antworten
Wenn du der Option zustimmst, enthält deine App Animationen wie „Zurück zum Startbildschirm“, „Cross-Aktivitäten“ und „Cross-Tasks“.
Sie können Ihre Material-Komponentenabhängigkeit auch auf 1.10.0-alpha02 oder höher von MDC Android aktualisieren, um die folgenden Animationen der Material-Komponente zu erhalten:
Edge-to-Edge-Support Ihrer App sicherstellen
Zur Unterstützung Ihrer Nutzer werden bei der vorausschauenden Zurücknavigation Gesteneinsätze berücksichtigt, die in randlosen Funktionen definiert sind. Fügen Sie keine Touch-Gesten oder Ziehziele unterhalb dieser Gestenbereiche hinzu.
Vollbildoberflächen
Wenn in Ihrer App benutzerdefinierte In-App-Übergänge für Vollbildoberflächen erstellt werden, folgen Sie dieser Designanleitung.
Vorschau ansehen
Wenn ein Nutzer eine „Zurück“-Touch-Geste auf einer Vollbild-Oberfläche ausführt, sollte der innere Bereich mit fortschreitender Bewegung verkleinert werden. Sobald der Nutzer den Commit-Schwellenwert überschreitet, sollten die Inhalte über eine Überblendung in den nächsten Zustand wechseln und den Nutzer darüber informieren, wo seine Aktion sie ausführen wird.
Interpolation
Der verwendete Interpolator sorgt dafür, dass der Bildschirm schnell geschlossen wird. Die Parameter sind (.1, .1, 0, 1), die dem Interpolator entsprechen, der für die SystemUI-Animationen verwendet wurde.
Aktion abbrechen
Lässt der Nutzer die Geste in einem Nicht-Commit-Status los, wird der Inhalt schnell wieder in seinen ursprünglichen Zustand und seine ursprüngliche Größe skaliert, bevor die Geste beginnt. Dadurch werden alle Statusänderungen rückgängig gemacht.
Spezifikationen für Bewegungen
Parameter |
Anfangswert |
Zielwert |
Kontext |
|---|---|---|---|
Skala beenden |
100 % |
90 % |
|
Maßstab eingeben |
110% |
100 % |
|
Ausblenden beenden |
100 % |
0 % |
Überblendet den Zielwert bei einem Fortschrittsgrenzwert von 35 % |
Einblenden |
0 % |
100 % |
Einblenden beginnt bei einem Fortschrittsgrenzwert von 35 % |
Übergang von gemeinsam genutzten Elementen (Cross-Views)
Wenn in Ihrer App benutzerdefinierte In-App-Übergänge für gemeinsame Elementübergänge für Ansichten erstellt werden, folgen Sie der folgenden Designanleitung.
Wenn ein Nutzer eine Zurück-Geste bei einem gemeinsam genutzten Element ausführt, löst sich die Oberfläche während der Rückvorschau vollständig vom Bildschirmrand und kann vom Nutzer direkt bearbeitet werden. Allerdings sollte das Design dem Nutzer nicht den Eindruck vermitteln, dass ein Element in die Richtung der „Zurück“-Geste geschlossen wird.
Sie können beispielsweise Übergänge für gemeinsame Elemente verwenden, wenn Sie Detailbildschirme zurück zu vertikalen Listen schließen, um den Nutzer visuell darauf hinzuweisen, dass er die vorherige Aktion rückgängig macht. In Video 3 wird ein Kalendertermin auf eine Tagesansicht zurückgesetzt. Um die Haptik zu verbessern, hat das Design einen dezenten Überschwenk, um einen Teil der während der Geste entstehenden Federspannung zu absorbieren.
Vorschau ansehen
Bei der Darstellung von Vorhersageanimationen für den Nutzer wird im von Ihrer Anwendung verwalteten Pre-Commit-Status erfasst, wenn der Nutzer eine Touch-Geste von Rand zu Rand ausgeführt, aber nicht per Commit bestätigt hat, indem er sie loslässt. Sie müssen Parameter angeben, die für diesen Pre-Commit-Status gelten.
Der Grad der angezeigten Bewegung richtet sich danach, wie weit der Nutzer sich von dem Ort entfernen kann, an dem die Geste begonnen hat.
Spezifikationen für Bewegungen
Übergänge für gemeinsame Elemente sind direkt von der x- und y-Verschiebung vom Anfang der Geste aus betroffen. In diesem Abschnitt werden die Spezifikationen und Werte für das Feedback auf dem Bildschirm beschrieben.
Die folgenden Abbildungen zeigen die empfohlenen Bewegungsspezifikationen für Oberflächenanimationen.
1 Ränder: 5% der Breite auf beiden Seiten (bezogen auf die in 3 beschriebene Oberfläche)
2 Berechnete Verschiebung, wenn das Fenster zum Mittelpunkt skaliert wird. Für die erforderliche Marge von 8 dp berechnen: ((Bildschirmbreite / 20) − 8) dp
3 Die Oberfläche wird auf 90% der Größe skaliert, wobei 10% für Ränder verfügbar sind (siehe 1).
4 Lassen Sie einen Abstand von 8 dp vom Displayrand
Aus Gründen der Einheitlichkeit empfehlen wir, die aufgeführten Parameter beizubehalten. Sie können die Spezifikationen aber auch ändern, um eine benutzerdefinierte Animation zu erstellen.
In der vorherigen Abbildung beträgt die Bildschirmbreite 1.280, wodurch die X-Verschiebung 56 dp beträgt. Die Formel dafür lautet:
((1280/20)-8)= 56 dp x-Shift
1 Abstand zwischen Rand und Geräterand für die y-Umschalttaste verfügbar
2 Skalieren Sie die Oberfläche um maximal 50 %, wenn sich die Oberfläche über den Bildschirm hinaus verschiebt.
2 Die Oberfläche beginnt vertikal zentriert, wobei eine y-Verschiebung so definiert ist:
- Begrenzen Sie die y-Verschiebung so, dass die Oberfläche den Bildschirmrand von 8 dp nie überschreitet.
- Damit die Oberfläche nicht abrupt anhält, sollten Sie einen Verzöger-Interpolator verwenden und den y-Verschiebungsgrenzwert abbilden.
3 Den Rand von 8 dp beibehalten, wenn die Oberfläche kurz genug ist
Für benutzerdefinierte Animationen müssen alle folgenden Parameter definiert werden.
Parameter |
Antwort |
Kontext |
|---|---|---|
X-Verschiebung |
((Bildschirmbreite / 20) – 8) dp |
Maximale Verschiebung, bleibt 8 dp Rand |
Y-Verschiebung |
((verfügbare Bildschirmhöhe / 20)–8) dp |
Maximale Verschiebung, bleibt 8 dp Rand |
Skalieren |
90 % |
Minimale Skalierung der Fenstergröße |
Diese Parameter werden von Entwicklern verwendet, die die benutzerdefinierte Animation mithilfe der Predictive Back Progress APIs implementieren.
Fortschritt der Geste interpoliert
Ein linearer Fortschrittswert kann aus der Geste des Nutzers abgeleitet werden, sollte jedoch nicht direkt für Vorschauanimationen verwendet werden. Stattdessen sollte das Feedback darauf zugeschnitten sein, was Nutzenden bei der Rückwärtsaktion hilft. Geben Sie den Fortschrittswert mit einem STANDARD_DECELERATE-Token oder PathInterpolator(0f, 0f, 0f, 1f) ein, damit die Geste am Anfang deutlicher ist. Dieses Feedback verbessert die Bewegungserkennung zu Beginn der Geste und nutzt die Verzögerung, um das Feedback auf visuell ansprechende und klare Weise zu steuern.
Commit zur Aktion
Wenn ein Nutzer über den Commit-Punkt hinausgeht und ihn loslässt, wird eine Animation angezeigt, die den Abschluss der Aktion bestätigt.
Wenn die Nutzer schnell Gesten ausführen, werden dies im Allgemeinen als Flings interpretiert. Durch diese Art der Interaktion können Elemente auf dem Bildschirm hohe Geschwindigkeiten aufweisen, sodass das System diese Geschwindigkeit im Kontext der Rückvorschau absorbiert, indem es die Oberfläche kurz bis zu ihrem maximalen Vorschaustatus animiert, bevor die Commit-Animation ausgeführt wird.
Die Stärke des fling bestimmt, wie viel der Vorschauanimation angezeigt wird, bevor die Commit-Animation ausgeführt wird. Die Art der gezeigten Animation hängt davon ab, welche Inhalte geschlossen werden (siehe Video 2).
Aktion abbrechen
Video 6 zeigt ein Beispiel dafür, was passiert, wenn ein Nutzer die App vor dem Grenzwert freigibt. In einer Animation wird bestätigt, dass die Aktion abgebrochen wurde. Bei Übergängen geteilter Elemente bewegt sich das Fenster schnell und skaliert zurück in seinen ursprünglichen Zustand vor Beginn der Geste.