Bildlaufleiste

Scrollleisten zeigen die Position des Benutzers in einem Dokument an, die größer als der Anzeigebereich ist. Sie ermöglichen es dem Benutzer, durch Verschieben des Anzeigebereichs nach oben oder unten zum Rest des Dokuments zu navigieren.

Nutzer interagieren mit Scrollleisten per Touchscreen, Drehrad oder Touchpad. Durch Antippen der Pfeile in der Scrollleiste wird der Inhalt seitenweise verschoben, also in Schritten entsprechend der Bildschirmhöhe. Wird der Bildschirm jedoch ruckartig bewegt, um zu scrollen (abhängig von der Touchscreen-Empfindlichkeit), kann die dadurch entstehende Trägheit dazu führen, dass mehr als eine Seite gescrollt wird. Unabhängig davon, wie der Scrollvorgang gestartet wird, sollte die Scrollbewegung immer an einem Element einrasten.

Anatomie

Die Scrollleiste besteht aus den Scroll-Funktionen zum Hoch- und Runterscrollen sowie der Scrollfortschrittsanzeige. Die Scroll-Funktionen verwenden Pfeile, um die Scrollrichtung anzuzeigen. Die Scrollfortschrittsanzeige ist optional und zeigt den sichtbaren Inhalt und die Scrollposition im Verhältnis zum Gesamtinhalt der Seite an.

1. Scroll-Up-Funktion (deaktiviert)
2. Scrollfortschrittsanzeige
3. Scrollfunktion

Spezifikationen

Scrollleistenposition bei gestapelter primärer Navigation und minimierter Steuerleiste

Scrollleistenposition nur mit App-Kopfzeile

Scrollleistenposition relativ zur App-Kopfzeile und Steuerleiste

Scrollleistenposition mit App-Kopfzeile und erweiterter Steuerleiste

Scrollleistenposition mit App-Leiste/Kopfzeile und minimierter Steuerleiste

Scrollleistenposition nur bei App-Leiste/Kopfzeile

Scrollleistenposition relativ zur App-Kopfzeile und Steuerleiste

Scrollleistenposition mit App-Kopfzeile und erweiterter Steuerleiste

Scrollleistenposition bei geringer Bildschirmhöhe

Optionale Scrollfortschrittsanzeige

Stile

Farbe

Element Farbe (Tagesmodus) Farbe (Nachtmodus)
Primäre Symbole – aktiver Zustand Weiß Weiß @ 88%
Primäre Symbole – inaktiver Zustand Weiß @ 56% Weiß @ 50%
Scrollfortschrittsanzeige Weiß @ 16% Weiß @ 12%

Größenangaben

Element Größe (dp)
Primäres Symbol 44
Berühren Sie das Ziel 76
Breite der Scroll-Fortschrittsanzeige 6
Abgerundeter Eckenradius (R4) Voll

Beispiele

Scrollleiste in der Rasteransicht
Scrollleiste in der Listenansicht mit Scrollfortschrittsanzeige
Scrollleiste in der Rasteransicht
Scrollleiste in der Listenansicht