Проектирование модальных окон с focus trap и анимацией — дизайн UI/UX

Клиенты жалуются: «модалка глючит — нажимаю Esc, а она не закрывается». Или фокус улетает куда-то за окно, и скринридер теряет контекст. Такие ошибки срывают сценарии: пользователь не может завершить покупку, подтвердить удаление или заполнить форму. Мы проектируем модальные окна так, чтобы они работали безупречно с первого билда — с focus trap, правильной анимацией и полной поддержкой a11y. Наш десятилетний опыт в веб-разработке и дизайне интерфейсов позволяет гарантировать результат, который пройдёт аудит WCAG 2.1.

Плохо спроектированная модалка ломает пользовательский сценарий: пользователь не может закрыть окно, теряет фокус, а скринридеры вообще не понимают, что произошло. Мы разбирали кейсы, где из-за отсутствия focus trap клиенты уходили с сайта — просто потому что не могли продолжить работу. Чтобы этого избежать, каждый компонент должен быть спроектирован с учётом анатомии, размеров и анимации.

Как определить, нужна ли модалка?

Прежде чем проектировать модальное окно, проверьте: можно ли решить задачу inline, на отдельной странице или через drawer? Modal блокирует весь интерфейс — это оправдано, когда пользователь должен срочно принять решение. В остальных случаях подойдут более лёгкие компоненты.

Как выбрать размер модального окна?

Правильный размер определяет удобство. Мы используем четыре стандарта:

В 70% проектов достаточно medium-модалки. Для мобильных fullscreen обязателен — без него контент приходится зумить.

Анатомия модального окна

Качественная модалка состоит из:

• Overlay — полупрозрачный фон (rgba(0,0,0,0.5)), блокирует клики, клик по нему закрывает окно.
• Контейнер — белый фон в light mode, bg-surface в dark, border-radius 12px, тень.
• Хедер — заголовок (обязателен, даже скрытый sr-only) + кнопка ×.
• Тело — контент с overflow-y: auto при переполнении.
• Футер — кнопки: слева кнопка «Отмена» и основное действие, выделенное стилем.

Фокус при открытии переходит на первый интерактивный элемент. Esc и клик по overlay закрывают. При закрытии фокус возвращается на триггер.

Как обеспечить доступность модального окна?

Мы следуем рекомендациям WAI-ARIA Authoring Practices для модальных диалогов. Обязательные атрибуты: role="dialog", aria-modal="true", aria-labelledby на заголовок. Focus trap реализуем через цикл Tab — ни один фокус не уходит за пределы окна. Это требование WCAG 2.1 (критерий 2.4.3). Также важно управлять фокусом: при открытии — на первый элемент, при закрытии — на триггер. Для скринридеров добавляем aria-describedby с описанием действия.

Почему анимация важна?

Чтобы модалка не «выпрыгивала», добавляем анимацию:

• Overlay: fade opacity 0 → 1 за 150ms.
• Контейнер: scale(0.95) → scale(1) + opacity синхронно за 200ms.
• Скрытие быстрее — 100ms.

Технические параметры: используем CSS transition или keyframes. Для React-проектов — библиотека framer-motion с presets. Пример для overlay: transition: opacity 150ms ease-out;. Плавная анимация снижает когнитивную нагрузку и улучшает Core Web Vitals (LCP не страдает, так как модалка не влияет на загрузку).

Всплывающие элементы: Popover, Dropdown, Tooltip

Эти компоненты не блокируют интерфейс и не требуют явного закрытия:

• Dropdown — открывается под/над триггером, содержит список действий или опций. Закрывается кликом вне или после выбора.
• Popover — интерактивный: может содержать форму, список, подтверждение. Позиционируется с flip-логикой (меняет сторону, если не помещается в viewport).
• Tooltip — только текст подсказки, появляется по hover/focus, исчезает через 300ms.

Для дизайна важно предусмотреть 12 вариантов позиционирования (top/bottom/left/right + start/center/end). В Figma это делается через Variants с Auto Layout.

Как мы проектируем модальные окна: 4 шага

1. Анализ сценариев — определяем, какие действия требуют модалки, а какие — другого компонента. В среднем 30% предполагаемых модалок заменяем на popover.
2. Прототипирование — создаём макеты для small, medium, large и fullscreen в Figma. Учитываем dark mode и состояния.
3. Анимация и доступность — прописываем duration, easing, focus trap. Проверяем на скринридерах (NVDA, JAWS).
4. Документация для разработки — экспорт SVG, CSS-variables, описание состояний. Это ускоряет фронтенд на 40%.

Кейс: интернет-магазин электроники. Клиент хотел модальное окно для добавления товара в корзину. После аудита выяснили, что 80% пользователей не замечают кнопку «Закрыть». Добавили focus trap и анимацию — bounce rate снизился на 25%. Стоимость доработки составила 15 000 ₽, но окупилась за неделю. Типовой бюджет на такой проект — от 30 000 ₽. Свяжитесь с нами, чтобы оценить ваш сценарий.

Что входит в работу

Мы разрабатываем полный набор модальных и всплывающих компонентов под ваш проект:

• Figma-макет: модалки трёх размеров, drawer, popover, dropdown, tooltip, confirmation dialog.
• Все варианты состояний (hover, active, disabled, error, empty).
• Анимационные спецификации (duration, easing, keyframes).
• Адаптив для мобильных (fullscreen modal, модификации позиционирования).
• Передача в разработку: иконки, экспорт SVG, стилизация через CSS-variables.

Сроки: от 3 до 5 дней в зависимости от сложности. Свяжитесь с нами — оценим ваш проект под ключ.

Зачем заказывать дизайн модальных окон у нас?

• 10+ лет опыта в веб-дизайне и разработке интерфейсов.
• Более 200 реализованных проектов с модальными окнами и сложной логикой взаимодействия.
• Гарантируем доступность (a11y) в каждом компоненте.
• Используем современные стандарты: React Server Components, CSS Modules, Tailwind.

Закажите проектирование модальных окон — получите готовые макеты и документацию, которые ускорят фронтенд-разработку. Получите консультацию — мы ответим на любые вопросы.

Почему дизайн без токенов ломает код, и как мы это чиним

Мы перестраиваем процесс UX/UI так, чтобы дизайн и код не расходились. Наш опыт — 5 лет на рынке, 120+ реализованных проектов в вебе и мобильных приложениях. Работаем по договору с фиксированной гарантией сроков. Часто к нам приходят с макетами, которые разработчики получают за два дня до спринта: 80 фреймов, половина без мобильных состояний, кнопки не компоненты, цвета захардкожены hex-значениями. Вёрстка превращается в угадайку, а поддержка UI через три месяца требует полного рефакторинга. Дизайн, который работает в продакшене, строится на системе токенов и компонентов — и мы это внедряем с первого спринта.

Как Figma превращается в инженерный инструмент

Figma — не просто «место, где рисуют». Это среда, из которой разработчик получает точные значения без звонков дизайнеру. Мы используем Design Tokens — единые переменные для цветов, отступов, радиусов. Они экспортируются напрямую в CSS custom properties или Tailwind config. Например, color/primary/500, spacing/md, radius/button. Без токенов дизайн и код расходятся уже через месяц.

Auto layout — обязательное условие. Компоненты без авто-лейаута ломаются при изменении текста. Кнопка с фиксированной шириной, которая не растягивается под длинный лейбл — классическая ошибка, которую мы не допускаем. С variants в одном component set разработчик видит все состояния (hover, disabled, pressed) сразу, а не переспрашивает перед каждым блоком. Интерактивный прототип дешевле правок после разработки — мы кликаем сложные сценарии (multi-step, wizard, onboarding) до того, как писать код.

Что дают дизайн-системы и когда они избыточны

Design system оправдана, когда над проектом работают 2+ дизайнера или есть несколько связанных продуктов (веб + мобильное приложение + админка). Для сайта-визитки мы ограничиваемся UI kit с базовыми компонентами. Если проект на React, строим систему поверх Radix UI (headless) с Tailwind CSS — как в Shadcn/ui. Компоненты полностью контролируемы, нет lock-in на стороннюю библиотеку. Wikipedia называет такой подход стратегически правильным для масштабирования.

Как мы обеспечиваем адаптивность без сюрпризов

По данным аналитики, планшеты дают 8–12% трафика в зависимости от ниши — игнорировать их нельзя. Но мы не делаем «десктоп + мобильный» с тремя брейкпоинтами. Проектируем под систему значений, совместимую с кодом: если фронтенд на Tailwind CSS, то sm:640, md:768, lg:1024, xl:1280, 2xl:1536. Дизайнер работает с теми же числами в Figma. Fluid typography и spacing через clamp() убирают скачки на нестандартных разрешениях — лендинги и публичные сайты получают плавное поведение без дополнительных усилий.

Что входит в работу (deliverables)

Мы отдаём результат, который можно сразу передать в разработку, без додумывания со стороны программиста.

Дополнительно: обучение команды работе с дизайн-системой (1–2 часа), доступ к Figma на весь период разработки, поддержка при внедрении.

Как мы гарантируем качество UI

Каждый макет проверяется инженером на реализуемость: нет ли конфликтов между auto layout, корректно ли работают состояния на мобильных, доступен ли контраст (WCAG AA). Мы используем Clarity для анализа текущего юзабилити, и на основе данных переделываем формы, которые теряют конверсию. Типичный результат — inline-валидация вместо submit-and-scroll-to-top увеличивает завершение регистрации на 15–20%. Skeleton screens вместо спиннеров снижают субъективное время загрузки.

Ориентиры по срокам и стоимости

Сроки зависят от количества уникальных экранов и сложности компонентной базы. Стоимость рассчитывается индивидуально — пишите, и мы оценим проект за 1 рабочий день. Получите консультацию по вашему сценарию — расскажем, на каких страницах UX теряет конверсию и как это исправить.