Адаптация дизайна под различные разрешения экранов смартфонов
Мобильный дизайн, сделанный под один размер экрана — iPhone 15 Pro 393×852pt — это половина работы. В реальности приложение запускается на iPhone SE с экраном 375×667pt, на Android-бюджетниках с 360×640dp, на флагманах с 430pt по ширине. Макет, который выглядит идеально на дизайнерском фрейме, обрезает кнопки на маленьких экранах и оставляет пустые поля на больших.
Что конкретно адаптируем
Ключевые точки разлома — не размеры, а пропорции. Экран 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, и это не рекомендация, а практический минимум для большинства шрифтов.
Как оформляем адаптацию в 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, сложные формы, изображения с фиксированной высотой.
Сроки
Адаптация существующего дизайна под 3–4 контрольных размера (ключевые экраны, не полный проект) — 1–3 рабочих дня. Зависит от числа экранов и используемых Auto Layout конструкций.