Yagona interfeys tili

1) Yagona interfeys tili nima va nima uchun kerak

Yagona interfeys tili (YEI) - bu tushunchalar, vizual qoidalar va o’zaro munosabatlarning umumiy tizimi bo’lib, uni dizaynerlar, muhandislar, tahlilchilar va kontent mualliflari baham ko’rishadi.

• Muvofiqlik: turli mahsulotlar va jamoalarda bir xil komponentlar va atamalar.
• Tezlik: tez yig’ilish, kamroq xolivarlar, tezroq onbording.
• Sifati: UX konsistent patternlari, «andoza» foydalanish imkoniyati.
• Miqyoslanishi: «UI hayvonot bog’i» ga parchalanmasdan xavfsiz evolyutsiya.

2) Yagona til qatlamlari

1. Tokenlar (rangi, bosmaxonasi, o’lchamlari, soyalari, chekinishlari, radiuslari, animatsiyalari).
2. Komponentlar (tugmalar, kirish maydonlari, jadvallar, grafiklar, modallar, tostlar, tablar).
3. Patternlar (shakllar, validatsiya, bosqichma-bosqich ustalar, ro’yxatlar/jadvallar, bildirishnomalar).
4. Kontent (mikrokopirayting, terminologiya, xato xabarlari).
5. Ikonografiya va illyustratsiyalar (oilasi, uslubi, o’lchamlari va chiziqlari).
6. Foydalanish imkoniyati va i18n/RTL (A11y qoidalari, tarjima qilish qobiliyati, lokallar).
7. Jarayonlar (versiyalar, gaydraillar, revyu, linterlar, vitrinalar va misollar).

3) Dizayn-tokenlar (ifodalilik asosi)

Tokenlar - bu barcha mahsulotlarda qayta ishlatiladigan qiymatlar.

3. 1 Tokenlar tuzilishi (misol)

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 Neyming tokenlari

Umumiy va xususiy:’color. accent. primary`, не `primaryBlue`.
Neymingdagi brendga bog’lanmasdan (brend - bu mavzu, tokenning nomi emas).
Gradatsiyalar:’fg. muted`, `fg. primary`, `fg. inverse`. Tizimsiz nomdagi yorqinlikni (’blue500’) kodlamang.

3. 3 Mavzu tokenlari

Yorqin, qorong’u, qarama-qarshi: nomlarni emas, balki qiymatlarni o’zgartirish.
Mavzular - qayta aniqlash qatlami, UI konsistent boʻlib qolmoqda.

4) Komponentlar: kontrakt, holatlar, foydalanish imkoniyati

Komponent = vizual + xulq-atvor + props shartnomasi + A11y.

4. 1 Tugma kontraktining namunasi

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

Holatlar:’default/hover/active/focus/disabled/loading’.
Foydalanish imkoniyati: fokus halqa, target o’lchamlari ≥ 40-48 px, toggle uchun’aria-pressed’.

4. 2 Komponentlar kafolatlari

Barqaror oʻlchamlar (line-height, paddings).
Qutidan foydalanish imkoniyati (roley/aria, klaviatura, kontrast).
Invariantlar: maydon ichidagi xato har doim pastda va’aria-describedby’bilan.

5) UX patternlari (takrorlanadigan mantiq)

Shakllar: chap/yuqoridagi yorliq, placeholder ≠ label, xatolar + sarlavhasi, kirish niqoblari va maslahatlar.
Modalkalar: bitta asosiy CTA,’Esc’yopadi, fokus tuzog’i, fokus qaytishi.
Jadvallar/roʻyxatlar: saralash, sticky-sarlavha, sahifalik, eksport.
Filterlar: «Qoʻllash» tugmasi, qayta tiklash, saqlangan presetlar.
Ogohlantirishlar: tost ≤ 3-5 s, fokusdagi pauza,’role =’status/alert’.
Dashbordlar: top insights → kontekst → grafiklar → CTA.

6) Yagona terminologiya va mikrokopirayting

6. 1-lugʻat

