%% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | [[Design et Création Numérique/Design/User Interface/2 Typographie et couleur\|← Typographie et couleur]] | [[Design et Création Numérique/Design/User Interface/4 Écrans adaptatifs et textes d'interface\|Écrans adaptatifs et textes d'interface →]] | > |:---|---:| %% nav-fin %% # 📘 3. Les composants et leurs états Une interface se construit avec un petit nombre de composants réemployés. Chaque composant a plusieurs états. Concevoir un composant, c'est dessiner tous ses états. ## 3.1 Les composants de base | Composant | Rôle | Règles | |---|---|---| | **Bouton** | Déclenche une action. | Un libellé à l'infinitif ou à l'impératif, une hauteur de 40 à 48 pixels, une largeur qui suit le texte avec des marges de 16 à 24 pixels. Trois variantes au plus : principal, secondaire, destructif. | | **Lien** | Mène à un autre écran. | Souligné ou en couleur principale. Un lien qui ressemble à un bouton trompe. | | **Champ de saisie** | Recueille une valeur. | Une étiquette au-dessus, une hauteur alignée sur les boutons, une bordure visible, un message d'erreur sous le champ. | | **Case à cocher et bouton radio** | Choix multiple et choix unique. | Une cible d'au moins 24 pixels, minimum de la norme WCAG 2.2 ; 44 pixels sont recommandés sur écran tactile. Un libellé cliquable. | | **Liste déroulante** | Un choix parmi plusieurs. | Réservée à plus de cinq options. Moins de cinq : des boutons radio. | | **Carte** | Regroupe les informations d'un objet. | Un titre, deux à quatre informations, une action au plus. Toutes les cartes d'une liste ont la même structure. | | **Tableau** | Compare des lignes sur des colonnes. | En-tête fixe, chiffres alignés à droite, une action par ligne au plus. | | **Navigation** | Donne accès aux sections. | Cinq à sept entrées au plus, section courante marquée. | | **Fenêtre modale** | Confirme ou informe en bloquant le reste. | Un titre, un texte court, deux boutons au plus, fermeture par la croix et par Échap. | | **Notification** | Signale un résultat sans bloquer. | Disparaît seule après quelques secondes pour un succès, reste affichée pour une erreur. | ## 3.2 Les états d'un composant Chaque composant interactif se dessine dans sept états. | État | Quand | Ce qui change | |---|---|---| | **Repos** | Par défaut. | L'aspect de référence. | | **Survol** | Le pointeur est dessus. | Une nuance plus foncée ou plus claire. Sur téléphone, cet état n'existe pas. | | **Actif** | Pendant le clic ou la sélection. | Un enfoncement ou un contraste plus fort. | | **Focus** | L'élément est atteint au clavier. | Un contour visible, jamais retiré. | | **Désactivé** | L'action est impossible. | Gris, sans réaction au survol. Une infobulle dit pourquoi. | | **Chargement** | L'action est en cours. | Un indicateur dans le composant, le composant ne réagit plus. | | **Erreur** | La valeur ou l'action est refusée. | Bordure et message en couleur d'erreur, sous le champ. | Un composant dont un état manque produit un défaut de type heuristique 1, visibilité de l'état du système. **À manipuler :** choisissez un état et observez le bouton et le champ. La touche Tab place le focus sur le composant. Le code CSS de l'état s'affiche en dessous. ```sq-etats ``` ## 3.3 Le système de composants Les composants d'une application forment un ensemble cohérent, appelé système de composants ou bibliothèque. Trois règles : - Un composant se dessine **une fois** et se réemploie partout. Deux boutons principaux de couleurs différentes sur deux écrans sont un défaut de cohérence. - Le système documente pour chaque composant ses **variantes**, ses **états** et ses **dimensions**. - Toute exception au système se justifie et se documente. ## 3.4 Exercice Repérez dans l'application SkillQuest le bouton d'inscription à une compétence. Listez les états que vous pouvez observer : repos, survol, actif, désactivé quand un pré-requis manque, chargement, inscrit. Notez ceux que vous ne trouvez pas. ## 3.5 À retenir - Dix composants de base couvrent la plupart des écrans. - Sept états par composant interactif. Le focus se garde toujours. - Un composant se dessine une fois et se réemploie partout. %% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | [[Design et Création Numérique/Design/User Interface/2 Typographie et couleur\|← Typographie et couleur]] | [[Design et Création Numérique/Design/User Interface/4 Écrans adaptatifs et textes d'interface\|Écrans adaptatifs et textes d'interface →]] | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]