12 сентября компания Apple в очередной раз всех удивила и провернула очень классную тему с порядковыми номерами новых iPhone. Я смотрел презентацию целиком и на английском. Учитывая то, что я старался вообще не смотреть утечки в сети, хотя мне с самого начала не нравилась сдвоенная вертикальная камера, результаты работы компании смогли порадовать другими фишечками и особенностями.

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

Так вот, давайте посмотрим на основные отличия нового экрана и iPhone X в целом:

  • 1125×2436 px — это супер-ретина дисплей. Ширина экрана такая же, как и у iPhone 6, 7 и 8, а высота почти на 20% выше за счёт отсутствия кнопки «домой» и верхней части экрана. Секрет в плотности пикселей. Их значительно больше, чем в предыдущих моделях при тех же физических размерах экрана. Поясню на примере: когда мы отрисовываем интерфейс в разрешении 375×812 pt против 375×667 pt (для всех предыдущих phone), то умножаем не на x2, а сразу на x3 и получим макет для iPhone X.
Пример интерфейса на iPhone 6,7 и 8 в сравнении с iPhone X.
  • Важный момент, не размещать ничего важного в верхней части экрана. Теперь у нового iPhone там скрываются датчики FaceID (вверху экрана островок), а по углам появились скруглённые углы.
Закруглённый ободок и тёмный островок с датчиками FaceID.
  • Если в вашем приложении стандартные элементы навигации, то ничего переделывать не придётся. iPhone X подстроит все элементы автоматически сверху и снизу, ширина в новой версии идентичная. Эппл позаботилась и подготовила исходники ключевых элементов интерфейсов в Sketch и PS для дизайнеров Apple Design Resources. Изучайте!

  • Закруглённый экран сверху и снизу. Обратите внимание на расположение элементов на экране. Важно сохранять безопасные зоны слева, справа и сверху, чтобы углы и датчики не обрезали важный контент. Это нужно учитывать ещё и для положения полоски снизу, которая заменяет кнопку «Домой».

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

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

Глобально, ничего сложного в этом нет, эволюция и развитие технологий всегда требует от дизайнеров и проектировщиков максимального внимания к возможностям и особенностям технологий. Я уверен, что все должны обновляться и расширять способы взаимодействия с пользователем, используя особенности и технические возможности нового iPhone X.

Материалы для изучения:

 

Хочу подписаться

Получайте последние новости первыми