Как адаптировать дизайн под iPhone X?

Советы, рекомендации и главные тенденции дизайна мобильных приложений 2018

29 сентября 2017 года в Минске открылся новый iStore, где можно увидеть, потрогать и купить, вероятно, самый обсуждаемый девайс за последние полгода — iPhone X. Как ни посмотри, Apple остаются одними из главных законодателей в области дизайна мобильных устройств и приложений — об этом говорят не только огромные продажи, но и тот факт, что самые различные компании стремятся создать нечто похожее.

Можно с уверенностью сказать, что дизайн iPhone X выделяется среди других телефонов: его точно не спутаешь ни с каким другим устройством. Отсутствие рамок, скругленные углы дисплея и небольшой функциональный модуль, вдающийся в пространство экрана, не только открывают новые возможности для дизайна, но и вызывают ряд вопросов технического характера. Насколько органично будет смотреться контент на новом экране? Какие изменения нужно внести в дизайн, чтобы он соответствовал обновленному функционалу телефона?

Несколько рекомендаций, как адаптировать ваш дизайн под особенности iPhone X

  • Самое главное, что стоит учитывать при создании мобильного приложения— это 20% дополнительного пространства, которое пользователи получили в свое распоряжение. Разрешение экрана теперь составляет 1125×2436px. Размер артборда для создания макета 1х в этом случае составит 375×812px. Такие параметры дают вам возможность разместить больше визуальных элементов — строк, иконок и разделов, а также играть с возможностями table view и collection view.

  • Однако есть тут и маленький подводный камешек: важный контент необходимо размещать по центру, а по краям оставить небольшие отступы, которые не будут задействованы при работе приложения: так интерфейс не будет обрезан боковыми сенсорами и скругленными углами устройства.

  • Теперь у вас есть пространство для того, чтобы реализовать Панель Вкладок вашей мечты: больше никаких выдвижных и складывающихся меню, только простота и лаконичность.
  • В своих гайдлайнах для дизайнеров Apple настоятельно рекомендует оставить в покое модуль с камерой, динамиком и Face ID, который врезан в экран. Подумайте над тем, как органично вписать его в интерфейс своего приложения. При этом заливать его черной строкой, объединять с кнопками и спиннером обновления страницы точно не стоит.

  • Учитывайте также, что строка состояния (верхняя часть, где отображается название оператора, время и заряд батареи) теперь разделена надвое. Ее также не стоит скрывать: используйте ее для размещения полезной информации.

  • У iPhone X отсутствует кнопка Home. Помните, что роль кнопки теперь выполняет полоска пространства внизу экрана, и учитывайте это при построении интерфейса. Не размещайте важные элементы там, где пользователь случайно может задеть индикатор и спровоцировать нежелательный выход из приложения. Кроме того, не скрывайте специально home-индикатор — если пользователь в течение нескольких секунд не касается экрана, он исчезнет сам, а при повторном нажатии снова появится.

  • У нового устройства полностью сенсорный экран, поэтому его интерфейс ориентирован на различные жесты. Продумайте, с помощью каких именно жестов пользователь будет действовать в вашем приложении: вписываются ли они в новую архитектуру экрана и не дублируют ли стандартные жесты телефона.
  • Создавайте приложения, которые задействуют весь экран. При этом не забывайте, что альбомная ориентация по-прежнему используется для просмотра фотографий и фильмов, чтения больших объемов текста. Ориентируйтесь на рамку устройства, чтобы избежать появления неряшливой каймы при отображении веб-страниц, если необходимо — перегруппируйте контент. Используйте полноэкранные фото: подгоните изображения по размеру и проконтролируйте их корректное отображение — в противном случае часть контента может быть обрезана.

  • Не бойтесь использовать яркие, чистые цвета и детальные иллюстрации — новая цветовая модель экрана P3 позволяет передать еще больше оттенков, чем RGB.
  • При создании графики учитывайте разницу между точками и пикселями — теперь это не одно и то же: на Retina-дисплее iPhone Х 1 pt равняется 3 px.

  • Верификацию через отпечаток пальца теперь заменил Face ID. Интегрируйте возможность его применения в ваше приложение — взаимодействуйте с пользователем через функционал.
  • Разнообразие устройств, на которых пользователи просматривают контент, и их параметров очень велико даже внутри линейки продуктов Apple. Создавайте адаптивные макеты с помощью таких инструментов, как Constraints Auto Layout. Чтобы узнать, как будет выглядеть мобильное приложение на новом интерфейсе, вы можете использовать симулятор Х-code.
  • Для создания макетов приложений, максимально приближенных по дизайну к IOS, вы можете использовать Apple User Interface Kits: набор готовых шаблонов с иконками, шрифтами и табличками.

Тренды мобильного дизайна 2018

При создании привлекательного и практичного дизайна для мобильного приложения мы рекомендуем руководствоваться актуальными трендами, которые сложились к началу 2018 года:

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

  • Использование градиентов и плавных цветовых переходов позволит создать интересное и визуально заманчивое пространство.

  • Минимализм и простота форм — берем пример с Apple: выстраиваем графику, которая идеально вписывается в общий визуал IOS.

  • Яркие шрифты и плашки на контрастном фоне: выстраиваем иерархию пространства экрана и играючи выделяем самое важное.

  • Эксклюзивные иллюстрации — рисунки от руки, картины, наброски: вписываем в интерфейс графику, которую хочется разглядывать снова и снова.

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

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

Удачи!

Просчитать проект