После презентации iPhone X про фирменный горб не пошутил только ленивый. Но если для обычных пользователей это лишний повод посмеяться и сказать, что Apple уже не торт, то для разработчиков такая «ключевая особенность» — настоящая головная боль.
На самом деле первые попытки приспособиться под новые реалии были предприняты после появления первых слухов. Среди нескольких забавных концептов присутствовали и дельные.
— Прокрутка вокруг горба
I think I’ve fixed the notch issue in landscape ? #iphoneX pic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) September 13, 2017
Дизайнер Vojta Stavik показал, как контент будет огибать островок с датчиками. Неплохой, но не самый универсальный вариант.
— Полоса прокрутки повторяет изгиб выреза
Here’s what the notch would look like on the other side ? #iphoneX https://t.co/2iOlZwr4BG pic.twitter.com/UBcewcYj1x
— Zev Eisenberg (@ZevEisenberg) September 14, 2017
Ещё одна вариация на тему прокрутки от разработчика Zev Eisenberg. Кажется неплохим, особенно на фоне того, что будет на самом деле.
— Скругление углов в портретном режиме
Landscape Notch – Show/Hide? @stroughtonsmith @steipete @jamesthomson @flyosity @drbarnard @agiletortoise @_inside pic.twitter.com/09VfVCMP3w
— Alex Devarty (@devarty) September 14, 2017
Разработчик Alex Devarty пытается усидеть на двух стульях. В портретном режиме — это тот же iPhone X, а в ландшафтном — углы скругляются и островок не мешает.
— Горб, как элемент интерфейса
I was working on this idea of blending app design with the #iPhoneX notch. ?? pic.twitter.com/lj2AhxWNeE
— Luboš Volkov⚡️ (@0therPlanet) September 18, 2017
Дизайнер Luboš Volkov показал крутой концепт того, как можно обратить особенность экрана в свою пользу. Особенно интересна идея вызова доп. панелей свайпом вниз от центра. Жаль, что этот жест уже занят.
Но Apple сразу зарубила все попытки на корню, выпустив своё руководство для разработчиков. В частности, там есть вот такой абзац:
Не скрывайте ключевую особенность дисплея. Не пытайтесь скрыть круглые края устройства, зону датчиков или индикаторов для получения доступа к домашнему экрану, размещая чёрные полосы в верхней или нижней части экрана. Не используйте визуальные украшения, такие как скобки, рамки, фигуры или текст, чтобы обратить внимание на эти области. — Human Interface Guidelines, Apple
То есть нельзя никак обращать внимание на этот островок. Его нет, и точка. Это серьезно ограничивает разработчиков, ведь нам уже показали, как круто можно обыграть зону под датчиками.
И если портретный режим не вызывает особых вопросов, то ландшафтному режиму досталось. Речь не о видео на весь экран — момент спорный, но для разработчиков не самый актуальный.
Вот три основные проблемы:
1. Мёртвые зоны экрана
Да, у этого огромного OLED-дисплея есть несколько мертвых зон. Дело не только в островке наверху, своё место занимает и нижний слайдер возврата в основное меню. Ведь если перевернуть телефон в ландшафтный режим, слайдер все равно должен остаться внизу, а зона под него растягивается на весь экран.
Эти зоны можно закрыть фоном, но разместить там контент либо элементы управления не получится. Придется сдвигать всё к центру.
2. Игры в ландшафтном режиме
Игры можно растянуть на весь экран, но все кнопки и виртуальные джойстики останутся на примерно тех же местах. Элементами внутриигрового интерфейса ситуацию не поправить, поэтому врезка в экран отвлекает и закрывает обзор. Что тут говорить, даже Apple не смогла выбрать приличный скриншот для примера.
Разработчикам всяких шутеров и гонок придется попотеть. А вот Doodle Jump, например, будет классно смотреться.
3. Отображение страниц в Safari
iPhone X renders webpages with literal white bars on the sides pic.twitter.com/ztcWetrLPo
— Thomas Fuchs (@thomasfuchs) September 13, 2017
Любой не адаптированный под iPhone X сайт в ландшафтном режиме отображается с белыми полосами по бокам. Можно настроить background в html-коде, только я уверен, что далеко не каждый интернет-ресурс внесёт соответствующие коррективы.
Режим Reader в Safari – отдельный разговор. Текст реально занимает всю площадь экрана, но со всеми вырезами и закруглениями выглядит так себе.
I think Safari Reader Mode is where #embraceTheNotch is going to distract me the most: pic.twitter.com/7hes3kcAwc
— Steve Moser (@SteveMoser) October 11, 2017
Кстати, знаете как будет двигаться полоса прокрутки, если iPhone X повернуть островком вправо? Как обычно. Просто она будет заезжать под зону с камерой и выезжать снизу:
Don’t worry, the hiding scroll bar is even grosser (top-right corner). pic.twitter.com/6ImBLI9TdM
— Ben Packard (@BenPackard) September 13, 2017
Всё получится
С другой стороны, встречается все больше примеров того, как разработчики и веб-дизайнеры решили этот вопрос:
If this doesn’t make you want to spend $1,000 in November, I don’t know what will. pic.twitter.com/cpgDhQIcxq
— CARROT (@CARROT_app) September 13, 2017
Разработчикам Carrot Weather новый экран не доставил никаких проблем.
Going with rounded corners as a first pass at the PCalc default theme on an iPhone X. pic.twitter.com/N2AnMJAVCZ
— James Thomson (@jamesthomson) September 13, 2017
PCalc закруглили и всё.
Цель этой статьи — не раздуть панику, а рассказать с каким интерфейсом нам придется смириться. Очевидно, что игры в конце концов перерисуют, а сайты адаптируют. Но многие приложения и веб-страницы будут с мертвыми зонами сбоку. Тут либо привыкать, либо заблокировать переход в ландшафтный режим.
Я выберу первое.
Меню из горба – прикольная идея