Единый язык интерфейсов

1) Что такое единый язык интерфейсов и зачем он нужен

Единый язык интерфейсов (ЕЯИ) — это общая система понятий, визуальных правил и взаимодействий, которую разделяют дизайнеры, инженеры, аналитики и авторы контента.

• Согласованность: одинаковые компоненты и термины в разных продуктах и командах.
• Скорость: быстрые сборки, меньше холиваров, быстрее онбординг.
• Качество: консистентные паттерны 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`.
Доступность: фокус-кольцо, размеры таргета ≥ 40–48 px, `aria-pressed` для toggle.

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 Компоненты (BEM/семантика, пример 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: дефекты UI/контента в проде на 1k коммитов.
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-экранами?
План миграций, мостовые стили через токены, приоритетные экраны — первыми.

Итог

Единый язык интерфейсов — это не только библиотека компонентов. Это система правил и процессов, где токены задают выразительность, компоненты — поведение и доступность, паттерны — повторяемость решений, а говернанс и метрики — устойчивую эволюцию. Делайте язык ясным, проверяемым и расширяемым — и ваши продукты будут выглядеть и работать единообразно, быстро и надежно.