Дизайн для 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 дюйма.
Альбомная ориентация на телефоне такого размера большинством пользователей будет использоваться только для просмотра видео или игр.
Интересные особенности использования строки состояния
Рядом с часами может быть расположена стрелка геолокации и анимированная точка над индикаторами состояния, чтобы показать активность сети.
Вы можете объединять и менять местами индикаторы состояния. Смахнув вниз правую сторону, в пункте управления строки вы увидите все статусные элементы и процент заряда батареи.
Строка состояния входящего вызова, которая ранее удваивала высоту строки состояния, теперь отображается в форме простой кнопки вокруг часов. Запись и использование служб геолокации в фоновом режиме отображаются таким же образом, в виде красной и синей кнопок соответственно.
В режиме редактирования домашнего экрана для перетаскивания иконок индикаторы состояния заменяются кнопкой «Готово».
Что не стоит делать
Не используйте строку состояния для анимированной радуги, вылезающей из-под выреза.
Не используйте вырез в качестве элемента пользовательского интерфейса.
Не используйте его как спиннер обновления страницы.
Я конечно понимаю, что вам всем тут не угодишь (привередливые больно стали), но на всякий случай продумал тут концепцию айфона без чёлки:
У меня это с этой картинкой проассоциировалось почему-то
Странно, что они сами не додумались.
Верхней частью можно было бы вставлять в розетку (заряжать как Apple Pen)
Более того, удобно было бы пивко открывать!
Apple Beer с тач айди на крышке. Чтобы ваше пивко могли открыть только вы
что такое Apple Pen?
Если сделать ее выдвигающейся когда нужно, будет меньше нытиков)
Цукерберг не позвонит, а вот Кук вполне может!
Да вы что?? Именно так и нужно делать!1!1
https://leonardo.osnova.io/0d29901d-d13e-997e-0535-de0d285e7c7c/
Одни сделали трэш, а другие с умным видом учат что с этим делать, посмеялся.
нам же с вами надо это как-то пережить(
Зачем переживать, когда можно купить Восьмую Галактику в 3 раза дешевле.
зачем переплачивать за галактику, когда можно купить лудший телефон в 3 раза дешевле.
Сомневаюсь, что вы за эти деньги найдете телефон, характеристики которого по всем параметрам луДше чем у айфона Х.
Комментарий удален модератором
"Не используйте вырез в качестве элемента пользовательского интерфейса." - по-моему так делать и нужно
Короче есть план.
1) перестаём называть это челкой
2) начинаем называть это «усы Адольфа»
3) общественность бойкотирует Аппле
4) Кук сдаётся под натиском и убирает усы
5) дизайнеры ликуют и ждут плашку снизу экрана
Такое ощущение что они это сделали именно ради хайпа популярного ныне, ради вот таких вот статей, что с этим делать. Аналогично можно сделать какой-нибудь iУнитаз со стульчаком, оклееным наждачной бумагой и обсуждать как удобнее на него усадить свой зад.
Это треш.
P. S. Вариант с пользовательским интерфейсом и иконками меню наоборот показался самым годным, он хотя бы скрывает эту убогость.
Где же старый добрый Стив Джобс, его так не хватает
Комментарий удален модератором
Ситуация с чёлкой напоминает басню Крылова Мартышка и очки. И так они эту чёлку вертят и сяк, и не поймут зачем эта чёлка.
А разгадка проста. Из-за того, что дизайнеры решили не удлинять телефон или укорачивать экран, они взяли и разместили на экранном пространстве сенсоры и динамик. А могли бы просто всё это дело сделать как в Galaxy S8 (разместить над экраном) и проблем бы не было. Не пойму в чём проблема.
Ещё несколько инструкций по онанизму с ушком
Комментарий удален модератором
Комментарий удален модератором
Комментарий удален модератором
Ушка?!
Комментарий удален модератором
на "в кафе" кредит не возьмешь. Хотя тиньков поможет.
Комментарий удален модератором
Ох уж эти ушки, я лучше куплю безуший смартфон Aermoo M1, зато защищенный и с беспроводной зарядкой.
новые идеи всегда хорошо))))
Комментарий удален модератором
Комментарий удален модератором
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