UX-гайдлайн и стандарты интерфейсов
1) Принципы
Ясность прежде красоты. Смысл и действие очевидны за 1–2 секунды.
Одна цель на экран. Все остальное — вторично или скрыто.
Последовательность. Те же паттерны = те же ожидания.
Доступность по умолчанию. Контраст, фокус, клавиатура, озвучка.
Контекстность. Подсказки и тексты — ровно там, где нужны.
Локализация-first. Длины строк, форматы, культура — в дизайне изначально.
Обратимость. Любое рискованное действие можно отменить/подтвердить.
Измеримость. Каждое правило — с метрикой (конверсия шага, время, ошибки).
2) Сетка, отступы и ритм
Сетка: 4/8-pt шаг; колонки: 12 (desktop), 6 (tablet), 4 (mobile).
Внутренние отступы компонентов: кратны 4; внешние — 8/12/16/24.
Вертикальный ритм: заголовок → подзаголовок → контент → действия (CTA).
Границы и разделители: экономно; предпочитать «воздух» и иерархию типографики.
3) Типографика
Шкала кеглей: 12/14/16/20/24/32/40 (body 16).
Высота строки: 1.4–1.6 для текста, 1.2–1.3 для заголовков.
Длина строки: 45–75 знаков (desktop), 35–55 (mobile).
Выделение: жирный для смысловых акцентов; капс — только в метках.
Читаемость вслух: тексты должны звучать естественно.
4) Цвет и контраст
Семантика: `success / info / warning / error / neutral`.
Контраст: минимум WCAG 2.1 AA (текст/фон ≥ 4.5:1; крупный ≥ 3:1).
Цвет ≠ единственный сигнал. Добавляйте иконку/текст/форму.
Фокус-кольцо: всегда видимый (не отключать в CSS).
5) Навигация и информационная архитектура
Путь пользователя: «Где я? Что здесь? Что дальше?» — очевидно.
Иерархия меню: ≤ 2 уровней в основной навигации.
Хлебные крошки: для глубоких разделов.
Поиск: доступен глобально на сложных каталогах; горячая клавиша `/`.
Состояния навигации: активная вкладка/страница подсвечена токенами.
6) Компоненты и паттерны
Используем компоненты дизайн-системы (без «самоделок»).
Один primary-CTA на экран; остальные — secondary/tertiary.
Состояния: default/hover/focus/active/disabled/loading — обязателены у каждого интерактива.
Пустые состояния: контекст + ценность + CTA (+ вторичный link).
Общие алерты: один page-alert на экран + локальные inline-подсказки.
7) Формы, валидация и ошибки
Лейбл обязателен. Placeholder — пример формата, а не замена.
Inline-валидация на blur, summary-ошибок на submit.
Сообщение об ошибке: что не так + как исправить + ограничение/формат.
Авто-скролл и фокус к первой ошибке; `aria-invalid`, `aria-describedby`.
Маски и форматы: подсказывают, но не ломают ввод (возможен пэйст).
Сохранность данных: ничего не теряем при перезагрузке/ошибке.
8) Состояния и фидбек
Успех: тост 2–4 с, нейтрально-позитивный тон, CTA «что дальше».
Инфо/notice: мягкий баннер/тултип, не блокирует поток.
Warning/Error/Critical: иерархия визуально/семантически; критичные — модалка/баннер с явным действием.
Загрузка: skeleton > спиннер; оценка времени при ожидании > 3 с.
9) Контент и microcopy
Правило трех ответов: что происходит → зачем → что делать дальше.
CTA: глагол действия + объект («Сохранить изменения», «Пройти верификацию»).
Числа/даты/валюты: локальные форматы.
Тон: дружелюбный; в стрессовых шагах (платеж/безопасность) — нейтральный.
10) Доступность (A11y)
Полная навигация с клавиатуры; логичный порядок табов.
Роли и `aria-` для интерактивов, лайв-регионы для тостов/статусов.
Контрасты, фокус-кольца, размеры интерактивов ≥ 44×44 px.
Текстовые альтернативы у иконок/изображений; таблицы с `th`/`scope`.
Проверки: автоматические (линтер/сканер) + ручные сценарии скринридера.
11) Локализация и интернационализация
Все строки — в i18n-ключах с контекстом.
Тест «длинных языков» (DE/TR), RTL-режимы.
Числа/валюты/времена — утилитами форматирования.
Tone-map: степень формальности/эмоции по сценариям (онбординг/платежи/безопасность).
12) Респонсивность и адаптив
Брейкпоинты: 360 / 768 / 1024 / 1280+.
Mobile-first: критичный путь доступен одной рукой, CTA в зоне большого пальца.
Гесты и клавиатура: жесты дублируются кнопками; на desktop — хоткеи.
Плотность: на desktop — «воздух», на mobile — экономия вертикали без ущерба кликабельности.
13) Темная тема
Контраст по WCAG сохраняется; избегать «чистого черного» для фона (темно-серый).
Свечение/тени — ослабленные; фокус-кольцо контрастное.
Иллюстрации и логотипы — с инвертированными версиями.
Политика перехода: сохраняем выбор пользователя (system / light / dark).
14) Анимации и движение
Длительность: 120–200 мс (малые), 200–300 мс (переходы).
Функции ускорения — естественные (cubic-bezier с легким замедлением).
Анимации не должны блокировать поток и ухудшать читаемость.
Уважать `prefers-reduced-motion`.
15) Перформанс
LCP ≤ 2.5 с, TTI/TBT в зеленой зоне; код-сплитинг; ленивая загрузка медиа.
Виртуализация длинных списков; кеширование данных.
Skeleton для восприятия скорости; минимизировать «джанк» макета.
16) Безопасность и приватность в UI
Ясные объяснения причин запросов (камера, KYC, гео).
Прозрачные сроки/комиссии/лимиты; без «мгновенно», если возможны задержки.
Конфиденциальные данные — маскирование, явное «показать/скрыть».
Подтверждения для необратимых действий; журнал действий/уведомления о входе.
17) Метрики качества UX
Конверсия шага и время до завершения.
Error rate по полям/шагам и Time-to-Fix.
CTR по CTA и повторяемость сценариев.
Drop-off после ошибки / после загрузки > N секунд.
Обращения в поддержку по темам (до/после изменений).
A11y-дефекты на релиз (цель — 0 критичных).
18) Чек-листы
Экран перед релизом
- Одна главная цель и один primary-CTA.
- Навигация и статус «где я» очевидны.
- Контент краткий: 1–2 предложения на блок.
- Состояния: loading/empty/error/success покрыты.
- A11y: контраст AA, фокус виден, `aria-` на интерактивах.
- Локализация: длины строк/форматы/RTL проверены.
- Перформанс: нет «тяжелых» блоков без нужды.
Форма перед релизом
- Лейблы и примеры форматов присутствуют.
- Inline-валидация + summary на submit.
- Скролл к первой ошибке, фокус в поле.
- Сообщения: что/как/почему; без кодов 500/400 для пользователя.
- Данные не теряются при ошибках/перезагрузке.
19) Анти-паттерны
«ОК» как CTA на смысловых шагах.
Плейсхолдер вместо лейбла.
Цвет как единственный сигнал статуса.
Спиннеры без оценки времени и без альтернативы.
Модальные окна без фокус-трэпа и ESC-закрытия.
Смешение стилей/иконок, дублирование компонентов вне дизайн-системы.
Юмор/эмодзи в критических сценариях (платеж/безопасность).
20) Примеры «до/после»
Ошибка формы
До: «Ошибка 400»
После: «Неверный формат даты. Используйте ДД.ММ.ГГГГ.»
Пустое состояние
До: «Здесь пусто»
После: «Здесь появится история операций после первого пополнения. [Пополнить счет]»
Сообщение успеха
До: «Готово»
После: «Платеж принят. Баланс обновлен. [Посмотреть историю]»
Навигация
До: неясно, где пользователь
После: активная вкладка + хлебные крошки + явный заголовок страницы
21) Шаблоны для дизайн-ревью
Каркас экрана
Заголовок → краткое описание → контент/список → фидбек/статусы → действия.
Каркас формы
Заголовок → подсказка → поля (лейбл + helper + ошибка) → CTA → вторичные действия → примечания (комиссии/сроки).
Шаблон microcopy
Заголовок (опц.)
1–2 предложения: контекст + следующий шаг
CTA: действие + объект
Вторичный линк: помощь/правила
22) Процессы и поддержание стандартов
Definition of Done (UX): макет + тексты + состояния + A11y + i18n + метрики.
UX-ревью в PR: чек-лист из разделов 18–21.
Документация: каждая фича добавляет/обновляет гайд в wiki/Storybook.
Аудит раз в квартал: контент, A11y, перформанс, консистентность.
Итоговая шпаргалка
Одна цель, один главный CTA.
Состояния и фидбек спроектированы заранее.
A11y и локализация — с нуля, а не «потом».
Меньше цветов — больше семантики и ритма.
Измеряйте: конверсия, ошибки, время, обращения.
Все через дизайн-систему: те же правила → те же ожидания → предсказуемый UX.
Могу дополнить этот гайд готовыми шаблонами для ваших ключевых сценариев (регистрация/KYC, депозит/вывод, бонусы/турниры) и собрать чек-листы под ваш процесс ревью.