Die Statusleiste, die Titelleiste und die Navigationsleiste werden zusammen als Systemleisten bezeichnet. Sie zeigen wichtige Informationen wie den Akkustand, die Uhrzeit und Benachrichtigungen an und ermöglichen die direkte Interaktion mit dem Gerät von überall aus.
Es ist wichtig, die Bedeutung von Systemleisten zu berücksichtigen, unabhängig davon, ob Sie eine Benutzeroberfläche für Interaktionen mit dem Android-Betriebssystem, Eingabemethoden oder anderen Gerätefunktionen entwerfen.
Fazit
Berücksichtigen Sie beim Entwerfen Ihrer App Systemleisten. Berücksichtigen Sie auch sichere Bereiche der Benutzeroberfläche, Systeminteraktionen, Eingabemethoden, Displayausschnitte, Statusleisten, Untertitelleisten, Navigationsleisten und andere Gerätefunktionen.
Halten Sie den Systemstatus und die Navigationsleisten transparent oder halbtransparent und zeichnen Sie Inhalte hinter diesen Leisten, damit sie von Rand zu Rand reichen.
Statusleiste
Unter Android enthält die Statusleiste Benachrichtigungssymbole und Systemsymbole. Der Nutzer interagiert mit der Statusleiste, indem er sie nach unten zieht, um auf die Benachrichtigungsleiste zuzugreifen. Statusleisten können transparent oder halbtransparent sein.
Statusleistensymbole
Die Symbole in der Statusleiste können je nach Kontext, Tageszeit, von Nutzern festgelegten Einstellungen oder Themen und anderen Parametern unterschiedlich aussehen. Weitere Informationen finden Sie unter Symbole in der Systemleiste.
Wenn eine Benachrichtigung eingeht, wird in der Statusleiste normalerweise ein Symbol angezeigt. So wird dem Nutzer signalisiert, dass in der Benachrichtigungsleiste etwas zu sehen ist. Das kann das App-Symbol oder ein Symbol für den Kanal sein. Weitere Informationen finden Sie unter Design von Benachrichtigungen.
Stil der Statusleiste festlegen
Machen Sie die Statusleiste transparent oder halbtransparent, damit die App-Inhalte den gesamten Bildschirm einnehmen. Legen Sie dann den Stil der Symbole der Systemleiste fest, damit sie einen guten Kontrast haben.
Unter Android 15 wird die randlose Anzeige erzwungen, wodurch die Statusleiste standardmäßig transparent ist. Rufe enableEdgeToEdge() auf, um die Abwärtskompatibilität zu gewährleisten.
Auf dem folgenden Bild links ist die Statusleiste transparent und der grüne Hintergrund von TopAppBar wird hinter der Statusleiste gezeichnet.
Transparente Statusleisten eignen sich ideal, wenn die Benutzeroberfläche nicht unter der Statusleiste angezeigt wird oder ein Bild unter der Statusleiste gezeichnet wird. Transparente Statusleisten eignen sich ideal, wenn die Benutzeroberfläche unter der Statusleiste scrollt. Weitere Informationen zum Schutz von Farbverläufen finden Sie unter Edge-to-Edge-Design.
Navigationsleiste
Unter Android können Nutzer die Navigation über die Zurück-, Start- und Übersichtsschaltflächen steuern:
- Mit „Zurück“ kehren Sie direkt zur vorherigen Ansicht zurück.
- Home verlässt die App und wechselt zum Startbildschirm des Geräts.
- Auf der Übersichtsseite werden aktive Apps und zuletzt geöffnete Apps angezeigt, die nicht geschlossen wurden.
Nutzer können zwischen verschiedenen Navigationsleistenkonfigurationen wählen, darunter die Bedienung per Geste (empfohlen) und die Bedienung über drei Schaltflächen. Für eine optimale Nutzererfahrung sollten Sie mehrere Navigationsarten berücksichtigen.
Bedienung über Gesten
Wir empfehlen die Gestennavigation, es sei denn, der Nutzer wählt in seinen Einstellungen etwas anderes aus. Bei der Bedienung per Geste werden keine Schaltflächen für „Zurück“, „Startseite“ und „Übersicht“ verwendet. Stattdessen wird ein einzelner Touch-Gesten-Griff angezeigt. Nutzer können vom linken oder rechten Bildschirmrand nach innen wischen, um zurückzugehen, und von unten nach oben, um zum Startbildschirm zu gelangen. Wenn Sie nach oben wischen und gedrückt halten, wird die Übersicht geöffnet.
Gestennavigation ist ein skalierbareres Navigationsmuster für die Entwicklung von Designs für Mobilgeräte und größere Bildschirme. Für eine optimale Nutzererfahrung sollten Sie die Gestennavigation berücksichtigen. Gehen Sie dazu so vor:
- Unterstützung von Inhalten, die bis zum Rand des Displays reichen
- Fügen Sie in Bereichen für die Touchbedienung keine Interaktionen oder Touch-Ziele hinzu.
Weitere Informationen finden Sie unter Unterstützung für die Gestennavigation hinzufügen.
Bedienung über drei Schaltflächen
Bei der Bedienung über drei Schaltflächen gibt es drei Schaltflächen für „Zurück“, „Startbildschirm“ und „Übersicht“.
Weitere Navigationsleistenvarianten
Je nach Android-Version und Gerät sind möglicherweise andere Navigationsleistenkonfigurationen für Ihre Nutzer verfügbar. Bei der Bedienung über zwei Schaltflächen gibt es beispielsweise zwei Schaltflächen für „Startbildschirm“ und „Zurück“.
Symbole in der Navigationsleiste
Die Symbole der Navigationsleiste können je nach den vom Nutzer festgelegten Einstellungen oder Themen auch unterschiedlich aussehen. Weitere Informationen finden Sie unter Symbole in der Systemleiste.
Stil der Navigationsleiste festlegen
Android übernimmt den visuellen Schutz der Benutzeroberfläche im Modus für die Gestennavigation und in den Schaltflächenmodi. Das System verwendet eine dynamische Farbanpassung, bei der die Inhalte der Systemleisten je nach Inhalt dahinter die Farbe ändern.
Bedienung über Gesten
Wenn Sie das Targeting auf Android 15 ausrichten oder enableEdgeToEdge auf dem Activity aufrufen, zeichnet das System eine transparente Navigationsleiste für Gesten und wendet eine dynamische Farbanpassung an. Im folgenden Beispiel ändert sich der Griff in der Navigationsleiste zu einer dunklen Farbe, wenn er über hellen Inhalten platziert ist, und umgekehrt.
Transparente Navigationsbalken für Touch-Gesten werden immer empfohlen.
Dos
Don'ts
Schaltflächenmodi
Wenn Sie Ihre App auf Android 15 ausrichten oder enableEdgeToEdge auf der Activity aufrufen, wendet das System einen halbtransparenten Schleier hinter die Navigationsleisten an. Sie können ihn entfernen, indem Sie Window.setNavigationBarContrastEnforced() auf „false“ setzen.
Wir empfehlen transparente Navigationsleisten mit drei Schaltflächen, wenn es eine untere App-Leiste oder eine untere App-Navigationsleiste gibt oder wenn die Benutzeroberfläche nicht unter der Navigationsleiste mit drei Schaltflächen scrollt. Wenn Sie eine transparente Navigationsleiste haben möchten, setzen Sie Window.setNavigationBarContrastEnforced() auf „false“ und fügen Sie den unteren App-Leisten ein Abstand hinzu, damit sie unter den Systemnavigationsleisten angezeigt werden, wie in den Abbildungen 7, 8 und 9 dargestellt. Weitere Informationen finden Sie unter Schutz der Systemleiste.
Verwenden Sie eine durchsichtige Navigation mit drei Schaltflächen zum Scrollen von Inhalten. Weitere Informationen zu durchsichtigen Navigationsleisten finden Sie hier .
Tastatur und Navigation
Jeder Navigationstyp reagiert entsprechend auf die Bildschirmtastatur, damit Nutzer Aktionen wie das Schließen oder sogar das Ändern des Tastaturtyps ausführen können. Verwenden Sie WindowInsetsAnimationCompat, um einen reibungslosen Übergang zu ermöglichen, bei dem die App mit der Tastatur synchronisiert wird, die vom unteren Bildschirmrand nach oben und unten bewegt wird.
Display-Aussparungen
Eine Displayaussparung ist ein Bereich auf einigen Geräten, der sich in die Displayoberfläche erstreckt, um Platz für Frontsensoren zu schaffen. Displayausschnitte können je nach Hersteller variieren. Berücksichtigen Sie, wie sich Displayausschnitte auf Inhalte, die Ausrichtung und die Displayfläche auswirken.
Immersiver Modus
Sie können Systemleisten ausblenden, wenn Sie den Vollbildmodus benötigen, z. B. wenn sich der Nutzer einen Film ansieht. Nutzer sollten weiterhin auf das Display tippen können, um Systemleisten einzublenden, und mit den Systemsteuerelementen interagieren können. Weitere Informationen zum Entwerfen für Vollbildmodi oder zum Ausblenden der Systemleisten für den immersiven Modus