Ми розробляємо адаптивні макети мобільних додатків для складних пристроїв (foldable). Уявіть: користувач розгортає Samsung Galaxy Z Fold6. Додаток має миттєво перебудуватися з компактного вертикального інтерфейсу в широкий двопанельний layout. Без адаптації додаток працює як «збільшене вікно» — вузька смужка контенту по центру. Це не тільки дратує, але й знижує рейтинг у магазинах додатків. Ми займаємося адаптацією мобільних додатків під складні пристрої протягом кількох років: понад 10 успішних проєктів, включаючи додатки для Samsung Z Fold, Z Flip та Google Pixel Fold. Наша гарантія — безшовний UX при будь-якому формфакторі. Вартість адаптації — від $1,500 для додатку з готовим дизайном, економія бюджету сягає 50% порівняно з редизайном з нуля.
Три формфактори, не один
Foldable-пристрої — це не один сценарій. Їх мінімум три, і кожен потребує окремого layout-рішення:
Складений (folded) режим — пристрій виглядає і працює як звичайний смартфон. Samsung Z Fold6 у складеному режимі: 968×2424px, ~23:9 ratio. Дуже високий і вузький екран. Контент, який нормально виглядає на 20:9, на 23:9 може бути некомфортним для навігації однією рукою.
Розгорнутий (unfolded) режим — великий екран. Z Fold6: 2160×1856px при розгортанні, співвідношення ~7.6:8 — майже квадрат. Це принципово інший формфактор: широкий горизонтальний контент працює добре, вузький вертикальний — ні. Додатки, які просто розтягуються на весь екран без адаптації layout, виглядають як планшетні додатки в letterbox-режимі.
Flip-режим (половина зовнішнього екрана) — характерний для Z Flip. Пристрій складений навпіл горизонтально; верхня половина — екран, нижня — клавіатура або закрита. Медіаплеєр, відеодзвінки, камера — у цьому режимі додаток має адаптувати інтерфейс під «половину екрана». Google називає це Table Top mode.
Плюс — пристрої із зовнішнім екраном (Cover Screen). Z Fold6 має зовнішній екран 6.3". Для нього потрібен окремий сценарій: що відображається, коли пристрій складений і активний cover screen.
Чому складні пристрої потребують окремого дизайну?
Ігнорування фізичних обмежень веде до поганого UX. Hinge та складка — у розгорнутому режимі посередині екрана є фізична складка. Контент не має розташовуватися прямо на ній: важливі інтерактивні зони, текст, зображення — з відступом від центральної осі. Jetpack Compose надає WindowInfoTracker і FoldingFeature для визначення позиції складки та її статусу (FLAT / HALF_OPENED). Посилання: Wikipedia: Foldable smartphone.
Window Size Classes — Material Design 3 вводить три класи: Compact (< 600dp), Medium (600–839dp), Expanded (≥ 840dp). Foldable у розгорнутому режимі — Expanded. Дизайн має явно враховувати переходи між класами: при розгортанні додаток має перебудовувати layout без перезавантаження екрана (continuity).
Як забезпечити continuity при складанні?
Користувач складає або розгортає пристрій прямо під час роботи з додатком. Стан не має втрачатися: якщо він читав статтю — позиція скролу зберігається; якщо заповнював форму — введені дані не скидаються. Це не тільки задача розробки — це задача проєктування: дизайнер має запроєктувати обидва стани як один безперервний.
Багатовіконність — Foldable-пристрої активно використовуються в multi-window режимі: два додатки поруч. Це означає, що додаток має коректно працювати в довільній ширині від 360dp до 900dp+. Фіксовані ширини компонентів — проблема.
Покроковий процес адаптації
- Аналіз поточного дизайну: визначаємо, які компоненти потребують перебудови при зміні WindowSizeClass.
- Створення фреймів для всіх режимів: cover, folded, unfolded, table top.
- Проєктування layout-правил: для кожного компонента вказуємо, як він має поводитися при кожному класі.
- Документування принципів збереження стану: що має залишатися при перемиканні режиму.
- Рев'ю реалізації: перевірка відповідності дизайну.
Як будуємо дизайн
У Figma створюємо фрейми для всіх режимів конкретних пристроїв:
| Режим | Пристрій | Розмір (dp) |
|---|---|---|
| Cover Screen | Z Fold6 | 968×748 (portrait) |
| Folded | Z Fold6 | 968×2424 (portrait) |
| Unfolded | Z Fold6 | 2160×1856 (landscape ~) |
| Table Top | Z Flip6 | 2636×1080 half |
| Unfolded | Z Flip6 | 2636×1080 full |
Для кожного режиму — не повний редизайн, а layout-адаптація поверх існуючих компонентів. Навігація: в compact/folded — Bottom Navigation; в expanded/unfolded — NavigationRail або двопанельний layout. Списки: одна колонка в compact, дві в expanded. Detail view: modal в compact, side panel в expanded. Адаптивний дизайн на основі існуючих компонентів у 5 разів швидше, ніж проєктування з нуля.
Особлива увага — перехідні анімації між режимами. Анімація розгортання має бути природною: елементи перебудовуються з motion, а не мигають. У Figma Smart Animate допомагає продемонструвати концепцію.
Що входить у роботу
- Фрейми для 3+ режимів у Figma (cover, folded, unfolded, table top);
- Документація layout-правил із зазначенням WindowSizeClass і FoldingFeature;
- Анотації для розробника (принципи збереження стану, motion-анімації);
- Рев'ю реалізації на відповідність дизайну (опціонально).
Типова помилка проєктування
Проєктувати тільки для одного режиму і вважати, що другий «сам розбереться». Розтягування мобільного layout до Expanded — це не адаптація, це масштабування з порожніми полями. І зворотне: проєктувати розгорнутий режим так, що в складеному додаток ледве функціонує.Ігнорувати складку як фізичне обмеження. Кнопка «Додати», розташована рівно по центральній осі — це кнопка, по якій незручно натискати через фізичний рельєф. Hinge exclusion zone — реальне обмеження, не теоретичне.
Строки та вартість
Розробка адаптивних макетів для foldable-пристроїв — 2–3 робочі дні для додатку з існуючим mobile-дизайном. Вартість розраховується індивідуально, від $1,500. Зв'яжіться з нами, щоб обговорити ваш проєкт. Отримайте консультацію інженера з багаторічним досвідом у мобільній розробці.
Порівняння підходів
| Підхід | Час | Адаптація | Вартість |
|---|---|---|---|
| Статичний макет | 1–2 дні | Немає | Низька |
| Адаптивний макет з урахуванням foldable | 2–3 дні | Повна | Середня |
| Редизайн з нуля | 10+ днів | Повна | Висока |
