Le barre di scorrimento indicano la posizione di un utente in un documento più grande dello spazio di visualizzazione. Consentono all'utente di passare al 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 usando il tocco, la rotellina o il touchpad. Toccando le frecce nella barra di scorrimento, i contenuti verranno spostati di "pagine", ovvero incrementi equivalenti all'altezza dello schermo. Tuttavia, se gli utenti scorrono rapidamente sullo scorrimento (a seconda della sensibilità del touchscreen), il movimento di scorrimento può creare uno slancio inerziale che scorre più lontano 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 opzioni di scorrimento verso l'alto e verso il basso e dall'indicatore di avanzamento dello scorrimento. I simboli di navigazione vengono utilizzati nelle affinità di scorrimento per indicare la direzione di scorrimento. L'indicatore di avanzamento dello scorrimento è un elemento facoltativo che indica i contenuti visibili e la posizione dello scorrimento rispetto alla quantità totale dei contenuti della pagina.
Nota: l'indicatore di avanzamento dello scorrimento non è progettato per essere trascinabile.
2. Indicatore di avanzamento dello scorrimento
3. Scorrimento verso il basso
Specifiche
Posizione della barra di scorrimento con navigazione principale in pila e barra di controllo ridotta a icona
Posizione della barra di scorrimento solo con l'intestazione dell'app
Posizione della barra di scorrimento con intestazione e barra di controllo dell'app
Posizione della barra di scorrimento con intestazione dell'app e barra di controllo espansa
Posizione della barra di scorrimento con barra/intestazione dell'app e barra di controllo ridotta a icona
Posizione della barra di scorrimento solo con barra dell'app/intestazione
Posizione della barra di scorrimento con intestazione e barra di controllo dell'app
Posizione della barra di scorrimento con intestazione dell'app e barra di controllo espansa
Posizione della barra di scorrimento con schermo breve
Indicatore facoltativo di avanzamento dello scorrimento
Stili
Colore
| Elemento | Colore(modalità giorno) | Colore (modalità notturna) |
|---|---|---|
| Icone principali - stato attivo | di colore bianco | Bianco all'88% |
| Icone principali - stato inattivo | Bianco @ 56% | Bianco al 50% |
| Indicatore di avanzamento dello scorrimento | Bianco @ 16% | Bianco @ 12% |
Taglie
| Elemento | Dimensioni (dp) |
|---|---|
| Icona principale | 44 |
| Touch target | 76 |
| Larghezza dell'indicatore di avanzamento dello scorrimento | 6 |
| Raggio angolo arrotondato (R4) | Schermo intero |
Esempi
