Die Navigation zwischen verschiedenen Bildschirmen und Apps ist ein zentraler Bestandteil der Nutzererfahrung. Die folgenden Prinzipien bilden die Grundlage für eine einheitliche und intuitive Nutzererfahrung in allen Apps. Die Navigationskomponente ist so konzipiert, dass diese Prinzipien standardmäßig implementiert werden. So können Nutzer beim Wechsel zwischen Apps dieselben Heuristiken und Muster für die Navigation anwenden.
Festes Startziel
Jede von Ihnen erstellte App hat ein festes Startziel. Dies ist der erste Bildschirm, den der Nutzer sieht, wenn er die App über den Launcher startet. Dieses Ziel ist auch der letzte Bildschirm, den der Nutzer sieht, wenn er nach dem Drücken des Buttons „Zurück“ zum Launcher zurückkehrt. Sehen wir uns als Beispiel die Sunflower-App an.
Abbildung 1. Der Listenbildschirm ist das Startziel der Sunflower-App.
Wenn die Sunflower App über den Launcher gestartet wird, ist der erste Bildschirm, den ein Nutzer sieht, der Listenbildschirm, also die Liste der Pflanzen in seinem Garten. Dies ist auch der letzte Bildschirm, den sie sehen, bevor sie die App beenden. Wenn sie auf dem Listenbildschirm den Button „Zurück“ drücken, kehren sie zum Launcher zurück.
Der Navigationsstatus wird als Stapel von Zielen dargestellt.
Wenn deine App zum ersten Mal gestartet wird, wird eine neue Aufgabe für den Nutzer erstellt und die App zeigt ihr Startziel an. Dieses wird zum Basisziel des sogenannten Back Stack und bildet die Grundlage für den Navigationsstatus Ihrer App. Der oberste Eintrag im Stack ist der aktuelle Bildschirm und die vorherigen Ziele im Stack stellen den Verlauf der von Ihnen besuchten Bildschirme dar. Das Startziel der App befindet sich im Back Stack immer ganz unten.
Vorgänge, die den Back Stack ändern, werden immer oben im Stack ausgeführt, entweder durch Verschieben eines neuen Ziels an die Spitze des Stacks oder durch Entfernen des obersten Ziels aus dem Stack. Wenn Sie zu einem Ziel wechseln, wird dieses Ziel oben auf dem Stack platziert.
Die Navigationskomponente verwaltet die Reihenfolge des Back Stacks für Sie. Sie können den Back Stack aber auch selbst verwalten.
„Nach oben“ und „Zurück“ sind innerhalb der Aufgabe Ihrer App identisch
Abbildung 2: Die Schaltflächen „Nach oben“ und „Zurück“
Der Button „Zurück“ wird in der Systemnavigationsleiste unten auf dem Bildschirm angezeigt und dient dazu, in umgekehrter chronologischer Reihenfolge durch den Verlauf der Bildschirme zu navigieren, mit denen der Nutzer zuletzt gearbeitet hat. Wenn du auf den Button „Zurück“ drückst, wird das aktuelle Ziel vom Back Stack entfernt und du gelangst zum vorherigen Ziel.
Die Schaltfläche „Nach oben“ wird in der App-Leiste oben auf dem Bildschirm angezeigt. Innerhalb der Aufgabe Ihrer App verhalten sich die Schaltflächen „Nach oben“ und „Zurück“ identisch.
Über die Taste „Nach oben“ wird die App nie beendet.
Wenn sich ein Nutzer am Startziel der App befindet, wird die Schaltfläche „Nach oben“ nicht angezeigt, da die App über die Schaltfläche „Nach oben“ nie verlassen wird. Die Schaltfläche „Zurück“ wird jedoch angezeigt und die App wird darüber verlassen.
Wenn deine App über einen Deeplink in der Aufgabe einer anderen App gestartet wird, werden Nutzer über die Schaltfläche „Nach oben“ zurück zur Aufgabe deiner App und durch einen simulierten Back Stack geleitet, nicht zur App, die den Deeplink ausgelöst hat. Über den Button „Zurück“ gelangen Sie jedoch zurück zur anderen App.
Deeplinks simulieren die manuelle Navigation
Unabhängig davon, ob Sie Deeplinks verwenden oder manuell zu einem bestimmten Ziel navigieren, können Sie mit der Schaltfläche „Nach oben“ durch die Ziele zurück zum Startziel navigieren.
Wenn du einen Deeplink zu einem Ziel innerhalb der Aufgabe deiner App erstellst, wird der vorhandene Back Stack für die Aufgabe deiner App entfernt und durch den Deeplink-Back Stack ersetzt.
Nehmen wir wieder die Sunflower-App als Beispiel und nehmen wir an, dass der Nutzer die App zuvor über den Launcher-Bildschirm gestartet und den Detailbildschirm für einen Apfel aufgerufen hat. Auf dem Bildschirm „Letzte“ wird angezeigt, dass eine Aufgabe vorhanden ist. Der oberste Bildschirm ist der Detailbildschirm für den Apfel.
Abbildung 3: Nutzer-Navigation durch die Sunflower-App und der resultierende Back Stack.
An dieser Stelle kann der Nutzer auf den Home-Button tippen, um die App in den Hintergrund zu verschieben. Angenommen, diese App hat eine Deeplink-Funktion, mit der Nutzer direkt zu einem bestimmten Bildschirm mit Pflanzendetails gelangen können, indem sie den Namen der Pflanze eingeben. Wenn die App über diesen Deeplink geöffnet wird, wird der aktuelle Sunflower-Back-Stack aus Abbildung 3 vollständig durch einen neuen Back-Stack ersetzt, wie in Abbildung 4 dargestellt:
Abbildung 4: Wenn du einem Deeplink folgst, wird der vorhandene Back Stack für die Sunflower-App ersetzt.
Der Sunflower-Back-Stack wird durch einen synthetischen Back-Stack ersetzt, wobei der Avocado-Detailbildschirm oben angezeigt wird. Der Bildschirm My Garden, der das Startziel ist, wurde ebenfalls dem Back Stack hinzugefügt. Der ursprüngliche Back Stack von Sunflower ist nicht mehr vorhanden, einschließlich der Information, dass der Nutzer zuvor auf dem Bildschirm mit den Details zum Apfel war. All das ist wichtig, weil der synthetische Back Stack realistisch sein muss. Er sollte einem Back Stack entsprechen, der durch die organische Navigation durch die App hätte erreicht werden können.
Um diese Anforderung zu erfüllen, wird ein vereinfachter synthetischer Back Stack basierend auf dem NavGraph erstellt. Bei einem einfachen NavGraph ohne Verschachtelung besteht dieser aus dem Startziel und dem Deeplink-Ziel. Bei komplexeren, verschachtelten Navigationsgraphen enthält der synthetische Back Stack auch die Startziele aller verschachtelten Graphen, die Vorgänger des Deeplink-Ziels sind.
Die Navigationskomponente unterstützt Deeplinks und erstellt einen realistischen Back Stack, wenn du einen Link zu einem Ziel in deinem Navigationsgraphen erstellst.