Les barres de défilement indiquent la position de l'utilisateur dans un document qui est plus grande que l'espace d'affichage. Ils permettent à l'utilisateur de naviguer dans le reste du document en déplaçant la zone d'affichage de la fenêtre vers le haut ou vers le bas.
Les utilisateurs interagissent avec les barres de défilement à l'aide d'un écran tactile, d'une molette ou d'un pavé tactile. Appuyez sur les flèches de la barre de défilement pour déplacer le contenu par "pages", c'est-à-dire des incréments équivalents à la hauteur de l'écran. Toutefois, si l'utilisateur fait défiler rapidement l'écran pour faire défiler la page (en fonction de la sensibilité de l'écran tactile), ce mouvement peut créer un élan inertien qui permet de faire défiler plus d'une page. Quelle que soit la façon dont le défilement est lancé, le mouvement de défilement doit toujours s'ancrer sur un élément.
Anatomie
La barre de défilement est composée des affordances de défilement vers le haut et vers le bas, ainsi que de l'indicateur de progression du défilement. Les chevrons sont utilisés dans les affordances de défilement pour indiquer la direction du défilement. L'indicateur de progression du défilement est un élément facultatif qui indique le contenu visible et la position de défilement par rapport à la quantité totale de contenu sur la page.
Remarque:L'indicateur de progression du défilement n'est pas conçu pour être déplaçable.
2. Indicateur de progression du défilement
3. affordance de défilement
Caractéristiques techniques
Position de la barre de défilement avec la barre de navigation principale empilée et la barre de commandes réduite
Position de la barre de défilement avec l'en-tête de l'application uniquement
Position de la barre de défilement avec l'en-tête de l'application et la barre de commandes
Position de la barre de défilement avec l'en-tête de l'application et la barre de commandes développée
Position de la barre de défilement avec la barre d'application/en-tête et la barre de commandes réduite
Position de la barre de défilement avec la barre d'application/le titre uniquement
Position de la barre de défilement avec l'en-tête de l'application et la barre de commandes
Position de la barre de défilement avec l'en-tête de l'application et la barre de commandes développée
Position de la barre de défilement avec une hauteur d'écran courte
Indicateur de progression du défilement facultatif
Styles
Couleur
| Élément | Couleur(mode Jour) | Couleur (mode Nuit) |
|---|---|---|
| Icônes principales : état actif | Blanc | Blanc à 88% |
| Icônes principales : état inactif | Blanc à 56% | Blanc à 50% |
| Indicateur de progression du défilement | Blanc à 16% | Blanc à 12% |
Taille
| Élément | Taille (dp) |
|---|---|
| Icône principale | 44 |
| Zone cible tactile | 76 |
| Largeur de l'indicateur de progression du défilement | 6 |
| Arrondi d'angle arrondi (R4) | Complet |
Exemples
