Дизайн для iPhone X
Итак, iPhone X (читается: iPhone десять) официально вышел, вернее выйдет 3го ноября. Он отличается безрамочным дисплеем Super Retina с разрешением 1125×2436 пикселей. У него также небольшая выемка вверху экрана, в которой спрятаны футуристические датчики для системы Face ID.
Дизайн для этого прекрасного аппарата вызовет определенное количество трудностей, но и предоставит для дизайнеров некоторые новые возможности. Ширина устройства в портретном режиме такая же, как и у iPhone 6, 7 и 8, но он на 145 пикселей выше, что в результате дает нам примерно на 20% больше вертикального пространства. Когда вы делаете макеты для разрешения @ 1x, разрешение артборда будет 375×812 пикселей. Вам не придется экспортировать изображения в разрешении @ 2x, как для iPhone 8, а только в @ 3x как iPhone 7–8 Плюс, благодаря новому дисплею Retina.
Создавая свой дизайн, вы должны быть внимательными, чтобы не исказить свой интерфейс из-за уникальных свойств устройства (круглых углов, выемки вверху экрана и индикатора “Домой”). Кстати, этот индикатор — тонкая линия внизу экрана, которая заменяет теперь физическую кнопку. Вернуться на домашний экран или перейти в другое приложения можно при помощи жестов.
Если ваше приложение в данный момент использует нативные компоненты iOS, у вас будет все в порядке и ваше приложение уже адаптировано под новый iPhone. Это могут быть панели навигации, таблицы, плитка и закладки. Они будут вставлены и спозиционированны автоматически.
Если вы используете кастомную сетку, ваше приложение придется адаптировать к новой раскладке экрана. Тем не менее, если вы используете Auto Layout, это может быть относительно легко.
Приступаем
Во-первых, примите дизайн нового устройства, дизайнеры Apple не для того работали так тяжело, чтобы вы прятали прекрасные особенности этого дорогого девайса.
Не забывайте задействовать весь экран. Пусть элементы скроллятся до самого конца экрана, даже за его скругленные края. Apple также очень просит вас не скрывать верхнюю выемку и скругленные края внизу, так что не стоит размещать черные рамки, чтобы он выглядел как “олдскульный” iPhone 8.
Центруйте и “отбивайте” важную информацию. Важный контент должен быть отцентрован и использовать симметричные поля, чтобы ваш интерфейс не обрезался сенсорами или углами устройства. Если вы используете Auto Layout, ваш контент будет автоматически размещен так, что не спрячется за углами, сенсорами или индикатором “домой”.
Новая строка состояния. Из-за сенсоров в верхней части дисплея, новая строка состояния разделена на 2 части. Если ваш интерфейс использует это пространство (ранее высотой 20 пунктов, сейчас — 44) каким-то особым образом, вам придется обновить его, потому что на iPhone X он будет выше. Прекрасно, что его высота не будет меняться во время звонка или использования навигационного приложения, как в случае других моделей iPhone.
Показывайте новую строку состояния. Если вы сейчас прячете строку состояния, Apple просит вас пересмотреть это решение. Так как экран выше и у вас больше площадь экрана для отображения вашего контента, может быть полезно не прятать строку состояния. Отображаемая на ней информация может быть нужна пользователю, а это место в большинстве случаев не будут занимать другие элементы интерфейса.
Полноэкранные изображения. Если вы сейчас используете полноэкранные изображения в своем дизайне, вам придется обновить их для нового iPhone. Их нужно обрезать и важная их часть может быть скрыта от пользователей.
Не размещайте интерактивные контролы внизу экрана. Пространство вокруг индикатора “домой” создано исключительно для жестов. Размещение кнопок рядом с этим индикатором и в нижних углах не самая лучшая идея — пользователь может случайно использовать жест “домой”. Вы можете использовать закладки и функциональные панели, но не забывайте, что они не должны мешать индикатору “домой”.
Не прячьте индикатор “домой” (все время). iOS позволяет вам прятать индикатор “домой”, эта функция прячет го автоматически, если пользователь не трогает экран несколько секунд. Он появится вновь, когда пользователь дотронется до экрана, что должно использоваться для таких случаев, как просмотр фото или видео. Индикатор так же меняет цвет автоматически, в зависимости от фона вашего приложения.
Больше цветов. Новый дисплей Super Retina отображает больше цветов — поддерживает цветовую модель P3 вместо sRGB. Это означает, что он будет показывать более богатую палитру и более насыщенные цвета.
Будьте внимательны при использовании жестов. С исчезновением физической кнопки, вы еще чаще взаимодействуете с iPhone используя жесты. Когда вы используете свайп вверх, вы попадаете на домашний экран или на переключение между приложениями. Делая левый и правый свайп, вы переключаетесь между приложениями. Свайпом сверху вниз, вы попадаете в Control Center. Вы можете использовать собственные жесты, используя функцию “edge protect”, которая будет отдавать предпочтение жестам, определенным приложением, но только один раз. Используйте эту функцию осторожно — она может сильно усложнить жизнь вашим пользователям.
Face ID. Предыдущий iPhone обладал функцией Touch ID, сенсор которой располагался в кнопке “домой”. Так как ее нет в новой модели, Apple заменила ее более продвинутой и безопасной функцией Face ID, которая использует сложные алгоритмы для того, чтобы распознать ваше лицо и разблокировать ваше устройство. Это привнесет новый пользовательский опыт, используйте его при возможности для ваших (богатых) клиентов, у которых будет iPhone X. Также, не ссылайтесь больше в ваших приложениях на Touch ID, замените его Face ID.
Кастомные клавиатуры. Когда вы делаете собственный дизайн клавиатуры, не надо добавлять кнопки эмодзи или диктовки — они автоматически будут добавлены под клавиатурой по бокам от индикатора “домой”.
Larger navigation bars. With iOS 11 the design of the native navigation bars got an update, they are now way taller. This design will especially be great on the taller iPhone X and will blend nicely with that new status bar. So consider using it in your design. These will also have some nice native animations when scrolling.
Навигационные панели стали больше. С выходом iOS 11 дизайн нативных навигационных панелей изменились, они стали намного выше. Этот дизайн будет особенно хорош на высоком iPhone X и хорошо будет сочетаться с новой строкой состояния. Анимация при скроллинге панелей также изменится.
TL;DR
- iPhone X на 145 пунктов выше, так что делайте дизайн на артборде 375×812pt вместо 375x667pt
- iPhone X использует масштабирование @ 3x.
- Делайте полноэкранные приложения, не прячьте уникальные свойства устройства.
- Центруйте важные части вашего UI, чтобы исключить возможность перекрытия их сенсорами или углами устройства.
- Новая строка состояния, разделенная на две части, стала также в 2 раза выше — 44 пункта вместо 22.
- Полноэкранные изображения нужно будет обновить, чтобы они отображались на весь экран.
- Не добавляйте кнопок внизу экрана, рядом с индикатором “домой”.
- Скрывайте индикатор “домой” только тогда, когда это необходимо.
- Более богатые и насыщенные цвета, благодаря охвату цветового спектра P3.
- Аккуратнее используйте кастомные жесты возле строки состояния и индикатора, не мешайте пользователю использовать нативные жесты.
- Face ID заменяет Touch ID, обновите ваш интерфейс.
- Кастомным клавиатурам больше не нужны кнопки эмодзи и диктовки.
- Навигационные панели стали больше и лучше анимированы.
Переведено специально для сообщества Behance Russia. Перевод: Владимир Клименко. Редактор: Варвара Новожилова.
Большинство информации взято из Apple UI Guidelines.
