Разработка адаптивных макетов под складные устройства (Foldable)
Складные устройства — это не нишевый сегмент, который можно проигнорировать. Samsung Galaxy Z Fold и Z Flip серии продаются миллионами, и в 2025 году поддержка foldables прямо указана в Google Play quality guidelines как целевой критерий для рейтинга в Play Store. Приложение, которое не адаптировано, работает в compatibility mode — уменьшенном окне в центре экрана. Это заметно и раздражает.
Три формфактора, не один
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.
Ключевые технические аспекты для дизайна
Hinge и складка. В развёрнутом режиме посередине экрана — физическая складка. Контент не должен располагаться прямо на ней: важные интерактивные зоны, текст, изображения — с отступом от центральной оси. 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 при переходе. Пользователь складывает или разворачивает устройство прямо во время работы с приложением. Состояние не должно теряться: если он читал статью — позиция скролла сохраняется; если заполнял форму — введённые данные не сбрасываются. Это не только задача разработки — это задача проектирования: дизайнер должен запроектировать оба состояния как одно непрерывное.
Многооконность. Foldable-устройства активно используются в 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 — реальное ограничение, не теоретическое.
Сроки
Разработка адаптивных макетов для foldable-устройств — 2–3 рабочих дня для приложения с существующим mobile-дизайном. Включает: фреймы для 3+ режимов, документацию layout-правил, аннотации для разработчика по использованию WindowSizeClass и FoldingFeature.
Стоимость рассчитывается индивидуально.