Дизайн для 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 указывают: «Если ваше приложение скрывает строку состояния, пересмотрите это решение». Прятать строку — неправильно, так вы скрываете важную информацию от пользователя.
Панель навигации
Индивидуальная панель навигации для Vegourmet. Чёрные полосы хорошо подходят для iPhone X. Вырез под датчики меньше выделяется, а эффект размытия позволяет контенту просвечиваться
Прозрачная панель навигации
Карточки
Почтовый клиент и 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
© vc.ru
