Limbă de interfață unică

1) Ce este un singur limbaj de interfață și de ce este necesar

Unified Interface Language (NEI) este un sistem comun de concepte, reguli vizuale și interacțiuni împărtășite de designeri, ingineri, analiști și autori de conținut.

• Consecvență - Aceleași componente și termeni între produse și echipe.
• Viteza: construiește rapid, mai puține holivare, mai rapid la bord.
• Calitate: modele UX consecvente, disponibilitate „în mod implicit”.
• Scalabilitate: evoluție sigură fără a se rupe într-o „grădină zoologică UI”.

2) Straturile unei singure limbi

1. Jetoane (culoare, tipografie, dimensiuni, umbre, liniuțe, raze, animații).
2. Componente (butoane, câmpuri de intrare, tabele, grafice, modale, toasturi, file).
3. Modele (formulare, validare, experți pas cu pas, liste/tabele, notificări).
4. Conținut (micro-copywriting, terminologie, mesaje de eroare).
5. Iconografie și ilustrații (familie, stil, dimensiuni și linii).
6. Disponibilitate și i18n/RTL (reguli A11y, traducere, localizări).
7. Procese (versiuni, ghiduri, recenzii, lintere, vitrine și exemple).

3) jetoane de proiectare (baza expresivității)

Jetoanele sunt numite valori care sunt reutilizate în toate produsele.

3. 1 Structura token (exemplu)

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 Numirea jetoanelor

De la general la particular: "culoare. accent. primar ', не' primarBlue '.
Fără a fi legat de un brand în denumire (marca este un subiect, nu un nume de token).
Gradatii: 'fg. muted ',' fg. primar ',' fg. invers ". Nu codificați luminozitatea în numele („blue500”) fără un sistem.

3. 3 jetoane tematice

Lumină, întuneric, contrastant: schimbă valorile, nu numele.
Teme - suprascrie strat, UI rămâne consecventă.

4) Componente: Contract, State, Disponibilitate

Component = Visual + Comportament + Contract recuzită + A11y.

4. 1 Contract de butoane Exemplu

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

State: 'default/hover/active/focus/disabled/loading'.
Disponibilitate: inel de focalizare, dimensiuni țintă ≥ 40-48 px, „aria-presat” pentru comutare.

4. 2 Garanții componente

Dimensiuni stabile (linie-înălțime, căptușeli).
Accesibilitatea din cutie (roluri/arie, tastatură, contrast).
Invarianți: eroare în interiorul câmpului întotdeauna în partea de jos și cu 'aria-descripted'.

5) Modele UX (logică repetabilă)

Formulare: eticheta stânga/sus, eticheta ≠ înlocuitor, una lângă alta + erori sumare, măști de intrare și solicitări.
Modalități: un CTA principal, "Esc' închide, focalizează capcana, focalizează întoarcerea.
Tabele/liste: sortare, antet lipicios, paginare, export.
Filtre: Aplicați explicit butonul, resetați, salvați presetările.
Notificări: pâine prăjită ≤ 3-5 s, pauză la focalizare, „rol =” stare/alertă „”.
Tablouri de bord: perspective de top → context → grafică → CTA.

6) Terminologie comună și micro-copywriting

6. 1 Glosar

Mențineți un singur glosar de afaceri și termeni UX. Fiecare articol de interfață se referă la ea.
Pentru dublete - alegeți un cuvânt („portofel” vs „echilibru”), al doilea - ca sinonim în căutare.

6. 2 Reguli de text

Pe scurt și cu privire la caz; evitaţi jargonul.
Erori - explicați ce trebuie să faceți: "Specificați data în formatul AAAA-LL-ZD'.
Rubricile sunt substantive; butoane - verbe („Salvare”, „Anulare”).
Unități consistente: data/ora în UTC sau locale, valute cu cod (EUR, USD).

7) Iconografie și ilustrații

Familia este izomorfă: un singur unghi, grosimea liniei, grila 24 × 24.
Stări și semantică: culoare - secundar; formă/pictogramă + text - primar.
Scalare: pictogramele nu „plutesc” în diferite densități (1 ×/2 ×/3 ×).

8) Disponibilitate (A11y) și localizare (i18n/RTL)

Componentele sunt supuse WCAG AA: contrast, navigare la tastatură, focalizare, „preferă mișcarea redusă”.
Șiruri traduse - în resurse, nu în cod. Înlocuitorii și formatul număr/dată sunt localizabili.
RTL: pictograme oglindire, ordinea corectă Tab, logica DnD de la tastatură.

9) Numere, date, valute și formate

Date/oră: ISO-8601, punct de timp adevărat - UTC; utilizator - locale.
Valută: unități minore/șiruri zecimale; specificați întotdeauna un cod (de exemplu, "€12. 34” sau „12. 34 EUR" - după locale).
Dobândă: '12. 3% „și puncte” + 1. 2 pp 'cleary distinge.
Rotunjire: la cifre semnificative; "k/m' pentru numere mari.

10) Guvernare: Roluri, Artefacte, Canale

