Design Systems we olaryň resminamalary

1) Dizaýn ulgamy näme we näme üçin zerur?

Dizaýn ulgamy interfeýs üçin ýeke-täk hakykat çeşmesi bolup durýar: UX-iň öňünden aýdyp boljakdygyny, ösüş tizligini we masştabyny üpjün edýän bellikler, komponentler, amallar we resminamalar toplumy.

• Ähli önümlerde wizual we özüni alyp baryş gatlagynyň sazlaşygy.
• Tizlik: komponentleri gaýtadan ulanmak, gykylyk üçin az çykdajy.
• Hili: A11y umumy nusgalary, lokalizasiýa, synaglar, mazmun standartlary.
• Dolandyrylyşy: anyk jogapkärçilik, goýberilişi, ýol kartasy.

2) Dizaýn ulgamynyň arhitekturasy (gatlaklary)

1. Design-tokenler (foundation): reňkler, tipografiýa, ölçegler, radiuslar, kölegeler, girintiler, ýagdaýlar, şeýle hem semantik tokenler ('color. surface. warning`, `space. xs`).
2. UI komponentleri: düwmeler, giriş meýdançalary, modal penjireler, damjalar, tablisalar, tostlar, bannerler, aladalar, boş ýagdaýlar, skeletler.
3. Patternler we kompozisiýalar: KYC görnüşleri, töleg görnüşleri, nol netijeleri, ädimme-ädim ussalar, mazmun kartoçkalary.
4. Mazmun gollanmasy (microcopy): äheň, termin sözlügi, ýalňyşlyk/üstünlik şablonlary, push/bannerler.
5. Infrastruktura: A11y, synag, lokalizasiýa, wersiýa, goýumçylar boýunça gollanma (contributing).

3) Dizaýn-bellikler: ýörelgeler

Semantika> "çig" stil. 'color' ulanyň. text. '#6B7280' ýerine muted '.
Temizleme we platformalar. Bellikler çeşme → platforma mappingleri (Web, iOS, Android, email).
Ýagty/garaňky tema we token derejesinde WCAG kontrast.
Global we kontekstli şkalalar: 'space. 2`, `radius. md`, `elevation. 1`, `opacity. disabled`.
Tokenleriň wersiýasy: üýtgeşmeler - deprecation policy we migrasiýa bellikleri arkaly.

4) Komponentler: talaplar we resminamalardaky sahypanyň düzümi

• Düşündiriş we belleniş. Haçan ulanmaly/ulanmaly däl?
• Wariantlar/ýagdaýlar. Ölçegleri, görnüşleri (primary/secondary/ghost), disabled, loading, destructive.
• Elýeterlilik. Rol, klawiatura nawigasiýasy, 'aria-', kontrast, fokus halkalary.
• Microcopy teksti we mysallary. Walid bellikleri/pleýsholderler, ýalňyşlyklar, kömek.
• Kod mysallary. Iň az API, controlled/uncontrolled.
• Görnüşler we i18n bilen integrasiýa. Uzyn setirleriň, sanlaryň/walýutanyň/seneleriň halatlary.
• Anti-mysallar. Nädogry ulanyş nusgalary.
• Synag matrisi. Wizual snapshotlar, unit/interaction, skrinriderler.

5) Kompozisiýa nusgalary (Recipes)

Hasaba alyş görnüşleri/KUS: ädimme-ädim ussat, ösüş, inline + summary tassyklama, ýalňyşlyk şablonlary.
Töleg formasy: usuly, komissiýany, möhletleri, same-method düzgünini, tassyklamany we statusyny saýlamak.
Boş ýagdaýlar: kontekst + gymmaty + CTA, nol gözleg netijeleri.
Üstünlik/ýalňyşlyk habarlary: status iýerarhiýasy, wizual bellikler, tostlar/bannerler/modallar.
Nawigasiýa we süzgüçler: global gözleg, çalt presetler, bellikler.
Patternleriň sahypalary mikroskopiýa we A11y-bellikleri bilen göçürmek üçin taýýar komponentlerden düzülen kompozisiýany görkezmelidir.

6) Mazmun gollanmasy (ses & tone, microcopy)

Ses: professional, düşnükli; äheň kontekste baglydyr (onbording, töleg, howpsuzlyk).
Terminleriň bitewi sözlügi: tölegler, bonuslar, çäkler, KYC - önüm boýunça bir many.
Şablonlar: CTA, ýalňyşlyklar, duýduryşlar, üstünlikler, boş ýagdaýlar, habarnamalar.
Lokalizasiýa-first: sebit boýunça setirleriň, sanlaryň/walýutalaryň/seneleriň uzynlygyna ätiýaçlyk.
A11y-leksika: düşnüksiz aç-açan bellikler, aria-düşündirişler.

