Адаптація дизайну під різні розрішення екранів смартфонів
Мобільний дизайн, зроблений під один розмір екрана — 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 конструкцій.