Auf Englisch lesen

Freigeben über


Navigationsschiene

Große Bildschirm-Android Geräte verfügen über mehr Raum für Navigationselemente als den Telefonformfaktor. Das Materialdesign-Team hat kürzlich die Navigation Rail-Komponente für die Verwendung auf größeren Bildschirmen und faltbaren Geräten hinzugefügt.

Diese Komponente bietet eine ergonomische Möglichkeit zum Navigieren auf größeren Bildschirmen und unterstützt drei verschiedene Ausrichtungen – oben, mitte und unten. Die Navigationsbahn sollte nicht mehr als acht Optionen haben.

Navigation Rail with three variants aligned – top, center, and bottom

Eine Beispielanwendung, die die Navigation Rail-Komponente verwendet, wird unten auf einem Surface Duo angezeigt. In dualer Hochformatausrichtung bleibt die Navigationsleiste auf der linken Seite des Bildschirms und bietet einfachen Zugriff auf Navigationselemente, wenn sich der Bildschirm in seinem offenen Status befindet. Dieses Verhalten wird auch auf große Bildschirmgeräte wie Tablets angewendet.

Sample app spanned across two screens, using Navigation Rail on the left screen with five icon elements. Photos of plants are shown on the left screen and a single plant is selected on the right screen, with descriptive text also showing

Da faltbare Funktionen im Allgemeinen auch die Möglichkeit bieten, einen kleineren Bildschirmbereich (wenn vollständig gefaltet oder geschlossen, je nach Gerät), sollte die App auf eine Navigationsoption wechseln, die für die Bildschirmgröße geeignet ist, z. B. die untere Navigation:

Example bottom navigation bar with five icon elements

Ein vollständiges Beispiel mit der unteren Navigation wird unten gezeigt:

Sample app on a single screen showing the bottom navigation bar being used instead of Navigation Rail

Vorhandene Android Telefon-Apps mit unterer Navigation sollten beim Anpassen an größere Bildschirme und Faltbares das Hinzufügen von Navigationsschienen berücksichtigen.

Verwendung

Verwenden Sie Navigationsleisten auf Faltbaren und großen Bildschirmanzeigen für primäre Navigationsoptionen, die folgenden Richtlinien folgen:

  • Zielziele auf oberster Ebene, auf die überall in einer App zugegriffen werden muss
  • Drei bis acht Hauptziele in einer App

Navigation Rail sollte nicht für:

  • Kleinere Bildschirmgrößen (ziehen Sie stattdessen die Verwendung der unteren Navigation in Betracht)
  • Einzelne Aufgabenaktivitäten, z. B. Anzeigen einer Liste oder eines Threads
  • Sekundäre Navigation

Beispiel Android App

Es gibt Navigation Rail-Beispiel-Apps mit Kotlin mit XML-Layouts sowie Jetpack-Verfassen:

Jetpack Compose example of Navigation Rail sample app

Entwurfskomponente

Verweisen Sie auf das Design Kit für visuelle Anleitungen für Navigationsbahnlayouts:

Design Kit screenshot showing six different Navigation Rail alignments