Підготовка дизайну мобільного додатку до будь-яких екранів
Мобільний дизайн, зроблений під один розмір екрану — iPhone 15 Pro 393×852pt — це половина роботи. У реальності додаток запускається на iPhone SE з екраном 375×667pt, на Android-бюджетниках з 360×640dp, на флагманах з 430pt по ширині. Макет, який виглядає ідеально на дизайнерському фреймі, обрізає кнопки на маленьких екранах і залишає пусті поля на великих. Ми стикаємося з цим щодня: клієнт надсилає Figma-файл з одним розміром, а на тестах з'ясовується, що кнопка «Купити» ховається під Tab Bar. Це веде до відхилень на App Store Review та втрати конверсії.
Роздільні здатності екранів смартфонів варіюються від 320×480 до 1440×3040 пікселів, тому адаптація дизайну мобільного додатку є критично важливою.
Процес адаптації дизайну під різні екрани
Адаптація дизайну мобільного додатку починається з аудиту поточних макетів. Ми виявляємо проблемні місця: переповнення контентом, невраховані 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 — окрема історія. Відповідно до Apple Human Interface Guidelines, 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 в 2 рази швидше за використання 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 колонки) |
| Типографіка | Фіксований розмір | Динамічна (менше/більше) |
| Підгонка під пропорції | Ні | Так |
| Трудомісткість | Низька | Вища, але результат в 2–3 рази якісніший |
Використання адаптивних макетів з breakpoint-ами забезпечує кращу якість в 2–3 рази порівняно з використанням лише Auto Layout.
Обмеження Auto Layout
Auto Layout не масштабує зображення, не змінює кількість колонок у сітці. На iPhone SE картки товарів у 2 колонки перетворюються на 1 колонку — це потрібно закладати в дизайн. Ми використовуємо adaptive layout з breakpoint-ами: на ширині до 375pt — одна колонка, до 430pt — дві, вище — три. Це вимагає окремого опрацювання кожного екрану, але зате користувач не бачить «обрубків».
Чому використання тільки Auto Layout не вирішує проблему?
Auto Layout не враховує пропорції екрану та не адаптує контент під різні співвідношення сторін. Наприклад, на вузьких екранах контент може обрізатися, а на широких — залишати порожні поля. Тому потрібні окремі макети під різні пропорції.
Як врахувати Safe Area на різних пристроях?
Safe Area різна на різних пристроях. На iPhone з Dynamic Island вона становить 59pt зверху, на iPhone SE — 20pt, на Android — notch буває різним або відсутній. Важливо не розміщувати критичні елементи всередині Safe Area без необхідності.
Типові помилки адаптації та як їх уникнути
Найпоширеніші типові помилки адаптації: ігнорування пропорцій екрану, неправильний розрахунок Safe Area, нечитабельна типографіка, фіксовані відступи. Їх можна уникнути, використовуючи адаптивні макети, динамічну типографіку та перевірку на реальних пристроях.
Склад робіт (deliverables)
- Аудит поточних макетів на предмет проблем адаптації (Safe Area, переповнення, типографіка).
- Створення контрольних фреймів для 3–4 розмірів (iOS + Android).
- Коригування відступів, вирівнювання, масштабів зображень.
- Підготовка гайду для розробника з констрейнтами та примітками.
- Перевірка на реальних пристроях (є парк з 15+ девайсів).
- Підсумковий Figma-файл з налаштованим Auto Layout та змінними.
- Консультація команди розробки з верстки.
Ми пропонуємо адаптацію під ключ усього проекту. Наприклад, адаптація 20 ключових екранів коштує від $800, а повний проект — до $2000. При замовленні всього проекту ви економите до 15% у порівнянні з поекранною оплатою. Послуги адаптації дизайну включають всі перелічені етапи.
Ми працюємо з дизайном на всіх етапах: від проектування до передачі в розробку. 5+ років досвіду, понад 20 реалізованих проектів для iOS та Android. Гарантуємо, що після нашої адаптації не буде відхилень за розділом 4.2 App Store Review та Google Play Console.
Процес роботи
- Аналітика: вивчаємо поточні макети та виявляємо проблемні місця.
- Проектування: створюємо контрольні фрейми та адаптивні варіанти.
- Реалізація: коригуємо елементи та готуємо гайд.
- Тест: перевіряємо на реальних пристроях та симуляторах.
- Деплой: передаємо готовий Figma-файл та гайд розробникам.
Орієнтовні терміни
Адаптація існуючого дизайну під 3–4 контрольні розміри (ключові екрани, не повний проект) — від 1 до 3 робочих днів. Повна адаптація всього проекту (до 50 екранів) — від 5 до 10 робочих днів. Вартість розраховується індивідуально, залежить від кількості екранів та складності. Оцінимо ваш проект безкоштовно — просто зв'яжіться з нами.
Отримайте консультацію з адаптації дизайну вашого мобільного додатку. Ми допоможемо уникнути типових помилок адаптації: неправильний розрахунок Safe Area, ігнорування пропорцій екрану, нечитабельна типографіка. Адаптивна верстка для iOS та Android вимагає різних підходів, але наша експертиза охоплює обидві платформи. Замовте адаптацію дизайну — ваш продукт ідеально виглядатиме на будь-якому екрані. Мобільний дизайн під усі екрани — наша спеціалізація.