Les boutons aident les utilisateurs à lancer des actions ou un flux. Choisissez parmi différents types de boutons pour éclairer l’emphase.
Ressources
| Type | Lien | État |
|---|---|---|
| conception | Source de la conception (Figma) | Disponible |
| Implémentation | Jetpack Compose | Disponible |
Sélection
- Choisissez le type de bouton en fonction de l'importance de l'action. Plus l'action est importante, plus le bouton est mis en avant.
- Les boutons doivent avoir des libellés clairs pour indiquer l'action qu'ils effectuent.
- Placez les boutons de manière logique à l'écran, là où les utilisateurs s'attendent probablement à les trouver.
- N'abusez pas des boutons. Trop de boutons sur un écran perturbent la hiérarchie visuelle.
Variantes
Il existe six types de boutons:
- Bouton plein
- Bouton Contour
- Bouton d'icône
- Bouton de l'icône Contour
- Bouton long
- Bouton "Image"
Choisissez le type de bouton en fonction de l'importance de l'action. Plus l'action est importante, plus son bouton doit être mis en avant.
Bouton plein et contour
Les boutons pleins ont l'impact le plus visuel et doivent être utilisés pour les actions finales et importantes qui terminent un flux, telles que "Enregistrer", "Rejoindre maintenant", "Confirmer" ou "Télécharger".
Les boutons avec contours sont des boutons à intensité moyenne. Ils contiennent des actions importantes, mais qui ne constituent pas l'action principale d'une application. Les boutons encadrés sont associés aux boutons pleins pour indiquer une action secondaire alternative.
Anatomie
- Conteneur
- Texte du libellé
- Icône (facultatif)
États
Représentation visuelle de l'état d'un composant.
- Par défaut
- Allez à l'essentiel
- Appuyé
Caractéristiques
Icône et icône de contour
Utilisez des boutons en forme d'icône pour afficher les actions dans un format compact. Les boutons en forme d'icône peuvent représenter des actions d'ouverture, telles que l'ouverture d'un menu à développer ou d'une recherche, ou des actions binaires pouvant être activées et désactivées, comme l'ajout aux favoris ou aux favoris. Ils sont également utilisés pour lire ou mettre en pause des contenus multimédias.
Les boutons en forme d'icône peuvent être définis en trois tailles: petits, moyens et grands.
Anatomie
- Conteneur
- Icône
États
- Par défaut
- Allez à l'essentiel
- Appuyé
Les états sont des représentations visuelles utilisées pour communiquer le statut d'un composant ou d'un élément interactif.
Caractéristiques techniques
Bouton large
Les boutons larges sont utilisés pour renforcer l'accentuation que d'habitude. Ils contiennent des actions importantes. Les boutons représentant des options connexes sont regroupés. Le groupe doit avoir une surface commune.
Anatomie
- Conteneur
- Icône de début
- Titre
- Sous-titre
États
- Par défaut
- Allez à l'essentiel
- Appuyé
Les états sont des représentations visuelles utilisées pour communiquer le statut d'un composant ou d'un élément interactif.
Caractéristiques
Bouton "Image"
Les boutons d'image sont généralement utilisés pour afficher des vignettes des contenus disponibles au niveau de navigation suivant. Elles sont généralement regroupées avec des actions connexes, et le groupe doit partager une surface commune.
Anatomie
- Conteneur
- Icône de début
- Titre
- Sous-titre
- Calque d'image comprenant les éléments suivants :
- Fond (superposition d'état)
- Dégradé (basé sur la couleur de la surface)
- Image
États
- Par défaut
- Allez à l'essentiel
- Appuyé
Les états sont des représentations visuelles utilisées pour communiquer le statut d'un composant ou d'un élément interactif.
Caractéristiques techniques
Utilisation
Les boutons sont généralement utilisés pour indiquer les actions qu'un utilisateur peut effectuer. Ils se trouvent souvent dans les éléments d'interface utilisateur tels que les boîtes de dialogue, les fenêtres modales, les formulaires, les cartes et les barres d'outils.
Les boutons ne sont qu'une des options permettant de représenter les actions dans votre interface utilisateur. N'en abusez pas. Trop de boutons sur un écran perturbent la hiérarchie visuelle.
- Conteneur
- Icône
- Texte du libellé
- Titre
- Sous-titre
- Image
Conteneur
Les boutons affichent un conteneur autour du contenu. Le conteneur s'agrandit de 1,1 fois la mise au point, ce qui permet de conserver la marge intérieure interne. Voici quelques points à prendre en compte concernant les conteneurs:
- Définissez la largeur du conteneur en fonction du contenu, avec une marge intérieure cohérente.
- Définissez la position relative du conteneur par rapport à la grille de mise en page responsive.
- Utilisez des conteneurs de couleur unie pour les boutons pleins.
- Utilisez la couleur de trait et de remplissage de la mise au point pour les boutons présentant un contour. Lorsque le curseur est placé, le conteneur obtient une couleur de remplissage et un contour.
- Pour les boutons larges et d'image, la largeur du conteneur est définie en fonction de la grille de mise en page.
- La taille, la position et l'alignement d'un conteneur peuvent changer à mesure que son conteneur parent évolue.
Les conteneurs de boutons de texte et d'icône ont des coins entièrement arrondis. Les conteneurs de boutons larges et d'image ont des conteneurs arrondis de 12 dp.
À faire
Attention
Icône
Les icônes communiquent visuellement l'action du bouton et aident à attirer l'attention. Ils doivent être placés du côté gauche du bouton. Les icônes sont toujours centrées verticalement dans le conteneur.
À faire
À éviter
Attention
Texte du libellé
Le texte du libellé est l'élément le plus important d'un bouton. Il décrit l'action qui se produit lorsqu'un utilisateur appuie sur un bouton.
Utilisez une majuscule en début de phrase pour le texte de l'étiquette du bouton, en mettant en majuscule le premier mot et les noms propres. Évitez de renvoyer le texte à la ligne automatiquement. Pour une lisibilité optimale, le texte des étiquettes doit rester sur une seule ligne.
À faire
Attention
Image
Les boutons d'image ont toujours une superposition de dégradé et une bande en haut de l'image en arrière-plan. La superposition de dégradé est définie en fonction de la couleur du conteneur. Le fond change en fonction de l'état.
Groupes de boutons
Les boutons apparaissent ensemble sur une ligne ou une colonne pour maintenir une navigation cohérente entre les actions. Les sections suivantes décrivent les éléments à prendre en compte.
Informer la hiérarchie
Chaque écran doit avoir une action principale représentée par un bouton bien visible, généralement large. Le bouton doit être plus facile à voir et à comprendre. Les autres boutons doivent être moins visibles et ne doivent pas détourner les utilisateurs de l'action principale.
Le premier bouton du groupe sert d'action principale, car le curseur est placé dessus en premier.
Conserver une mise en page linéaire
- Mise en page des lignes
- Disposition en colonnes
Utiliser les variantes de manière logique
Dans la mise en page en colonnes, les variantes de bouton unique doivent être conservées. Dans la mise en page des lignes, différentes variantes peuvent être regroupées dans un groupe de boutons, mais la logique doit être claire. Les boutons remplis et de contour peuvent être utilisés dans le même groupe, mais veillez à ce que la hiérarchie des actions soit claire.
À faire
À éviter
Attention
