Интерфейстердің бірыңғай тілі

1) Интерфейстердің бірыңғай тілі дегеніміз не және ол не үшін қажет

Интерфейстердің бірыңғай тілі (БСО) - бұл дизайнерлер, инженерлер, талдаушылар және контент авторлары бөлісетін ұғымдардың, визуалды ережелер мен өзара іс-қимылдардың ортақ жүйесі.

• Келісімділік: әртүрлі өнімдер мен командалардағы бірдей компоненттер мен терминдер.
• Жылдамдық: жылдам құрастыру, холивардан аз, онбордингтен жылдам.
• Сапасы: UX консистенттік үлгілері, «әдепкі» қол жетімділік.
• Масштабталуы: «UI хайуанаттар паркіне» ыдыраусыз қауіпсіз эволюция.

2) Бір тілдің қабаттары

1. Токендер (түсі, типографиясы, өлшемдері, көлеңкелері, шегіністері, радиустары, анимациялары).
2. Компоненттер (түймешіктер, енгізу өрістері, кестелер, графиктер, модальдар, тостар, қойындылар).
3. Паттерндер (нысандар, валидация, қадамдық шеберлер, тізімдер/кестелер, хабарламалар).
4. Контент (микрокопирайтинг, терминология, қателер туралы хабарламалар).
5. Иконография және иллюстрациялар (отбасы, стиль, өлшемдер және сызықтар).
6. Қолжетімділік және i18n/RTL (A11y ережелері, ауыстырғыштығы, локальдары).
7. Процестер (нұсқалар, гайдрайлдар, ревью, линтерлер, витриналар және мысалдар).

3) Дизайн-токендер (мәнерлілік негізі)

Токендер - бұл барлық өнiмдерде қайта пайдаланылатын аталған мәндер.

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 Нейминг токендері

Жалпыдан жекеге: 'color. accent. primary`, не `primaryBlue`.
Неймингтегі брендке байланыссыз (бренд - бұл тақырып, токеннің атауы емес).
'fg. muted`, `fg. primary`, `fg. inverse`. Атаудағы жарықтылықты ('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;
};

'default/hover/active/focus/disabled/loading' күйі.
Қол жетімділік: фокус-сақина, таргет өлшемдері ≥ 40-48 px, toggle үшін 'aria-pressed'.

4. 2 Компоненттердің кепілдіктері

Тұрақты өлшемдер (line-height, paddings).
Қораптан қол жетімділік (ролея/aria, пернетақта, контраст).
Инварианттар: өріс ішіндегі қате әрқашан төменде және 'aria-describedby'.

5) UX паттерндері (қайталанатын логика)

Пішіндер: сол/үстіңгі жағындағы лейбл, placeholder ≠ label, қателер + жиынтықтағы қатар, енгізу бетпердесі мен кеңестер.
Модульдер: бір басты CTA, 'Esc' жабады, фокус тұзағы, фокусты қайтару.
Кестелер/тізімдер: сұрыптау, sticky-тақырып, беттер саны, экспорт.
Сүзгілер: «Қолдану» ашық түймешігі, ысыру, сақталған пресеттер.
Ескертулер: tост ≤ 3-5 с, фокус кезіндегі үзіліс, 'role =' status/alert ''.
Дашбордтар: top insights → контексті → графика → CTA.

6) Бірыңғай терминология және микрокопирайтинг

6. 1 Глоссарий

Бизнес-және UX-терминдердің бірыңғай глоссарийін жүргізіңіз. Интерфейстің әрбір бабы оған сілтеме жасайды.
Дублеттер үшін - бір сөзді таңдау («әмиян» vs «баланс»), екіншісі - іздеудегі синоним ретінде.

6. 2 Мәтін ережелері

Қысқаша және іс бойынша; жаргоннан аулақ болу керек.
Қателер - не істеу керектігін түсіндіру: «Күнін ЖЖЖЖ-ММ-ДД форматында көрсетіңіз».
Тақырыптар - зат есімдер; батырмалар - етістіктер («Сақтау», «Болдырмау»).
Консистенттік бірліктер: UTC немесе локальдағы күні/уақыты, коды бар валюталар (EUR, USD).

7) Иконография және иллюстрациялар

Отбасы изоморфты: бірыңғай бұрыш, сызықтың қалыңдығы, 24 × 24 тор.
Мәртебелері мен семантикасы: түсі - қайталама; пішін/белгі + мәтін - бастапқы.
Масштабтау: пиктограммалар әртүрлі тығыздықта «жүзбейді» (1 ×/2 ×/3 ×).

8) Қолжетімділік (A11y) және оқшаулау (i18n/RTL)

Компоненттер WCAG AA-дан өтеді: контраст, пернетақтадан навигация, фокус, 'prefers-reduced-motion'.
Аударылатын жолдар - ресурстарда, кодта емес. Плейсхолдерлер және сандар/күндер пішімі - оқшауланады.
RTL: иконаларды зеркалау, Tab дұрыс тәртібі, клавиатурадан DnD логикасы.

9) Сандар, күндер, валюталар және форматтар

Күні/уақыты: ISO-8601, нақты уақыт нүктесі - UTC; пайдаланушыға - жергілікті.
Валюта: minor units/ондық жолдар; әрқашан кодты көрсету (мысалы, "€12,34" немесе "12. 34 EUR" - жергілікті бойынша).
Проценттер: «12,3%» және «+ 1,2 п.т.» тармақтарын анық ажырату керек.
Дөңгелектеу: маңызды разрядтарға дейін; Үлкен сандарға арналған «k/m».

10) Говернанс: рөлдер, артефактілер, арналар

Design Language Council (DLC): токендер/компоненттер иелері, RFC растайды.

