Офтоп Vladislava Rakhmanova
5 853

Особенности разработки приложений для iPhone X

Дизайнер Владимир Клименко опубликовал перевод статьи из блога Niels, основанной на рекомендациях Apple.

В закладки

Новый iPhone X официально презентован и поступит в продажу 3 ноября 2017 года. Модель отличается безрамочным дисплеем Super Retina с разрешением в 1125×2436 пикселей. Также в ней предусмотрена небольшая выемка вверху экрана, в которой спрятаны высокотехнологичные датчики для работы системы Face ID.

Разработка дизайна для этого устройства вызовет некоторые трудности, но вместе с тем предоставит и новые возможности. Ширина модели в портретном режиме такая же, как и у iPhone 6, 7 и 8, но телефон выше на 145 пикселей, что в результате дает примерно на 20% больше вертикального пространства.

При разработке макетов для разрешения @1x разрешение артборда составит 375×812 пикселей. Благодаря новому дисплею Retina дизайнерам не придётся экспортировать изображения в разрешении @2x, как для iPhone 8, а только в @3x, как для iPhone 7-8 Plus.

Создавая дизайн, стоит быть особенно внимательным к тому, чтобы не исказить новый интерфейс из-за уникальных свойств устройства: скруглённых углов, выемки вверху экрана и индикатора «Домой». К слову, этот индикатор — тонкая линия внизу экрана, которая полностью заменяет физическую кнопку. Вернуться на домашний экран или перейти в другое приложение можно при помощи жестов.

Белая линия внизу — новый индикатор «Домой»

Если приложение задействует нативные компоненты iOS-системы, будет проще, так как оно само адаптируется под новый iPhone. И панели навигации, и таблицы, и плитка, и закладки будут вставлены и спозиционированы автоматически.

Дизайн для iPhone 8 — слева, автоматически адаптированный для iPhone X — справа

При использовании кастомной сетки приложение придётся адаптировать к новой раскладке экрана самостоятельно. Тем не менее, если вы задействуете Auto Layout, сделать это можно относительно просто.

Что нужно учесть

Для начала примите дизайн нового смартфона. Дизайнеры Apple не для того так много работали, чтобы вы спрятали ключевые особенности этого дорогого устройства.

Не забывайте задействовать весь экран. Элементы должны прокручиваться до самого конца экрана — даже за его скругленные края. Apple также настаивает на том, чтобы разработчики не скрывали верхнюю выемку и скругленные края внизу, поэтому не стоит добавлять чёрные рамки, чтобы смартфон выглядел как прежний iPhone 8.

Центрируйте и отделяйте важную информацию. Важный контент должен быть отцентрирован. Используйте симметричные поля, чтобы интерфейс не был в итоге обрезан сенсорами или углами устройства. Например, при задействовании Auto Layout контент будет автоматически размещён так, чтобы ничего не осталось спрятано за углами, сенсорами или индикатором «Домой».

Новая строка состояния. Из-за сенсоров в верхней части дисплея новая строка состояния разделена на две части. Если ваш действующий интерфейс занимает это пространство (ранее высотой 20 пунктов, сейчас — 44), то вам необходимо обновить его, посколько на iPhone X он будет выше. К счастью, его высота не будет меняться во время звонка или использования навигационного приложения, как в случае с другими моделями iPhone.

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

Показывайте новую строку состояния. Если до сих пор вы её прятали, то теперь Apple просит вас пересмотреть подобное решение. Поскольку экран выше, а его площадь, соответственно, больше, строку состояния можно не скрывать. Отображаемая на ней информация может быть полезна пользователю, к тому же, в большинстве случаев это место не занято другими элементами интерфейса.

Полноэкранные изображения. Если в дизайне вы используете полноэкранные изображения, их тоже придётся обновить для нового iPhone. При новых параметрах они могут быть обрезаны, из-за чего какая-то часть окажется скрыта от пользователей.

Не размещайте интерактивные клавиши внизу экрана. Пространство вокруг индикатора «Домой» создано исключительно для жестов. Размещение кнопок рядом с ним и в нижних углах — не самая лучшая идея, поскольку  пользователь может случайно кликнуть на кнопку «Домой». Закладки и функциональные панели не должны мешать главному индикатору.

Не прячьте индикатор «Домой» — во всяком случае постоянно. iOS позволяет скрывать индикатор «Домой»: функция прячет его автоматически, если пользователь не трогает экран в течение нескольких секунд. При этом, как только он его коснётся, индикатор появится вновь. Также он может автоматически менять цвет в зависимости от фона открытого приложения.

Больше цветов. Новый дисплей Super Retina поддерживает цветовую модель P3 вместо sRGB, что обеспечивает более богатую палитру и более насыщенные цвета.

Будьте внимательны при использовании жестов. С исчезновением физической кнопки пользователи взаимодействуют с iPhone, используя только жесты. После свайпа вверх они попадают на домашний экран. Совершая свайп вправо или влево, они переключаются между приложениями. При помощи свайпа сверху вниз они попадают в Control Center.

Вы также можете придумать собственные значения для жестов, которые переопределят стандартные действия iOS. Сделать это можно при помощи функции Edge protect. Однако использовать такую возможность следует разумно и экономно, поскольку замена жестов затруднит применение функций системы для пользователя.

