Le barre di scorrimento indicano la posizione dell'utente in un documento che è più grande dello spazio di visualizzazione. Consentono all'utente di navigare nel resto del documento spostando l'area di visualizzazione della finestra verso l'alto o verso il basso.
Gli utenti interagiscono con le barre di scorrimento tramite tocco, rotella o touchpad. Toccando le frecce nella barra di scorrimento, il contenuto si sposta per pagine, ovvero con incrementi equivalenti all'altezza dello schermo. Tuttavia, se gli utenti lanciano rapidamente il cursore per scorrere (a seconda della sensibilità del touchscreen), il movimento di lancio può creare una spinta inerziale che consente di scorrere più a lungo di una pagina. Indipendentemente da come viene avviato lo scorrimento, il movimento di scorrimento dovrebbe sempre agganciarsi a un elemento.
Anatomia
La barra di scorrimento è composta dalle affordance di scorrimento verso l'alto e verso il basso e dall'indicatore di avanzamento dello scorrimento. I chevron vengono utilizzati nelle affordance di scorrimento per indicare la direzione dello scorrimento. L'indicatore di avanzamento dello scorrimento è un elemento facoltativo che indica il contenuto visibile e la posizione di scorrimento in relazione alla quantità totale di contenuto sulla pagina.
2. Indicatore di avanzamento dello scorrimento
3. Scorrimento verso il basso
Specifiche
Posizione della barra di scorrimento con navigazione primaria impilata e barra di controllo ridotta al minimo
Posizione della barra di scorrimento solo con l'intestazione dell'app
Posizione della barra di scorrimento con intestazione dell'app e barra di controllo
Posizione della barra di scorrimento con intestazione dell'app e barra di controllo espansa
Posizione della barra di scorrimento con barra delle applicazioni/intestazione e barra di controllo ridotta a icona
Posizione della barra di scorrimento solo con barra delle applicazioni/intestazione
Posizione della barra di scorrimento con intestazione dell'app e barra di controllo
Posizione della barra di scorrimento con intestazione dell'app e barra di controllo espansa
Posizione della barra di scorrimento con altezza dello schermo ridotta
Indicatore di avanzamento dello scorrimento opzionale
Stili
Colore
| Elemento | Colore (modalità giorno) | Colore (modalità notturna) |
|---|---|---|
| Icone principali - stato attivo | Bianco | Bianco all'88% |
| Icone principali - stato inattivo | Bianco al 56% | Bianco al 50% |
| Indicatore di avanzamento dello scorrimento | Bianco al 16% | Bianco al 12% |
Dimensionamento
| Elemento | Dimensioni (dp) |
|---|---|
| Icona principale | 44 |
| Tocca il bersaglio | 76 |
| Larghezza dell'indicatore di avanzamento dello scorrimento | 6 |
| Raggio d'angolo arrotondato (R4) | Pieno |
Esempi
