Wenn Ihre App mehrere Ziele enthält, die Nutzer durchlaufen können, empfehlen wir Layout- und Navigationskombinationen zu verwenden, die auch in anderen Apps üblich sind. Da viele Nutzer bereits mit diesen Kombinationen vertraut sind, ist Ihre App für sie intuitiver.
Layout- und Navigationskombinationen
Die Navigationsleiste und der modale Navigations-Drawer werden als primäre Navigationsmuster für übergeordnete Layoutansichten und primäre Navigationsziele verwendet.
Die Navigationsleiste kann drei bis fünf Navigationsziele auf derselben Hierarchieebene enthalten. Diese Komponente entspricht der Navigationsleiste für große Bildschirme.
Der Navigations-Drawer kann zwar mehr als fünf Navigationsziele enthalten, ist aber nicht so ideal wie die Navigationsleiste. Das liegt daran, dass Nutzer bei kompakten Größen die obere Leiste erreichen müssen.
Material 3-Tabs und die untere App-Leiste sind sekundäre Navigations muster, die Sie zur Ergänzung der primären Navigation oder in untergeordneten Ansichten verwenden können.
Hier fungieren Tabs als sekundäre Navigationsebene, um verwandte Inhalte zu gruppieren.
Layoutaktionen
Stellen Sie Steuerelemente bereit, mit denen Nutzer Aktionen ausführen können. Zu den gängigen Mustern gehören Aktionen in der oberen Leiste, der unverankerte Aktionsbutton (Floating Action Button, FAB) und Menüs.
Für Aktionen von höchster Bedeutung bietet ein FAB eine große und gut sichtbare Schaltfläche für den Nutzer. Auf dieser Ebene sollte jeweils nur eine Aktion bereitgestellt werden. Ein FAB kann in verschiedenen Größen und in einer erweiterten Form mit einem Label angezeigt werden. Verwenden Sie Scaffold, um einen FAB zu fixieren, damit er auch beim Scrollen immer sichtbar ist.
Ein unverankterter Aktionsbutton (Floating Action Button, FAB), mit dem Nutzer Pflanzen zur Pflanzengalerie hinzufügen können
Sie können sekundäre Aktionen in der oberen Leiste oder, wenn sie in der Nähe von verwandten Inhalten gruppiert sind, auf der Seite platzieren.
Fügen Sie alle zusätzlichen Aktionen, die nicht sofort oder häufig benötigt werden, in einem Überlaufmenü hinzu.
Adaptive Navigation
Verwenden Sie das richtige Layout für die Fenstergrößenklasse. Verwenden Sie nicht für alle Größen dieselbe untere Navigationsleiste.
Das sollten Sie tun
Das sollten Sie nicht tun
Bei mittleren Größen können die Navigationsleiste oder horizontale Navigationselemente verwendet werden.
Obwohl kompakt, kann eine Navigationsleiste auf einem Cover-Display ergonomischer sein.
Bei größeren Cover-Displays kann jede Navigationsausrichtung verwendet werden. Überlegen Sie, wie der Nutzer mit den Inhalten interagieren könnte.