Пользователи хотят использовать свои любимые приложения на всех своих устройствах и в любом контексте. В iOS элементы интерфейса и макеты можно настроить для автоматического изменения формы и размера на разных устройствах: во время многозадачности на iPad, в режиме разделенного просмотра, при повороте экрана и т. д. Очень важно, чтобы вы разработали адаптируемый интерфейс, обеспечивающий отличный опыт работы в любой среде.

Устройства iOS имеют различные размеры экрана и могут использоваться как в книжной, так и в альбомной ориентации.

Чтобы узнать, как разрешение экрана влияет на обложку вашего приложения, см. Размер и разрешение изображения.

Авто разметка - это инструмент для разработки адаптивных интерфейсов. Используя Авто разметку, вы можете определять правила (известные как ограничения), которые управляют содержимым вашего приложения. Например, вы можете ограничить кнопку, чтобы она всегда находилась в центре по горизонтали и располагалась на восемь точек под изображением, независимо от доступного места на экране.

Авто разметка перенастраивает макеты в соответствии с указанными ограничениями при обнаружении определенных изменений среды (известных как признаки). Вы можете настроить свое приложение для быстрой адаптации к широкому диапазону характеристик, включая:

• Различные размеры экрана, разрешения и цветовые гаммы устройства (sRGB / P3)
  
  
• Различные ориентации устройства (портрет / пейзаж)
  
  
• Разделенный вид
  
  
• Многозадачный режим на iPad
  
  
• Динамический тип изменения размера текста
  
  
• Функций интернационализации, которые включаются на основе локали (направление макета слева направо / справа налево, форматирование даты / времени / числа, изменение шрифта, длина текста)
  
  
• Доступность функции системы (3D Touch)
  
  
• Для руководства разработчика см. Auto Layout Guide и UITraitCollection.
  

Руководство по разметке определяет прямоугольные области, которые на экране не отображаются , но помогают при позиционировании, выравнивании и выставлении интервала содержимого. Система включает предопределенные руководства по разметке, которые позволяют легко применять стандартные поля вокруг содержимого и ограничивать ширину текста оптимальной возможности для чтения. Также вы можете определить собственную разметку.

Придерживайтесь безопасной области и полей краев разметки, определенных UIKit. Данные руководства по разметке обеспечивают соответствующее размещение компонентов в зависимости от устройства и контекста. Безопасная область не позволяет контенту перекрывать строку состояния, панель навигации, панель инструментов и панель вкладок. Стандартные системные экраны автоматически адаптируются к разметке безопасной зоны.

Руководство разработчика см. в разделах UILayoutGuide, layoutMarginsGuide, readableContentGuide и safeAreaLayoutGuide.

Классы размера - это характеристики, которые автоматически присваиваются областям содержимого в зависимости от их размера. Система определяет два класса размеров: обычный (означает расширенное пространство) и компактный (ограниченное пространство), которые описывают высоту и ширину экрана.

Экран может иметь любую комбинацию классов размеров:

• Обычная ширина, обычная высота
  
  
• Компактная ширина, компактная высота
  
  
• Обычная ширина, компактная высота
  
  
• Компактная ширина, обычная высота
  

Как и в случае с другими изменениями, iOS регулярно вносит изменения в макет на основе классов размера области содержимого. Например, когда класс вертикальных размеров изменяется с компактной высоты на обычную, возможно, из-за того, что пользователь повернул устройство из альбомной ориентации в портретную, панели вкладок могут стать выше.

Классы размера на различных устройствах

Различные комбинации классов размеров применяются к полноэкранному режиму на разных устройствах в зависимости от размера экрана.

Классы многозадачных размеров

На iPad классы размеров применяются, когда ваше приложение работает в многозадачной конфигурации.

Убедитесь, что основной контент читаем в размере по умолчанию. Люди не должны прокручивать по горизонтали, чтобы прочитать важный текст, или увеличивать масштаб, чтобы увидеть основные изображения, если пользователи не захотят изменить размер.

Сохраняйте общий внешний вид во всем приложении. Элементы с похожими функциями должны выглядеть одинаково.

