iPhone X відрізняється від попередніх моделей великим закругленим екраном з ширшим спектром кольорів і технологією розпізнавання обличчя власника — Face ID.
Apple вже випустила Human Interface Guidelines для iPhone X. У цій статті я хотів би окреслити основні нюанси UI & UX для iPhone X згідно з рекомендаціями від Apple.
1. Якщо ваша аплікація приховує статус бар, Apple радить переглянути це рішення. Адже iPhone X має більше вертикального простору, а статус бар знаходиться у тій зоні, яку аплікація, напевно, не буде використовувати.
2. Пропорції екрана iPhone X не збігаються з іншими моделями. Так, якщо ви використовуєте одне і те саме зображення для фону, воно може виявитися обрізаним або не поміститися на екран.
3. Apple радить уникати явного розміщення інтерактивних контроліву найнижчій зоні екрана та в кутках. Адже найнижчу зону екрана користувачі будуть застосовувати для жестів, що повертають на Home screen та дозволяють переключатися між аплікаціями. А взаємодіяти з елементами у кутках екрана може бути просто незручно.
4. По можливості використовуйте системні елементидля побудови UI. Системні UITabBarController, UINavigationController, UITableView та UICollectionView автоматично адаптуються під особливості кожної моделі iPhone.
5. Зробіть відступи.Екран iPhone X займає всю передню панель пристрою без відступів до країв, але для зручності користувача певні відступи маєте передбачити ви у своїй аплікації. Якщо це можливо, не туліть значущий контент аж до країв екрана: сконцентруйте його у так званій safe area.
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.Зверніть увагу на те, що ви не повинні дублювати ці кнопки у своїх кастомних клавіатурах.
I think I’ve fixed the notch issue in landscape :champagne: #iphoneXpic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) September 13, 2017
На написання цієї статті мене надихнув жартівливий твіт вище від програміста Vojta Stavic, що облетів інтернет після презентації iPhone X. Він підняв питання дизайну для фаблета з непрямокутним дисплеєм. Тепер ми з вами знаємо, що значущий контент має бути вписаний у прямокутник. І знаємо ще багато іншого про те, як розробляти під iPhone X.