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

Разработка дизайнов для этого красивого смартфона бросает новые вызовы, но и открывает новые возможности в дизайне. Ширина устройства в портретном режиме такая же, как у iPhone 6, 7 и 8, но смартфон на 145pt выше, что дает на ± 20% больше вертикального пространства. При проектировании в @1x вам нужен артборд размером 375×812px. Вы не будете экспортировать изображения в @2x, как iPhone 8. Из-за нового Retina дисплея для нового iPhone X необходимо экспортировать в @3x размере, как iPhone 7−8 Plus.

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

Индикатор "Домой" iPhone X
Видите эту белую линию? Это новый индикатор «Домой».
Если в настоящее время у вас есть приложение, которое использует нативные компоненты iOS, все будет в порядке, и ваше приложение уже будет адаптировано для нового iPhone. Это могут быть панели навигации, таблицы, коллекции и панели вкладок. Они будут автоматически вставлены и расположены.
Дизайн iPhone 8 слева, автоматически адаптированный к iPhone X справа
Дизайн iPhone 8 слева, автоматически адаптированный к iPhone X справа
Если вы используете собственный дизайн, возможно, потребуется обновить ваше приложение для нового экрана. Однако, если вы используете Auto Layout, не должно возникнуть трудностей

Давайте начнем

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

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

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

Центрирование и вставка важной информации в iPhone X

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

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

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

Изображения на весь экран в iPhone X

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

Элементы управления в нижней части экрана iPhone X

Не скрывайте индикатор «Домой» (все время). iOS позволяет скрыть индикатор «Домой» в вашем приложении. Он будет автоматически скрыт, когда пользователь не будет касаться экрана в течение нескольких секунд. Он опять появится, когда пользователь снова коснется экрана. Это должно быть в основном использовано для эффекта погружения, например, при просмотре видео или фотографий. Индикатор «Домой» также автоматически изменит цвет на основе фона вашего приложения.

Не скрывайте индикатор "Домой" iPhone X

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

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

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

Face ID в iPhone X

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

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

Большие навигационные панели iPhone X

Если не осилили статью

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

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

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

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

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

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

Полный разбор дизайна iOS 11: Apple все еще внимательны к деталям?