Un'unica lingua di interfaccia

1) Cos'è un'unica lingua di interfaccia e perché è necessaria

Un unico linguaggio di interfaccia (EIE) è un sistema comune di nozioni, regole visive e interazioni condiviso da designer, ingegneri, analisti e autori di contenuti.

• Coerenza: componenti e termini identici in prodotti e comandi diversi.
• Velocità: assemblaggio rapido, meno colivari, più veloce onboarding.
• Qualità: pattern UX consistenti, disponibilità predefinita.
• Scalabilità: evoluzione sicura senza disintegrazione dello zoo UI.

2) Livelli di una lingua unica

1. Token (colore, tipografia, dimensioni, ombre, rientri, raggi, animazioni).
2. Componenti (pulsanti, campi di input, tabelle, grafici, moduli, toast, schede).
3. Pattern (moduli, convalida, procedure guidate passo, elenchi/tabelle, notifiche).
4. Contenuti (microcopirating, terminologia, messaggi di errore).
5. Iconografia e illustrazioni (famiglia, stile, quote e linee).
6. Disponibilità e i18n/RTL (regole A11y, traducibilità, locali).
7. Processi (versioni, haydrill, gelosia, linter, vetrine e esempi).

3) Token di progettazione (base espressiva)

I token sono valori definiti riutilizzati in tutti i prodotti.

3. 1 Struttura token (esempio)

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 Neiming token

Dal comune al privato, 'color. accent. primary`, не `primaryBlue`.
Nessun riferimento a un marchio in un neuroming (il marchio è un tema, non un nome di token).
Gradi: 'fg. muted`, `fg. primary`, `fg. inverse`. Non codificare la luminosità nel nome ('blue500') senza sistema.

3. 3 Token-argomenti

Chiaro, scuro, contrastante, cambia i valori, non i nomi.
I temi sono un livello di ridefinizione, l'UI rimane consistente.

4) Componenti: contratto, stato, disponibilità

Componente = visualizzazione + comportamento + contratto di scomparsa + A11y.

4. 1 Esempio di contratto pulsante

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;
};

Stati: 'default/hover/active/focus/disabled/loading'.
Disponibilità: anello di fuoco, dimensioni target 40-48 px, «aria-pressed» per toggle.

4. 2 Garanzie dei componenti

Dimensioni stabili (line-height, paddings).
Disponibilità dalla scatola (roll/aria, tastiera, contrasto).
Invarianti: errore all'interno del campo sempre sotto e con'aria-describedby '.

5) Pattern UX (logica ripetuta)

Moduli: etichetta sinistra/superiore, placeholder ≠ label, errori accanto a + nel riepilogo, maschere di input e suggerimenti.
Modalks: un CTA principale, 'Esc', chiude, incastra il trucco, ripristina il trucco.
Tabelle/elenchi: ordinamento, intestazione sticky, pagina, esportazione.
Filtri: pulsante esplicito Applica, reimpostazione, preimpostazioni salvate.
Notifiche: tost 3-5 c, pausa al fuoco, 'role = "status/alert" ".
Dashboard: top insights il contesto della grafica CTA.

6) Terminologia e microcopirating unificati

6. 1 Glossario

Guida un unico glossario di termini aziendali e UX. Ogni articolo dell'interfaccia fa riferimento a esso.
Per le doppie, scegliere una parola («portafoglio» vs «bilanciamento»), la seconda come sinonimo di ricerca.

6. 2 Regole del testo

Breve anche sul caso; Evitare il gergo.
Errori - Spiega cosa fare: Specifica una data in formato GGG-MM-DD.
I titoli sono essenziali; pulsanti - verbi (Salva, Annulla).
Unità consistenziali: data/ora in UTC o locali, valute con codice (EUR, USD).

7) Iconografia e illustrazioni

Famiglia isomorfo: angolo unico, spessore linea, griglia 24 x 24.
Stato e semantico: colore secondario; forma/icona + testo - primario.
Scalabilità: le icone non nuotano in densità diverse (1 x/2 x/3 x).

8) Disponibilità (A11y) e localizzazione (i18n/RTL)

I componenti vengono sottoposti a WCAG AA: contrasto, navigazione dalla tastiera, attivazione, «prefers-reduced-motion».
Le righe tradotte sono risorse, non codice. I playsholder e il formato dei numeri/date sono localizzabili.
RTL: mirroring delle icone, ordine di Taib corretto, logica della tastiera.

9) Numeri, date, valute e formati

Data/ora: ISO-8601, il punto di data/ora è UTC; l'utente locale.
Valuta: minor units/righe decimali; immettere sempre il codice (ad esempio, "€12,34" o "€12. 34 EUR - locale).
Gli interessi sono «12,3%» e i punti «+ 1,2 P» sono evidenti.
Arrotondamento a cifre significative «k/m» per i grandi numeri.

10) Governance: ruoli, manufatti, canali

