×Закрыть

Нюанси UI & UX для iPhone X

iPhone X відрізняється від попередніх моделей великим закругленим екраном з ширшим спектром кольорів і технологією розпізнавання обличчя власника — Face ID.

Apple вже випустила Human Interface Guidelines для iPhone X. У цій статті я хотів би окреслити основні нюанси UI & UX для iPhone X згідно з рекомендаціями від Apple.

Image Source

1. Якщо ваша аплікація приховує статус бар, Apple радить переглянути це рішення. Адже iPhone X має більше вертикального простору, а статус бар знаходиться у тій зоні, яку аплікація, напевно, не буде використовувати.

2. Пропорції екрана iPhone X не збігаються з іншими моделями. Так, якщо ви використовуєте одне і те саме зображення для фону, воно може виявитися обрізаним або не поміститися на екран.

3. Apple радить уникати явного розміщення інтерактивних контролів у найнижчій зоні екрана та в кутках. Адже найнижчу зону екрана користувачі будуть застосовувати для жестів, що повертають на Home screen та дозволяють переключатися між аплікаціями. А взаємодіяти з елементами у кутках екрана може бути просто незручно.

4. По можливості використовуйте системні елементи для побудови UI. Системні UITabBarController, UINavigationController, UITableView та UICollectionView автоматично адаптуються під особливості кожної моделі iPhone.

5. Зробіть відступи. Екран iPhone X займає всю передню панель пристрою без відступів до країв, але для зручності користувача певні відступи маєте передбачити ви у своїй аплікації. Якщо це можливо, не туліть значущий контент аж до країв екрана: сконцентруйте його у так званій safe area.

Image Source

6. Нехай ваш контент буде обмежений прямокутником. Хороша практика — вирівняти контент по прямій лінії зі всіх боків. Зокрема і в горизонтальній орієнтації, де немає статус бара: має бути передбачений відповідний відступ з того боку, де екран не є прямим.

7. Уникайте конфлікту з системними жестами. Користувачі очікують, що ці жести будуть приводити до однакового результату незалежно від того, яка аплікація відкрита. Swipe від нижньої межі екрана догори дозволяє змінити поточну аплікацію або відкриває Home screen. Swipe від верхнього правого кута екрана донизу відкриває Control Center, від верхнього лівого — Notifications. Виключення можливе для ігор, але це небажано.

8. Індикатор, що нагадує про те, як доступитися до Home screen iPhone X, завжди розміщений внизу екрана поверх вашої аплікації. Не можна ховати закруглені кутки та цей індикатор, замальовуючи їх чорним кольором. Також не можна спеціально виділяти їх будь-яким чином.

9. Дозволяйте автоматичне приховування індикатора доступу до Home screen, тільки якщо це справді необхідно. Наприклад, ви створюєте аплікацію для перегляду відео чи світлин. У такому випадку індикатор буде прихований після того, як користувач кілька секунд не буде взаємодіяти з екраном. І знову з’явиться, тільки-но користувач доторкнеться до екрана.

10. Дисплей iPhone X підтримує кольоровий простір P3, який відрізняється від sRGB більш насиченою кольоровою гамою. Враховуйте це при створенні вашої аплікації: ви можете використовувати ширший вибір кольорів.

11. iPhone X використовує для авторизації Face ID. Не забувайте про це і не вимагайте Touch ID від користувача iPhone X, адже Touch ID тут просто немає. І навпаки: не вимагайте Face ID на попередніх версіях iPhone.

12. Усі клавіатури на iPhone X, включаючи кастомні, за замовчуванням завжди містять кнопки Emoji та Dictation. Зверніть увагу на те, що ви не повинні дублювати ці кнопки у своїх кастомних клавіатурах.

На написання цієї статті мене надихнув жартівливий твіт вище від програміста Vojta Stavic, що облетів інтернет після презентації iPhone X. Він підняв питання дизайну для фаблета з непрямокутним дисплеєм. Тепер ми з вами знаємо, що значущий контент має бути вписаний у прямокутник. І знаємо ще багато іншого про те, як розробляти під iPhone X.

LinkedIn

12 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Bored programmer built an app that puts the iPhone X notch on any Android phone
thenextweb.com/...​ne-x-notch-android-phone

С вырезом в экране они зря, имхо

Скругленные края это огромная проблема! Большинство современных плоских дизайнов приложений с нарочито прямоугольными формами будут смотреться как минимум странно

На S8 смотрятся все приложения нормально потому что вверху статус-бар, а внизу навигационная панель (с кнопками домой, назад и списком приложений). Поэтому для приложений остается прямоугольная область. А если приложение делается полноэкранным, то оно учитывает что там за экран.

— where I can buy iphone X (eks)?
— its called iphone ten
— ok, can I use TenCode to develop on it?
— its called XCode (eks code)
boom (brains exploded)
© somewhere from twitter

зачем это сделали? бракованый телефон какой-то

Swipe від нижньої межі екрана догори дозволяє змінити поточну аплікацію або відкриває Home screen. Swipe від верхнього правого кута екрана донизу відкриває Control Center, від верхнього лівого — Notifications

grumpy.website/post/0OiJ3h1P9

Таки да, чем-то надо жертвовать ради эффектного дизайна

Вернуть физические кнопки

Спасибо, прямо мысли мои прочитали и написали этот пост)
А то очень лень было лезть в документацию эпла)

Подписаться на комментарии