Используйте визуальную наполненность и баланс, чтобы передать важность. Большие предметы привлекают внимание и кажутся более важными, чем мелкие. На крупные предмет нажимать легче; это особенно важно, , когда приложение используется в отвлекающей среде, например на кухне или в тренажерном зале. Размещайте главенствующие элементы в верхней половине экрана и в контексте чтения - слева направо, рядом с левой стороной экрана.

Используйте выравнивание, чтобы упростить просмотр информации и донести иерархию. Выравнивание делает приложение аккуратным и организованным, помогает пользователям сосредоточиться при прокрутке и облегчает поиск информации. Отступы и выравнивание могут указывать, каким образом связаны группы контента.

По возможности поддерживайте как портретную, так и альбомную ориентацию. Люди предпочитают использовать приложения в разных ориентациях.

Будьте готовы к изменениям размера текста. Люди ожидают, что большинство приложений будут реагировать, когда они выбирают другой размер текста в настройках. Чтобы учесть некоторые изменения размера текста, вам может потребоваться адаптация разметки. Для получения дополнительной информации об использовании текста в вашем приложении см. Типография.

Обеспечьте достаточное количество сенсорных целей для интерактивных элементов. Старайтесь поддерживать минимальную площадь касания в 44pt x 44pt для всех элементов управления.

Сделайте предварительный просмотр вашего приложения на нескольких устройствах. Вы можете использовать Simulator (входит в Xcode) для предварительного просмотра вашего приложения и проверки на связанность разметки. Если ваше приложение поддерживает альбомный режим, убедитесь, что ваши макеты хорошо выглядят независимо от того, было ли устройство повернуто влево или вправо. Перевернутый портретный режим не поддерживается на полноэкранных iPhone. Некоторые функции, а именно - широкие цветные изображения, лучше всего просматривать на реальных устройствах.

Применяйте разметку краёв для чтения при отображении текста на больших устройствах. Эти поля сохраняют текстовые строки достаточно короткими, чтобы обеспечить удобство чтения.

Сосредоточьтесь на текущем контенте во время изменения контекста. Контент должен быть в приоритете. Изменение фокуса и деформации среды может дезориентировать и разочаровывать, а пользователи могут почувствовать, что они потеряли контроль над приложением.

Избегайте необоснованных изменений разметки. Если кто-то поворачивает устройство, не нужно менять всю разметку. Например, если ваше приложение отображает сетку изображений в портретном режиме, оно не должно представлять те же изображения, что и список, в альбомном режиме. Вместо этого оно должно настроить размеры сетки. Старайтесь поддерживать одинаковую работу во всех контекстах.

Если необходимо, чтобы ваше приложение работало в одной ориентации, поддерживайте оба варианта. Приложение, которое работает только в альбомном режиме, должно использоваться независимо от того, поворачивается ли устройство влево или вправо. Приложение, которое работает только в книжном режиме, должно поворачивать свое содержимое на 180 градусов, когда пользователь поворачивает его под аналогичным углом - за исключением iPhone X, который не поддерживает перевернутый книжный режим. Если ваше приложение не поворачивается автоматически, когда кто-то держит устройство в неправильной ориентации, то пользователь интуитивно догадается, каким образом его повернуть.

Настройте реакцию своего приложения на поворот в соответствии с контекстом. Игра, в которой персонаж перемещается посредством вращения устройства, не должна менять ориентацию во время игры. Однако приложение может отображать меню и вводную часть на основе текущей ориентации.

Убедитесь, что ваше приложение работает на iPad, а не только на iPhone. Пользователи ценят возможность запуска вашего приложения на любом типе устройства iOS. Даже если вы хотите, чтобы большинство людей использовали ваше приложение на iPhone, элементы интерфейса должны оставаться видимыми и функциональными на iPad. Если для определенных функций вашего приложения требуется специальное оборудование для iPhone, например, 3D Touch, подумайте о том, чтобы скрыть или отключить эти функции на iPad и позволить людям использовать другие функции вашего приложения.

