Vahid interfeys dili

1) Vahid interfeys dili nədir və niyə lazımdır

Vahid interfeys dili - dizaynerlər, mühəndislər, analitiklər və məzmun müəllifləri tərəfindən paylaşılan ümumi anlayışlar, vizual qaydalar və qarşılıqlı əlaqə sistemidir.

• Uyğunluq: müxtəlif məhsul və komandalarda eyni komponentlər və şərtlər.
• Sürət: sürətli montaj, daha az holivar, daha sürətli bağlama.
• Keyfiyyət: UX konsistent nümunələri, «default» mövcudluğu.
• Miqyaslı: «zoopark UI» parçalanmadan təhlükəsiz təkamül.

2) Vahid dil təbəqələri

1. Tokenlər (rəng, tipoqrafiya, ölçülər, kölgələr, girintilər, radiuslar, animasiyalar).
2. Komponentlər (düymələr, giriş sahələri, cədvəllər, qrafiklər, modallar, tostlar, sekmələr).
3. Nümunələr (formalar, validasiya, addım-addım ustalar, siyahılar/cədvəllər, bildirişlər).
4. Məzmun (mikrokopiraytinq, terminologiya, səhv mesajları).
5. İkonoqrafiya və illüstrasiyalar (ailə, üslub, ölçü və xətlər).
6. Əlçatanlıq və i18n/RTL (A11y qaydaları, tərcüməçilik, lokallar).
7. Proseslər (versiyalar, qaydalar, revyu, linterlər, vitrinlər və nümunələr).

3) Dizayn-tokenlər (ifadə əsasları)

Tokenlər bütün məhsullarda istifadə olunan adlandırılmış dəyərlərdir.

3. 1 Tokenlərin strukturu (nümunə)

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 Neyminq tokenləri

Ümumi-özəl: 'color. accent. primary`, не `primaryBlue`.
Neyminq markasına istinad etmədən (marka bir mövzudur, token adı deyil).
Qradasiya: 'fg. muted`, `fg. primary`, `fg. inverse`. Sistemsiz başlıqdakı parlaqlığı ('blue500') kodlamayın.

3. 3 mövzu tokenləri

Parlaq, qaranlıq, təzadlı: adları deyil, dəyərləri dəyişdirin.
Mövzular - yenidən təyin təbəqəsi, UI sabit qalır.

4) Komponentlər: müqavilə, vəziyyət, mövcudluq

Komponent = vizual + davranış + props müqaviləsi + A11y.

4. 1 Nümunə müqavilə düymələri

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

Hallar: 'default/hover/active/focus/disabled/loading'.
Mövcud: fokus ring, hədəf ölçüləri ≥ 40-48 px, toggle üçün 'aria-pressed'.

4. 2 Komponent zəmanətləri

Sabit ölçüləri (line-height, paddings).
Qutudan əlçatanlıq (roley/aria, klaviatura, kontrast).
Invariant: sahə daxilində səhv həmişə aşağı və ilə 'aria-describedby'.

5) UX nümunələri (təkrarlanan məntiq)

Formalar: sol/üst etiket, placeholder ≠ label, yanındakı səhvlər + xülasə, giriş maskaları və ipuçları.
Modalka: bir əsas CTA, 'Esc' bağlayır, fokus tələsi, fokus qaytarılması.
Cədvəllər/siyahılar: çeşidləmə, sticky-başlıq, səhifəlik, ixrac.
Filtrlər: açıq «Tətbiq et» düyməsi, sıfırlama, saxlanılan presetlər.
Bildirişlər: tost ≤ 3-5 s, fokus fasilə, 'role =' status/alert '.
Dashboard: top insights → kontekst → qrafika → CTA.

6) Vahid terminologiya və mikrokopiraytinq

6. 1 Sözlük

Biznes və UX terminlərinin vahid lüğətini aparın. Hər bir interfeys məqaləsi ona istinad edir.
Dubletlər üçün - bir söz seçin («cüzdan» vs «balans»), ikincisi - axtarışda sinonim kimi.

6. 2 Mətn qaydaları

Qısa və iş; jarqon qarşısını almaq.
Səhvlər - nə etmək lazım olduğunu izah etmək üçün: «GGGH-MM-DD formatında tarix göstərin».
Başlıqlar - isim; düymələr - feillər («Kaydet», «Ləğv et»).
Konsistent vahidləri: UTC və ya lokallarda tarix/vaxt, kodlu valyutalar (EUR, USD).

7) İkonoqrafiya və illüstrasiyalar

Izomorf ailəsi: vahid bucaq, xətt qalınlığı, 24 × 24 mesh.
Statuslar və semantika: rəng - ikinci dərəcəli; forma/ikona + mətn - ilkin.
Miqyaslandırma: piktoqramlar müxtəlif sıxlıqlarda «üzmür» (1 ×/2 ×/3 ×).

8) Əlçatanlıq (A11y) və lokalizasiya (i18n/RTL)

Komponentlər WCAG AA-dan keçir: kontrast, klaviatura naviqasiyası, fokus, 'prefers-reduced-motion'.
Tərcümə olunan sətirlər - resurslarda, kodda deyil. Pleysholders və ədəd/tarix formatı - lokallaşdırıla bilər.
RTL: nişanlar güzgü, düzgün Tab sifariş, klaviatura DnD məntiq.

9) Rəqəmlər, tarixlər, valyutalar və formatlar

Tarix/vaxt: ISO-8601, real vaxt nöqtəsi - UTC; istifadəçi - yerli.
Valyuta: minor units/onluq sətirlər; həmişə kod (məsələn, "€12,34" və ya "12. 34 EUR" - yerli).
Faiz: '12,3%' və maddələr '+ 1,2 pp' aydın fərqləndirmək.
Yuvarlaqlaşdırma: əhəmiyyətli dərəcələrə qədər; Böyük ədədlər üçün «k/m».

10) Hovernans: rollar, artefaktlar, kanallar

Design Language Council (DLC): token/komponentlərin sahibləri, RFC iddia edir.

• Komponent kitabxanası (Figma/kod) + nümunələri ilə canlı kataloq.
• Sənədləşmə: qaydalar, patternlər, A11y, məzmun bələdçisi.
• Tarixlər, səviyyələr (added/changed/deprecated/removed/fixed).
• Kanallar: həftəlik dizayn-sink, Slack-kanal, tətbiq şoukeysləri.

11) Version və təkamül

Komponent paketi üçün SemVer: 'MAJOR. MINOR. PATCH`.
MINOR - additiv: yeni tokenlər, defolt propları, yeni komponentlər.
MAJOR - breaking: propların çıxarılması, semantikanın dəyişdirilməsi → miqrasiya qaydaları.
Deprekasiya: xəbərdarlıqlar, 90 gün ≥ pəncərə, uyğunluq bayraqları.

12) Linters və avtomatik yoxlamalar

UI linter: tokenlər xaricində qadağan olunmuş rənglər, anti-nümunələr (açar düyməsi, outline off).
A11y-yoxlama: kontrast, rollar/aria, fokus, klaviatura.
i18n-linter: kodda «sərt» sətirlər, səhv pleysholderlər.
Ekran testləri: komponentlərin vizual reqressiyası.
API vizuallaşdırma müqavilələri (varsa): məlumat növləri, diapazonlar, imzalar.

13) Komponentlər vitrin (storybook/qum qutusu)

Props nəzarətləri, kod, şərtlər, A11y-çek ilə canlı nümunələr.
«Reseptlər»: qeydiyyat forması, master 3 addım, cədvəl + filtrlər, modalka + tost.
«Qum qutusu lokalları»: dil/formatları/RTL keçid.

14) Neyminq və struktur şablonları

14. 1 Komponentlər (VEM/semantika, CSS nümunəsi)

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

Kodda - monoton props adları: 'size', 'kind', 'disabled', 'onClick'.

14. 2 Kitabxananın fayl strukturu

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

15) Anti-nümunələr

«Pulsuz» rənglər/tokenlər xaricində girintilər.
Komponentlər: «ButtonV2», «PrimaryButtonNew».
Playsholder sahənin yeganə işarəsi kimi.
outline və «div-düymələri» off.
Gözlənilməz hover/active/disabled.
Normal tərcümə əvəzinə transliterasiya olunmuş terminlər.
Yeniləmə zamanı miqrasiya qaydalarının olmaması.

16) Vahid dilin keyfiyyət metrikası

Coverage: Komponent kitabxanasından istifadə edən ekranların payı.
Consistency Index: tokenlərin təkrar istifadəsi vs «əl» üslubları.
A11y Pass Rate: WCAG AA keçən komponentlərin faizi.
Defect Escape: 1k kommitlərin məhsulunda UI/məzmun qüsurları.
Time-to-Ship: DLS-dən əvvəl/sonra tipik ekranı həyata keçirmək üçün vaxt.
Adoption: DAU vitrinlər, komponentləri/nümunələri ilə PR sayı.

17) Ekran çek siyahısı

• «Sərt» dəyərlər deyil, tokenlər (rəng/girintilər/radiuslar) istifadə edilmişdir.
• Kitabxanadan komponentlər; kasta - yalnız RFC-də.
• Mövcudluğu: klaviatura/fokus/kontrast/roller/aria.
• Vahidlər: tarixlər/valyutalar/faizlər - qayda formatları üzrə.
• Mikrokopi: düymələr = feillər, səhvlər = düzeltmek üçün hərəkət.
• Lokallar/RTL tərtibatı pozmur.
• Şərtlər: loading/empty/error təmin edilir.
• Vizual reqressiya testləri yenilənib.

18) Tətbiq planı (3 iterasiya)

İterasiya 1 - Təməl (2-3 həftə)

Tokenlər (rəng/tipoqrafiya/spacing/motion), əsas komponentlər (Button, Input, Select, Tooltip, Modal), məzmun bələdçisi (ton, etiket, səhvlər).
Vitrin (storybook) və A11y-çeker, token linter.

İterasiya 2 - Nümunələr və lokalizasiya (3-4 həftə)

Formalar/cədvəllər/filtrlər nümunələri, 24 × 24 ikonpack, RTL/i18n-qum qutusu, nömrə/tarix/valyuta qaydaları.
SemVer, çeynclog, RFC/miqrasiya prosesi, avtotestlər (vizual + A11y).

İterasiya 3 - Miqyas və təkamül (davamlı)

Kompozit komponentlər (Wizard, DataGrid, Chart primitives), temizləşmə (açıq/tünd/kontrast), keyfiyyət metrik hesabatları, müntəzəm UX auditləri.

19) Mini-FAQ

Bir anda «hər şey və bir anda» lazımdır?
Yox. Tokenlər və əsas komponentlərlə başlayın, sonra nümunələr və proseslər əlavə edin.

Komandaları EYA-dan istifadə etməyə necə inandırmaq olar?
Qazancınızı göstərin: sürət, daha az qüsur, hazır ekran reseptləri və «qutudan» A11y.

Legacy ekranları ilə nə etmək lazımdır?
Miqrasiya planı, tokenlər vasitəsilə körpü üslubları, prioritet ekranlar - birinci.

Yekun

Vahid interfeys dili yalnız komponentlər kitabxanası deyil. Bu, tokenlərin ifadəlilik, komponentlərin davranış və əlçatanlıq, nümunələrin həllərin təkrarlanabilirliyi və hovernans və metriklərin davamlı təkamül təyin etdiyi qaydalar və proseslər sistemidir. Dili aydın, yoxlanıla bilən və genişləndirilə bilən edin - və məhsullarınız vahid, sürətli və etibarlı görünəcək və işləyəcək.