Biznes va UX atamalarining yagona lugʻatini yuriting. Har bir interfeys maqola unga murojaat qiladi.
Dubletlar uchun - bitta so’zni tanlash («hamyon» vs «balans»), ikkinchisi - qidiruvda sinonim sifatida.

6. 2. Matnning qoidalari

Qisqa va ish bo’yicha; jargondan qochish.
Xatolar - nima qilish kerakligini tushuntirish uchun: «Sanani GGGG-MM-DD formatida ko’rsating».
Sarlavhalar - otlar; tugmalar - feʼllar («Saqlash», «Bekor qilish»).
Konsistent birliklar: UTC yoki lokallardagi sana/vaqt, kod bilan valyutalar (EUR, USD).

7) Ikonografiya va rasmlar

Oila izomorf: bitta burchak, chiziq qalinligi, 24 × 24 panjara.
Maqomi va semantikasi: rangi - ikkilamchi; shakl/ikonka + matn - birlamchi.
Kattalashtirish: piktogrammalar turli zichliklarda «suzmaydi» (1 ×/2 ×/3 ×).

8) Foydalanish imkoniyati (A11y) va mahalliylashtirish (i18n/RTL)

Komponentlar WCAG AA: kontrast, klaviatura navigatsiyasi, fokus,’prefers-reduced-motion’dan o’tadi.
Tarjima qilinayotgan satrlar - resurslarda, kodda emas. Pleysholderlar va sonlar/sanalar formati - lokalizatsiya qilinadi.
RTL: ikonkalarni oynalash, Tab tartibi, klaviatura mantig’i.

9) Sanalar, sanalar, valyutalar va formatlar

Sana/vaqt: ISO-8601, haqiqiy vaqt nuqtasi - UTC; foydalanuvchi uchun - lokal.
Valyuta: minor units/o’nlik satrlar; doimo kodni ko’rsatish (masalan, "€12,34" yoki "12. 34 EUR" - lokal bo’yicha).
Foizlar: «12,3%» va «+ 1,2 p.p.» bandlari aniq farqlansin.
Yaxlitlash: muhim razryadgacha; Katta sonlar uchun «k/m».

10) Governans: rollar, artefaktlar, kanallar

Design Language Council (DLC): token/komponent egalari, deydi RFC.

• Komponent kutubxonasi (Figma/kod) + namunalar bilan jonli katalog.
• Hujjatlar: gaydraillar, patternlar, A11y, kontent-gidlar.
• Cheynjlog (added/changed/deprecated/removed/fixed).
• Kanallar: haftalik dizayn-sink, Slack-kanal, joriy etish shoukeyslari.

11) Versiyalash va evolyutsiya

Komponentlar paketi uchun SemVer:’MAJOR. MINOR. PATCH`.
MINOR - qo’shimcha: yangi tokenlar, defoltli propslar, yangi komponentlar.
MAJOR - breaking: propslarni olib tashlash, semantikani oʻzgartirish → migratsiya gaydalari.
Deprekatsiya: ogohlantirishlar, 90 kunga ≥ darcha, mos keladigan bayroqlar.

12) Linterlar va avtomatik tekshirishlar

UI-linter: tokenlardan tashqari taqiqlangan ranglar, anti-patternlar (div tugmasi, o’chirilgan outline).
A11y-tekshirish: kontrast, rollar/aria, fokus, klaviatura.
i18n-linter: koddagi "qattiq" satrlar, noto’g "ri pleysholderlar.
Skrinshot-testlar: komponentlarning vizual regressiyasi.
API vizualizatsiya shartnomalari (agar mavjud bo’lsa): ma’lumotlar turlari, diapazonlar, imzolar.

13) Komponentlar vitrini (storybook/qum qutisi)

Props nazorati, kod, holatlar, A11y-cheker bilan jonli misollar.
«Retseptlar»: ro’yxatdan o’tish shakli, 3 qadam ustasi, jadval + filtrlar, modalka + tostlar.
«Qum qutisi»: til/formatlarni almashtirish/RTL.

14) Neyming va tuzilma shablonlari

14. 1 Komponentlar (VEM/semantika, CSS misoli)

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

Kodda bir xil props nomlari mavjud:’size’,’kind’,’disabled’,’onClick’.

14. 2 Kutubxonaning fayl tuzilishi

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

15) Anti-patternlar

Tokenlardan tashqari «Erkin» ranglar/cheklovlar.
Komponentlar: «ButtonV2», «PrimaryButtonNew».
Pleysholder maydonning yagona belgisi sifatida.
Outline va «div-tugmalar» ni oʻchirish.
Oldindan aytib boʻlmaydigan hover/active/disabled.
Oddiy tarjima o’rniga transliteratsiya qilingan atamalar.
Yangilanishda migratsiya gaydalarining yo’qligi.

16) Yagona til sifati metrikasi

Coverage: komponent kutubxonasidan foydalanuvchi ekranlar ulushi.
Consistency Index: tokenlardan qayta foydalanish vs «qoʻl» uslublari.
A11y Pass Rate: WCAG AA orqali oʻtadigan komponentlar foizi.
Defect Escape: 1k kommitdagi UI/kontent nuqsonlari.
Time-to-Ship: namunaviy ekranni DLSdan oldin/keyin amalga oshirish vaqti.
Adoption: DAU oynalari, komponent/pattern bilan PR soni.

17) Ekranning chek-varaqasi

• «Qattiq» qiymatlar emas, balki tokenlar (rang/cheklovlar/radiuslar) ishlatilgan.
• Kutubxonadagi komponentlar; kasta - faqat RFCda.
• Foydalanish imkoniyati: klaviatura/fokus/kontrast/roley/aria.
• Birliklar: sanalar/valyutalar/foizlar - gaydu formatlari bo’yicha.
• Mikroplar: tugmalar = feʼllar, xatolar = tuzatish uchun harakat.
• Lokallar/RTL sxemani buzmaydi.
• Holatlar: loading/empty/error.
• Vizual regressiya testlari yangilandi.

18) Joriy etish rejasi (3 ta iteratsiya)

Iteratsiya 1 - Poydevor (2-3 hafta)

Tokenlar (rang/bosmaxona/spacing/motion), bazaviy komponentlar (Button, Input, Select, Tooltip, Modal), kontent-gidlar (ton, yorliqlar, xatolar).
Vitrin (storybook) va A11y-cheker, tokenlar linteri.

Iteratsiya 2 - Patternlar va mahalliylashtirish (3-4 hafta)

Shakllar/jadvallar/filtrlar patternlari, ikonpak 24 × 24, RTL/i18n-qum qutisi, son/sana/valyuta qoidalari.
SemVer, cheynjlog, RFC/migratsiya jarayoni, avtotestlar (vizual + A11y).

Iteratsiya 3 - Masshtab va evolyutsiya (uzluksiz)

Kompozitsion komponentlar (Wizard, DataGrid, Chart primitives), temizlash (och/qorong’u/kontrast), sifat metrikasi bo’yicha hisobotlar, muntazam UX-auditlar.

19) Mini-FAQ

«Hamma narsa birdaniga» kerakmi?
Yo’q. Tokenlar va asosiy komponentlardan boshlang, so’ngra pattern va jarayonlarni qo’shing.

Jamoalarni YEIdan foydalanishga qanday ishontirish mumkin?
Yutuqni ko’rsating: tezlik, kam nuqsonlar, tayyor ekran retseptlari va «qutidan» A11y.

Legacy ekranlar bilan nima qilish kerak?
Migratsiya rejasi, tokenlar orqali ko’prik uslublari, ustuvor ekranlar birinchi o’rinda turadi.

Jami

Yagona interfeys tili nafaqat komponentlar kutubxonasi. Bu qoidalar va jarayonlar tizimi bo’lib, unda tokenlar ifodalilik, komponentlar - xulq-atvor va qulaylik, patternlar - yechimlarning takrorlanuvchanligi, governans va metriklar - barqaror evolyutsiyani belgilaydi. Tilingizni aniq, tekshiriladigan va kengaytiriladigan qilib qoʻying - mahsulotlaringiz bir xilda, tez va ishonchli koʻrinadi va ishlaydi.