Boutons d'action flottants : quand utiliser un FAB et comment l'animer
Quand un bouton d'action flottant aide, quand ça fait mal, un FAB par écran, des FAB et des menus FAB étendus, un comportement de défilement et un mouvement.
À retenir
Utilisez un bouton d'action flottant pour l'action la plus importante sur un écran, comme composer ou créer. Affichez-en un seul par écran, ignorez-le sur les écrans sans action principale claire, utilisez un FAB étendu avec une étiquette lorsque l'icône seule n'est pas claire et gardez son mouvement utile lorsqu'il se développe, se réduit lors du défilement ou ouvre un menu.
À quoi sert un FAB
Material Design 3 décrit le FAB comme l'action principale de l'écran et déconseille d'afficher plusieurs FAB sur un seul écran. Il note également que les FAB ne sont pas nécessaires sur tous les écrans, par exemple lorsque les images représentent déjà les actions principales.
Variantes
Le matériel propose plusieurs formes :
- FAB standard : une icône pour une action bien connue telle que composer.
- FAB étendu : icône plus étiquette, plus claire pour les actions moins évidentes et sur des écrans plus grands.
- Grand FAB : pour des actions principales proéminentes, adapté aux fenêtres plus larges telles que les tablettes et les pliables dépliés.
- Menu FAB : le FAB ouvre un court ensemble d’actions associées.
Quand ne pas en utiliser un
Ignorez le FAB pour les actions mineures ou destructrices, sur les écrans où l'action principale est déjà évidente et où elle couvrirait un contenu ou des contrôles importants. Sur iOS, un FAB n'est pas un modèle natif ; Les boutons de la barre d’outils ou de la barre de navigation sont plus familiers aux utilisateurs d’iPhone.
Mouvement
Un FAB passe souvent d'étendu à standard au fur et à mesure que les gens font défiler, puis se développe à nouveau, et il peut se transformer en une feuille ou un menu lorsqu'on y appuie. Ces transitions expliquent où s'est déroulée l'action et d'où vient son contenu. Gardez-les courts, évitez de rebondir à chaque parchemin et respectez la réduction des mouvements.
Principes clés à retenir
- Un FAB par écran, pour l'action principale
- Tous les écrans n’en ont pas besoin
- Utilisez un FAB étendu lorsque l'icône n'est pas évidente
- Évitez les FAB pour les actions mineures ou destructrices
- Utilisez le mouvement pour montrer d'où vient le contenu du FAB
Questions fréquentes
Sources
- FAB guidelines — Material Design 3