Langage d'interface unique

1) Qu'est-ce qu'un seul langage d'interface et pourquoi il est nécessaire

Le langage unique des interfaces est un système commun de concepts, de règles visuelles et d'interactions que partagent les concepteurs, les ingénieurs, les analystes et les auteurs de contenu.

• Cohérence : les mêmes composants et termes dans les différents produits et équipes.
• Vitesse : assemblages rapides, moins de holyvars, onbording plus rapide.
• Qualité : consistance UX, disponibilité « par défaut ».
• Évolutivité : évolution sûre sans désintégration en « zoo UI ».

2) Couches d'une seule langue

1. Tokens (couleur, typographie, dimensions, ombres, indentations, rayons, animations).
2. Composants (boutons, champs de saisie, tableaux, graphiques, modeleurs, toasts, onglets).
3. Modèles (formulaires, validation, assistants étape par étape, listes/tableaux, notifications).
4. Contenu (microcrédit, terminologie, messages d'erreur).
5. Iconographie et illustrations (famille, style, dimensions et lignes).
6. Disponibilité et i18n/RTL (règles de A11y, traduction, local).
7. Processus (versions, heidrails, rhubarbe, linters, vitrines et exemples).

3) Jetons de conception (base de l'expression)

Les tokens sont des valeurs nommées utilisées dans tous les produits.

3. 1 Structure des tokens (exemple)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 Tokens neuming

Du général au privé : 'color. accent. primary`, не `primaryBlue`.
Sans lien avec la marque en neuming (la marque est un thème, pas le nom du token).
Gradations : 'fg. muted`, `fg. primary`, `fg. inverse`. Ne pas coder la luminosité dans le nom ('blue500') sans système.

3. 3 Tokens-thèmes

Claire, sombre, contrastée : changer les valeurs, pas les noms.
Les thèmes sont un calque de redéfinition, l'IU reste constant.

4) Composants : contrat, états, disponibilité

Composant = visuel + comportement + contrat de props + A11y.

4. 1 Exemple de contrat de bouton

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

États : 'default/hover/active/focus/disabled/loading'.
Disponibilité : anneau de focus, tailles de ciblage ≥ 40-48 px, 'aria-pressed' pour toggle.

4. 2 Garanties de composants

Dimensions stables (line-height, paddings).
Disponibilité depuis la boîte (rouleaux/aria, clavier, contraste).
Invariants : erreur à l'intérieur du champ toujours en bas et avec 'aria-describedby'.

5) Modèles UX (logique répétée)

Formulaires : label gauche/haut, placeholder ≠ label, erreurs côte à côte + dans le résumé, masques de saisie et conseils.
Models : Un CTA principal, 'Esc' ferme, piège de focus, retour de focus.
Tableaux/listes : tri, titre sticky, page, exportation.
Filtres : bouton « Appliquer » explicite, réinitialisation, préréglages enregistrés.
Notifications : toast ≤ 3-5 s, pause au focus, 'role =' status/alert '.
Dashboards : top insights → contexte → graphiques → CTA.

6) Terminologie unifiée et microcrédit

6. 1 Glossaire

Tenez un glossaire unique des termes business et UX. Chaque article de l'interface y fait référence.
Pour les doublets, choisir un mot (« portefeuille » vs « équilibre »), le second est synonyme de recherche.

6. 2 Règles du texte

Bref et dans l'affaire ; éviter le jargon.
Erreurs - Expliquer quoi faire : « Indiquer la date dans le format HGG-MM-DD ».
Les titres sont des noms ; boutons - verbes (« Enregistrer », « Annuler »).
Unités de consistance : date/heure en UTC ou local, devises avec code (EUR, USD).

7) Iconographie et illustrations

La famille est isomorphe : angle unique, épaisseur de ligne, grille 24 × 24.
Statuts et sémantique : couleur - secondaire ; forme/icône + texte - sont primaires.
Mise à l'échelle : les pictogrammes ne « flottent » pas en différentes densités (1 ×/2 ×/3 ×).

8) Disponibilité (A11y) et localisation (i18n/RTL)

Les composants passent par le WCAG AA : contraste, navigation au clavier, focus, 'prefers-reduced-motion'.
Les lignes traduites sont dans les ressources, pas dans le code. Les placcholders et le format des nombres/dates sont localisables.
RTL : mise en miroir des icônes, ordre d'onglet correct, logique DnD à partir du clavier.

9) Nombres, dates, devises et formats

Dates/heures : ISO-8601, le point de l'heure réelle est UTC ; l'utilisateur est local.
Monnaie : unités mineures/lignes décimales ; toujours indiquer le code (par exemple "12,34 €" ou "12. 34 EUR" - local).
Intérêts : « 12,3 % » et points « + 1,2 pp » à distinguer clairement.
Arrondir : jusqu'à des décharges significatives ; "k/m'pour les grands nombres.

10) Howernance : rôles, artefacts, canaux

