Особенности дизайна приложений для iPhone X

Игнат Смирнов, продуктовый дизайнер, рассказал нам о том, что изменилось в дизайне приложений и пользовательском опыте с появлением iPhone X.

Слухи подтвердились и во вторник Apple официально представила новый iPhone X, лицевую часть которого полностью занимает дисплей. Размер экрана — 5.8 дюймов, разрешение — 2436 на 1125 пикселей, Super Retina, работает на технологии OLED. Также, сверху экрана расположилась «врезка» с фронтальной камерой и системой распознавания лиц. О том, как это всё повлияет на дизайн приложений и какие новые возможности открываются, рассказываю ниже. Для тех, кому лень много читать, внизу есть выжимка самого полезного из статьи. :)

Новые размеры экрана

Ширина экрана осталась прежней, а вот высота, благодаря отказу от кнопки «Home» и врезания камеры в экран, увеличилась на ~20%. Теперь для дизайна приложений для нового iPhone, вам понадобится артборд размером 375×812px, а ассетсы для Super Retina придётся выгружать в @3x.

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

Хорошая новость для тех, кто использует в своих приложениях нативные компоненты: панели навигации, вкладки, таблицы — всё адаптируется под новый iPhone. Для приложений использующих Auto Layout, всё тоже должно пройти хорошо. Посмотреть, как выглядит ваше приложение на iPhone X, можно в симуляторе Xcode.

Что необходимо учесть

Полноэкранный режим. Убедитесь, что фоны приложения никак не обрезаются, а вертикально-прокручиваемые элементы доходят до конца. Также Apple просят не скрывать вырез сверху полосой и не делать приложения как для iPhone 7–8.

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

Новый status bar. Высота status-bar на новом iPhone выше, чем у предшественников. Если раньше его высота в приложении занимала фиксированную высоту, то необходимо обновить приложение и сделать её динамической. Кстати, фоновые задачи, как режим модема или записи голоса, больше не сдвигают ничего вниз.

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

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

Не размещайте элементы управления в нижней части экрана. Как я уже писал, там разместился индикатор «Home». Эта область используется для жестов, поэтому размещение элементов управления близко к ней, может привести к пользовательским ошибкам. Просто размещайте необходимые элементы выше.

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

Цвета. Новый Super Retina дисплей отображает цвета насыщеннее, благодаря использованию стандарта P3 вместо sRGB. Особенно это заметно при просмотре фото и видео.

И ещё о жестах. Так как физическая кнопка «Home» ушла, всё взаимодействие с новым iPhone строится на жестах. Если провести пальцем вверх по экрану, откроется домашний экран или панель многозадачности. При свайпе вправо-влево по домашнему индикатору, можно переключаться между приложениями. Также сохранился жест по верхней части экрана, который открывает центр уведомлений. Apple рекомендует по возможности отказаться от этих жестов в своих приложениях, т.к. это может вызвать неудобства при работе с iOS. В редких случаях, например в играх, разрешается использовать эти жесты, но только один раз — следующее такое же уже вызовет системное действие.

Face ID. Наверное, самая главная инновация в новом iPhone. Отказавшись от Touch ID, iOS научилась распознавать лицо пользователя для разблокировки. Эта функция добавляет некоторые новые элементы в UI, про которые нельзя забывать при разработке приложения. Также надо не забыть заменить упоминания Touch ID, если они встречаются где-то в приложении.

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

Навигационный бар. Он стал выше в iOS 11, что особенно удобно для iPhone X. Также добавились новые анимации, на которые Apple рекомендуют обратить внимание при дизайне приложений.

Подытожим

• Экран iPhone X стал на 145 пикселей выше. Для дизайна приложения для него понадобится артборд 375×812px;
• Ассеты выгружать в @3x;
• Следите за размером своего контента, центрируйте самое важное, чтобы ничего не потерялось и не обрезалось при разных ориентациях;
• Высота статус-бара увеличилась в 2 раза;
• Не забудьте заапдейтить полноэкранные фото под новый iPhone;
• Вместо кнопки «Home» появился индикатор с жестами — не размещайте свои кнопки слишком близко к нему;
• Не прячьте домашний индикатор, если этого можно избежать;
• Экран стал ярче и насыщеннее благодаря стандарту P3;
• Домашний индикатор теперь работает с жестами, о которых не стоит забывать при разработке своих приложений;
• Вместо Touch ID появился Face ID, не забудьте поменять связанный с этим контент;
• При создании своих клавиатур не нужно создавать кнопки для Emoji и диктовки;
• Новый более высокий навигационный бар с анимациями.