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

Дизайнер Владимир Клименко опубликовал перевод статьи из блога Niels, основанной на рекомендациях Apple.

Новый iPhone X официально презентован и поступит в продажу 3 ноября 2017 года. Модель отличается безрамочным дисплеем Super Retina с разрешением в 1125×2436 пикселей. Также в ней предусмотрена небольшая выемка вверху экрана, в которой спрятаны высокотехнологичные датчики для работы системы Face ID.

Разработка дизайна для этого устройства вызовет некоторые трудности, но вместе с тем предоставит и новые возможности. Ширина модели в портретном режиме такая же, как и у iPhone 6, 7 и 8, но телефон выше на 145 пикселей, что в результате дает примерно на 20% больше вертикального пространства.

При разработке макетов для разрешения @1x разрешение артборда составит 375×812 пикселей. Благодаря новому дисплею Retina дизайнерам не придётся экспортировать изображения в разрешении @2x, как для iPhone 8, а только в @3x, как для iPhone 7-8 Plus.

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

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

При использовании кастомной сетки приложение придётся адаптировать к новой раскладке экрана самостоятельно. Тем не менее, если вы задействуете Auto Layout, сделать это можно относительно просто.

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

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

Центрируйте и отделяйте важную информацию. Важный контент должен быть отцентрирован. Используйте симметричные поля, чтобы интерфейс не был в итоге обрезан сенсорами или углами устройства. Например, при задействовании Auto Layout контент будет автоматически размещён так, чтобы ничего не осталось спрятано за углами, сенсорами или индикатором «Домой».

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

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

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

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

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

Больше цветов. Новый дисплей Super Retina поддерживает цветовую модель P3 вместо sRGB, что обеспечивает более богатую палитру и более насыщенные цвета.

Будьте внимательны при использовании жестов. С исчезновением физической кнопки пользователи взаимодействуют с iPhone, используя только жесты. После свайпа вверх они попадают на домашний экран. Совершая свайп вправо или влево, они переключаются между приложениями. При помощи свайпа сверху вниз они попадают в Control Center.

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

Face ID. Предыдущий iPhone обладал функцией Touch ID, сенсор которой располагался в кнопке «Домой». Поскольку Apple отказалась от неё в новой модели, на замену пришла более продвинутая и безопасная технология Face ID, которая задействует сложные алгоритмы по распознаванию лица, чтобы разблокировать устройство.

Это обуславливает развитие нового пользовательского опыта. Постарайтесь соответственно переориентировать интерфейс для владельцев iPhone X. В своих приложениях полностью откажитесь от технологии Touch ID и замените её на Face ID.

Кастомные клавиатуры. При разработке собственного дизайна клавиатуры не стоит отдельно включать в неё кнопки эмодзи или диктовки — они будут добавлены автоматически под клавиатурой по бокам от индикатора «Домой».

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

#Интерфейсы