Design Language Council (DLC) : les propriétaires de tokens/composants, affirment RFC.

• Bibliothèque de composants (Figma/code) + répertoire en direct avec exemples.
• Documentation : hydryles, modèles, A11y, hydes de contenu.
• Chainjlog avec dates, niveaux (added/changed/deprecated/removed/fixed).
• Canaux : sink de conception hebdomadaire, canal Slack, showcayes d'implémentation.

11) Le versioning et l'évolution

BouVer pour le paquet de composants : 'MAJOR. MINOR. PATCH`.
MINOR - de manière additive : nouveaux tokens, propes défectueux, nouveaux composants.
MAJOR - breaking : l'éloignement пропсов, le remplacement de la sémantique → migratoire гайды.
Dépressions : avertissements, fenêtre ≥ 90 jours, drapeaux de compatibilité.

12) Linters et contrôles automatiques

UI-linter : couleurs interdites en dehors des tokens, anti-patterns (bouton-dive, outline désactivé).
Contrôles A11y : contraste, rôles/aria, focus, clavier.
i18n-linter : lignes « dures » dans le code, pistes incorrectes.
Tests de capture d'écran : régression visuelle des composants.
Contrats API de visualisation (le cas échéant) : types de données, plages, signatures.

13) Vitrine des composants (storybook/bac à sable)

Exemples en direct avec contrôles de props, code, états, A11y-checker.
« Recettes » : formulaire d'inscription, Assistant 3 étapes, table + filtres, modalka + toasts.
« Sandbox local » : changement de langue/formats/RTL.

14) Modèles et structures de neuming

14. 1 Composants (WEM/sémantique, exemple CSS)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

Dans le code, les noms monotones sont "size", "kind'," disabled "," onClick ".

14. 2 Structure des fichiers de la bibliothèque

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

15) Anti-modèles

Couleurs/indentations « libres » en dehors des tokens.
Doublets de composants : « ButtonV2 », « PrimaryButtonNew ».
C'est la seule marque de champ.
Désactivation de l'outline et des boutons de dive.
Imprévisible hover/active/disabled.
Termes translittérés au lieu d'une traduction normale.
Pas d'hydes de migration lors des mises à jour.

16) Métriques de qualité d'une seule langue

Coverage : proportion d'écrans utilisant une bibliothèque de composants.
Indice de cohérence : réutilisation des tokens vs styles « manuels ».
A11y Pass Rate : le pour-cent des composants passant WCAG AA.
Defect Escape : défauts d'UI/contenu en vente sur 1k commits.
Time-to-Ship : temps de mise en œuvre de l'écran type avant/après DLS.
Option : DAU vitrines, nombre PR avec composants/motifs.

17) Chèque écran

• On utilise des tokens (couleur/retrait/rayon) plutôt que des valeurs « rigides ».
• Composants de la bibliothèque ; caste - seulement sous RFC.
• Accessibilité : clavier/focus/contraste/rouleaux/aria.
• Unités : dates/devises/intérêts - par hyde de formats.
• Microcopies : boutons = verbes, erreurs = action pour corriger.
• Localy/RTL ne cassent pas la mise en page.
• États : loading/empty/error sont fournis.
• Tests de régression visuelle mis à jour.

18) Plan de mise en oeuvre (3 itérations)

Itération 1 - Fondation (2-3 semaines)

Tokens (couleur/typographie/spacing/motion), composants de base (Button, Input, Select, Tooltip, Modal), hyde de contenu (ton, labels, erreurs).
Vitrine (storybook) et A11y-checker, linter de tokens.

Itération 2 - Patterns et localisation (3-4 semaines)

Modèles de formulaires/tables/filtres, iconpac 24 × 24, RTL/i18n-bac à sable, règles de nombres/dates/devises.
BouVer, chainjlog, processus RFC/migrations, autotests (visuel + A11y).

Itération 3 - Échelle et évolution (en continu)

Composants composites (Wizard, DataGrid, Chart primitives), temisation (léger/foncé/contraste), rapports de métriques de qualité, audits UX réguliers.

19) Mini-FAQ

Ai-je besoin de tout à la fois ?
Non. Commencez avec des jetons et des composants de base, puis ajoutez des modèles et des processus.

Comment convaincre les équipes d'utiliser l'EAI ?
Montrez les gains : vitesse, moins de défauts, recettes d'écran prêtes à l'emploi et A11y hors de la boîte.

Que faire des écrans légaux ?
Le plan de migration, les styles de pont à travers les tokens, les écrans prioritaires sont les premiers.

Résultat

Un seul langage d'interface n'est pas seulement une bibliothèque de composants. C'est un système de règles et de processus où les tokens définissent l'expression, les composants - le comportement et l'accessibilité, les schémas - la répétabilité des décisions, et la governance et les métriques - l'évolution constante. Rendez votre langage clair, vérifiable et extensible - et vos produits seront homogènes, rapides et fiables.