Разработчики приложений и игр iPhone заполучили смартфоны iPhone X и поделились с нами впечатлениями
Главное для iPhone X — сторонние приложения. От дополненной реальности до сенсора TrueDepth, новые функции должны стимулировать креативность и подтолкнуть к действию сообщество разработчиков, которые выпустят для пользователей iPhone X инновационные новые приложения. Но хотя Apple даёт разработчикам новые игрушки на пробу, она должна при этом убедиться, что не сломала старые.
iPhone X — самое значительное изменение iPhone за несколько лет. У него увеличенное разрешение и иная форма экрана. Он избавился от кнопки Home, добавил новые или изменил старые жесты. Каждое из этих изменений может прибавить работы дизайнерам и разработчикам… а тут ещё вырез (notch). Можно ожидать, что примеру Apple последуют и другие производители смартфонов. Но как обойти эту штуку в дизайне? Насколько сложно адаптировать приложение для неё? Правда ли это, как говорят некоторые критики, пример плохого дизайна?
Чтобы выяснить, я поговорил с дизайнерами и разработчиками приложений и игр для iOS, которые недавно завершили процесс обновления своих приложений для iPhone X. Я хотел задать им некоторые из этих вопросов, но в целом хотелось услышать, как прошёл переход на новый смартфон для всех, кто работает в индустрии.
Приложения от разработчиков в этом обзоре
Alto's Adventure на iPhone X
Agent A на iPhone X
Basecamp на iPhone X
Galley Foods на iPhone X
infltr на iPhone X
Увеличение разрешения
Для начала рассмотрим изменения и проблемы, связанные с дисплеем иной формы и размера, и как Apple рекомендует их решать. Поскольку iOS работает на устройствах с разными разрешениями экрана, Apple и разработчики измеряют пользовательские интерфейсы в «точках» (points), а не в пикселях — что, впрочем, является довольно стандартной концепцией в дизайне. У дисплея iPhone X такая же ширина в точках, как у iPhone 7 и 8 (375 точек), но он на 145 точек выше. Именно по той причине, что iPhone X соответствует обычным iPhone, а не моделям Plus, здесь не поддерживаются интерфейсы расширенного ландшафтного режима, как в моделях Plus.
Дисплей iPhone X, с закруглёнными краями и корпусом датчиков, также известном как вырез. Увеличить.
Приложениям iOS нужно поддерживать разные разрешения ресурсов (assets), чтобы чётко выглядеть на экране каждой модели; для трёх уровней разрешения ресурсов используются знаки @1x, @2x или @3x. Apple рекомендует создавать ресурсы в формате PDF, поскольку он не зависит от разрешения. Если ещё нужны растровые изображения, то их в данный момент нужно предоставлять на разрешениях @2x и @3x, что раньше соответствовало стандартным размерам современных iPhone с ретиной и моделям Plus, соответственно. iPhone X использует @3x.
Никто из разработчиков, с которыми я разговаривал, не выразил никаких проблем с хорошим отображением ресурсов на новом экране. Филиппу Левью, сооснователю компании-разработчика приложения для редактирования фотографий infltr, даже понравился новый подход:
Мы в infltr используем векторные ресурсы, они в PDF. Нам не пришлось производить никаких изменений для iPhone X. Всё работает невероятно. Вам нужен только один ресурс PDF, который будет компилироваться для @1x, @2x, @3x.
Художественный директор Yak & Co Марк Уайт (студия известна приключенческой игрой Agent A) сказал, что его команда тоже хорошо справилась с переносом ресурсов, и он вывел из этого урок, что вам всегда следует ожидать неожиданного и соответствующим образом разрабатывать приложение: «На раннем этапе разработки мы сознательно приложили усилия, чтобы реализовать всё наиболее гибким способом, потому что вы действительно не можете предсказать, какие разрешения или формы экрана появятся в будущем», — сказал он.
Но разрешения iPhone менялись и раньше в рутинном порядке. В iPhone X есть три других изменения, с которыми разработчики раньше не сталкивались. Это закруглённые углы экрана, в то время как у других iPhone углы правильной формы. Спорный вырез — Apple называет его корпусом датчиков — внедрение камеры и другого оборудования на экран сверху посередине. И наконец, новый индикатор Home, который всегда присутствует внизу экрана.
Индикатор Home
Раньше бóльшую часть времени весь экран iPhone принадлежал приложениям — единственными исключениями были строка состояния и уведомления — но сейчас ситуация изменилась. Приложениям пришлось отдать часть своей собственности вырезу вверху и индикатору Home внизу.
Apple уже предлагала набор правил и инструментов под названием Auto Layout, чтобы помочь разработчикам под iOS избежать потенциальных подводных камней с использованием занятых областей экрана на предыдущих устройствах iOS. Компания описывает это следующим образом:
Auto Layout динамически вычисляет размер и положение всех представлений в вашей иерархии представлений на основании их ограничений. Например, вы можете наложить ограничение на кнопку, чтобы она была горизонтально отцентрирована в представлении Image и чтобы верхняя граница кнопки всегда оставалась в 8-ми точках ниже нижней границы изображения. Если изменяется размер или местоположение изображения в представлении, то местоположение кнопки автоматически подстраивается под него.
Разработчикам, которые уже использовали Auto Layout, переход на iPhone X дался гораздо проще, чем тем, кто полагался в основном на нестандартные шаблоны. «Моё приложение использует Auto Layout почти во всём коде вывода на экран, — говорит ведущий программист Galley Foods Крис Андерсон. — Так что мне оставалась только минимальная работа по адаптации приложения к новым пропорциям экрана. Перекомпилируете версию для iOS 11, расставляете инструкции 'if iOS 11' для указания приложению на новую систему безопасной вёрстки, предоставленную Apple, и больше почти ничего не нужно делать».
Так выглядит безопасная область, назначенная Apple, в портретном режиме на iPhone X. Разработчиков предупреждают, чтобы они держали важный контент и элементы UI в пределах зелёной области
Сравнение безопасных областей в ландшафтном режиме на iPhone 8 и iPhone X
В верхней части iPhone X строка состояния больше расширяется вниз, чем на предыдущих iPhone, но её размер больше не меняется
Apple предупреждает не использовать изображения, которые могут неуклюже обрезаться при отображении на других моделях iPhone с иным соотношением сторон
Размещение элементов UI за пределами безопасной области или в углах экрана может вызвать проблемы из-за выреза или закруглённых углов
Поэтому Apple рекомендует переместить элементы UI из углов внутрь безопасной области
Некоторые ресурсы специально созданы для размещения в углу — их нужно переделать для iPhone X. Это особенно актуально для игр, где обычно применяются собственные шаблоны
Apple рекомендует не помещать специально ограничители (back bar) вверху или внизу, из-за чего iPhone X начинает выглядеть как старые айфоны
Apple также запрещает разработчикам каким-либо образом подсвечивать строку с индикатором Home
В iOS 11 компания Apple расширила функциональность Auto Layout с помощью безопасной области (Safe Area). Разработчикам следует размещать контент и критические элементы UI в безопасной области — в тех частях экрана, где они не будут создавать помех аппаратному обеспечению или системному программному обеспечению. Для других моделей iPhone по сути вся видимая область была безопасной. Однако на iPhone X всё сложнее. В портретном режиме безопасная область смещена относительно верхней части видимой области и относительно нижней. Сверху оставляется место для строки состояния и корпуса датчиков, а снизу оставляется широкое пространство для индикатора Home.
Индикатор Home — это тонкая панель, которая почти всегда отображается внизу экрана для напоминания пользователю, что он может смахнуть экран снизу вверх для выхода из приложения или доступа к многозадачному интерфейсу. Поскольку за эту функциональность раньше отвечала кнопка Home под экраном, индикатор в некотором смысле можно рассматривать как новую кнопку Home. Apple позволяет автоматически скрывать индикатор, но только при просмотре пассивного полноэкранного контента, вроде видео.
Как вариант, можно активировать «защиту границы» (Edge Protection). Тогда индикатор не так бросается в глаза, а пользователю нужно сделать два свайпа вместо одного, чтобы смахнуть приложение с экрана. Это рекомендуется в тех случаях, когда свайп снизу вверх является частью базового функционала приложения, хотя очевидно, что такое действие лучше по возможности заменить на другое. Тем не менее Apple рекомендует распространять представления с вертикальной прокруткой до самого низа экрана, несмотря на присутствие индикатора.
Если вы разместили элементы UI вроде кнопок навигации в самом низу экрана, возможно, придётся переместить их, если они находятся за пределами безопасной области. Андерсон из Galley Foods говорит, что несмотря на его относительно простую миграцию, это стало самой большой проблемой в его приложении:
Во-первых, у меня в приложении было много кнопок и действий, прикреплённых к низу экрана; все они потребовали ручного вмешательства (даже с Auto Layout), чтобы линия индикатора не закрывала кнопки. Во-вторых, чтобы интервал нормально выглядел, понадобилось вручную повозиться с шаблонами для iPhone X и других моделей iPhone. И наконец, я до сих пор мучаюсь, как лучше оформить дизайн вокруг индикатора Home. С прикреплённой внизу кнопкой вы можете или распространить цвет кнопки на окружающую часть, или отрезать выше линии. Оба варианта немного страшноваты. Закруглённые края требуют, чтобы вы оставили много пространства выше закругления; так что появляются эти дополнительные границы, которые не очень хорошо выглядят.
Чем буквальнее разработчики соблюдают рекомендуемые Apple правила дизайна, тем легче им совершить переход. Но Anderson всё равно говорит, что по его мнению Apple могла бы предоставить лучшие рекомендации, как поступать с нижней полосой визуально привлекательным способом: «Судя по гигантским ярлыкам и пустым пространством под экранной клавиатурой, я думаю, Apple сама не поняла, как это сделать», — добавил он.
Вырез
В верхней части экрана разработчикам придётся сражаться с вырезом и статусной строкой. Последняя больше не меняет свою высоту в зависимости от различных фоновых задач, вроде картографических сервисов или входящих вызовов. Но она в любом случае выше, чем старая. Приложения по-прежнему могут спрятать статусную строку и захватить верхнее пространство, но им придётся бороться с закруглёнными краями и, конечно, с вырезом.
Для большинства разработчиков, с которыми я говорил, вырез не доставил никаких хлопот: «Я думаю, вырез подчёркивает обновлённый стиль iOS 11 с очень высокой статусной строкой, короткими и толстыми заголовками, — сказала нам дизайнер Basecamp Тара Манн. — Вырез выглядит тем лучше, чем больше вокруг негативного пространства».
Чтобы избежать корпуса сенсора, тоже следует придерживаться безопасной области и выполнять рекомендации по дизайну от Apple. Для приложений, которые полагаются на стандартные практики Auto Layout от Apple, вышеупомянутое расширение фонового материала пройдёт безболезненно, даже если кнопки навигации прикреплены к углам. Но в играх почти всегда используется оригинальный UI, так что если у кого и возникнут проблемы, так это у разработчиков и дизайнеров игр. С другой стороны, Райан Кэш (диретор студии Snowman) сказал, что проблемы не слишком затронули Alto's Adventure.
Дизайн с учётом нового корпуса датчиков был несложным. Alto's Adventure может рендерить свой мир на любом соотношении сторон, а корпус датчиков не пересекается с критическими элементами геймплея (такими как сам Альто), так что нет никаких препятствий, вызывающих непосредственную озабоченность. После того, как мы установили значения для края экрана, чтобы UI находился подальше от краёв, всё стало выглядеть хорошо.
Но вот Марк Уайт сказал, что в Agent A пришлось произвести некоторые изменения. На самом деле пришлось иначе структурировать игровой UI: «В Agent A используется док с предметами, которые собирает игрок; этот док был прикреплён к краю экрана, вместе с некоторыми кнопками UI, — объясняет он. — Чтобы соответствовать новым правилам пришлось немного переосмыслить наши шаблоны, и в итоге пришлось многое упростить».
Он говорит, что разработчики и так хотели упростить интерфейс, так что рады появившейся возможности.
Чтобы соответствовать новым рекомендациям дизайна для iPhone X, в том числе безопасным зонам и полям около углов для всего UI, пришлось переосмыслить наши шаблоны, которые во многом были основаны на прикрепление к краям. Одним из ключевых улучшений стала реализация жеста назад вместо соответствующей кнопки. Мы заметили, что эта штука очень популярна у тестеров благодаря своей интуитивной природе, так что мы полностью исключили кнопку «Назад» из интерфейса.
Дополнительное преимущество очистки пользовательского интерфейс от хлама — то, что прекрасная графика вышла на первый план и больше не закрывается навязчивыми кнопками UI. Новые рекомендации iPhone X заставили нас переосмыслить UX, результатом чего стала лучшая и более красивая игра.
Кроме практических последствий, я спрашивал каждого разработчика об их отношении к шумной критике выреза, который даже называют примером плохого дизайна. Кэш сказал, что его студия не разделяет озабоченности критиков, а они считают выбор Apple образцом продуманного дизайна. «Для Face ID нужна фронтальная камера, но она противоречит цели покрытия экраном всей поверхности, — сказал он. — Такой дизайн представляет собой компромисс, и я думаю, что это хороший выбор».
Как дизайнер, Манн также обозначила это как разумный компромисс:
Вырез вообще меня не беспокоит. Конечно, телефон был бы лучше без него, но его присутствие не препятствует работе с X. Он по-настоящему выделяется только при входе и выходе из приложений, поскольку при навигации по ОС под ним экран. Я наверняка бы выбрала появление Face ID сейчас с вырезом, чем ожидание три года Face ID без выреза.
Так что несмотря на возмущённые крики на некоторых форумах и в социальных медиа, основная масса разработчиков и дизайнеров, с которыми мы говорили, кажутся совершенно равнодушными к вырезу.
Изменённое соотношение сторон
Apple не хочет, чтобы рядом с приложениями присутствовали чёрные полосы, кроме определённого типа видеоконтента, где соотношение сторон, очевидно, нельзя изменить. Но как спроектированные для iPhone X выглядят на iPhone 8, и наоборот?
Если разработчики строго придерживаются Auto Layout и безопасной области, совершенно не используя собственные шаблоны, то приложения будет легко обновить. Во многих случаях фоновый материал расширяется на верхнюю и нижние области в соответствии со стилем оформления, который уже применяется там. Это автоматически перемещает нижние кнопки выше запретительной линии и освобождает индикатор Home, как показано на иллюстрации.
Если разработчики использовали стандартные инструменты UI от Apple, то фоновый материал автоматически расширяется и заполняет экран. Увеличить.
При использовании фоновой графики есть некоторые дополнительные соображения. Фоновая графика, созданная для iPhone 8, будет обрезана слева и справа, если масштабировать её для заполнения экрана, или сверху, если масштабировать для соответствия. Впрочем, Apple рекомендует поставлять фоновую графику, которая соответствует дисплею iPhone X. В этом случае ресурс или будет обрезан сверху и снизу на iPhone 8, или, что хуже, помещён в рамку с чёрными полосками (pillarbox).
Очевидно, это не самый лучший вариант, особенно с учётом того, что ЖК-экран iPhone 8 не способен сделать эти полоски действительно чёрными, чтобы они сливались с корпусом. Поэтому Apple рекомендует дизайнерам компоновать критические графические элементы и UI так, чтобы они сохранились после обрезания на iPhone 8.
Agent A на iPhone X до и после изменений, которые сделала Yak & Co, чтобы контент соответствовал новым рекомендациям
Yak & Co воспользовалась этой возможностью, чтобы разгрузить интерфейс Agent A
В Agent A Уайту и остальным разработчикам игры пришлось произвести некоторые изменения, чтобы приспособиться к увеличению высоты экрана. Игра идёт в ландшафтном режиме, и некоторые сцены не заполняли полностью экран iPhone X в своём изначальном исполнении. «Мы скорректировали около десяти сцен, чтобы расширить их и заполнить пространство, созданное новым разрешением», — сказал он. К счастью, «около 95% игры представляет собой 3D, где значительная часть 3D маскируется в стиле 2D», так что Уайт говорит, понадобилось всего 30 минут работы, чтобы масштабировать несколько сеток.
Alto's Adventure на соотношении сторон iPhone 7
Alto's Adventure на соотношении сторон iPhone X
Basecamp на соотношении сторон iPhone 7
Basecamp на соотношении сторон iPhone X
При адаптации студия Snowman случайно сломала Alto's Adventure на старых моделях телефонов, но проблема была сложнее, чем просто размещение элементов UI не в тех местах. Как объясняет Кэш:
Корневой проблемой стало неправильное значение границы экрана, которое вычислялось на 32-битных устройствах. Alto's Adventure использует Unity, так что пришлось переводить значения с Objective-C на C# с использованием UIKit. Сообщение
-[UIView safeAreaInsets]возвращало структуру UIEdgeInsets. Эта структура в UIKit определяется как четыре элемента `CGFloat`, а `CGFloat` определяется как `float` на 32-битных устройствах, но как `double` на 64-битных. Эквивалентная структура C# всегда ожидает `double`. Упс!
Разработчики быстро исправили проблему и выпустили обновление.
OLED и HDR
В целом, разработчикам или дизайнерам не нужно предпринимать особых усилий, чтобы приложения хорошо выглядели на экране OLED. Мне кажется, что Alto's Adventure выглядит заметно круче на iPhone X, чем на iPhone 7 или 8, так что я спросил Кэша, как им это удалось. Кэш сослался на увеличение экрана до всей поверхности и повышение контраста. «Мы не оптимизировали никакую графику при подготовке обновления», — сказал он и добавил, что разработчики Alto's Adventure ещё не закончили работу по поддержке более широкой цветовой гаммы.
Когда я спросил Манн насчёт новых подходов или возможных последствий, которые OLED несёт для дизайнеров приложений, она упомянула влияние более глубокого чёрного цвета и повышенного контраста на тёмные темы. «Думаю, это позволит создавать довольные классные темы, — сказала она. — Сейчас в нашем приложении нет тёмной темы, но я полагаю, что многие приложения с тёмными темами сделают их темнее, используя более глубокий чёрный, чтобы воспользоваться преимуществами OLED».
Как Apple подготовила разработчиков и дизайнеров
Обычно Apple вводит в курс разработчиков и дизайнеров по поводу важных соображений летом на конференции Worldwide Developers Conference (WWDC). И Apple представила некоторые концепции, которые позже оказались важными для iPhone X, такие как безопасная область. В этом году компания также выложила в онлайне после выпуска iPhone X видеоруководства, где даются дополнительные подробности.
Манн говорит, что её и остальным разработчикам в Basecamp пригодились и другие ресурсы, которые предоставила Apple:
Кроме презентаций, у Apple отличная подборка элементов дизайна, доступная для скачивания; там есть векторные версии всех элементов iOS UI. Мы сумели с высокой точностью составить макеты дизайна для iPhone X даже до его выхода. Конечно, симулятор в Xcode, который также позволяет запустить приложение на iPhone X, но для дизайнера приятно было в реальности начать производить разметку UI на iPhone X, просто чтобы прочувствовать эту логику более высокого экрана.
Ключевой элемент — упомянутый симулятор. Xcode — среда разработки, которую разработчики под iOS обычно используют для создания приложений. Она даёт возможность предварительного просмотра на виртуальном iPhone, который выглядит как окно в «маке». Окно поворачивается в портретный и ландшафтный режимы и в реальности показывает чёрную вставку там, где должна быть врезка в физическом устройстве. Филипп Левью назвал симулятор «отличным» и сказал, что чувствовал себя подготовленным благодаря документации и видеороликам.
«Хотелось от Apple немного большей ясности, когда станет доступной GM-версия iOS и когда нам разрешат подавать приложения, — добавил он. — Например, infltr на полную катушку использует камеру True Depth. Но программные интерфейсы для доступа к камере стали доступны только в версии iOS 11.1». Неопределённость с графиком выхода в чём-то сделала обновление для iPhone X «довольно напряжённым» для команды infltr.
Заключение
Обновление на iPhone X легко могло стать одним из самых трудных для разработчиков приложений, но похоже на то, что Apple хорошо подготовилась. Элегантные решения и важные фундаментальные принципы были изложены на WWDC и в iOS 11, и оставалось только узнать, когда представят сам телефон и когда начнутся продажи.
Ни один разработчик и дизайнер, который согласился на интервью с нами, не высказал никаких проблем насчёт выреза. Глядя на их приложения, а также на другие приложения в App Store, кажется, что больше проблем вызвал индикатор Home, а не вырез. Поддерживаемый индикатором жест по сути соответствует жесту, который открывает Control Center на других iPhone, поэтому неясно, почему Apple сейчас почувствовала необходимость добавить этот индикатор.
Если отойти от вопросов странного дизайна, то всё идёт к тому, что осталось недолго ждать, пока компетентные разработчики обновят свои приложения для iPhone X — если они не станут проявлять чрезмерную креативность с оригинальными шаблонами. А насчёт выреза, это будет не последний телефон с таким компромиссным решением, ничего страшного. Судя по всему, это вовсе не ложка дёгтя, как многие опасались. Пора к нему привыкнуть.
Автор: m1rko
