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

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

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

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

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

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

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

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

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

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

Приложение Carrot Weather iPhone X

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

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

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

Строка состояния высотой 20 pt оставалась неизменной со времён выхода первого iPhone
Теперь в iPhone X строка стала высотой 44pt

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

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

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

Индивидуальная панель навигации для Vegourmet. Чёрные полосы хорошо подходят для iPhone X. Вырез под датчики меньше выделяется, а эффект размытия позволяет контенту просвечиваться
Строка состояния объединяется с навигационной панелью в один элемент высотой 88 pt. Если вы разработчик, используйте для работы с этими элементами интерфейса рекомендации Safe Area Layout Guides

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

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

Карточки

Почтовый клиент и 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 дюйма.

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

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

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

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

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

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

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

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

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

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

0
27 комментариев
Написать комментарий...
Максим Буреев

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

Ответить
Развернуть ветку
Rick Grick

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

Ответить
Развернуть ветку
Глеб Горохов

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

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

Ответить
Развернуть ветку
Vladimir Ivanov

Более того, удобно было бы пивко открывать!

Ответить
Развернуть ветку
Глеб Горохов

Apple Beer с тач айди на крышке. Чтобы ваше пивко могли открыть только вы

Ответить
Развернуть ветку
yoLegi

что такое Apple Pen?

Ответить
Развернуть ветку
Владислав Пасека

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

Ответить
Развернуть ветку
Johnny Vorony

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

Ответить
Развернуть ветку
Ильяс Гарифуллин

Да вы что?? Именно так и нужно делать!1!1
https://leonardo.osnova.io/0d29901d-d13e-997e-0535-de0d285e7c7c/

Ответить
Развернуть ветку
Сергей Бондаренко

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

Ответить
Развернуть ветку
Вадим Скворцов
Автор

нам же с вами надо это как-то пережить(

Ответить
Развернуть ветку
Zi Super

Зачем переживать, когда можно купить Восьмую Галактику в 3 раза дешевле.

Ответить
Развернуть ветку
yoLegi

зачем переплачивать за галактику, когда можно купить лудший телефон в 3 раза дешевле.

Ответить
Развернуть ветку
Zi Super

Сомневаюсь, что вы за эти деньги найдете телефон, характеристики которого по всем параметрам луДше чем у айфона Х.

Ответить
Развернуть ветку
Яна Мальченко
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
ilya biloborodov

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

Ответить
Развернуть ветку
Alex Reznik

Короче есть план.
1) перестаём называть это челкой
2) начинаем называть это «усы Адольфа»
3) общественность бойкотирует Аппле
4) Кук сдаётся под натиском и убирает усы
5) дизайнеры ликуют и ждут плашку снизу экрана

Ответить
Развернуть ветку
Rick Grick

Такое ощущение что они это сделали именно ради хайпа популярного ныне, ради вот таких вот статей, что с этим делать. Аналогично можно сделать какой-нибудь iУнитаз со стульчаком, оклееным наждачной бумагой и обсуждать как удобнее на него усадить свой зад.

Ответить
Развернуть ветку
Саймонд Эни

Это треш.

P. S. Вариант с пользовательским интерфейсом и иконками меню наоборот показался самым годным, он хотя бы скрывает эту убогость.

Ответить
Развернуть ветку
Ноль Никто

Где же старый добрый Стив Джобс, его так не хватает

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Zi Super

Ситуация с чёлкой напоминает басню Крылова Мартышка и очки. И так они эту чёлку вертят и сяк, и не поймут зачем эта чёлка.
А разгадка проста. Из-за того, что дизайнеры решили не удлинять телефон или укорачивать экран, они взяли и разместили на экранном пространстве сенсоры и динамик. А могли бы просто всё это дело сделать как в Galaxy S8 (разместить над экраном) и проблем бы не было. Не пойму в чём проблема.

Ответить
Развернуть ветку
denis kolov

Ещё несколько инструкций по онанизму с ушком

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Андрей Владимирович

Ушка?!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Artem Belov

на "в кафе" кредит не возьмешь. Хотя тиньков поможет.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Александр Орлов

Ох уж эти ушки, я лучше куплю безуший смартфон Aermoo M1, зато защищенный и с беспроводной зарядкой.

Ответить
Развернуть ветку
Оля Шатропа

новые идеи всегда хорошо))))

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Linkker Cole

New original Apple iPhone 8 and 8 plus cost 600USD. come with 1year warranty,

New iPhone X cost 700USD

New Samsung note 8 cost 650usd

iPhone 7 and 7 plus cost 550USD,

serious buyer should contact us.

Whatsapp CHAT or Call : +19842085304 or 0019842085304

Ответить
Развернуть ветку
24 комментария
Раскрывать всегда