Face ID. Предыдущий iPhone обладал функцией Touch ID, сенсор которой располагался в кнопке «Домой». Поскольку Apple отказалась от неё в новой модели, на замену пришла более продвинутая и безопасная технология Face ID, которая задействует сложные алгоритмы по распознаванию лица, чтобы разблокировать устройство.

Это обуславливает развитие нового пользовательского опыта. Постарайтесь соответственно переориентировать интерфейс для владельцев iPhone X. В своих приложениях полностью откажитесь от технологии Touch ID и замените её на Face ID.

Кастомные клавиатуры. При разработке собственного дизайна клавиатуры не стоит отдельно включать в неё кнопки эмодзи или диктовки — они будут добавлены автоматически под клавиатурой по бокам от индикатора «Домой».

Навигационные панели стали больше. С выходом iOS 11 дизайн стандартных навигационных панелей изменился — они стали намного выше. Такой внешний вид панелей будет особенно хорошо смотреться на высоком iPhone X и удачно сочетаться с новой строкой состояния. Также изменится и анимация при прокрутке панелей.

Кратко

  1. iPhone X на 145 пунктов выше предыдущей модели, так что разрабатывайте дизайн на артборде в 375×812 pt вместо 375x667 pt.
  2. iPhone X использует масштабирование @3x.
  3. Создавайте полноэкранные приложения, не прячьте уникальные свойства устройства.
  4. Центрируйте важные части UI, чтобы исключить возможность перекрытия их сенсорами или углами устройства.
  5. Новая строка состояния, разделённая на две части, стала в два раза выше — 44 пункта вместо 22.
  6. Необходимо обновить полноэкранные изображения, чтобы они корректно отображались на новом экране.
  7. Не добавляйте кнопки внизу экрана рядом с индикатором «Домой».
  8. Скрывайте индикатор «Домой» только тогда, когда это действительно необходимо.
  9. Используйте богатую палитру насыщенных цветов, которая обеспечивается благодаря новому дисплею Super Retina.
  10. Аккуратнее внедряйте кастомные жесты возле строки состояния и индикатора, не мешайте пользователю применять стандартные жесты iOS.
  11. Face ID заменяет Touch ID — проведите соответствующее обновление интерфейса.
  12. Кастомным клавиатурам больше не нужны кнопки эмодзи и диктовки.
  13. Навигационные панели стали больше и теперь лучше анимированы.

#Интерфейсы

Статьи по теме
Apple представила iPhone X с распознаванием лиц и без кнопки Home
{ "author_name": "Vladislava Rakhmanova", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 18, "likes": 24, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 26509, "is_wide": false, "is_ugc": false, "date": "Mon, 18 Sep 2017 14:11:40 +0300" }
{ "id": 26509, "author_id": 75278, "diff_limit": 1000, "urls": {"diff":"\/comments\/26509\/get","add":"\/comments\/26509\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/26509"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791, "possessions": [] }

18 комментариев 18 комм.

Популярные

По порядку

Написать комментарий...
5

Блджад, вот почему не так сделать? Если название папки слишком длинное - переносить, но нафига эти отступы по дефолту?

Ответить
1

Потому, что "теперь у нас на 20% больше вертикального пространства".

Ответить
1

При скролле он таким и становится.

Ответить
4

Не делайте дизайн приложения как у ПРЕЖНЕГО iPhone 8...который не вышел ещё даже. Сильно конечно.

Ответить

5

Сейчас модно инновации ради инноваций, а не для удобства.

Ответить
0

пользоваться тачскрином в VW в тысячу раз удобнее, чем миллионом кнопок в Opel'е

Ответить

0

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

Ответить

1

У меня в рено сенсорная мультимедийка, все устраивает в принципе.
Только вот регулировка звука кнопочная, а я бы предпочел крутилку, желательно побольше )))

Ответить

1

"тачскрин - это круто, но для некоторых функций нужны кнопки" - это не то же самое, что "скорее бы вернулись кнопки и умерли жесты".

для громкости и некоторых других вещей, кнопки-крутилки нужны, тут нет сомнений.

Ответить

1

блдаж, раньше хоть масштабированное и кратное изменение разрешений было, теперь вообще все по другому для десятки надо отдельно делать(

Ответить
1

Хочу уровень заряда в процентах.

Ответить
1

Так, теперь получается, что в игре случайно свайпнешь не там где надо, и игра свернется? А если нет, то как быстро свернуть полноэкранную игру?

Ответить
0

А как теперь будет работать функция вернутся в предыдущее приложение? (Название приложения вместо значка сети и название оператора)
Или ее совсем выпилили так как приложения теперь свайпом закрывается?

Ответить
1

свайпом влево на нижней панели, если я правильно понял

Ответить
0

Я правильно понимаю, что если переопределить системный жест свайпа вверх, то из приложения можно будет выйти только перегрузив телефон? Или я что-то упускаю?

Ответить
1

Идея интересная. Если они только не предусмотрели это. Например для нижней части экрана в принципе нельзя добавить слой с распознаванием жестов, добавляешь а он выдает ошибку. Типа нельзя

Ответить
0

Там они говорят про какой-то edge protect, с которым можно работать. Но там я пока не разбрирался, как он работает. То ли на второй раз все равно системный жест дергается, то ли что.

Ответить
0

Какая-то дичь

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }