Адаптивний дизайн макетів для складних пристроїв (Foldable)
Складні пристрої—це не вузька ніша, яку можна ігнорувати. Samsung Galaxy Z Fold та Z Flip серійно продаються мільйонами, і в 2025 році підтримка foldables прямо вказана в Google Play quality guidelines як цільовий критерій для рейтингу в Play Store. Додаток, який не адаптований, працює в режимі сумісності—зменшене вікно в центрі екрана. Це помітно і дратує.
Три форм-фактори, а не один
Складні пристрої—це не один сценарій. Їх мінімум три, і кожен вимагає окремого layout-рішення:
Складений (folded) режим—пристрій виглядає й працює як звичайний смартфон. Samsung Z Fold6 у складеному режимі: 968×2424px, ~23:9 співвідношення. Дуже високий і вузький екран. Контент, який нормально виглядає на 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.
Ключові технічні аспекти для дизайну
Шарнір і складка. У розгорнутому режимі посередині екрана—фізична складка. Контент не повинен розташовуватися прямо на ній: важливі інтерактивні зони, текст, зображення—з відступом від центральної осі. Jetpack Compose надає WindowInfoTracker і FoldingFeature для визначення позиції складки та її статусу (FLAT / HALF_OPENED).
Window Size Classes. Material Design 3 вводить три класи: Compact (< 600dp), Medium (600–839dp), Expanded (≥ 840dp). Foldable у розгорнутому режимі—Expanded. Дизайн повинен явно враховувати переходи між класами: при розгортанні додаток повинен перебудувати layout без перезавантаження екрана (continuity).
Continuity при переході. Користувач складає або розгортає пристрій прямо під час роботи з додатком. Стан не повинен теряється: якщо він читав статтю—позиція скролу зберігається; якщо заповнював форму—введені дані не скидаються. Це не просто задача розробки—це задача проектування: дизайнер повинен спроектувати обидва стану як один безперервний.
Багатовіконність. Складні пристрої активно використовуються в multi-window режимі: два додатки поряд. Це означає, що додаток повинен коректно працювати при довільній ширині від 360dp до 900dp+. Фіксовані ширини компонентів—проблема.
Як будуємо дизайн
У 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.
Особлива увага—переходові анімації між режимами. Анімація розгортання повинна бути природною: елементи перебудовуються з motion, а не миготять. У Figma Smart Animate допомагає продемонструвати концепцію.
Типові помилки проектування
Проектувати тільки для одного режиму і вважати, що другий «сам розберется». Розтягування мобільного layout до Expanded—це не адаптація, це масштабування з порожніми полями. І навпаки: проектувати розгорнутий режим так, що у складеному додаток ледве функціонує.
Ігнорувати складку як фізичне обмеження. Кнопка «Додати», розташована рівно по центральній осі—це кнопка, по якій незручно натискати через фізичний рельєф. Hinge exclusion zone—реальне обмеження, не теоретичне.
Терміни
Розробка адаптивних макетів для складних пристроїв—2–3 робочих дні для додатка з існуючим mobile-дизайном. Включає: фрейми для 3+ режимів, документацію layout-правил, анотації для розробника щодо використання WindowSizeClass і FoldingFeature.
Вартість розраховується індивідуально.