Sisteme de proiectare și documentația acestora

1) Ce este un sistem de proiectare și de ce este necesar

Un sistem de proiectare este o singură sursă de adevăr pentru o interfață: un set de token-uri, componente, practici și documentație care oferă predictibilitate UX, viteză de dezvoltare și scalabilitate.

• Consistența stratului vizual și comportamental în toate produsele.
• Viteza: reutilizați componentele, mai puțin costurile de revizuire.
• Calitate: modele generale de A11y, localizare, teste, standarde de conținut.
• Capacitatea de administrare: responsabilitate clară, versiuni, foaie de parcurs.

2) Arhitectura sistemului de proiectare (straturi)

1. Jetoane de design (fundație): culori, tipografie, dimensiuni, raze, umbre, liniuțe, stări, precum și jetoane semantice ("culoare. suprafață. avertizare, spaţiu. xs').
2. Componente UI: butoane, câmpuri de intrare, ferestre modale, dropdown-uri, tabele, toasturi, bannere, alerte, stări goale, schelete.
3. Modele și compoziții: formulare KYC, fluxul de plată, rezultate zero, masterat pas, carduri de conținut.
4. Ghid de conținut (microcopie): ton, dicționar de termeni, modele de eroare/succes, push/bannere.
5. Infrastructura: ghid pentru A11y, testare, localizare, versiuni, contributori (contributing).

3) jetoane de proiectare: principii

Semantica> stil „brut”. Foloseşte culoarea. text. muted 'în loc de' # 6B7280 '.
Tematizare și platforme. Jetoane sursă → maparea platformei (Web, iOS, Android, e-mail).
Temă ușoară/întunecată și contrast WCAG la nivel de token.
Scale globale și contextuale: 'spațiu. 2 ', "raza. md', "altitudine. 1 ',' opacitate. cu handicap ".
Token versioning: modificări - prin politica de depreciere și note de migrație.

4) Componente: cerințele și compoziția paginii în documentație

• Descriere și scop. Când se utilizează/nu se utilizează.
• Variante/stări. Dimensiuni, tipuri (primar/secundar/fantomă), cu handicap, încărcare, distructive.
• Accesibilitate. Rol, tastatură de navigare, „aria”, contrast, inele de focalizare.
• Text microcopie și exemple. Etichete valide/înlocuitori, greșeli, ajutor.
• Exemple de coduri. API-uri minime, controlate/necontrolate.
• Integrarea cu formulare și i18n. Cazuri de linie lungă, numere/valute/date.
• Anti-exemple. Modele de utilizare eronate.
• Matrice de testare. Instantanee vizuale, unitate/interacțiune, cititoare de ecran.

5) Modele de compoziție (Rețete)

Formulare de înregistrare/CUS: expert pas cu pas, progres, validare inline + rezumat, modele de eroare.
Fluxul de plată: selectarea metodei, taxele, datele, regula aceleiași metode, confirmarea și starea.
Stări goale: context + valoare + CTA, zero rezultate de căutare.
Mesaje de succes/eroare: ierarhie de stare, token-uri vizuale, toast/bannere/modale.
Navigare și filtre: căutare globală, presetări rapide, etichete.
Paginile de model ar trebui să prezinte o compoziție de componente gata pentru copiere, cu microcopie și note A11y.

6) Ghid de conținut (voce și ton, microcopie)

Voce: profesională, clară; tonul depinde de context (onboarding, plata, securitate).
Dicționar unificat de termeni: plăți, bonusuri, limite, KYC - o valoare pe produs.
Șabloane: CTA, erori, avertismente, succese, stări goale, notificări.
Localizare-first: stoc pentru lungimea liniilor, numere/valute/date pe regiuni.
A11y-vocabulary: etichete clare, aria-descrieri, fără ambiguități.

7) Accesibilitate (A11y) ca standard de sistem

