Мобильный дизайн, сделанный под один размер экрана — iPhone 15 Pro 393×852pt — это половина работы. В реальности приложение запускается на iPhone SE с экраном 375×667pt, на Android-бюджетниках с 360×640dp, на флагманах с 430pt по ширине. Макет, который выглядит идеально на дизайнерском фрейме, обрезает кнопки на маленьких экранах и оставляет пустые поля на больших. Мы сталкиваемся с этим каждый день: клиент присылает Figma-файл с одним размером, а на тестах выясняется, что кнопка «Купить» уходит под Tab Bar. Это ведёт к отклонениям на App Store Review и потере конверсии.
Как выполняется адаптация дизайна под разные экраны?
Адаптация дизайна мобильного приложения начинается с аудита текущих макетов. Мы выявляем проблемные места: переполнение контентом, неучтённые Safe Area, нечитаемую типографику. Затем создаём контрольные фреймы для 3–4 ключевых размеров и корректируем отступы, масштабы изображений, количество колонок. Результат — Figma-файл с настроенной Auto Layout и гайд для разработчиков.
Что конкретно адаптируем
Ключевые точки разлома — не размеры, а пропорции. Экран iPhone SE с соотношением сторон 16:9 против iPhone 15 Pro Max с 19.5:9 — разница существенная. Bottom-anchored элементы (Tab Bar, floating кнопки, sticky footer в формах) должны корректно работать на обоих. Safe Area — отдельная история. На iPhone с Dynamic Island — 59pt сверху. На iPhone без чёлки (SE 3rd gen) — 20pt. На Android — notch бывает разным или отсутствует вовсе. Контент, который «прилипает» к статусбару без учёта Safe Area, гарантированно получает отклонение на App Store Review.
Типографика на маленьких экранах: текст 16sp читается нормально на 6-дюймовом экране, но на 4.7-дюймовом экране при плотности 326 ppi — уже на грани. Минимальный размер для body text на мобильных — 14pt/sp, и это не рекомендация, а практический минимум для большинства шрифтов. Мы используем динамическую типографику: на маленьких экранах заголовки уменьшаем на 2pt, на больших — увеличиваем.
Как адаптировать для iOS и Android одновременно?
Подходы разные. iOS использует Auto Layout с соотношениями (Aspect Ratio, Multiplier), Android — ConstraintLayout с percent или Guideline. Мы проектируем в Figma с помощью Auto Layout и Constraints, затем для каждой платформы готовим отдельные гайды. На практике Auto Layout в Figma + SwiftUI Layout лучше комбинации Frame-ов с жёсткими константами — разница в скорости адаптации до 50%. Для Android используем Jetpack Compose с Modifier.fillMaxWidth() и Modifier.weight(), но проверять нужно всё равно на реальных устройствах.
Как оформляем адаптацию в Figma
Создаём фреймы для контрольных размеров:
| Устройство | Размер (pt/dp) | Зачем |
|---|---|---|
| iPhone SE 3rd gen | 375×667 | Минимум iOS |
| iPhone 15 / 14 | 390×844 | Основной iOS |
| iPhone 15 Pro Max | 430×932 | Максимум iOS |
| Android compact | 360×800 | Бюджет/средний сегмент |
| Android regular | 390×844 | Флагман Android |
Каждый ключевой экран проверяем на крайних размерах. Не все 50 экранов — только те, где есть переполнение контентом, Bottom Sheet, сложные формы, изображения с фиксированной высотой. Дополнительно готовим макет для самого широкого и самого узкого экрана, чтобы разработчик видел границы.
Сравнение подходов: Auto Layout vs адаптивные макеты
| Критерий | Только Auto Layout | Адаптивные макеты с breakpoint |
|---|---|---|
| Масштабирование изображений | Растягиваются/сжимаются | Разные изображения под каждый размер |
| Количество колонок | Фиксированное | Меняется (1, 2, 3 колонки) |
| Типографика | Фиксированный размер | Динамическая (меньше/больше) |
| Подгон под пропорции | Нет | Да |
| Трудоёмкость | Низкая | Выше, но результат качественнее |
Почему недостаточно Auto Layout?
Auto Layout не масштабирует изображения, не меняет количество колонок в сетке. На iPhone SE карточки товаров в 2 колонки превращаются в 1 колонку — это нужно закладывать в дизайн. Мы используем adaptive layout с breakpoint-ами: на ширине до 375pt — одна колонка, до 430pt — две, выше — три. Это требует отдельной проработки каждого экрана, но зато пользователь не видит «обрубков».
Что входит в работу
- Аудит текущих макетов на предмет проблем адаптации (Safe Area, переполнение, типографика).
- Создание контрольных фреймов для 3–4 размеров (iOS + Android).
- Корректировка отступов, выравнивания, масштабов изображений.
- Подготовка гайда для разработчика с констрейнтами и примечаниями.
- Проверка на реальных устройствах (есть парк из 15+ девайсов).
- Итоговый Figma-файл с настроенной Auto Layout и переменными.
- Консультация команды разработки по вёрстке.
Мы работаем с дизайном на всех этапах: от проектирования до передачи в разработку. 5+ лет опыта, более 20 реализованных проектов для iOS и Android. Гарантируем, что после нашей адаптации не будет отклонений по разделу 4.2 App Store Review и Google Play Console.
Процесс работы
- Аналитика: изучаем текущие макеты и выявляем проблемные места.
- Проектирование: создаём контрольные фреймы и адаптивные варианты.
- Реализация: корректируем элементы и готовим гайд.
- Тест: проверяем на реальных устройствах и симуляторах.
- Деплой: передаём готовый Figma-файл и гайд разработчикам.
Сроки ориентировочно
Адаптация существующего дизайна под 3–4 контрольных размера (ключевые экраны, не полный проект) — от 1 до 3 рабочих дней. Полная адаптация всего проекта (до 50 экранов) — от 5 до 10 рабочих дней. Стоимость рассчитывается индивидуально, зависит от числа экранов и сложности. Оценим ваш проект бесплатно — просто свяжитесь с нами.
Получите консультацию по адаптации дизайна вашего мобильного приложения. Мы поможем избежать типичных ошибок: неправильный расчёт Safe Area, игнорирование пропорций экрана, нечитаемая типографика. Закажите адаптацию дизайна — ваш продукт будет идеально выглядеть на любом экране.