Design Language Council (DLC): proprietari de token/componente, pretenții RFC.

• Content Center (Figma/Code) + Catalog live cu exemple.
• Documentație: ghiduri, modele, A11y, ghid de conținut.
• Changelog cu date, niveluri (adăugat/schimbat/șters/eliminat/fix).
• Canale: chiuveta de design săptămânal, canal Slack, vitrine de implementare.

11) Versionarea și evoluția

SemVer pentru pachetul de componente: "MAJOR. MINOR. PATCH ".
MINOR - aditiv: jetoane noi, recuzită cu defaults, componente noi.
MAJOR - spargere: eliminarea recuzitei, schimbarea semanticii → a ghidurilor de migrare.
Decretări: avertismente, fereastră ≥ 90 de zile, steaguri de compatibilitate.

12) Lintere și verificări automate

UI-linter: culori interzise în afara jetoanelor, anti-modele (buton-diva, contur dezactivat).
A11y-checks: contrast, roluri/arie, focalizare, tastatură.
i18n-linter: linii „dure” în cod, înlocuitori incorecți.
Teste de captură de ecran: regresii vizuale ale componentelor.
Vizualizarea contractelor API (dacă există): tipuri de date, intervale, semnături.

13) Vitrină componentă (carte de povești/cutie de nisip)

Exemple live cu controale recuzită, cod, state, A11y-checker.
„Rețete”: formular de înregistrare, pas 3 expert, masă + filtre, modalka + pâine prăjită.
„Sandbox of locales”: comutarea limbajului/formatelor/RTL.

14) Denumirea și structura tiparelor

14. 1 Componente (BEM/semantică, exemplu CSS)

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

În cod - nume monotone de recuzită: „dimensiune”, „fel”, „dezactivat”, „onClick”.

14. 2 Structura fișierului bibliotecii

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

15) Anti-modele

„Gratuit” culori/liniuțe în afara jetoanelor.
Componente duplicat: „ButtonV2,” „PrimaryButtonNew”.
Înlocuitor ca singura etichetă de câmp.
Dezactivarea contur și div-butoane.
Imprevizibil hover/activ/dezactivat.
Termeni transliterați în loc de traducere normală.
Lipsa ghidurilor de migrare în timpul actualizărilor.

16) Single Language Quality Metrics

Acoperire - proporția de ecrane care utilizează biblioteca de conținut.
Indicele de consistență: reutilizați jetoanele vs stiluri „manuale”.
Rata de trecere a A11y - procentul de componente care trec WCAG AA.
Defect Escape: UI/conținut defecte în 1k comite vânzări.
Time-to-Ship - timp pentru a implementa un ecran tipic înainte/după DLS.
Adoptie: vitrine DA, numar PR cu componente/modele.

17) Lista de verificare a ecranului

• Token-uri folosite (culoare/liniuțe/raze), nu valori dure.
• Componente din bibliotecă; personalizat - numai RFC.
• Accesibilitate: tastatură/focus/contrast/roluri/arie.
• Unități: date/valute/procente - pe ghid de format.
• Microcopii: butoane = verbe, erori = acțiune pentru a corecta.
• Localizări/RTL nu rupe aspectul.
• State: încărcarea/goale/eroare sunt furnizate.
• Teste de regresie vizuală actualizate.

18) Planul de implementare (3 iterații)

Iterație 1 - Fundație (2-3 săptămâni)

Jetoane (culoare/tipografie/spațiere/mișcare), componente de bază (buton, intrare, selectare, tooltip, modal), ghid de conținut (ton, etichete, erori).
Vitrină (carte de povești) și A11y-checker, jeton.

Iterația 2 - Modele și localizare (3-4 săptămâni)

Modele de forme/tabele/filtre, icon pack 24 × 24, RTL/i18n sandbox, reguli pentru numere/date/valute.
SemVer, changelog, proces RFC/migrare, autoteste (visual + A11y).

Iterația 3 - Scară și evoluție (continuă)

Componente compoziționale (Wizard, DataGrid, Chart primitive), temizare (lumină/întuneric/contrast), rapoarte metrice de calitate, audituri regulate UX.

19) Mini-Întrebări frecvente

Este necesar să „toate dintr-o dată”?
Nu, nu este. Începeți cu jetoane și componente de bază, apoi adăugați modele și procese.

Cum să convingi echipele să folosească YEI?
Arată câștigurile: viteză, mai puține defecte, rețete de ecran gata făcute și A11y din cutie.

Ce să faci cu ecranele moștenite?
Plan de migrare, stiluri de punte prin jetoane, ecrane prioritare - în primul rând.

Total

Un singur limbaj de interfață nu este doar o bibliotecă componentă. Acesta este un sistem de reguli și procese, în care token-urile stabilesc expresivitatea, componentele - comportamentul și disponibilitatea, tiparele - repetabilitatea deciziilor și guvernanța și metrica - evoluția durabilă. Asigurați-vă limba clară, verificabilă și extensibilă - iar produsele dvs. vor arăta și vor funcționa uniform, rapid și fiabil.