Criterii de bază: WCAG 2. 1 AA pentru contrast, focalizarea este întotdeauna vizibilă, navigarea la tastatură.
Roluri și atribute: componentele descriu „rol”, „aria-label”, „aria-describy”, regiuni vii pentru toasturi/alerte.
Cititoare pe ecran: exemple de fraze, ordine de citire, stări corecte ('asertive/politicoase').
Proceduri de testare: verificări automate + scripturi manuale.

8) Localizare și internaționalizare

tastele i18n lângă codul componentei + descrierea contextului.
Numere/valute/date prin intermediul utilităților de formatare; nu hardcode text în șabloane.
Teste de lungime: „germană lungă”, „mobilă îngustă”, variante RTL.
Ton în limbi: ton-hartă pentru pași critici (plăți/securitate).

9) Documentație: structură și navigare

1. Introducere: misiune, principii, domenii de responsabilitate.

2. Jetoane: culori, tipografie, grilă, dimensiuni, umbre, stări, teme.

3. Componente: catalog cu filtre (dupa rol, dupa platforma, dupa A11y).

4. Modele: scenarii (formulare, plăți, stări goale, succes/erori).

5. Ghid de conținut: voce și ton, dicționar, șabloane microcopie.

6. Accesibilitate: standarde, liste de verificare, cazuri de testare.

7. Localizare: principii, exemple, glosare după piață.

8. Integrare și cod: instalare, versiuni, exemple, cum să migrați.

9. Contributing: procese contributive, revizuirea designului, revizuirea codului, definirea done.

10. Changelog și foaia de parcurs: eliberări, deprecieri, plan de dezvoltare, probleme cunoscute.

10) Guvernanță și procese

Roluri: proprietar de sistem (DesignOps/UX Platform), întreținători (design/FE), consultanți (BE, A11y, localizare).
Comitetul pentru schimbare: evaluarea cererii, prioritizarea, reconcilierea API/Token.
Procese: RFC pentru componente noi, forme interne de probleme, SLA pentru bug-uri.
Definiția Done: design (Figma) cod ↔ (pachetul UI) ↔ andocare (exemplu + ghid) ↔ teste.

11) Contributing: cum se adaugă/se schimbă

Șablon RFC: o problemă opțiunile decizia aleasă i18n migrația riscurile.
Flow PR: revizuirea designului revizuirea codului copywriter UX verificarea notelor de lansare.
Reguli de compatibilitate inversă: minore/patch-uri pentru nedistructive, majore - cu depreciere și migrare automată, acolo unde este posibil.

12) Versioning, eliberări, migrații

SemVer pentru pachete („@ company/ds-core”, „@ company/ds-forms',” @ company/ds-charts').
Note de lansare: modificări token, API-uri componente, comportament implicit, modificări de rupere, ghiduri de migrare.
Deprecieri: marcaje de andocare, reguli de linter, moduri de cod pentru înlocuirea în masă.
Proiectare-jetoane conducte: singură sursă (JSON/YAML) → platforma construiește (CSS vars, iOS, Android).

13) Testarea calității

Teste unitare de comportament și condiții.
Instantanee vizuale (regresie tematică/stare).
teste A11y: scripturi automate + manuale ale cititorului de ecran.
cazuri E2E pentru fluxul critic (înregistrare, plăți, KYC).
Bugete Perf: limite de pachet/randare și interdicții de dependență grele.

14) Măsurători ale maturității sistemului de proiectare

Adopție:% ecrane/depozite folosind DS.
Viteza: Timp de la aspect la livrare.
Calitate: defecte UI/A11y la 1 eliberare.
Consistență: numărul de componente/stiluri „de unică folosință” în afara DS.
Docs: acoperire componentă dock, audiență internă NPS (designeri/dezvoltatori/analiști).

15) Anti-modele

