Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Перевод материала разработчика визуальных и пользовательских интерфейсов Макса Рудберга.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Вырез (корпус датчика и камеры)

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Сперва вернёмся к спору из-за «чёлки» вверху корпуса нового iPhone.

Известный блогер Джон Грубер заявил: «Это раздражающий, неуклюжий и неестественный элемент». Джошуа Топольски, сооснователь Vox Media, высказался ещё жёстче: «Он, попросту говоря, визуально отвратительный».

В 2017 году компании стремятся сделать экраны телефонов безрамочными, однако на лицевой части смартфона необходимо место для датчиков и динамика. В iPhone X эти элементы отведены в своеобразный вырез в верхней части экрана. Это выбор Apple, поэтому давайте работать с тем, что имеем.

Так что мне с этим делать?

Apple пишет в своём руководстве: «Не пытайтесь скрыть закруглённые углы устройства, корпус датчика или индикатор доступа к главному экрану, поместив чёрные полосы вверху и внизу экрана».

В видеоролике «Создавая дизайн для iPhone X», опубликованном Apple после анонса, Майк Стерн, ИТ-пропагандист Apple, говорит: «Ваше приложение или игра всегда должны заполнять дисплей. Размещение чёрных полос на экране делает приложение маленьким, сжатым и несоответствующим другими приложениям на iPhone X».

Apple подчеркнула, что экран достигает верхних углов устройства. Если вы будете следовать рекомендациям компании, то у приложения будет больше шансов попасть в App Store.

Приложение <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ftwitter.com%2Fcarrot_app%2Fstatus%2F908029622243209223&postId=29572" rel="nofollow noopener" target="_blank">Carrot</a> Weather iPhone X
Приложение Carrot Weather iPhone X

Вырез на экране — временное дизайнерское решение. Относитесь к нему как к должному. Проектируйте так, будто этого выреза не существует — Apple избавится от него в ближайшие годы.

Строка состояния

Из-за выреза в iPhone X строка состояния значительно изменилась.

Строка состояния высотой 20 pt оставалась неизменной со времён выхода первого iPhone
Строка состояния высотой 20 pt оставалась неизменной со времён выхода первого iPhone
Теперь в iPhone X строка стала высотой 44pt
Теперь в iPhone X строка стала высотой 44pt
Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Новая строка состояния в два раза длиннее обычной и разделена на две части. Длина строки составляет 44pt. Квадрат со сторонами в 44pt использовался ещё в первом iPhone для обозначения наименьшей площади касания, в которую может легко попасть пользователь.

При прокрутке строка состояния заполняется размытым изображением контента на фоне. В Apple указывают: «Если ваше приложение скрывает строку состояния, пересмотрите это решение». Прятать строку — неправильно, так вы скрываете важную информацию от пользователя.

Панель навигации

Индивидуальная панель навигации для Vegourmet. Чёрные полосы хорошо подходят для iPhone X. Вырез под датчики меньше выделяется, а эффект размытия позволяет контенту просвечиваться
Строка состояния объединяется с навигационной панелью в один элемент высотой 88 pt. Если вы разработчик, используйте для работы с этими элементами интерфейса <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fuseyourloaf.com%2Fblog%2Fsupporting-iphone-x%2F&postId=29572" rel="nofollow noopener" target="_blank">рекомендации</a> Safe Area Layout Guides
Строка состояния объединяется с навигационной панелью в один элемент высотой 88 pt. Если вы разработчик, используйте для работы с этими элементами интерфейса рекомендации Safe Area Layout Guides

Прозрачная панель навигации

Прозрачная панель навигации освобождает ещё больше места для просмотра фотографий
Прозрачная панель навигации освобождает ещё больше места для просмотра фотографий
Используйте градиент для выделения элементов строки состояния и панели навигации
Используйте градиент для выделения элементов строки состояния и панели навигации

Карточки

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Почтовый клиент и iTunes — это два примера приложений Apple с интерфейсом в виде с карточек, которые оставляют строку состояния на чёрном фоне. Карточки используются для выделения различных элементов приложения, например, композиции, которая сейчас играет, или или пришедшего на почту письма.

Этот стиль идёт вразрез с рекомендациями Apple о том, что пространство должно использоваться экономно, чтобы контент доходил до углов. Сочетание пользовательского интерфейса с конструкцией телефона всегда выглядит хорошо.

Большие заголовки

Большие заголовки удобно использовать в навигационном меню. Проблема потери полезного пространства экрана исчезает при выборе чёрного фона
Большие заголовки удобно использовать в навигационном меню. Проблема потери полезного пространства экрана исчезает при выборе чёрного фона

Альбомная ориентация

В альбомной ориентации, согласно Safe Area Layout Guides, отступ 44pt с левого и правого края позволит эффективно избегать выреза и закруглённых углов. А в нижней части экрана создаётся отступ от кнопки-индикатора «Домой».

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Цвета фона достигает краёв экрана, создавая своего рода искусственный полноэкранный режим.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

В Safari по умолчанию с левого и правого края контента будут установлены отступы 44pt. Веб-разработчики могут настроить свой сайт, чтобы достичь краёв экрана.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Чтобы лучше использовать всю ширину экрана, посмотрите обновлённый пользовательский интерфейс проигрывателя Apple. Его плавающие элементы немного «заправлены» в углы экрана.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Ещё один пример того, как гармонично сочетать пользовательский интерфейс с углами экрана. Расстояние — 27pt — плюс радиус элемента управления — 17pt — равно 44pt.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе
Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Apple Maps поступает так же — некоторые элементы управления будут приближаться к краю экрана.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

При повороте устройства на 180 градусов элементы управления в сочетании с вырезом часто выглядят не симметрично. Помните, что iPhone X создан на основе телефона с экраном размером 4,7 дюйма. Использование альбомной версии в этой версии будет менее удачным, нежели iPhone Plus, диагональ экрана которых 5,5 дюйма.

Альбомная ориентация на телефоне такого размера большинством пользователей будет использоваться только для просмотра видео или игр.

Интересные особенности использования строки состояния

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Рядом с часами может быть расположена стрелка геолокации и анимированная точка над индикаторами состояния, чтобы показать активность сети.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Вы можете объединять и менять местами индикаторы состояния. Смахнув вниз правую сторону, в пункте управления строки вы увидите все статусные элементы и процент заряда батареи.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Строка состояния входящего вызова, которая ранее удваивала высоту строки состояния, теперь отображается в форме простой кнопки вокруг часов. Запись и использование служб геолокации в фоновом режиме отображаются таким же образом, в виде красной и синей кнопок соответственно.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

В режиме редактирования домашнего экрана для перетаскивания иконок индикаторы состояния заменяются кнопкой «Готово».

Что не стоит делать

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Не используйте строку состояния для анимированной радуги, вылезающей из-под выреза.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Не используйте вырез в качестве элемента пользовательского интерфейса.

Дизайн для iPhone X: ещё одна инструкция по использованию «ушка» нового смартфона в интерфейсе

Не используйте его как спиннер обновления страницы.

22
27 комментариев

Я конечно понимаю, что вам всем тут не угодишь (привередливые больно стали), но на всякий случай продумал тут концепцию айфона без чёлки:

23

У меня это с этой картинкой проассоциировалось почему-то

5

Странно, что они сами не додумались.

Верхней частью можно было бы вставлять в розетку (заряжать как Apple Pen)

Если сделать ее выдвигающейся когда нужно, будет меньше нытиков)

Цукерберг не позвонит, а вот Кук вполне может!

Одни сделали трэш, а другие с умным видом учат что с этим делать, посмеялся.

28