Презентация iPhone X (читаем как Айфон 10) официально была приурочена к 10-летию Apple смартфона. Событие удивило фанатов Apple, прервав логическую цепочку релизов (где потерялся iPhone 9?), а также заставило всех любителей iPhone с еще большим нетерпением ждать выхода товара на рынок. Пока пользователи считают дни до 3 ноября, разберемся, повлияет ли большой экран и новая Супер Ретина iPhone X на дизайн мобильных приложений под iOS?
Релиз iPhone X, что новенького?
Айфон 10, кроме беспроводных возможностей (наушников и зарядки), улучшенной камеры и стеклянного корпуса, удивил почитателей возможностью создавать Animoji. Используя TrueDepth камеру, пользователи теперь могут создавать анимированные эмоджи, которые повторяют мимику человека. Для этого используется мощный интеллектуальный процессор A11 Bionic, который значительно ускоряет процессы воспроизведений видео, и дает еще один толчок к созданию приложений, использующих дополнительную реальность.
 |
Кроме этого, специалисты Apple удивили действительно большим экраном, отсутствием «домашней» кнопки и необычной формой дисплея.
Большой закругленный экран
Новый iPhone X будет примерно на 20% (145 пунктов) выше своих предшественников. Новшества, которые повлияют на создание дизайна мобильного приложения для iPhone X:
- Edge-to-edge дисплей с диагональю 5,8″ и разрешением 1125×2436px;
- Скругленные углы дисплея;
- Отсутствие физической кнопки внизу экрана;
- Вырез под камеру и динамик вверху экрана.
Размеры iPhone X, в сравнении с предыдущей моделью
Прощай круглая кнопка!
Впервые в модели iPhone отсутствует физическая кнопка «Домой», к которой все так привыкли, однако разработчики Apple все же оставили ее сенсорный вариант. Теперь, чтобы перейти в общее меню или к другому приложению, достаточно свайпнуть по экрану вверх. Данное нововведение в очередной раз подтверждает ориентацию мобильного дизайна на интуитивные жесты.
Кнопка видна не постоянно — разработчики iOS предусмотрели возможность скрытия сенсорной линии, если пользователь не дотрагивается до экрана в течение нескольких секунд. Такая опция ориентирована на режимы просмотра фото и видео. Также продумано, чтобы цвет кнопки адаптировался под фон вашего приложения. Дизайнерам стоит быть осторожными с нижней областью экрана — функциональные элементы желательно располагать только по краям дисплея, чтобы они не перекрывали сенсорную Домашнюю кнопку.
Определяем безопасную зону
Сенсорная «домашняя» кнопка (которая к тому же еще и прячется), скругленные углы, а также нестандартный вырез вверху экрана дают еще больше пространства для творчества, однако заставляют дизайнеров приложений быть осторожными.
Безопасные зоны iPhone X в портретной и ландшафтной ориентациях
Например, чтобы обеспечить полноэкранный режим, необходимо, чтобы фон приложения распространялся на края дисплея, а вертикально-прокручиваемые элементы, вроде таблиц доходили до самого низа экрана. Особенно актуально это для приложений с фиксированной высотой контентной области. При этом не забываем о прячущейся «домашней» кнопке — не стоит планировать активные элементы внизу дисплея. Красные зоны по бокам экрана также небезопасны, так как будут обрезаться при скролле скругленными углами.
Кастомный дизайн элементов
Строка состояния
Важно отметить — на iPhone X строка состояния на 22 пункта выше, чем на предыдущих версиях смартфона. Также элемент не меняет высоту, если активны фоновые задачи (запись голоса или геолокация). Специалисты Apple не рекомендуют скрывать статус бар в приложениях под iPhone X, но если подобная опция уже была использована в приложениях ранее, ее стоит пересмотреть.
Клавиатура
Создавая клавиатуру для iPhone X больше не нужно предусматривать кнопки эмоджи и голосовой записи — эти элементы будут автоматически добавлены внизу экрана, рядом с «домашней» сенсорной кнопкой.
Супер Ретина, х3 изображения и Face ID
iPhone X будет поддерживать аутентификацию пользователя через Face ID (скан лица). При интеграции приложения с Apple Pay и другими сервисами, требующими аутентификацию стоит учитывать этот момент.
Новая версия iPhone X использует P3 color space. Подобное цветовое пространство используется в цифровых кинотеатрах. В iPhone новшество позволит улучшить картинку благодаря более широкому спектру цветов, чем sRGB (хотя улучшенная цветопередача едва ли будет заметна человеческому глазу).
Создатели iPhone X, несмотря на инновационный дизайн смартфона, оставили х3 разрешение изображений.Так что дизайнеры могут смело использовать готовые ресурсы для создания иконок, кнопок и прочих элементов. Хотя пропорции дисплея немного поменялись, в целом, придерживаясь параметров безопасной зоны можно без особых проблем спланировать размещение важного контента как для новой, так и для предыдущих версий смартфона.
В статье использованы визуальные материалы из официального сайта Apple, а также из пресс-релиза iPhone X. Скачать актуальные UI шаблоны для Photoshop и Sketch можно здесь.
Специалисты Stfalcon.com создают кастомный дизайн, а также обладают большим опытом в разработке нативных прилоежний приложений под iOS и Android. Напишите нам на info@stfalcon.com, чтобы поделиться своей идеей. Мы поможем реализовать проект вашей мечты!