Design Language Council (DLC) - I titolari di token/componenti sostengono RFC.

• Libreria componenti (Figma/Codice) + directory attiva con esempi.
• Documentazione: haydrill, pattern, A11y, content hyde.
• Chainjog con date, livelli (added/changed/deprecated/removed/fixed).
• Canali: design sink settimanale, Slack Channel, showcase di implementazione.

11) Versioning e evoluzione

SemVer per il pacchetto di componenti: 'MAJOR. MINOR. PATCH`.
MINOR - Additivo: nuovi token, propence in default, nuovi componenti.
MAJOR - breaking: rimozione di propiti, cambio di semantica, insidie migratorie.
Deprecazioni, avvisi, finestra per 90 giorni, bandiere di compatibilità.

12) Linter e controlli automatici

UI-linter - Colori non consentiti fuori dai token, anti-pattern (pulsante-diva, outline disattivato).
Controlli A11y: contrasto, ruoli/aria, fuoco, tastiera.
i18n-linter: righe «rigide» nel codice, playsholder non corretti.
Test di screenshot: regressione visiva dei componenti.
I contratti API di visualizzazione (se disponibili) sono tipi di dati, intervalli, firme.

13) Vetrina dei componenti (storybook/arenile)

Esempi vivi con controlli di proping, codice, stato, assegno A11y.
Ricette: modulo di registrazione, procedura guidata 3 fasi, tabella + filtri, modaletta + toast.
«Sabbia locale» è un cambio di lingua/formato/RTL.

14) Modelli di neoming e struttura

14. 1 Componenti (WEM/semantica, esempio CSS)

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

Il codice contiene nomi di props identici: «size», «kind», «disabled», «onClick».

14. 2 Struttura file libreria

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

15) Anti-pattern

Colori/indentazioni liberi fuori dai token.
I componenti sono «ButtonV2», «PrimaryButtonNew».
Il playsholder è l'unico marchio del campo.
Disattiva outline e pulsanti dive.
Imprevedibili hover/active/disabled.
Termini tradotti invece della traduzione normale.
Nessuna migrazione durante gli aggiornamenti.

16) Metriche di qualità della lingua unica

Coverage - Percentuale di schermate che utilizzano la libreria dei componenti.
Consistency Index - Riutilizza i token vs stile manuale.
A11y Pass Rate: percentuale dei componenti che passano WCAG AA.
Defect Escape: difetti UI/contenuto in vendita per 1k commit.
Time-to-Ship: tempo per l'implementazione dello schermo standard prima/dopo DLS.
Adoption: vetrine DAU, numero PR con componenti/pattern.

17) Assegno-foglio schermo

• Utilizzare i token (colore/indentazione/raggio) e non i valori «rigidi».
• Componenti della libreria casta solo con RFC.
• Disponibilità: tastiera/fuoco/contrasto/roll/aria.
• Unità: date/valute/interessi - in base ai formati.
• Microcoppi: pulsanti = verbi, errori = azione di correzione.
• Locali/RTL non rompono il layout.
• Stati: loading/empty/errore sono previsti.
• I test di regressione visiva sono stati aggiornati.

18) Piano di implementazione (3 iterazioni)

Iterazione 1 - Fondamenta (2-3 settimane)

Token (colore/tipografia/spacing/motion), componenti di base (Button, Input, Select, Tooltip, Modal), contenuto-hyde (tonalità, etichette, errori).
Vetrina (storybook) e checker A11y, linter di token.

Iterazione 2 - Pattern e localizzazione (3-4 settimane)

Cartelli di moduli/tabelle/filtri, iconpac 24 x 24, carta di sabbia RTL/i18n, regole di numero/data/valuta.
SemVer, chainjog, processo RFC/Migrazioni, autoveicoli (rendering + A11y).

Iterazione 3 - Scala e evoluzione (continua)

Componenti compositi (Wizard, DataGrid, Chart primitives), tematizzazione (chiaro/scuro/contrasto), report sulle metriche di qualità, verifiche UX regolari.

19) Mini FAQ

«Tutto e tutto»?
No, no. Iniziate con i token e i componenti di base, quindi aggiungete pattern e processi.

Come convincere le squadre a usare l'EIE?
Mostra la vincita: velocità, meno difetti, prescrizioni di schermate pronte e A11y «da scatola».

Cosa fare con gli schermi legacy?
Il piano di migrazione, gli stili di ponte attraverso i token, gli schermi prioritari per primi.

Totale

Un'unica lingua di interfaccia non è solo una libreria di componenti. Si tratta di un sistema di regole e processi in cui i token definiscono l'espressività, i componenti il comportamento e la disponibilità, i pattern la ripetibilità delle soluzioni e le metriche l'evoluzione sostenibile. Rendete la lingua chiara, verificabile ed espandibile e i vostri prodotti saranno uniformi, veloci e affidabili.