Разработка адаптивных макетов под складные устройства (Foldable)

Мы разрабатываем адаптивные макеты мобильных приложений для складных устройств (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+. Фиксированные ширины компонентов — проблема.

Пошаговый процесс адаптации

1. Анализ текущего дизайна: определяем, какие компоненты требуют перестройки при смене WindowSizeClass.
2. Создание фреймов для всех режимов: cover, folded, unfolded, table top.
3. Проектирование layout-правил: для каждого компонента указываем, как он должен вести себя при каждом классе.
4. Документирование принципов сохранения состояния: что должно оставаться при переключении режима.
5. Ревью реализации: проверка соответствия дизайну.

Как строим дизайн

В Figma создаём фреймы для всех режимов конкретных устройств:

Для каждого режима — не полный редизайн, а 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-анимации);
• Ревью реализации на соответствие дизайну (опционально).

Игнорировать складку как физическое ограничение. Кнопка «Добавить», расположенная ровно по центральной оси — это кнопка, по которой неудобно нажимать из-за физического рельефа. Hinge exclusion zone — реальное ограничение, не теоретическое.

Сроки и стоимость

Разработка адаптивных макетов для foldable-устройств — 2–3 рабочих дня для приложения с существующим mobile-дизайном. Стоимость рассчитывается индивидуально, от $1,500. Свяжитесь с нами, чтобы обсудить ваш проект. Получите консультацию инженера с многолетним опытом в мобильной разработке.

Сравнение подходов