Die Statusleiste und die Navigationsleiste werden zusammen als Systemleisten bezeichnet. Sie zeigen wichtige Informationen wie den Akkustand, die Uhrzeit und Benachrichtigungen an und ermöglichen eine direkte Geräteinteraktion von überall aus.
Es ist wichtig, die Wichtigkeit der Systembalken zu berücksichtigen, unabhängig davon, ob Sie die Benutzeroberfläche für Interaktionen mit dem Android-Betriebssystem, Eingabemethoden oder andere Gerätefunktionen entwerfen. Die Systemleisten befinden sich auf den meisten Layers oben, damit sie berücksichtigt werden.
Takeaways
Fügen Sie Systemleisten in Ihre Designs ein, um UI-sichere Bereiche, Systeminteraktionen, Eingabemethoden, Display-Aussparungen und andere Gerätefunktionen zu berücksichtigen. Wenn Sie die Systemleisten auf der obersten Ebene platzieren, werden sie berücksichtigt.
Empfohlen: Gestalten Sie die Systemleisten transparent und blenden Sie Ihre App im Vollbildmodus aus. Die Benutzeroberfläche bleibt dabei unterhalb der Balken, um eine randlose Erfahrung zu bieten.
Wenn Sie nicht beide Balken als transparent festlegen können, achten Sie darauf, dass die Farben der Balken der Farbe des Hauptteils Ihrer App entsprechen. Passen Sie beispielsweise die Farbe der unteren Navigationsleiste der Gestenleiste und die Farbe der oberen Statusleiste der Farbe des Textes an.
Abbildung 2:Darauf achten, dass die Farben der Systemleiste mit der Textfarbe Ihrer App übereinstimmen Füge unter Gesteneinsätzen keine Tippgesten oder Ziehziele hinzu, da dies mit der randlosen Navigation und der Gestensteuerung in Konflikt geraten.
Abbildung 3:Eingefügte Systemgesten. Unter diesen Bereichen sollten keine Tippziele platziert werden.
Inhalte hinter den Systemleisten ziehen
Dank der Edge-to-Edge-Funktion kann Android die Benutzeroberfläche unter den Systemleisten zeichnen, um ein noch umfassenderes Erlebnis zu bieten. Wir empfehlen eine randlose Verwendung, da Nutzer häufig die Navigationsleiste transparent machen. Edge-to-Edge-Unterstützung
Eine App kann Überschneidungen bei Inhalten beheben, indem sie auf Einsätze reagiert. Einfügungen beschreiben, wie stark der Inhalt Ihrer App aufgefüllt werden muss, um eine Überschneidung mit Teilen der Android-Benutzeroberfläche wie der Navigationsleiste oder Statusleiste oder mit physischen Gerätefunktionen wie Display-Aussparungen zu vermeiden.
Beachten Sie beim Entwerfen für Edge-to-Edge-Anwendungsfälle die folgenden Arten von Einfügungen:
- Einfügungen von Systembalken gelten für Benutzeroberflächen, die antippbar sind und nicht von den Systemleisten verdeckt werden sollten.
- Einbindungen von Systemgesten gelten für vom System verwendete Navigationsbereiche für Gesten, die Vorrang vor Ihrer App haben.
Statusleiste
Auf Android-Geräten enthält die Statusleiste Benachrichtigungssymbole und Systemsymbole. Der Nutzer interagiert mit der Statusleiste, indem er sie nach unten zieht, um auf die Benachrichtigungsleiste zuzugreifen.
Die Statusleiste kann je nach Kontext, Tageszeit, vom Nutzer festgelegten Einstellungen oder Themen und anderen Parametern unterschiedlich aussehen. Sie können auch den Stil der Statusleiste festlegen, wie in den folgenden Beispielen gezeigt.
Achte darauf, dass sich deine App-Inhalte über den gesamten Bildschirm erstrecken, sodass randlose Inhalte erforderlich sind. Verwenden Sie transparente Systemleisten mit randlosem Inhalt, wie im folgenden Beispiel gezeigt.
Wenn eine Benachrichtigung eingeht, wird normalerweise ein Symbol in der Statusleiste angezeigt. Dies signalisiert dem Nutzer, dass auf der Benachrichtigungsleiste etwas zu sehen ist. Dabei kann es sich um das App-Symbol oder -Symbol handeln, das den Kanal repräsentiert. Siehe Benachrichtigungsdesign.
Stil der Statusleiste festlegen
Gestalten Sie den Hintergrund der Statusleiste als Teil Ihres App-Designs mit einer benutzerdefinierten Farbe oder einem benutzerdefinierten Stil und legen Sie Transparenz und Deckkraft fest.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Wenn Sie die Hintergrundfarbe manuell festlegen, können Sie optional den Inhalt der Statusleiste für einen optimalen Kontrast hell oder dunkel formatieren.
Aussparungen und Statusleiste anzeigen
Bei einigen Geräten ist eine Display-Aussparung ein Bereich, der in die Displayoberfläche hineinreicht und Platz für nach vorn gerichtete Sensoren bietet. Dies kann sich auf die Darstellung von Statusleisten auswirken. Die Display-Aussparungen können je nach Hersteller variieren.
Weitere Informationen zur Unterstützung von Display-Aussparungen
Navigationsleiste
Unter Android können Nutzer die Navigation mit den Steuerelementen „Zurück“, „Startbildschirm“ und „Übersicht“ steuern:
- Mit „Zurück“ kehren Sie direkt zur vorherigen Ansicht zurück.
- Der Startbildschirm wird aus der App zum Startbildschirm des Geräts gewechselt.
- In der Übersicht wird angezeigt, welche Apps geöffnet sind und vor Kurzem geöffnet wurden.
Nutzer können aus verschiedenen Konfigurationen für die Navigationsleiste wählen, darunter die Bedienung über Gesten (empfohlen) und die Bedienung über drei Schaltflächen.
Bedienung über Gesten
Die Bedienung über Gesten wurde in Android 10 (API-Level 29) eingeführt. Sie ist die empfohlene Art der Bedienung. Sie können die Einstellungen des Nutzers aber nicht überschreiben. Bei der Bedienung über Gesten werden keine Schaltflächen für „Zurück“, „Startseite“ und „Übersicht“ verwendet. Stattdessen wird ein einzelner Ziehpunkt zur Anzeige des Angebots angezeigt. Nutzer interagieren, indem sie vom linken oder rechten Displayrand wischen, um zum Startbildschirm zurückzukehren. Wenn Sie nach oben wischen und halten, wird die Übersicht geöffnet.
Die Bedienung über Gesten ist ein skalierbares Navigationsmuster für Mobilgeräte und größere Bildschirme. Für eine optimale Nutzererfahrung sollten Sie folgende Aspekte berücksichtigen:
- Edge-to-Edge-Inhalte unterstützen
- Fügen Sie unter Gestensteuerung keine Interaktionen oder Berührungszielbereiche hinzu.
Weitere Informationen zur Implementierung der Bedienung über Gesten
Bedienung über 3 Schaltflächen
Die Bedienung über drei Schaltflächen umfasst drei Schaltflächen: „Zurück“, „Startseite“ und „Übersicht“.
Andere Variationen der Navigationsleiste
Je nach Android-Version und Gerät stehen Ihren Nutzern möglicherweise andere Navigationsleistenkonfigurationen zur Verfügung. Die Bedienung über 2 Schaltflächen bietet z. B. zwei Schaltflächen für „Startbildschirm“ und „Zurück“.
Navigationsstil festlegen
Das folgende Beispiel zeigt, wie ein Navigationsstil implementiert wird.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android übernimmt den gesamten visuellen Schutz der Benutzeroberfläche im Gestennavigationsmodus oder im Schaltflächenmodus.
Bedienung über Gesten: Das System wendet eine dynamische Farbanpassung an, bei der sich die Farbe der Inhalte der Systemleisten je nach Inhalt ändert. Im folgenden Beispiel ändert sich der Ziehpunkt in der Navigationsleiste in eine dunkle Farbe, wenn er über hellem Inhalt platziert wird, und umgekehrt.
Abbildung 13:Dynamische Farbanpassung Schaltflächenmodi: Das System wendet ein durchscheinendes Gitter hinter den Systemleisten (für API-Ebene 29 oder höher) oder eine transparente Systemleiste (für API-Ebene 28 oder niedriger) an.
Abbildung 14: Dynamische Farbanpassung, bei der die Systemleisten die Farbe je nach Inhalt ändern
Tastatur und Navigation
Jeder Navigationstyp reagiert angemessen auf die Bildschirmtastatur, sodass der Nutzer Aktionen wie Schließen oder sogar Ändern des Tastaturtyps ausführen kann. Verwende WindowInsetsAnimationCompat, um für einen reibungslosen Tastaturübergang zu sorgen.
Immersiver Modus
Sie können Systemleisten ausblenden, wenn der Vollbildmodus erforderlich ist, z. B. wenn sich der Nutzer einen Film ansieht. Der Nutzer sollte weiterhin in der Lage sein, durch Tippen die Systemleisten und die Benutzeroberfläche einzublenden und damit die Systemsteuerung zu steuern oder mit ihnen zu interagieren. Weitere Informationen zum Entwerfen für den Vollbildmodus und zum Ausblenden der Systemleisten für den immersiven Modus