iPhone Duo поступил в продажу: что Apple требует от интерфейсов под складной экран
23 октября в продажу вышел iPhone Duo — первый складной iPhone с двумя экранами и шарниром посередине. Apple одновременно открыла приём приложений под новое устройство. Для продуктовых дизайнеров это первая за много лет ситуация, когда привычная вёрстка под «телефон в вертикали» перестаёт быть единственным сценарием. Разбираем, что именно Apple записала в гайдлайны.
Apple представила iPhone Duo 9 сентября, предзаказы открылись 16 октября, а продажи стартовали 23 октября — это зафиксировано в пресс-релизе Apple и в обзоре Macworld. В октябрьской рассылке для разработчиков Apple Developer подтвердила: приём приложений под iPhone Duo открыт, а дизайн-киты для Figma и Sketch уже лежат в Apple Design Resources.
Главное, что следует из документации: устройство не требует отдельного приложения, но жёстко наказывает вёрстку с фиксированной шириной. Если интерфейс собран из системных компонентов и умеет менять размер, он адаптируется почти сам. Если в нём «зашиты» пиксели под конкретный экран — пользователь складного телефона увидит обрезанные кнопки и пустые поля.
Поэтому для бизнеса с собственным приложением вопрос сейчас не «нужна ли версия под складной iPhone», а «выдержит ли текущая вёрстка новые размеры». Проверку стоит закладывать в ближайший релиз — либо силами своей команды, либо через подрядчика, который берёт на себя адаптацию мобильного приложения под складной iPhone вместе с дизайном и тестированием на устройстве.
Что известно об устройстве?
У iPhone Duo два экрана: внешний 5,4 дюйма и внутренний 7,6 дюйма, оба OLED с частотой 120 Гц. Корпус складывается книжкой, шарнир расположен по центру. Устройство работает на iOS 27.1, цена в США начинается от 1 999 долларов. У каждого экрана своя фронтальная камера: внешняя всегда видна в углу, внутренняя спрятана под дисплеем и проявляется только при включении.
Какие позы нужно поддержать?
В разделе Designing for iPhone Duo Human Interface Guidelines Apple описывает три типичных положения: полураскрытый «книжкой», лежащий на столе и стоящий на ребре. При этом компания прямо говорит, что рисовать отдельный макет под каждую позу не нужно. Достаточно двух базовых раскладок:
- compact width — для внешнего экрана;
- regular width — для внутреннего экрана.
Дальше интерфейс должен растягиваться по доступному месту, а не перестраиваться заново. Apple формулирует это как «не изобретайте приложение заново при изменении размера». Для информационной иерархии действует правило Mail: в сложенном виде показывается либо список, либо открытое письмо, в раскрытом — оба рядом. Тот же принцип давно применяют на iPad, и он хорошо ложится на привычную систему сетки и отступов.
Почему навигация уходит на бок?
Внешний экран iPhone Duo шире и ниже, чем у обычного iPhone. Чтобы сохранить вертикальное пространство под контент, система переносит тулбары и таб-бары на боковую грань. В альбомной ориентации внутреннего экрана контролы тоже остаются сбоку — так при переходе между дисплеями они не «прыгают».
Системные компоненты получают такую раскладку автоматически. А вот самописный таб-бар, прибитый к низу экрана, придётся переделывать. Это хороший повод пересмотреть навигацию целиком — мы разбирали варианты в материале о таб-баре, бургер-меню и жестах.
Как работать с зоной сгиба?
Apple вводит понятие зарезервированных областей. Их три: внешняя камера (всегда), внутренняя камера (только когда она активна) и зона сгиба — когда устройство раскрыто не полностью и центр экрана делит интерфейс на части. Алерты, контекстные меню и шторки система сдвигает сама, сплит-вью подстраивает ширину колонок. Для собственных компонентов есть API ReservedRegion.
Две рекомендации из гайдлайнов стоит взять в чек-лист дизайн-ревью:
- в сетках с карточками выбирайте чётное число колонок — тогда контент ровно делится сгибом;
- не устраивайте резких перестановок при сгибании: сдвигайте только то, что иначе станет недоступным.
Что проверить в своём приложении?
- Найдите экраны с фиксированной шириной и элементы, привязанные к конкретному дисплею.
- Проверьте, что вёрстка опирается на size classes, layout margins и safe area.
- Замените кастомные нижние панели на системные или подготовьте их боковой вариант.
- Убедитесь, что состояние экрана сохраняется при складывании и раскрытии.
- Прогоните ключевые сценарии в превью Xcode во всех позах и проверьте, не попадают ли кнопки в зону сгиба.
Отдельно стоит пересмотреть доступность: при перестройке раскладки легко потерять порядок фокуса и размеры целей касания. Требования к ним мы собирали в разборе WCAG 2.2: контраст и фокус, а общие принципы адаптивных интерфейсов хорошо описаны у Nielsen Norman Group.
Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.