• Компоненттер кітапханасы (Figma/код) + мысалдары бар тірі каталог.
• Құжаттама: гайдрайлдар, паттерндер, A11y, контент-гайд.
• Күні, деңгейі бар чейнджлог (added/changed/deprecated/removed/fixed).
• Арналар: апта сайынғы дизайн-синк, Slack-арна, енгізу шоукейстері.

11) Нұсқалау және эволюция

Компоненттер пакеті үшін SemVer: 'MAJOR. MINOR. PATCH`.
MINOR - аддитивті: жаңа токендер, дефолты бар пропстар, жаңа компоненттер.
MAJOR - breaking: пропстерді жою, семантиканы ауыстыру → көші-қон гайдтары.
Депрекация: ескерту, терезе ≥ 90 күн, үйлесімділік жалаулары.

12) Линтерлер және автоматты тексеру

UI-линтер: токендерден тыс тыйым салынған түстер, анти-паттерндер (кнопка-див, outline өшірілген).
A11y-тексеру: контраст, рөлдер/aria, фокус, пернетақта.
i18n-линтер: кодтағы «қатты» жолдар, қате плейсхолдер.
Скриншот-тесттер: компоненттердің визуалды регрессиясы.
API визуализация келісімшарттары (егер бар болса): деректер түрлері, диапазондар, қолтаңбалар.

13) Компоненттер витринасы (storybook/құмсалғыш)

Пропс бақылауы, коды, жағдайы, A11y-чекері бар тірі мысалдар.
«Рецептер»: тіркеу формасы, шебер 3 қадам, кесте + сүзгілер, модалка + тостар.
«Жергілікті құм қоймасы»: тілді/пішімді/RTL ауыстырып қосу.

14) Нейминг және құрылым үлгілері

14. 1 Компоненттер (ВЕМ/семантика, CSS мысалы)

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

Кодта - біркелкі пропс атаулары: 'size', 'kind', 'disabled', 'onClick'.

14. 2 Кітапхананың файл құрылымы

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

15) Қарсы үлгілер

«Бос» түстер/шегіністер.
Компоненттердің қосындылары: «ButtonV2», «PrimaryButtonNew».
Плейсхолдер өрістің жалғыз белгісі ретінде.
outline және «див-батырманы» ажырату.
Күтпеген hover/active/disabled.
Қалыпты аударманың орнына транслитерацияланған терминдер.
Жаңартулар кезінде көші-қон гайдтарының болмауы.

16) Бірыңғай тіл сапасының өлшемдері

Coverage: компоненттер кітапханасын пайдаланатын экрандар үлесі.
Consistency Index: токендерді қайта пайдалану vs «қол» стильдері.
A11y Pass Rate: WCAG AA өтетін компоненттер пайызы.
Defect Escape: 1k коммитке арналған өнімдегі UI/мазмұн ақаулары.
Time-to-Ship: DLS дейін/кейін типтік экранды іске асыру уақыты.
Adoption: DAU витриналар, компоненттері/үлгілері бар PR саны.

17) Экранның чек-парағы

• «Қатты» мәндер емес, белгілер (түсі/шегіністері/радиустары) пайдаланылды.
• Кітапханадан компоненттер; кастоммен - тек RFC кезінде.
• Қол жетімділік: пернетақта/фокус/контраст/ролей/aria.
• Бірліктер: күндер/валюталар/пайыздар - форматтардың гайды бойынша.
• Микрокопи: түймешіктер = етістіктер, қателер = түзету әрекеті.
• Локальдар/RTL орналасуды бұзбайды.
• Күйі: loading/empty/error қарастырылған.
• Визуалды регрессия тестілері жаңартылды.

18) Енгізу жоспары (3 итерация)

Итерация 1 - Іргетас (2-3 апта)

Токендер (түсі/типографиясы/spacing/motion), базалық компоненттер (Button, Input, Select, Tooltip, Modal), контент-гайд (тон, лейблдер, қателер).
Витрина (storybook) және A11y-чекер, токендер линтері.

Итерация 2 - Паттерндер және оқшаулау (3-4 апта)

Нысандар/кестелер/сүзгілер үлгілері, иконпак 24 × 24, RTL/i18n-құмсалғыш, сандар/күндер/валюта ережелері.
SemVer, чейнджлог, RFC/көші-қон процесі, автотесттер (визуалды + A11y).

Итерация 3 - Масштаб және эволюция (үздіксіз)

Композициялық компоненттер (Wizard, DataGrid, Chart primitives), тақырыптау (ашық/қараңғы/қарама-қарсы), сапа өлшемдері бойынша есептер, тұрақты UX-аудиттер.

19) Шағын FAQ

Бірден «бәрі де, бірден» керек пе?
Жоқ. Токендер мен негізгі компоненттерден бастаңыз, содан кейін паттерндер мен процестерді қосыңыз.

Командаларды ЕАЭО-ны пайдалануға қалай көндіруге болады?
Ұтысты көрсетіңіз: жылдамдық, кемшіліктер аз, дайын экрандар рецептілері және «қораптан» A11y.

Legacy-экрандармен не істеу керек?
Көші-қон жоспары, белгілер арқылы көпір стильдері, басым экрандар - бірінші болып.

Жиынтығы

Интерфейстердің бірыңғай тілі тек құрамдас бөліктер кітапханасы ғана емес. Бұл токендер мәнерлілік, компоненттер - мінез-құлық пен қолжетімділік, паттерндер - шешімдердің қайталануы, ал говернанс пен метрика - тұрақты эволюция беретін ережелер мен процестер жүйесі. Тіліңізді анық, тексерілетін және кеңейтілетін етіп жасаңыз - өнімдеріңіз біркелкі, жылдам және сенімді көрінеді және жұмыс істейді.