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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#дизайн #iphonex