Bitewi interfeýs dili

1) Ýeke-täk interfeýs dili näme we näme üçin zerur?

Interfeýsleriň bitewi dili (YEI) - düşünjeleriň, wizual düzgünleriň we özara gatnaşyklaryň umumy ulgamy, ony dizaýnerler, inersenerler, analitikler we mazmunyň awtorlary paýlaşýarlar.

• Sazlaşyk: dürli önümlerde we toparlarda birmeňzeş komponentler we adalgalar.
• Tizlik: çalt gurnama, holiwarlardan az, has çalt konbording.
• Hil: konsistent UX patternleri, "standart" elýeterlilik.
• Ululygy: "UI haýwanat bagyna" bölünmezden howpsuz ewolýusiýa.

2) Bitewi diliň gatlaklary

1. Bellikler (reňk, tipografiýa, ölçegler, kölegeler, girişdeler, radiuslar, animasiýalar).
2. Komponentler (düwmeler, giriş meýdançalary, tablisalar, grafikler, modallar, tostlar, bellikler).
3. Patternler (görnüşler, tassyklama, ädimme-ädim ussatlar, sanawlar/tablisalar, habarnamalar).
4. Mazmun (mikrokopirting, terminologiýa, ýalňyşlyk habarlary).
5. Ikonografiýa we suratlar (maşgala, stil, ululyk we çyzyklar).
6. Elýeterlilik we i18n/RTL (A11y düzgünleri, terjimeçilik, lokallar).
7. Prosesler (wersiýalar, gidrailler, revýular, linterler, vitrinler we mysallar).

3) Dizaýn-bellikler (aňlatma esaslary)

Tokenler ähli önümlerde gaýtadan ulanylýan görkezilen gymmatlyklardyr.

3. 1 Bellikleriň gurluşy (mysal)

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 Neýming bellikleri

Umumydan hususylyga: 'color. accent. primary`, не `primaryBlue`.
Neýmingdäki marka bilen baglanyşmazdan (marka - bu belligiň ady däl).
Gradasiýa: 'fg. muted`, `fg. primary`, `fg. inverse`. Atdaky ýagtylygy ('blue500') ulgamsyz kodlamaň.

3. 3 Tema bellikleri

Açyk, garaňky, kontrast: atlary däl-de, manylary üýtgetmek.
Mowzuklar - gaýtadan kesgitlemek gatlagy, UI tutanýerli bolup galýar.

4) Komponentler: şertnama, döwletler, elýeterlilik

Komponent = wizual + hereket + props şertnamasy + A11y.

4. 1 Düwme şertnamasynyň mysaly

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

Şertler: 'default/hover/active/focus/disabled/loading'.
Elýeterlilik: fokus halkasy, nyşanyň ölçegleri ≥ 40-48 px, toggle üçin 'aria-pressed'.

4. 2 Komponentleriň kepillikleri

Durnukly ölçegler (line-height, paddings).
Gutudan elýeterlilik (roleý/aria, klawiatura, kontrast).
Invariantlar: meýdanyň içindäki ýalňyşlyk elmydama aşakda we 'aria-describedby' bilen.

5) UX patternleri (gaýtalanýan logika)

Formalar: çep/ýokarky bellik, placeholder ≠ label, gysgaça mazmundaky ýalňyşlyklar, giriş maskalary we maslahatlar.
Modallar: bir esasy CTA, 'Esc' ýapýar, fokus duzagy, fokus gaýdyp gelýär.
Tablisalar/sanawlar: sortlamak, sticky-sözbaşy, sahypalyk, eksport.
Süzgüçler: Aç-açan "Ulanmak" düwmesi, täzelenme, saklanan presetler.
Duýduryş: tost ≤ 3-5 s, fokus wagtynda arakesme, 'role = "status/alert"'.
Daşbordlar: top insights → kontekst → grafika → CTA.

6) Bitewi terminologiýa we mikrokopirting

6. 1 Sözlük

Iş we UX terminleriniň ýeke-täk sözlügini ýörediň. Interfeýsiň her bir maddasy oňa salgylanýar.
Dubletler üçin - bir sözi saýlamak ("gapjyk" vs "balans"), ikinjisi - gözlegde sinonim hökmünde.

6. 2 Tekstiň düzgünleri

Gysga we iş boýunça; jargondan gaça duruň.
Ýalňyşlyklar - näme etmelidigini düşündirmek: "Senäni GGGG-MM-DD görnüşinde görkeziň".
Sözbaşylar - at; düwmeler - ädimler ("Saklamak", "Ýatyrmak").
Konsistent birlikler: UTC-de ýa-da lokalda senesi/wagty, kody bolan walýutalar (EUR, USD).

7) Ikonografiýa we suratlar

Maşgala izomorf: bir burç, çyzygyň galyňlygy, 24 × 24 tor.
Statuslar we semantika: reňk - ikinji derejeli; forma/nyşan + tekst - ilkinji.
Masştablamak: piktogrammalar dürli dykyzlyklarda "ýüzmeýär" (1 ×/2 ×/3 ×).

8) Elýeterlilik (A11y) we lokalizasiýa (i18n/RTL)

Komponentler WCAG AA-dan geçýär: kontrast, klawiaturadan nawigasiýa, fokus, 'prefers-reduced-motion'.
Terjime edilýän setirler - çeşmelerde, kodda däl. Pleýsholderler we seneler/seneler formaty - lokallaşdyrylýar.
RTL: nyşanlary aýna, Tab düzgüni, klawiaturadan DnD logikasy.

9) Sanlar, seneler, walýutalar we formatlar

Seneler/Wagt: ISO-8601, hakyky wagt nokady - UTC; ulanyjy üçin - lokal.
Walýuta: minor units/onluk setirler; elmydama kody görkezmek (mysal üçin "€12.34" ýa-da "12. 34 EUR" - ýerli).
Göterim: '12,3%' we '+ 1,2 p.p.' punktlary aýdyň tapawutlanmalydyr.
Tegelek: möhüm kategoriýalara çenli; Uly sanlar üçin "k/m".

10) Howernans: rollar, artefaktlar, kanallar

Design Language Council (DLC): tokenleriň/komponentleriň eýeleri, RFC tarapyndan tassyklanýar.

• Komponentler kitaphanasy (Figma/kod) + mysallar bilen göni katalog.
• Resminamalar: gidrailler, patternler, A11y, mazmun gollanmalary.
• Seneler, derejeler (added/changed/deprecated/removed/fixed).
• Kanallar: hepdelik dizaýn-sink, Slack-kanal, giriş sergileri.

11) Wersiýalaşdyrmak we ewolýusiýa

Komponentler bukjasy üçin SemVer: 'MAJOR. MINOR. PATCH`.
MINOR - goşmaça: täze bellikler, defoltly propslar, täze komponentler.
MAJOR - breaking: propslary aýyrmak, semantikany üýtgetmek → migrasiýa gaýlary.
Deprekasiýa: duýduryşlar, 90 güne ≥ penjire, gabat gelýän baýdaklar.

12) Linterler we awtomatiki barlaglar

UI-linter: tokenleriň daşyndaky gadagan reňkler, anti-patternler (diw düwmesi, outline öçürildi).
A11y-barlaglar: kontrast, rollar/aria, fokus, klawiatura.
i18n-linter: koddaky "gaty" setirler, nädogry pleýsholderler.
Skrinshot synaglary: komponentleriň wizual regressiýasy.
Wizualizasiýa API şertnamalary (bar bolsa): maglumatlaryň görnüşleri, diapazonlar, gollar.

13) Komponentleriň vitrini (storybook/sandyk gutusy)

Props gözegçilikleri, kod, şertler, A11y-çeker bilen janly mysallar.
"Reseptler": hasaba alyş görnüşi, ussat 3 ädim, tablisa + süzgüçler, modalka + tost.
"Lokallaryň çägesi": dili/formatlary/RTL üýtgetmek.

14) Neýming we gurluşyň şablonlary

14. 1 Komponentler (VEM/semantika, CSS mysaly)

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

Kodda bir görnüşli props atlary bar: 'size', 'kind', 'disabled', 'onClick'.