7) Accessibility (A11y) ulgam standartı hökmünde

Esasy ölçegler: WCAG 2. 1 AA kontrast üçin, fokus hemişe görünýär, klawiaturadan nawigasiýa.
Rollar we atributlar: komponentler 'role', 'aria-label', 'aria-describedby', tost/alert üçin durmuş sebitlerini beýan edýär.
Ekran riderleri: söz düzümleriniň mysallary, okamagyň tertibi, dogry statuslar ('assertive/polite').
Synag-amallar: awtomatiki barlaglar + el ssenarileri.

8) Lokalizasiýa we internationalizasiýa

i18n-açarlar komponentiň kody bilen gapdalynda + kontekstiň beýany.
Format utilitleri arkaly sanlar/walýutalar/seneler; metni şablonlarda hardcoding etmäň.
Uzynlyk synaglary: "uzyn nemes", "dar jübi", RTL-wariantlar.
Dillerde äheň: möhüm ädimler üçin tone-map (tölegler/howpsuzlyk).

9) Resminamalar: gurluş we nawigasiýa

1. Giriş: wezipe, ýörelgeler, jogapkärçilik zolaklary.

2. Bellikler: reňkler, tipografiýa, tor, ölçegler, kölegeler, ýagdaýlar, mowzuklar.

3. Komponentler: süzgüçli katalog (rol boýunça, platforma boýunça, A11y boýunça).

4. Patternler: ssenariýalar (görnüşler, tölegler, boş ýagdaýlar, üstünlik/ýalňyşlyklar).

5. Mazmun gollanmasy: ses we äheň, sözlük, microcopy şablonlary.

6. Accessibility: standartlar, çek-listler, synag-mysallar.

7. Lokalizasiýa: bazarlar boýunça ýörelgeler, mysallar, sözbaşylar.

8. Integrasiýa we kod: gurnama, wersiýalar, mysallar, "how-to migrate".

9. Contributing: goýum amallary, dizaýn-review, kod-review, definition of done.

10. Changelog we Roadmap: neşirler, deprecations, ösüş meýilnamasy, known issues.

10) Dolandyryş we amallar (governance)

Rollar: ulgamyň eýesi (DesignOps/UX Platform), mainteynerler (dizaýn/FE), geňeşçiler (BE, A11y, lokalizasiýa).
Üýtgeşmeler komiteti: haýyşlara baha bermek, ileri tutmak, API/bellikleri utgaşdyrmak.
Prosesler: Täze komponentler üçin RFC, içerki issue-formalar, baglar üçin SLA.
"Definition of Done": dizaýn (Figma) kod (UI-paket) "doka" (mysal + hyde) "testler.

11) Contributing: nädip goşmaly/üýtgetmeli

RFC şablon: mesele → wariantlar → saýlanan çözgüt → A11y → i18n → migrasiýa → töwekgelçilikler.
Flow PR: dizaýn-rewyu → kod-rewyu → UX-göçüriji → A11y-çek → goýberiş-bellikler.
Ters laýyklyk düzgünleri: zyýansyzlandyrýanlar üçin minor/patch, maýor - mümkin bolan ýerlerde deprecation we awtomatiki migrasiýa bilen.

12) Wersiýalaşdyrmak, goýbermek, migrasiýa

Paketler üçin SemVer ('@company/ds-core', '@company/ds-forms', '@company/ds-charts').
Release notes: bellikleri, komponentleriň API-sini üýtgetmek, adaty hereket etmek, arakesme bellikleri, migrasiýa gidleri.
Deprecations: dokda bellikler, linter-düzgünler, köpçülikleýin çalyşmak üçin kod-modalar.
Design-tokens pipeline: ýekeje çeşme (JSON/YAML) → platforma bildleri (CSS vars, iOS, Android).

13) Hil synagy

Özüni alyp barşyň we ýagdaýlaryň bitewi synaglary.
Wizual snapshotlar (mowzuklaryň/ýagdaýlaryň regressiýasy).
A11y-synaglary: awtomatiki + el skrinrider ssenarileri.
Kritiki flowlar üçin E2E-wakalar (hasaba alyş, tölegler, KYC).
Perf-býujetler: bandl/render çäkleri we agyr endiklere gadaganlyklar.

14) Dizaýn-ulgamyň kämillik ölçegleri

Adoption:% DS ulanýan ekranlar/depolar.
Velocity: ýerleşişden eltip bermek aralygy.
Quality: kemçilikler 1 goýberilişine UI/A11y.
Consistency: DS-den daşary "bir gezek ulanylýan" komponentleriň/stilleriň sany.
Docs: Dock komponentlerini örtmek, içerki diňleýjileriň NPS (dizaýnerler/işläp düzüjiler/analitikler).

15) Anti-patternler

Tokenler semantikasyz palitra hökmünde ("diňe reňk").
Resminamasyz we aşa ýagdaýlara mysalsyz komponentler.
A11y äsgermezlik etmek (fokus ýok, kontrast ýok, 'aria' ýok).
Deprecation we migrasiýa gollanmasyz wersiýalaşdyrmak.
Komponentlerdäki gizlin logika (UI hereketiniň ýerine iş düzgünleri).
API giňeltmegiň ýerine komponentleri dar ýagdaýlara köpeltmek.

16) Çek-listler

• Semantik atlar we wezipe.
• AA-nyň iki mowzukdaky garşylygy.
• Skeýller we ulanmagyň ýörelgeleri dokumentleşdirildi.

• Wariantlar/ýagdaýlar örtülendir.
• A11y-düşündiriş, 'aria-', fokus.
• Mikrokopiýa mysallary (bellikler, ýalňyşlyklar, maslahatlar).
• Kod we edge mysallary (uzyn setirler, ýüklemek, boş).
• Unit/visual/A11y-synaglary ýaşyl.

• Release notes öň/soň mysallar bilen.
• Migration guide и deprecations.
• Hekaýa/demo täzelendi, dokdaky baglanyşyklar.

17) "Öň/soň" mysallary

• Dürli başlangyç düwmeler: reňkler/radiuslar/girişdeler gabat gelmeýär; dürli CTA tekstleri.

• Bir 'Button' belgi bilen: 'size = md', 'variant = primary', 'radius = lg', 'spacing = md', "hereket + obýekt" stilindäki tekst.

• Tehniki habarlar, hiç hili maglumat ýok.

• Komponent ' Senäniň nädogry görnüşi. DD ulanyň. MM. GGGG. '+ awto-fokus.

18) Komponentiň sahypasynyň şablony (skelet)

Ady: Button

Düşündiriş: Hereketi başlaýar; Ekrana 1 esasy.
Wariantlar: primary, secondary, ghost, destructive; ölçegleri sm/md/lg.
Şertler: hover, focus, active, loading, disabled.
A11y: klawiaturadan elýeterlidir; geçiş üçin 'aria-pressed'.
Microcopy: "Üýtgeşmeleri sakla", "Barlamagy dowam et". "OK" -dan gaça duruň.
Kod (mysal API): 'Button {variant, size, icon, loading}'.
Anti-mysallar: bir derejeli iýerarhiýada goşa primary.
Synaglar: wizual snapshotlar, kontrast, focus-ring.

19) Dizaýn ulgamyny ornaşdyrmak üçin pleýbuk (rollout)

1. Interfeýsleriň barlagy: reňkleriň/tipografiýanyň/komponentleriň/patternleriň inventarizasiýasy.
2. Bellikler we esasy komponentler: Button, Input, Select, Modal, Alert, EmptyState, Toast.
3. Dokumentasiýa we storibuk: janly mysallar, kod-snippetler, gaýylar.
4. Synag önümi: widjetleri çalyşmak, seslenme ýygnamak.
5. Gaýd migrasiýasy: kod-moda, deprecation düzgünleri.
6. Toplumyň giňelmegi: tablisalar, paginasiýa, formalar forumlary, ussanyň ädimleri.

7. Masştab etmek: önüm patternleri (tölegler, KYC), analitika we A/B bilen integrasiýa

8. Goldaw: soraglar kanaly, SLA, içerki iş ýerleri.

20) Resminamalaryň çalt şablonlary

• Ady: 'color. border. warning`
• Maksady: Notice/Warning duýduryşlarynyň we bannerleriniň çäkleri
• Kontrast: AA fonda 'color. surface. default`
• Mümkin däl: kiçijik kegle
• Baglanyşyklar: 'color. surface. warning`, `icon. warning`

Nusga şablony: Boş ýagdaý (noResults)

Maksat: "ýalňyşlyk" duýgusy bolmazdan soragy düzetmek

Düzümi: sözbaşy (ops.) , tekst (1-2 teklip), CTA, ikinji derejeli CTA, nyşan/illýustrasiýa

"{query}" programmasynda hiç zat tapylmady. Süzgüçleri taşlaň ýa-da soragy anyklaň"

A11y: `role="status"`, `aria-live="polite"`

Jemleýji şpargalka

Semantik bellikler + düzgün-nyzam A11y = esas.
Komponentleriň sahypalary doly: maksady, wariantlary, A11y, microcopy, kody, synaglary.
Patterns = taýýar tekstler we düzgünler bilen komponentlerden düzülen kompozisiýalar.
Docs - önüm: wersiýa, goýberişler, migrasiýa, goýum prosesi.
Kämillik derejesini ölçäň: adoption, tizlik, kemçilikler, yzygiderlilik, içerki buýruklaryň NPS.