Un système de conception est un ensemble de décisions de conception réutilisables exprimées sous forme de conseils, de composants et de modèles. Le système peut être décomposé en primitives de conception les plus petites : des éléments tels que la couleur, la typographie ou la forme qui constituent des composants complexes plus grands. Par exemple, une icône et un libellé de texte constituent un composant de bouton, tandis que plusieurs boutons et une surface constituent une fiche. Les systèmes de conception sont également fournis avec un ensemble de conseils composés de ces décisions de conception existantes concernant les composants et les modèles.
Material Design est un système de conception Open Source développé par Google pour vous aider à créer des produits esthétiques axés sur l'utilisateur. Material 3 est la dernière itération de Material Design.
Composants Material Design
Material Design fournit un éventail de composants basés sur du code qui sont des blocs de construction interactifs pour créer une interface utilisateur. Ces composants peuvent être organisés en cinq catégories en fonction de leur objectif : action, conteneur, navigation, sélection et saisie de texte.
Composants d'action
Les composants d'action aident les utilisateurs à atteindre un objectif.
Material propose plusieurs types de boutons pour définir la priorité des actions et des interactions dans différents contextes. Des FAB ou des FAB étendus pour les actions principales aux boutons d'icône en passant par la sélection d'options avec des boutons segmentés.

Composants de communication
Les composants de communication fournissent des informations utiles en alertant les utilisateurs avec des badges, en les informant de l'état d'un processus grâce à des indicateurs de progression et en leur fournissant de brefs messages de processus avec des snackbars.

Composants de confinement
Les composants de conteneur contiennent des informations et des actions, y compris d'autres composants tels que des boutons, des menus ou des chips. La plupart des composants Material utilisent une structuration explicite, qui regroupe le contenu et les actions associés à l'aide d'objets visuels : cartes, boîtes de dialogue, feuilles inférieures, feuilles latérales, carrousels et info-bulles. Les listes peuvent être fournies avec un contenu implicite ou explicite en affichant des séparateurs visibles. Ces composants fournissent des modèles courants pour afficher des groupes de contenu.

Composants de navigation
Les composants de navigation aident les utilisateurs à se déplacer dans l'interface utilisateur. Sur mobile, la barre de navigation ou le panneau de navigation contiennent vos principales destinations de navigation. Les onglets, la barre d'application inférieure et la barre d'application supérieure offrent différentes façons de parcourir les informations et les actions. Découvrez comment utiliser la navigation dans vos mises en page.

Composants de sélection
Les composants de sélection permettent aux utilisateurs de spécifier des choix. Qu'il s'agisse de créer un formulaire avec des cases à cocher et des boutons radio, de filtrer des données à l'aide de chips ou de modifier des paramètres avec des commutateurs et des curseurs, les composants de sélection permettent aux utilisateurs de contrôler et de saisir leurs choix.

Composants de saisie de texte
Les composants de saisie de texte permettent aux utilisateurs de saisir et de modifier du texte. Les champs de texte permettent aux utilisateurs de saisir du texte dans une UI.

Systèmes de conception pour Compose
Pour savoir comment utiliser Compose afin d'implémenter plus facilement un système de conception et harmoniser l'apparence de votre application avec des thèmes, des composants et d'autres aspects du système de conception, consultez Systèmes de conception dans Compose.