В том же духе, что и первая публикация «Дизайн пользовательского интерфейса для iPhone X: Нижние элементы«», эта статья будет посвящена созданию дизайна для iPhone X. В некоторых примерах я использую результаты наших собственных приложений.
Вырез (корпус датчика и камеры)
Вырез (корпус датчика и камеры) в iPhone X
Чтобы говорить об этой теме, сначала нужно обратиться к спору, вызванному вырезом вверху корпуса нового iPhone.
Известный блоггер Джон Грубер сказал: «Это раздражает меня. Это неуклюже и неестественно». А Джошуа Топольски — сооснователь The Verge /Vox Media, пошел еще дальше и высказался так: «Это, попросту говоря, визуально отвратительный элемент».
Независимо от ваших чувств к этому вырезу, реальность такова, что несмотря на стремление к телефону с безрамочным экраном в 2017 году, вам все равно необходимо установить датчики и динамик. Технология скрывать их за экраном здесь не реализована. Мы видели, как разные производители выбирают различные решения этой проблемы. Это выбор Apple, поэтому давайте работать с тем, что мы получили.
Так что мне с этим делать?
Apple пишет в своем руководстве: «Не пытайтесь скрыть закругленные углы устройства, корпус датчика или индикатор доступа к главному экрану, поместив черные полосы вверху и внизу экрана.
В видеоролике «Создавая дизайн для iPhone X», опубликованном Apple после его анонса, Майк Стерн говорит: «Ваше приложение или игра всегда должны заполнять дисплей, на котором они работают. Размещение черных полос в верхней или нижней части экрана заставляет ваше приложение ощущаться маленьким, сжатым и несоответствующим другими приложениям на iPhone X».
Apple решили подчеркнуть тот факт, что экран достигает верхних левого и правого углов устройства. Поэтому рекомендация ясна. Как прилежный пользователь платформы, вы должны следовать их примеру. Таким образом, у вас, вероятно, будет больше шансов, что Apple выделит ваше приложение в App Store или может быть вы даже выиграете премию Apple Design Award.
В конце концов, они избавятся от этого выреза. Это может быть 2, 5 или даже 10 лет, но это временное, а не постоянное дизайнерское решение. А пока относитесь к нему как к должному. Все мы знаем, что он есть, но по большей части вы должны проектировать так, как будто его не существует.
Строка состояния
Из-за выреза в iPhone X строка состояния претерпела значительные изменения.
Хорошо знакомая строка состояния высотой 20 pt, остававшаяся неизменной со времен первого iPhone…
…теперь на iPhone X она высотой 44 pt.
Число 44 pt можно снова встретить в радиусе угла экрана. Это число было с нами с первых дней iPhone, так как квадрат со сторонами в 44 pt использовался для обозначения наименьшей цели касания, в которую можно легко попасть пользователю.
Полосы прокрутки останавливаются до начала радиуса угла экрана. Таким образом, используя фон строки состояния, подобный этому, полосы прокрутки имеют визуальную остановку.
Apple указывает: «Если на данный момент ваше приложение скрывает строку состояния, пересмотрите это решение на iPhone X». Я всегда думал, что приложения, которые скрывали строку состояния, поступали неправильно, поскольку вы скрываете важную информацию от пользователя.
Панель навигации
Индивидуальная панель навигации для Vegourmet. Черные полосы особенно хорошо работают на iPhone X. Вырез под датчики меньше выделяется, а эффект размытия по-прежнему позволяет контенту просвечиваться.
Более высокая строка состояния объединяется с высотой навигационной панели в общую высоту 88 pt. В качестве разработчика вы должны использовать рекомендации Safe Area Layout Guides.
Прозрачная панель навигации
При просмотре рецепта мы разрешаем фото рецепта занимать большую часть экрана, а прозрачная панель навигации — естественный способ сделать это. Эффект хорошо работает и для iPhone X.
Мы используем градиент, разделенный на изображение панели навигации и теневое изображение, для дополнительной высоты и плавного наложения градиента. Путем растягивания изображения панели навигации, то же средство хорошо работает и на старых устройствах.
Карточки
Музыка и Почта — это два примера приложений Apple с карточными интерфейсами, которые оставляют строку состояния на черном фоне. Они используются, чтобы выделить модальность экрана, например, композицию, которая сейчас играет или письмо, которое пишут.
Этот стиль идет вразрез с рекомендациями Apple о том, что пространство должно использоваться экономно и, чтобы контент доходил до углов.
Тем не менее, это хорошо смотрится, когда пользовательский интерфейс сочетается с конструкцией телефона, я всегда так думал.
Большие заголовки
Большие заголовки хорошо работают, чтобы представить раздел вашего приложения. Как правило, его можно использовать на корневом уровне вкладки, но в некоторых случаях это может быть еще более оправдано в навигационной иерархии.
Проблема потери полезного пространства экрана исчезает, как только вы прокручиваете страницу.
Выбор черного пользовательского интерфейса — это один из способов, с помощью которого ваше приложение может лучше сочетаться с корпусом телефона, при этом все еще следуя рекомендациям Apple.
Альбомная ориентация
В альбомной ориентации, согласно Safe Area Layout Guides, добавление к вашему контенту отступов 44 pt с левого и правого края, позволит эффективно избегать как корпуса датчика, так и закругленных углов. А в нижней части экрана создается отступ от кнопки индикатора «Домой».
Ячейки таблицы и цвета фона достигают краев экрана, давая своего рода искусственный полноэкранный режим.
Safari широко использует отступы. По умолчанию с левого и правого края контента будут вставлены отступы 44 pt. Веб-разработчики могут настраивать свои сайты, чтобы достичь краев экрана, если они того пожелают.
Чтобы лучше использовать всю ширину экрана, вы можете посмотреть обновленный пользовательский интерфейс проигрывателя Apple. Его плавающие элементы немного «заправлены» в углы экрана.
Это также отличный пример того, как гармонично сочетать пользовательский интерфейс с углами экрана. Расстояние — 27, плюс радиус элемента управления — 17, равно 44.
Apple Maps поступает также — некоторые элементы управления будут приближаться к краю экрана, но, к сожалению, они не согласуются с радиусом угла экрана.
Если вы поворачиваете устройство на 180 °, элементы управления отталкиваются от корпуса датчика (выреза), что разрушает симметрию. Это не идеальное решение.
Помните, что iPhone X создан на основе телефона с экраном размером 4,7 дюйма и не использует альбомную ориентацию так же широко, как телефоны с приставкой Plus, диагональ экрана которых 5,5 дюйма.
Альбомная ориентация на телефоне такого размера всегда была компромиссом, и, вероятно, большинство пользователей будут использовать ее только для просмотра видео или игр. Меня раздражает, когда приложения разворачивается в альбомную ориентацию, так как мне редко это нужно.
Интересные особенности использования строки состояния
Рядом с часами может быть расположена стрелка геолокации и анимированная точка над индикаторами состояния, чтобы показать активность сети.
Консолидация индикаторов состояния справа имеет смысл, когда вы понимаете, что можете смахнуть вниз правую сторону, чтобы открыть Пункт управления со старой строкой состояния. Это то, что вам нужно сделать, чтобы увидеть все статусные элементы и процент заряда батареи.
Строка состояния входящего вызова, которая ранее удваивала высоту строки состояния, теперь отображается в форме простой кнопки вокруг часов. Запись и использование служб геолокации в фоновом режиме отображаются таким же образом, в виде красной и синей кнопок соответственно.
Режим редактирования домашнего экрана для перетаскивания иконок использует любопытное решение, в котором индикаторы состояния заменяются кнопкой «Готово».
И наконец… Что НЕ стоит делать
Не используйте строку состояния для анимированной радуги, вылезающей из-под выреза.
Не используйте вырез в качестве элемента пользовательского интерфейса …
…и не используйте его, как спиннер обновления страницы.
(Эти примеры взяты не с потолка, подобные идеи существуют…)
Дополнительные материалы и ресурсы
Ценную информацию со справочными материалами и видео вы можете найти на странице Apple «Обновите приложения для iPhone X».
Читайте первую публикацию в серии «Дизайн пользовательского интерфейса для iPhone X: Нижние элементы».
Скачайте мои шаблоны иконок приложений iOS 11 для Sketch, это бесплатно.
Разработка дизайна для нового iPhone X и IOS 11
Нет комментариевПолный разбор дизайна iOS 11: Apple все еще внимательны к деталям?