Дизайн для iPhone X и его особенности

Дизайн нового iPhone X

iPhone X (читай: iPhone 10) официально уже готов, и выйдет в продажу 3 ноября. Огромный дисплей Super Retina с разрешением 1125×2436 пикселей поистине поражает. Он имеет прорезь в верхней части экрана, и это одна из главных новаторских фишек — функция разблокировки лица.

Дизайн этого прекрасного гаджета не только бросил вызов, но и подарил некоторые новые возможности. Ширина устройства в портретном режиме такая же, как у iPhone 6, 7 и 8, а длина на 145 точек больше, поэтому вертикального пространства стало на 20% больше. Для проектирования в @1x вам нужна панель с разрешением 375×812 пикселей. Отныне вам нужно экспортировать изображения не в @2x, как это было с iPhone 8, а в @3x, как с iPhone 7−8 Plus, благодаря новому дисплею Retina HD.

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

Видите белую линию? Это новый индикатор главного экрана

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

Дизайн iPhone 8 (слева), автоматически адаптированный к iPhone X (справа) На пользовательском макете ваше приложение, возможно, потребуется обновить до новой компоновки экрана. Однако, если вы используете Auto Layout, это довольно легко сделать.

Итак, начнем

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

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

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

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

Разделенная пополам строка состояния теперь находится на более высоком уровне

Новую строку состояния можно и нужно перестать прятать.

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

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

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

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

Больше цветов. Новый Super Retina Display отображает больше цветов благодаря цветовому пространству P3 вместо прежнего sRGB. Это означает, что цвета стали насыщеннее и глубже. Особенно выигрывают от этого широкого цветового диапазона видео и фотографии. (Цветовой спектр P3 использовался еще со времен iPhone 7, благодаря Марсело Авалосу).

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

Идентификатор лица. Предыдущий iPhone имеет отличную функцию Touch ID, которая позволяет пользователям разблокировать устройство или выполнять действия в приложениях с паролем, используя отпечаток пальца. Этот датчик был скрыт внутри кнопки Home. В iPhone X он исчез: Apple заменила его более совершенным и безопасным способом разблокировки устройства. Когда вы вводите Face ID, в ход идут потрясающие алгоритмы для обнаружения лица и разблокировки вашего устройства. Благодаря этому, появился и новый пользовательский интерфейс в приложениях. Больше не нужно ссылаться на Touch ID в приложении или в меню, замените его идентификатором лица.

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

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

Технические характеристики и главные фишки:

• iPhone X стал на 145 точек выше, а это 375×812 вместо прежних 375×667 точек
• iPhone X использует активы @3x
• Можно создавать полноэкранный режим, не скрывая уникальные функции устройства
• Можно скомпоновать и разместить в центре важный контент вашего пользовательского интерфейса, чтобы он всегда был на виду и не скрывался сенсором или углами устройства
• Новая, более высокая панель статусов — ранее она находилась на высоте 22, теперь 44 точки — разделена на две части
• Полноэкранные изображения можно и нужно обновлять, чтобы они отображались полностью
• Нельзя добавлять кнопки в нижней части экрана рядом с домашним индикатором
• Скрывать домашний индикатор можно только когда это действительно необходимо
• Более глубокие и насыщенные цвета благодаря цветовому спектру P3
• Будьте осторожны с пользовательскими жестами при работе с индикатором состояния и статусной полосой: для этих целей лучше записать новые пользовательские жесты
• Face ID не только заменяет сенсорный идентификатор, но и обновляет пользовательский интерфейс и заменяет текстовые ссылки на Touch ID
• На пользовательских клавиатурах не нужно добавлять кнопки Emoji и Dictation
• Большие навигационные панели прекрасно выглядят и работают на высоком дисплее.

Подробнее в видео от Apple о дизайне для iPhone X.

Как просмотреть пользовательский интерфейс приложения?

Вы можете использовать симулятор Xcode 9 для предварительного просмотра своего приложения — он сразу подскажет вам, нужно ли обновлять пользовательский интерфейс.

Где найти ресурсы iOS 11 и iPhone X?

К счастью, у Apple есть отличные новые ресурсы для Sketch, Photoshop и Adobe XD.
Вы можете найти их здесь.

Примечание. Большая часть этой информации взята из руководства пользователя Apple UI.

Данная статья является переводом с сайта blog. prototypr. io автора nielsboey