Як робити дизайн для iPhone X

X (читати: 10) з’явиться 3 листопада. Він матиме Super Retina Display із вирішенням 1125 × 2436 пікселів. У верхній частині екрана також є вигнута ділянка, з футуристичними функціями розблокування обличчя.

Проектування для цієї чудової машина принесе деякі нові виклики, а також деякі нові можливості дизайнерам. Ширина пристрою в портретному режимі така ж, як і в iPhone 6, 7 і 8, але на 145 пойнтів вища, що створює більше вертикального простору на ± 20%. При дизайні на @1x вам потрібний артборд 375 × 812 пікселів. Ви не будете експортувати зображення @2x, як для iPhone 8, а @3x, як для iPhone 7-8 Plus, через новий дисплей Retina (який тепер буде насправді @3x).

Створюючи свій дизайн, ви повинні переконатися, що не затуманюєте ваш інтерфейс унікальними функціями пристрою (круглі краї, вигин у верхній частині та домашній індикатор). До речі, “індикатор додому” – це невелика лінія, яка живе у нижній частині екрана, вона замінює традиційний “хоум баттон”.

Тут добре видно “індикатор додому”

Якщо у вас зараз є додаток, що використовує компоненти iOS, все буде добре, і ваш додаток вже буде адаптований для цього нового iPhone. Всі елементи будуть автоматично вставлені та розміщені.

Якщо ви використовуєте якусь унікальну верстку, можливо, потрібно буде оновити додаток до нового екрану. Проте, якщо користуватися Auto Layout, це має бути досить простим завданням.

Давайте перейдемо до практики!

Переконайтеся, що ви створили повноекранний режим роботи. Нехай scroll view прокручуюється до самого нижнього краю екрана. Apple люб’язно просить вас не ховати виріз на вершині і вигнуті краї внизу, тому не розміщуйте чорні смуги, щоб вони виглядали як звичайний олдскульний iPhone 8.

Розміщуйте важливу інформацію по центру симетрично. Переконайтеся, що важливий контент вирівняно по центру та він має симетричні відступи, тому користувацький інтерфейс не обрізався датчиками чи кутами пристрою. Якщо ви використовуєте функцію auto layout ваш контент автоматично розміщується в безпечній зоні, тому ваш дизайн не буде прихований за кутами, датчиками або домашнім індикатором.

Новий status bar. Через сенсори на верхній частині дисплея новий статус бар розділений на 2 частини. Якщо ваш інтерфейс робить щось особливе з цим простором (раніше 20pt висотою, тепер – 44pt), вам доведеться оновити ваш інтерфейс, оскільки він буде вищим на .

Зробіть, щоб його можна було динамічно змінювати у висоту. Гарна новина, що статус бар не буде змінювати висоту, якщо користувач телефонує або використовує навігацію, що раніше було на iPhone.

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

Користувачі можуть побачити важливу інформацію там, тим більше, що цей простір не буде використовуватися іншими елементами UI.

Зображення на весь екран. Якщо ви зараз використовуєте повноекранні зображення у вашому дизайні, вам доведеться оновити їх для нового iPhone. Вони можуть бути обрізані або важлива візуальна частина може бути прихована:

Незабаром читайте продовження у нашій рубриці Туторіали!

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь