Забони интерфейси ягона

1) Забони ягонаи интерфейс чист ва чаро он лозим аст

Забони ягонаи интерфейс (NEI) як системаи маъмули мафҳумҳо, қоидаҳои визуалӣ ва робитаҳоест, ки тарроҳон, муҳандисон, таҳлилгарон ва муаллифони мундариҷа мубодила мекунанд.

• Мувофиқат - Ҷузъҳо ва истилоҳҳои якхела дар байни маҳсулот ва дастаҳо.
• Суръат: зуд сохтан, камтар холиварҳо, тезтар савор шудан.
• Сифат: намунаҳои пайвастаи UX, дастрасӣ "бо нобаёнӣ".
• Миқёс: таҳаввулоти бехатар бидуни шикастан ба "зоопарк UI".

2) Қабатҳои як забон

1. Токенҳо (ранг, типография, андозаҳо, сояҳо, индентҳо, радиатсия, аниматсияҳо).
2. Компонентҳо (тугмаҳо, майдонҳои вуруд, ҷадвалҳо, графикҳо, модалҳо, тостҳо, ҷадвалҳо).
3. Намунаҳо (шаклҳо, тасдиқкунӣ, ҷодугарони зина ба зина, рӯйхатҳо/ҷадвалҳо, огоҳиҳо).
4. Муҳтаво (микро-нусхабардорӣ, истилоҳот, паёмҳои хато).
5. Иконография ва тасвирҳо (оила, услуб, андоза ва сатрҳо).
6. Мавҷудият ва i18n/RTL (A11y қоидаҳо, тарҷума, маҳалҳо).
7. Равандҳо (версияҳо, роҳнамо, баррасиҳо, линтерҳо, намоишҳо ва намунаҳо).

3) Нишонаҳои тарроҳӣ (асоси экспрессивӣ)

Токенҳо арзишҳои номбаршуда мебошанд, ки дар ҳама маҳсулот дубора истифода мешаванд.

3. 1 Сохтори токен (мисол)

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 Нишонаҳои номгузорӣ

Аз умумӣ ба махсус: 'ранг. аксент. ибтидоӣ ', не' ибтидои кабуд '.
Бе бренди номгузорӣ баста шудан (бренд мавзӯъ аст, на нишона).
Баҳодиҳӣ: 'fg. хомӯш ',' fg. ибтидоӣ ',' fg. баръакс '. Равшаниро ба ном ('blue500') бе система рамзгузорӣ накунед.

3. 3 Нишонаҳои мавзӯъ

Нур, торик, муқобил: тағир додани арзишҳо, на номҳо.
Мавзӯъҳо - қабати барзиёд, UI пайваста боқӣ мемонанд.

4) Компонентҳо: Шартнома, давлатҳо, мавҷудият

Компонент = визуалӣ + рафтор + Шартнома + A11y.

4. 1 Намунаи шартномаи тугма

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

Вазъият: 'пешфарз/hover/active/focus/ғайрифаъол/боркунӣ'.
Мавҷудият: ҳалқаи фокус, андозаи ҳадаф ≥ 40-48 px, 'aria-pressed' барои гузариш.

4. 2 Кафолати компонент

Андозаҳои устувор (баландии хат, қаторҳо).
Дастрасӣ аз қуттӣ (нақшҳо/ария, клавиатура, контраст).
Инвариантҳо: хатогӣ дар дохили майдон ҳамеша дар поён ва бо 'aria-descripedby'.

5) Намунаҳои UX (мантиқи такрорӣ)

Шаклҳо: тамғаи чап/боло, ҷойгоҳ ≠ нишона, паҳлӯ ба паҳлӯ + хатогиҳои ҷамъбастӣ, ниқобҳои вуруд ва дархостҳо.
Модалҳо: як CTA асосӣ, 'Esc' пӯшида мешавад, доми фокус, бозгашти фокус.
Ҷадвалҳо/рӯйхатҳо: навъбандӣ, сарлавҳаи часпанда, саҳифа, содирот.
Филтрҳо: возеҳан Тугмаро татбиқ кунед, дубора барқарор кунед, захира кунед.
Огоҳиҳо: вудкои ≤ 3-5 с, таваққуф дар фокус, 'нақш = "ҳолат/ҳушдор"'.
Панели панелҳо: фаҳмишҳои боло → контекст → графика → CTA.

6) Истилоҳоти умумӣ ва нусхабардории хурд

6. 1 Луғат

Луғати ягонаи тиҷорат ва истилоҳҳои UX-ро нигоҳ доред. Ҳар як мақолаи интерфейс ба он ишора мекунад.
Барои дублетҳо - як калимаро интихоб кунед ("ҳамён" vs "тавозун"), дуюм - ҳамчун синоним дар ҷустуҷӯ.

6. 2 Қоидаҳои матн

Мухтасар ва оид ба парванда; аз jargon канорагирӣ кунед.
Хатогиҳо - фаҳмонед, ки чӣ кор кардан лозим аст: "Санаро дар формати YYYY-MM-DD муайян кунед".
Сарлавҳаҳо исм мебошанд; тугмаҳо - феълҳо ("Захира кардан", "Бекор кардан").
Воҳидҳои пайваста: сана/вақт дар UTC ё маҳал, асъор бо рамз (EUR, доллари ИМА).

7) Иконография ва тасвирҳо

Оила изоморф аст: кунҷи ягона, ғафсии хат, шабака 24 × 24.
Статусҳо ва семантика: ранг - дуюмдараҷа; шакл/нишона + матн - ибтидоӣ.
Миқёс: пиктограммаҳо дар зичии гуногун "шино намекунанд" (1 ×/2 ×/3 ×).

8) Дастрасӣ (A11y) ва маҳаллисозӣ (i18n/RTL)

Компонентҳо аз WCAG AA мегузаранд: контраст, новбари клавиатура, фокус, 'афзалият-кам-ҳаракат'.
Сатрҳои тарҷумашуда - дар захираҳо, на дар рамз. Ҷойгузинҳо ва формати рақам/сана локализатсияшаванда мебошанд.
RTL: нишонаҳои оинаӣ, тартиби дурусти ҷадвал, мантиқи DND аз клавиатура.

9) Рақамҳо, санаҳо, асъор ва форматҳо

Сана/вақт: ISO-8601, вақти воқеӣ - UTC; корбар - маҳал.
Асъор: воҳидҳои хурд/сатрҳои даҳӣ; ҳамеша рамзро муайян кунед (масалан, "€12. 34" ё "12. 34 EUR" - аз рӯи маҳал).
Фоизҳо: '12. 3% 'ва нуқтаҳои' + 1. 2 pp 'clearly фарқ.
Яклухткунӣ: ба рақамҳои назаррас; "к/м" барои шумораи зиёд.

10) Идоракунӣ: нақшҳо, артефактҳо, каналҳо

Шӯрои тарроҳии забон (DLC): Соҳибони токен/компонент, даъвои RFC.

• Маркази мундариҷа (Figma/Code) + Каталоги зинда бо намунаҳо.
• Ҳуҷҷатгузорӣ: роҳнамо, намуна, A11y, дастури мундариҷа.
• Тағйирот бо сана, сатҳҳо (иловашуда/тағирёфта/ҳазфшуда/хориҷшуда/собит).
• Каналҳо: танӯраи ҳарҳафтаинаи тарроҳӣ, канали суст, намоиши амалисозӣ.

11) Версия ва эволютсия

Semver барои бастаи компонентӣ: 'MAJOR. МИНОР. ПАТЧ '.
MINOR - иловашуда: оёти нав, танбаҳо бо пешфарз, ҷузъҳои нав.
MAJOR - шикастан: бартараф кардани танбаҳо, иваз кардани семантика → дастурҳои муҳоҷират.
Фармонҳо: огоҳӣ, тиреза ≥ 90 рӯз, парчамҳои мутобиқат.

12) Линтерҳо ва чекҳои автоматӣ

UI-линтер: рангҳои манъшуда берун аз нишонаҳо, анти-намунаҳо (тугма-дива, нақшаи ғайрифаъол).
A11y-checks: контраст, нақшҳо/ария, фокус, клавиатура.
i18n-linter: хатҳои "сахт" дар рамз, ҷойгоҳҳои нодуруст.
Озмоишҳои скриншот: регрессияи визуалии ҷузъҳо.
Шартномаҳои визуализатсияи API (агар бошад): намудҳои маълумот, диапазон, имзоҳо.

13) Намоиши компонентҳо (дафтарчаи ҳикоявӣ/қуттии қуттӣ)

Мисолҳои зинда бо идоракунии танбаҳо, рамз, ҳолат, A11y-checker.
"Дорухатҳо": варақаи бақайдгирӣ, қадами 3 устод, ҷадвал + филтрҳо, модалка + тост.
"Қуттии қуттии маҳалҳо": гузариш ба забон/форматҳо/RTL.

14) Шакли номгузорӣ ва сохтор

14. 1 Компонентҳо (BEM/семантика, мисоли CSS)

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

Дар рамз - номҳои якхелаи танбаҳо: 'андоза', 'меҳрубон', 'маъюб', 'onlick'.

14. 2 Сохтори файли китобхона

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

15) Анти-намунаҳо

Рангҳои "ройгон "/indents берун аз токенҳо.

Компонентҳои нусхабардорӣ: "ButtonV2," "Brimary

Ҷойгиркунӣ ҳамчун нишонаи ягонаи саҳроӣ.
Хомӯш кардани контур ва тугмаҳои мустақим.
Hover пешгӯинашаванда/фаъол/маъюбон.
Истилоҳоти тарҷумашуда ба ҷои тарҷумаи муқаррарӣ.
Набудани дастурҳои муҳоҷират ҳангоми навсозӣ.

16) Нишондиҳандаҳои сифати ягонаи забон

Фарогирӣ - таносуби экранҳо бо истифодаи китобхонаи мундариҷа.
Индекси мутобиқат: Истифодаи такрории нишонаҳо ва услубҳои "дастӣ".
A11y Pass Rate - фоизи ҷузъҳои гузаштаи WCAG AA.
Escape Escape: Нуқсонҳои UI/мундариҷа дар фурӯши 1k.
Вақт ба кишти - вақт барои татбиқи экрани маъмулӣ пеш аз/баъд аз DLS.
Қабул: намоишҳои DAU, рақами PR бо ҷузъҳо/намунаҳо.

17) Рӯйхати экрани экран

• Нишонаҳои истифодашуда (ранг/indents/radii), на арзишҳои сахт.
• Компонентҳо аз китобхона; одат - танҳо RFC.
• Дастрасӣ: клавиатура/фокус/контраст/нақшҳо/ария.
• Воҳидҳо: сана/асъор/фоиз - барои як дастури формат.
• Микрокопия: тугмаҳо = феълҳо, хатогиҳо = амал барои ислоҳ.
• Locales/RTL тарҳро вайрон намекунад.
• Давлатҳо: боркунӣ/холӣ/хато пешбинӣ шудаанд.
• Санҷишҳои регрессияи визуалӣ нав карда шуданд.

18) Нақшаи амалисозӣ (3 такрорӣ)

Итератсия 1 - Бунёд (2-3 ҳафта)

Токенҳо (ранг/типография/фосила/ҳаракат), ҷузъҳои асосӣ (тугма, вуруд, интихоб, асбоб, модал), дастури мундариҷа (оҳанг, тамғакоғазҳо, хатоҳо).
Намоиш (китоби ҳикоя) ва A11y-checker, линтер.

Итератсия 2 - Намунаҳо ва маҳаллисозӣ (3-4 ҳафта)

Намунаҳои шаклҳо/ҷадвалҳо/филтрҳо, бастаи нишонаҳо 24 × 24, қуттиҳои RTL/i18n, қоидаҳо барои рақамҳо/санаҳо/асъорҳо.
Semver, changelog, RFC/раванди муҳоҷират, автотестҳо (визуалӣ + A11y).

Итератсия 3 - Миқёс ва эволютсия (Давомдор)

Компонентҳои композитсионӣ (ҷодугар, DATA Grid, примитивҳои диаграмма), темилизатсия (сабук/торик/контраст), ҳисоботҳои ченакҳои сифат, аудити муқаррарии UX.

19) Мини-FAQ

Оё "ҳама якбора" лозим аст?
Не, ин тавр нест. Аз нишонаҳо ва ҷузъҳои асосӣ оғоз кунед, пас намунаҳо ва равандҳоро илова кунед.

Чӣ гуна гурӯҳҳоро бовар кунондан мумкин аст, ки YEI-ро истифода баранд?
Бурдҳоро нишон диҳед: суръат, камбудиҳои камтар, дастурҳои экрани тайёр ва A11y берун аз қуттӣ.

Бо экранҳои меросӣ чӣ бояд кард?
Нақшаи муҳоҷират, услуби пулҳо тавассути нишонаҳо, экранҳои афзалиятнок - аввал.

Ҷамъ

Забони ягонаи интерфейс на танҳо китобхонаи компонентӣ мебошад. Ин системаи қоидаҳо ва равандҳо мебошад, ки дар он нишонаҳо экспрессивӣ, ҷузъҳо - рафтор ва мавҷудият, намунаҳо - такрори қарорҳо, идоракунӣ ва ченакҳо - таҳаввулоти устуворро муқаррар мекунанд. Забони худро равшан, санҷида ва васеъ кунед - ва маҳсулоти шумо яксон, зуд ва боэътимод кор хоҳанд кард.