Die Statusleiste und die Navigationsleiste werden zusammen als Systemleisten bezeichnet.
Sie zeigen wichtige Informationen wie den Batteriestand, die Uhrzeit und
und eine direkte Geräteinteraktion von überall aus ermöglichen.
Es ist wichtig, die Bedeutung der Systembalken zu berücksichtigen,
Sie entwerfen UI für Interaktionen mit dem Android-Betriebssystem, Eingabemethoden oder anderen
Gerätefunktionen. Die Systemleisten befinden sich in den meisten Ebenen ganz oben,
berücksichtigt wird.
<ph type="x-smartling-placeholder"></ph>
Abbildung 1:Bilder hinter Systemleisten
Fazit
Fügen Sie Systemleisten in Ihre Designs ein,
um sichere UI-Bereiche zu berücksichtigen,
Interaktionen, Eingabemethoden, Display-Aussparungen und andere Gerätefunktionen.
Wenn Sie die Systemleisten auf der obersten Ebene platzieren, werden sie berücksichtigt.
Empfohlen: Systemleisten transparent machen und Ihre App im Vollbildmodus darstellen
und setzt die Benutzeroberfläche
unter den Balken fort.
Wenn Sie nicht beide Balken als transparent festlegen können, achten Sie darauf,
der Hauptfarbe Ihrer App entspricht. Passen Sie zum Beispiel
die Farbe der Navigationsleiste durch die Farbe der Touch-Gestenleiste und die obere Statusleiste.
color durch die Textfarbe.
<ph type="x-smartling-placeholder"></ph>
Abbildung 2:Darauf achten, dass die Farben der Systemleiste mit der Textfarbe Ihrer App übereinstimmen
Fügen Sie keine Tippgesten oder Ziehziele unter Gesten-Einsätze hinzu. diese
Konflikt mit Edge-to-Edge- und Gestensteuerung.
<ph type="x-smartling-placeholder"></ph>
Abbildung 3:Eingefügte Systemgesten. Platzieren von Fingertipps vermeiden
Ziele in diesen Bereichen
Inhalte hinter den Systemleisten ziehen
Dank der randlosen Funktion kann Android die Benutzeroberfläche unter den Systemleisten
ein noch umfassenderes Erlebnis. Wir empfehlen die Verwendung von Rand-zu-Rand-Elementen, da die
Navigationsleiste transparent ist eine häufige Anforderung von Nutzenden. (Weitere Informationen zur
Edge-to-Edge-Unterstützung bieten.
Eine App kann Überschneidungen bei Inhalten beheben, indem sie auf Einsätze reagiert. Einfügungen beschreiben
wie viel der Inhalt Ihrer App aufgefüllt werden muss, damit er sich nicht mit
Elemente der Android OS-Benutzeroberfläche wie die Navigationsleiste oder Statusleiste oder mit
physische Gerätefunktionen wie Display-Aussparungen
Beachten Sie die folgenden Arten von Einfügungen, wenn Sie Designs für Edge-to-Edge-Nutzung entwickeln
Cases:
Einfügungen von Systemleisten gelten für Benutzeroberflächen, die sowohl antippbar sind als auch
durch die Systemleisten
visuell verdeckt werden.
Einfügungen zu Touch-Gesten auf Systemebene gelten für Navigationsbereiche, die vom System verwendet werden.
die Vorrang vor deiner App haben.
Statusleiste
Auf Android-Geräten enthält die Statusleiste Benachrichtigungssymbole und Systemsymbole. Die
Nutzer interagiert mit der Statusleiste, indem er sie nach unten zieht, um auf die Benachrichtigung zuzugreifen.
Farbton.
<ph type="x-smartling-placeholder"></ph>
Abbildung 4:Über der oberen App-Leiste hervorgehobener Bereich in der Statusleiste
Die Statusleiste kann je nach Kontext, Tageszeit,
Einstellungen oder Designs des Nutzers und andere Parameter. Sie können auch die
wie in den folgenden Beispielen dargestellt.
<ph type="x-smartling-placeholder"></ph>
Abbildung 5:Statusleiste im hellen und dunklen Design
Achte darauf, dass sich deine App-Inhalte jetzt über den gesamten Bildschirm erstrecken
erforderlich. Verwenden Sie transparente Systemleisten mit randlosem Inhalt, wie in den
folgenden Beispiel.
<ph type="x-smartling-placeholder"></ph>
Abbildung 6: Transparente Balken mit dem
Edge-to-Edge-Funktion, mit der du deine Inhalte optimal präsentieren kannst
indem sie möglichst viel Bildschirmfläche ausnutzen.
<ph type="x-smartling-placeholder"></ph>
Abbildung 7:Stile der Systemleisten, um deine Inhalte zu optimieren oder dem Design deiner App
Branding. Behalten Sie die Standardattribute der Systemleisten nicht bei.
Wenn eine Benachrichtigung eingeht, wird normalerweise ein Symbol in der Statusleiste angezeigt. Dieses
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. Weitere Informationen finden Sie unter
Benachrichtigungsdesign:
<ph type="x-smartling-placeholder"></ph>
Abbildung 8:Benachrichtigungssymbol in der Statusleiste
Stil der Statusleiste festlegen
Den Hintergrund der Statusleiste als Teil Ihres App-Designs mit einer benutzerdefinierten Farbe gestalten
Stil auswählen, Transparenz und Deckkraft festlegen.
Wenn Sie die Hintergrundfarbe manuell festlegen, können Sie optional den Stil
für einen optimalen Kontrast hell oder dunkel festlegen.
Aussparungen und Statusleiste anzeigen
Bei einigen Geräten ist eine Display-Aussparung ein Bereich, der in das Display hineinreicht.
um Platz für die nach vorne gerichteten Sensoren zu schaffen. Kann das Aussehen beeinträchtigen
von Statusleisten angezeigt. Die Display-Aussparungen können je nach Hersteller variieren.
<ph type="x-smartling-placeholder"></ph>
Abbildung 9:Beispiele für 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, einschließlich Touch-Gesten
Navigation (empfohlen) und Bedienung über drei Schaltflächen.
Bedienung über Gesten
Seit der Einführung in Android 10 (API-Level 29) wird die Bedienung über Gesten empfohlen.
die Art der Navigation, obwohl Sie die Einstellungen des Nutzers nicht überschreiben können. Touch-Geste
verwendet die Navigation keine Schaltflächen für „Zurück“, „Startseite“ und „Übersicht“. Stattdessen wird ein
Ziehpunkt mit einer einzigen Bewegung. Nutzer interagieren durch Wischen von links oder
am rechten Bildschirmrand, um vor- und zurückzugehen, und von unten nach oben, um weiter zu gehen.
. Wenn Sie nach oben wischen und halten, wird die Übersicht geöffnet.
Die Bedienung über Gesten ist ein besser skalierbares Navigationsmuster für
Mobilgeräte und größere Bildschirme. Berücksichtigen Sie für eine optimale Nutzererfahrung
Gestensteuerung durch:
Edge-to-Edge-Inhalte unterstützen
Fügen Sie unter Gestensteuerung keine Interaktionen oder Berührungszielbereiche hinzu.
<ph type="x-smartling-placeholder"></ph>
Abbildung 10:Navigationsleiste mit Gesten-Ziehpunkt
Bedienung über 3 Schaltflächen
Die Bedienung über drei Schaltflächen umfasst drei Schaltflächen: „Zurück“, „Startseite“ und „Übersicht“.
<ph type="x-smartling-placeholder"></ph>
Abbildung 11:Navigationsleiste mit drei Schaltflächen
Andere Variationen der Navigationsleiste
Je nach Android-Version und Gerät können andere Navigationsleistenkonfigurationen
für Ihre Nutzer verfügbar sein. Die Bedienung über 2 Schaltflächen bietet zum Beispiel zwei
für „Startbildschirm“ und „Zurück“.
<ph type="x-smartling-placeholder"></ph>
Abbildung 12:Navigationsleiste mit zwei Schaltflächen
Navigationsstil festlegen
Das folgende Beispiel zeigt, wie ein Navigationsstil implementiert wird.
Android übernimmt den gesamten visuellen Schutz der Benutzeroberfläche durch Touch-Gesten
im Navigationsmodus
oder den Schaltflächenmodi.
Bedienung über Gesten: Das System wendet die dynamische Farbanpassung in
Damit ändert sich die Farbe der Systemleisten je nach Inhalt
hinter ihnen. Im folgenden Beispiel ist der
Ziehpunkt in der Navigationsleiste
eine dunkle Farbe, wenn sie über hellem Inhalt platziert wird, und umgekehrt.
Schaltflächenmodi: Das System wendet ein durchscheinendes Gitter hinter dem System an.
(für API-Ebene 29 oder höher) oder eine transparente Systemleiste (für API-Ebene)
28 oder niedriger).
<ph type="x-smartling-placeholder"></ph>
Abbildung 14:Dynamische Farbanpassung mit Systemleisten
die Farbe je nach Inhalt ändern
Tastatur und Navigation
<ph type="x-smartling-placeholder"></ph>
Abbildung 15:Bildschirmtastatur mit Navigationsleisten
Jeder Navigationstyp reagiert angemessen auf die Bildschirmtastatur,
Aktionen wie Schließen oder Ändern der
Tastaturtyp. Für einen reibungslosen Wechsel der Tastatur
Übergang, der den Übergang der App mit dem Schieben der Tastatur synchronisiert
vom unteren Bildschirmrand nach oben und unten,
WindowInsetsAnimationCompat
Immersiver Modus
<ph type="x-smartling-placeholder"></ph>
Abbildung 16:Immersiver Modus im Vollbildmodus
auf einem Mobilgerät im Querformat
Du kannst Systemleisten ausblenden, wenn du den Vollbildmodus benötigst, z. B.
wenn sich der Nutzer einen Film ansieht. Der Nutzer sollte weiterhin
Systemleisten und Benutzeroberfläche einblenden, um mit den Systemsteuerungen zu navigieren oder mit ihnen zu interagieren.
Erfahren Sie mehr über die Designentwicklung für den Vollbildmodus oder darüber, wie Sie
die Systemleisten für den immersiven Modus ausblenden.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.