Бирдиктүү интерфейс тили

1) Интерфейстердин бирдиктүү тили деген эмне жана ал эмне үчүн керек

Интерфейстердин бирдиктүү тили - түшүнүктөрдүн, визуалдык эрежелердин жана өз ара аракеттенүүнүн жалпы системасы, аны дизайнерлер, инженерлер, аналитиктер жана мазмундун авторлору бөлүшөт.

• Ырааттуулук: ар кандай буюмдар жана командалар боюнча бирдей компоненттер жана терминдер.
• ылдамдыгы: тез чогултуу, аз Holivars, тезирээк бириктирүү.
• Сапаты: консистенттик 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 Нейминг токендери

Жалпыдан жекеге: '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'.
Жеткиликтүү: Focus Ring, максаттуу өлчөмдөрү ≥ 40-48 px, toggle үчүн 'aria-pressed'.

4. 2 компоненттеринин кепилдиктери

Туруктуу өлчөмдөрү (line-height, paddings).
Кутучадан жеткиликтүүлүк (Roley/Aria, клавиатура, контраст).
Инварианттар: талаанын ичиндеги ката дайыма төмөндө жана 'aria-describedby' менен.

5) UX үлгүлөрү (кайталануучу логика)

Формалар: сол/үстүнкү белги, placeholder ≠ label, каталар + коштоосунда кыскача маалымат, кириш маскалар жана кеңештер.
Модалдар: бир негизги CTA, 'Esc' жабат, фокус капкан, фокусту кайтаруу.
Таблицалар/тизмелер: сорттоо, sticky-аталышы, барактуулук, экспорт.
Filters: ачык баскычы "колдонуу", калыбына келтирүү, сакталган алдын ала жазуулар.
Эскертмелер: тост ≤ 3-5 с, фокуста тыныгуу, 'role = "status/alert"'.
Dashbord: top insights → контекстте → графика → CTA.

6) Бирдиктүү терминология жана микрокопирайтинг

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

Бизнес жана UX-терминдердин бирдиктүү глоссарийин жүргүзүңүз. Интерфейстин ар бир макаласы ага шилтеме берет.
Дублеттер үчүн - бир сөздү тандоо ("капчык" vs "баланс"), экинчиси - издөөдө синоним катары.

6. 2 Текст эрежелери

Кыска жана иш боюнча; жаргонду болтурбоо.
Каталар - эмне кылуу керек экенин түшүндүрүү: "GGGG-MM-DD форматында датаны көрсөтүңүз".
Аталыштар - аталыштар; баскычтар - этиштер ("сактоо", "жокко чыгаруу").
Консистенттик бирдиктер: датасы/убактысы 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-Линтер: Токендерди тышкары тыюу түстөр, анти-үлгүлөрү (div баскычы, outline өчүрүлгөн).
A11y-текшерүү: контраст, ролдору/ария, фокус, клавиатура.
i18n-линтер: коддогу "катуу" саптар, туура эмес playsholders.
Скриншот тесттер: компоненттердин визуалдык регрессиясы.
API Visualization контракттары (эгерде бар болсо): маалыматтардын түрлөрү, диапазондор, кол тамгалар.

13) компоненттери Vitrina (storybook/Sandbox)

Пропстерди көзөмөлдөө, код, шарттар, A11y-текшерүү менен жандуу мисалдар.
"Recipes": каттоо формасы, мастер 3 кадам, стол + чыпкалар, модалка + тост.
"Жергиликтүү Sandbox": тил/формат/RTL которуу.

14) Нейминг жана түзүлүш үлгүлөрү

14. 1 компоненттери (VEM/семантика, 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".
Playsholder талаанын жалгыз белгиси болуп саналат.
outline жана "div-баскычы" өчүрүү.
Күтүүсүз hover/active/disabled.
Транслитерацияланган терминдер кадимки котормонун ордуна.
Жаңылоодо миграциялык гиддердин жоктугу.

16) Бирдиктүү тилдин сапатын өлчөө

Coverage: компоненттер китепканасын колдонгон экрандардын үлүшү.
Consistency Index: Токендерди кайра колдонуу vs "кол" стилдери.
A11y Pass Rate: WCAG AA өткөн компоненттеринин пайызы.
Defect Escape: UI/мазмундун мүчүлүштүктөрү 1k коммиттерде.
Time-to-Ship: DLS чейин/кийин типтүү экран ишке ашыруу үчүн убакыт.
Adoption: DAU терезелер, компоненттери/үлгүлөрү менен PR саны.

17) Чек экраны

• Колдонулган белгилер (түсү/чегинүү/радиустары) эмес, "катуу" маанилери.
• китепкана компоненттери; RFC менен гана.
• Жеткиликтүүлүк: клавиатура/фокус/контраст/роликтер/ария.
• Бирдиктер: даталар/валюталар/пайыздар - форматтардын гид боюнча.
• Микрокоптор: баскычтар = этиштер, каталар = туура иш-аракет.
• Locals/RTL макетин сындырбайт.
• Шарттар: loading/empty/error каралган.
• Визуалдык регрессия тесттери жаңыланды.

18) Ишке ашыруу планы (3 итерация)

Итерация 1 - пайдубалы (2-3 жума)

Токендер (Color/Printing/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) Mini-FAQ

Бир эле учурда "баары бир" керекпи?
Жок. Токендер жана базалык компоненттерден баштап, андан кийин үлгүлөрдү жана процесстерди кошуңуз.

Командаларды ЕАЭБди колдонууга кантип көндүрүү керек?
утуп көрсөтүү: ылдамдыгы, аз кемчиликтер, даяр Recipes экрандар жана A11y "кутучадан".

Legacy экрандар менен эмне кылуу керек?
Миграция планы, токендер аркылуу көпүрө стилдери, артыкчылыктуу экрандар - биринчилерден болуп.

Жыйынтык

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