Макет айфона: Макет iPhone 15 Pro с новым дизайном впервые показали вживую

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

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

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

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

Помните о соотношении сторон.

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

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

На сенсорных экранах предоставьте достаточное количество сенсорных элементов для интерактивных компонентов. Сохраняйте минимальную область касания размером 44×44 точки для всех элементов управления.

Предварительный просмотр приложения на нескольких устройствах с использованием различных ориентаций, локализаций и размеров текста. Хотя обычно лучше предварительно просматривать такие функции, как широкий цвет, на реальных устройствах, вы можете использовать Xcode Simulator для проверки обрезки и других проблем с макетом. Например, если ваше приложение для iOS поддерживает ландшафтный режим, вы можете использовать Simulator, чтобы ваши макеты выглядели великолепно независимо от того, поворачивается ли устройство влево или вправо.

Особенности платформы

iOS, iPadOS

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

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

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

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

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

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

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

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

Безопасные зоны iOS, iPadOS

Безопасная область определяет область в представлении, которая не покрыта панелью навигации, панелью вкладок, панелью инструментов или другими представлениями, которые может предоставить контроллер представления.

Руководство по раскладке клавиатуры iOS

В iOS 15 и более поздних версиях предоставляется руководство по раскладке клавиатуры, которое представляет пространство, занимаемое клавиатурой в данный момент, и учитывает вставки безопасной области. Использование этого руководства может помочь вам сделать клавиатуру неотъемлемой частью вашего приложения, независимо от типа клавиатуры, которую используют люди, или от того, где они ее размещают. Руководство для разработчиков см. в UIKeyboardLayoutGuide.

macOS

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

tvOS

Размеры телевизоров сильно различаются. На Apple TV макеты приложений не адаптируются автоматически к размеру экрана, как на iPhone или iPad. Вместо этого приложения отображают один и тот же интерфейс на каждом дисплее. Будьте особенно внимательны при разработке макета, чтобы он отлично смотрелся на экранах разных размеров.

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

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

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

Шаблоны макетов

Шаблоны Apple TV обеспечивают четкие, согласованные макеты, которые делают содержимое центром внимания. Эти шаблоны, основанные на JavaScript и языке разметки Apple TV (TVML), динамически загружаются и заполняются контентом, когда люди открывают ваше приложение. Шаблоны обеспечивают гибкость при создании приложений с богатым содержимым с предопределенными макетами, которые хорошо смотрятся на экране телевизора и идеально подходят для потоковой передачи мультимедиа.

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

Изменяйте шаблоны со вкусом. Шаблоны макетов обладают широкими возможностями настройки; вы можете контролировать фон, оттенок, размер, расположение и многое другое. При разработке приложения по возможности полагайтесь на контент, избегая настроек, которые кажутся отвлекающими, раздражающими или навязчивыми.

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

Для получения подробной информации об интеграции шаблонов в ваше приложение см. TVML.

Сетки

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

Если вы используете элемент потока представления коллекции UIKit, количество столбцов в сетке определяется автоматически на основе ширины и интервала вашего контента. Руководство для разработчиков см. в разделе UICollectionViewFlowLayout.

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

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

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

watchOS

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

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

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

Технические характеристики

iOS, iPadOS

Размеры и ориентация экрана устройства

ПРИМЕЧАНИЕ Все коэффициенты масштабирования в приведенной выше таблице являются коэффициентами масштабирования UIKit, которые могут отличаться от исходных коэффициентов масштабирования. Руководство для разработчиков см. в разделе Scale и nativeScale.

Классы размеров устройств

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

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