Помните о различиях в соотношении сторон при повторном использовании иллюстраций. Разные размеры экрана могут иметь разные пропорции, из-за чего иллюстрации могут отображаться обрезанными, размещенными по вертикали или по ширине. Убедитесь, что важный визуальный контент останется видимым на всех размерах дисплея.

Расширьте визуальные элементы, чтобы заполнить экран. Убедитесь, что фон распространяется до краев экрана, и что макеты с вертикальной прокруткой, такие же, как таблицы и коллекции, продолжаются до низа экрана.

Избегайте явного размещения интерактивных элементов управления в самом низу экрана и в углах. Люди используют жесты смахивания в нижней части экрана для доступа к таким функциям, как домашний экран и переключатель приложений. Эти жесты могут отменить пользовательские, которые вы реализуете в этой области. Дальние углы экрана могут быть для пользователей труднодоступными.

Предотвратите обрезание важного контента. В целом, контент должен быть центрирован и симметрично вставлен, чтобы выглядеть хорошо в любой ориентации. Он не должен быть обрезан закругленными углами, скрыт корпусом датчика и индикатором доступа к главному экрану. Для достижения наилучших результатов используйте стандартные системные элементы интерфейса и автоматическую разметку для создания интерфейса. Придерживайтесь руководств по разметке и безопасной области, определенной UIKit. Когда устройство находится в горизонтальной ориентации, для некоторых приложений, таких как игры, целесообразно разместить элементы управления (расширяющиеся ниже безопасной области) в нижней части экрана , чтобы обеспечить больше места для содержимого.При размещении элементов управления в верхней и нижней частях экрана используйте соответствующие вставки и оставляйте достаточно места вокруг индикатора «Домой», чтобы пользователи случайно на него не нажали при попытке взаимодействия с элементом управления. Поскольку индикатор «Домой» остается в центре экрана, его расположение относительно интерфейса вашего приложения может измениться.

Вставляйте полноразмерные кнопки. Кнопка, которая продолжается до краев экрана, может не выглядеть как кнопка. Соблюдайте стандартные края разметки согласно UIKit, когда используете полноразмерные кнопки. Полноразмерная кнопка, появляющаяся в нижней части экрана, выглядит лучше всего, когда имеет закругленные углы и выровнена по нижней части безопасной области, что также гарантирует отсутствие конфликта с индикатором «Домой».

Не скрывайте и не привлекайте особое внимание к ключевым функциям дисплея. Не пытайтесь скрыть закругленные углы устройства, корпус датчика или индикатор для доступа к главному экрану, поместив черные полосы вверху и внизу экрана. Не используйте визуальные символы, такие как скобки, рамки, формы или текст инструкции, чтобы привлечь особое внимание к этим областям.

Помните о высоте строки состояния. На полноэкранных iPhone строка состояния выше, чем на старых iPhone. Если ваше приложение предполагает фиксированную высоту строки состояния для позиционирования контента ниже строки состояния, вы должны обновить свое приложение, чтобы постоянно позиционировать контент на основе устройства пользователя. Обратите внимание, что строка состояния на полноэкранных iPhone не меняет высоту, когда активны фоновые задачи, такие как запись голоса и отслеживание местоположения.

Если ваше приложение в настоящее время скрывает строку состояния, пересмотрите это решение для полноэкранных iPhone. В полноэкранных iPhone больше места для контента, чем в старых iPhone, а строка состояния занимает область экрана, которую ваше приложение, вероятно, не использует в полной мере. Строка состояния отображает информацию, которую пользователи считают полезной. Она может быть скрыта только в обмен на какую-то важную функцию.

Разрешить автоматическое скрытие индикатора для удобного доступа к главному экрану. Когда автоматическое скрытие включено, индикатор гаснет в случае, если пользователь не касался экрана в течение нескольких секунд. Он появляется снова, когда пользователь снова касается экрана. Это поведение должно быть включено только для пассивного просмотра, например воспроизведения видео или слайд-шоу фотографий.

Убедитесь, что ваш веб-сайт отлично смотрится на экране от края до края. См. Разработка веб-сайтов для iPhone X на webkit.org.