Адаптивность и Расположение

Встраивание Адаптивности

Люди, как правило, хотят использовать их любимые приложения на всех устройствах и в разных условиях, например при различной ориентации устройств и в режиме разделённого экрана на iPad. Size classes и Авто-Расположение помогут вам оправдать ожидания посредством определения того, как расположение контроллеров видов, экранов, и видов должно быть адаптировано при изменении режима дисплея. (Понятие режим дисплея может относиться ко всему экрану устройства или только его части, например область вспомогательного экрана или область одной стороны в разделённом экране на iPad.)

iOS включает в себя понятие режим дисплея в определении коллекция трейтов, которое включает в себя size class, шкалу индикатора и идиому пользовательского интерфейса. Вы можете использовать коллекции трейтов для того, чтобы сделать ваши виды и контроллеры видов чувствительными к изменениям режима дисплея. (Для более подробного изучения коллекции трейтов смотрите UITraitCollection Class Reference.)

iOS определяет два size classes: обычные (regular) и компактные (compact). Обычные (regular) size classes связаны с открытым пространством, а компактные (compact) с ограниченным пространством. Чтобы охарактеризовать режим дисплея, вы определяете горизонтальный и вертикальный size class. Как вы возможно догадались, устройство iOS может использовать один набор size classes для портретной ориентации и один набор для ландшафтной ориентации.

iOS автоматически производит ряд изменений расположения, когда изменяются size classes режима дисплея. Например, когда вертикальный size class изменяется с компактного (compact) на обычный (regular), навигационные панели и панели инструментов автоматически становятся выше.

Когда вы полагаетесь на size classes, чтобы внести изменения в расположение, ваше приложение будет выглядеть отлично в любом режиме дисплея. Чтобы узнать больше о работе с size classes в конструкторе интерфейса, смотрите Size Classes Design Help.

ПРИМЕЧАНИЕ

В рамках size class продолжайте использовать авто-расположение для небольших настроек макета, таких, как сжатие или растягивание содержимого. Чтобы узнать больше об использовании авто-расположения, смотрите Auto Layout Guide.

Приведённые далее примеры могут помочь вам представить, как size classes характеризуют режим дисплея на разных устройствах. Например, iPad (включая iPad Pro) использует обычный size class в обоих размерах и обеих ориентациях. Другими словами, режим дисплея iPad всегда горизонтально и вертикально систематичен.

Size classes iPad при портретной ориентации

ipad_size_class_v_2x

Size classes iPad в ландшафтной ориентации

ipad_size_class_h_2x

ПРИМЕЧАНИЕ

Со средствами многозадачности на подходящих моделях iPad ваше приложение может разделять экран с другим приложением. Будьте уверены, что используете Auto Layout таким образом, чтобы удовлетворить пользователя, когда он решит использовать многофункциональные особенности, такие, как Split View (разделённый экран) и Slide Over.

Вдобавок к использованию Auto Layout, важно полагаться на особенности UIView readableContentGuide, когда вы располагаете читаемое содержимое на iPad Pro, чтобы поля не мешали читателям.

Режим дисплея может изменяться в зависимости от устройства и его ориентации.

iphone02_size_class_v_2x

 

При портретной ориентации iPhone 6 Plus использует компактный (compact) горизонтальный и обычный (regular) вертикальный size classes.

При ландшафтной ориентации iPhone 6 Plus использует обычный (regular) горизонтальный и компактный (compact) вертикальный size classes.

iphone02_size_class_h_2x

 

Все остальные модели iPhone, включая iPhone 6, используют одинаковые системы size classes.

iphone01_size_class_v_2x

 

При портретной ориентации iPhone 6, iPhone 5, и iPhone 4s используют компактный (compact) горизонтальный и регулярный (regular) вертикальный size classes.

При ландшафтной ориентации эти устройства используют компактный (compact) size class и в горизонтальном размере, и в вертикальном.

 

iphone01_size_class_h_2x

Предоставьте прекрасный опыт в любых условиях

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

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

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

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

  • Избегайте отображения элементов пользовательского интерфейса, которые говорят людям, чтобы они развернули устройство. Работа в поддерживаемой ориентации ясно говорит людям о том, чтобы они развернули устройство, если этого требуется, без ненужного загромождения пользовательского интерфейса.
  • Обеспечьте оба варианта ориентации. Например, если приложение работает только в ландшафтной ориентации, люди должны быть способны воспользоваться им, неважно, находится Home button справа или слева. И если люди разворачивают устройство на 180 градусов во время использования приложения, лучше всего, если приложение реагирует тем, что разворачивает содержимое также на 180 градусов.

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

Используйте расположение, чтобы обеспечить взаимодействие

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

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

focus_on_main_task_2x

 

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

phone_hangup_button_2x

 

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

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

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

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

Упростите взаимодействие пользователей с содержимым и элементами управления посредством обеспечения достаточного пространства для каждого интерактивного элемента. Сделайте элементы, на которые можно нажать, размером около 44 x 44 точек.

Рекомендуется

interact_with_content_r_2x

 

Не рекомендуется

interact_with_content_nr_2x

 

Copyright © 2016. iOSManual Все авторские права защищены