Jetoane ca o paletă fără semantică („doar culoare”).
Componente fără documentație și fără exemple de cazuri extreme.
Ignorarea A11y (fără focalizare, contrast scăzut, fără „arie”).
Ruperea versiunii fără depreciere și ghid de migrare.
Logică ascunsă în componente (reguli de afaceri în loc de comportament UI).
Duplicarea componentelor pentru cazuri înguste în loc de extensie API.

16) Liste de verificare

• Nume semantice și scop.
• AA contrast în ambele teme.
• Skales și utilizarea sunt documentate.

• Opțiunile/stările sunt acoperite.
• A11y-description, „aria”, se concentreze.
• Exemple de microcopie (etichete, erori, indicii).
• Mostre de cod și cazuri de margine (linii lungi, sarcină, gol).
• testele Unit/visual/A11y sunt verzi.

• Eliberați note cu exemple înainte/după.
• Ghid de migrare и deprecieri.
• Actualizat povești/demo-uri, link-uri în dock.

17) Înainte/după exemple

• Butoane primare diferite: culorile/radii/liniuțele nu se potrivesc; diferite texte CTA.

• Single 'Button' with jettens: 'size = md',' variant = primar ',' radius = lg ',' spacing = md ', text în stilul „action + object”.

• Mesaje tehnice, fără solicitări.

• Component ' Format de dată invalid. Utilizați DD. MM. AAAA. '+ auto-focus.

18) Șablon de pagină componentă (schelet)

Nume: Buton

Descriere: incepe o actiune; 1 principal pe ecran.
Opțiuni: primar, secundar, fantomă, distructiv; sm/md/lg dimensiuni.
State: hover, focus, activ, încărcare, dezactivat.
A11y: disponibil de la tastatură; „aria-pressed” pentru comutabil.

Microcopie: "Salvați modificările", "Continuați verificarea. "Evitaţi "OK"

Cod (exemplu API): „Buton {variantă, dimensiune, pictogramă, încărcare}”.
Anti-exemple: dublu primar la același nivel ierarhic.
Teste: instantanee vizuale, contrast, focus-ring.

19) Design sistem de implementare playbook (rollout)

1. Audit interfață: inventar de culori/tipografie/componente/modele.
2. Jetoane MVP și componente majore: Buton, Intrare, Selectați, Modal, Alertă, EmptyState, Toast.
3. Documentație și carte de povești: exemple vii, fragmente de cod, ghiduri.
4. Produs pilot: înlocuirea widget-urilor, colectarea feedback-ului.
5. Ghid de migrare: coduri-mods, reguli de depreciere.
6. Extinderea setului: tabele, paginare, forumuri de formă, pași experți.
7. Scalare: modele de produse (plăți, KYC), integrare cu analiză și A/B.
8. Suport: canal de întrebări, SLA, ateliere interne.

20) Șabloane de documentare rapidă

• Denumire: 'color. frontieră. warning '
• Scop: cadre de avertizare și bannere Notificare/Avertizare
• Contrast: AA împotriva "culorii. suprafață. default '
• A nu se utiliza: a se utiliza pentru text de dimensiuni mici
• Legate de: "culoare. suprafață. avertizare, icoană. warning '

Model de model: Stare goală (noResults)

Scop: Pentru a corecta o interogare fără a simți „greșit”

Compoziție: rubrică (en-gros), text (1-2 propoziții), CTA, CTA secundar, pictogramă/ilustrație

Microcopy: "Nimic nu a fost găsit prin "{query}" Resetați filtrele sau rafinați interogarea"

A11y: 'role =' status '', 'aria-live =' politicos ''

Foaie de trișat finală

Jetoane semantice + disciplină A11y = bază.
Pagini componente complete: scop, variante, A11y, microcopie, cod, teste.
Modele = compoziții de componente cu texte și reguli gata făcute.
Docs - produs: versiune, versiuni, migrații, proces de contribuție.
Maturitatea măsurării: adopție, viteză, defecte, consistență, NPS al comenzilor interne.