14. 2 Kitaphananyň faýl gurluşy

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

15) Anti-patternler

Bellikleriň daşyndaky "erkin" reňkler/girintiler.
Komponentler: "ButtonV2", "PrimaryButtonNew".
Pleýsholder meýdançanyň ýeke-täk nyşany hökmünde.
Daşarky we "div-düwmeleri" öçürmek.
Öňünden aýdyp bolmajak hover/active/disabled.
Adaty terjimäniň ýerine transliterirlenen adalgalar.
Täzelenmelerde migrasiýa gollanmalarynyň ýoklugy.

16) Bitewi diliň hiliniň metrikleri

Coverage: Komponentler kitaphanasyny ulanýan ekranlaryň paýy.
Consistency Index: tokenleri gaýtadan ulanmak vs "el" stilleri.
A11y Pass Rate: WCAG AA-dan geçýän komponentleriň göterimi.
Defect Escape: UI/kontent kemçilikleri 1k komit üçin.
Time-to-Ship: DLS-den öň/soň adaty ekrany durmuşa geçirmek üçin wagt.
Adoption: DAU penjireleri, komponentli/nagyşly PR sany.

17) Ekranyň çek-sanawy

• "Gaty" bahalar däl-de, bellikler (reňk/girişdeler/radiuslar) ulanyldy.
• Kitaphanadan komponentler; kastom - diňe RFC-de.
• Elýeterlilik: klawiatura/fokus/kontrast/roleý/aria.
• Birlikler: seneler/walýutalar/göterimler - formatlaryň gaýdy boýunça.
• Mikrokopi: düwmeler = fiiller, ýalňyşlyklar = düzetmek üçin hereket.
• Lokallar/RTL ýerleşişi bozmaýar.
• Şertler: loading/empty/error göz öňünde tutulandyr.
• Wizual regressiýa synaglary täzelendi.

18) Durmuşa geçirmek meýilnamasy (3 iterasiýa)

Yterasiýa 1 - Binýat (2-3 hepde)

Bellikler (reňk/tipografiýa/spacing/motion), esasy komponentler (Button, Input, Select, Tooltip, Modal), mazmun gollanmalary (äheň, bellikler, ýalňyşlyklar).
Vitrin (storybook) we A11y-çeker, token linteri.

Iterasiýa 2 - Nusgalar we lokalizasiýa (3-4 hepde)

Şekilleriň/tablisalaryň/süzgüçleriň nusgalary, ikonpak 24 × 24, RTL/i18n-sandyk, san/sene/walýuta düzgünleri.
SemVer, alyş-çalyş, RFC/migrasiýa prosesi, awtotestler (wizual + A11y).

Iterasiýa 3 - Masştab we ewolýusiýa (üznüksiz)

Kompozisiýa komponentleri (Wizard, DataGrid, Chart primitives), temizleme (açyk/garaňky/kontrast), hil metrikleri boýunça hasabatlar, yzygiderli UX-barlaglar.

19) Mini-FAQ

Birbada "hemme zat birbada" gerekmi?
Ýok. Bellikler we esasy komponentler bilen başlaň, soňra nagyşlary we prosesleri goşuň.

EMEA-ny ulanmak üçin buýruklary nädip ynandyrmaly?
Ýeňşiňizi görkeziň: tizlik, kemçilikler az, ekranlaryň we "gutudan" A11y reseptleri.

Legacy ekranlar bilen näme etmeli?
Migrasiýa meýilnamasy, nyşanlaryň üsti bilen köpri stilleri, ileri tutulýan ekranlar - birinji.

Jemi

Interfeýsleriň bir dili diňe komponentleriň kitaphanasy däl. Bu düzgünleriň we prosesleriň ulgamy, bu ýerde bellikler ekspressiwligi, komponentler - özüni alyp barşyny we elýeterliligini, nusgalar - çözgütleriň gaýtalanmagyny, howernans we metrikler bolsa durnukly ewolýusiýany kesgitleýär. Diliňizi aýdyňlaşdyryň, barlanyň we giňeldiň - önümleriňiz birmeňzeş, çalt we ygtybarly görüner we işlär.