iPhone Duo вышел: как ревьюить мобильные макеты под складной экран
23 октября в продажу в 70 с лишним странах вышел iPhone Duo — первый складной смартфон Apple: у него внешний экран и большой внутренний, который открывается как книга. Как сообщает Apple Newsroom, приложения на стандартных компонентах SwiftUI и UIKit подстраиваются под оба экрана сами, а для собственных раскладок в iOS 27.1 SDK добавили API шарнира (реакция на угол сгиба), API раскладок с зарезервированными областями и вывод контента на оба экрана сразу. В тот же день Figma добавила пресеты фреймов для iPhone Duo и iPhone 18 везде, где выбирается мобильный фрейм: при создании фрейма и код-слоя, в настройках прототипа и в превью Figma Make.
Первые дни продаж показали, что автоматикой адаптация не ограничивается. 24 октября TechCrunch разобрал приложения, которые к старту по-настоящему используют сгиб (Netflix, Flighty, Wakeout и другие), и отметил, что многие популярные iOS-приложения ко дню запуска оптимизированы не были: чёрные поля по краям, съехавшие элементы управления, интерфейс, который приходится увеличивать вручную.
Для дизайн-команд вывод прямой: в макетах появился новый класс устройства с несколькими состояниями, и согласовывать их нужно до разработки, а не после жалоб пользователей. Если продукт делает внешний подрядчик, поддержку складного экрана стоит явно вписать в ТЗ и критерии приёмки. Команда, которая занимается разработкой мобильных приложений, обычно сама предлагает, какие экраны перерисовать, а какие оставить на адаптивной вёрстке.
Что изменилось для мобильных макетов
Два экрана вместо одного. На внешнем экране приложение работает в компактной ширине, на внутреннем — в регулярной. Apple подчёркивает, что пропорции экранов совпадают, чтобы переход между ними был бесшовным. Но на большом экране интерфейс должен не растягиваться, а перестраиваться: боковая навигация, несколько колонок, панель деталей.
Положение устройства. Телефон можно держать раскрытым как книгу, сложенным или поставить «домиком». Примеры TechCrunch как раз об этом: Wakeout делит экран тренировки по линии сгиба, когда телефон раскрыт книгой, а Flighty показывает отдельный режим «в пути» для откидного столика в самолёте.
Инструменты. В Xcode 27.1 появился Device Hub для симуляции устройства, а в Figma — готовые фреймы. У дизайнера и разработчика теперь общая точка отсчёта по размерам, и спорить о том, какой фрейм брать, больше не нужно.
Что проверять на ревью макетов
Каждый ключевой экран — минимум в двух состояниях. Внешний экран и раскрытый внутренний. Если сценарий предполагает работу «книжкой» или «домиком», это отдельные фреймы, и они тоже идут на согласование.
Переход между экранами. Что происходит с прокруткой, введённым текстом и открытым модальным окном, когда пользователь раскрывает телефон? Это вопросы к прототипу, а не к статичному макету: их удобнее согласовывать на видео или в кликабельном прототипе.
Зона сгиба. Кнопки, поля ввода и важный текст не должны попадать на линию шарнира. Отметьте её на фрейме отдельным слоем, чтобы рецензенты видели её в каждом комментарии.
Неадаптированные экраны. Если часть приложения пока не перестроена, договоритесь, как она выглядит на внутреннем экране, и зафиксируйте это как осознанное решение, а не как баг, который всплывёт на приёмке.
Что делать сейчас
Переведите шаблоны мобильных фреймов в текущих проектах на пресеты iPhone Duo и составьте короткий список экранов, которые нужно перерисовать в первую очередь: главная, каталог или лента, карточка, оформление заказа. Правки по каждому состоянию собирайте комментариями прямо на фреймах, с пометкой, о каком экране и положении устройства речь. Как не утонуть в таких правках при нескольких согласующих, мы разбирали в материале о согласовании дизайна с несколькими стейкхолдерами, а про выбор между макетом и живой сборкой — в статье «Figma или готовый сайт: где собирать фидбек».
