iPhone X докорінно змінив дизайн додатків. Завдяки його унікальному формату та новим елементам користувацького інтерфейсу дизайнери повинні проявляти більше гнучкості та креативності, щоб створювати вражаючі додатки. Цей покроковий посібник пояснює, як за допомогою Sketch адаптувати свій дизайн до вимог iPhone X.
Основні висновки
- Висота екрану iPhone X становить 812 пікселів, що створює простір для нових елементів інтерфейсу.
- Навігація та панель вкладок розташовані вище і вимагають коригування макета.
- Важливо враховувати безпечну зону, щоб контент не потрапляв в округлу область дисплея.
- Індикатор "Додому" - це новий елемент інтерфейсу, який потрібно враховувати в дизайні.
Покрокове керівництво
Почніть зі створення нового дизайну iPhone X в Sketch. Натисніть A, щоб додати новий елемент, а потім натисніть на дизайн iPhone X.
Ширина залишиться на рівні 375 пікселів, а висота - 812 пікселів. Це дає вам більше простору для розробки користувацького інтерфейсу. Майте на увазі, що закруглені кути екрану важливі для макета.
Скопіюйте домашній контролер і налаштуйте дизайн. Бажано використовувати не стандартні бібліотеки, а спеціальну бібліотеку iPhone X для більш точного налаштування. Перейдіть до налаштувань у Sketch та активуйте бібліотеку iOS 11, якщо вона ще не доступна.
Додайте стандартну панель навігації, щоб зробити інтерфейс уніфікованим. Переконайтеся, що висота навігаційної панелі становить 88 пікселів порівняно з 44 пікселями в iPhone 8.
Знайдіть рядок стану в бібліотеці iOS 11 і також додайте його. Він повинен бути розміщений у верхньому краю екрану.
Те ж саме стосується панелі вкладок: виберіть з бібліотеки iOS 11 версію з трьома вкладками і переконайтеся, що вона має висоту 83 пікселі, щоб добре вписувалася в макет.
Переконайтеся, що жодні елементи не виступають в округлу область в дизайні. У програмуванні це називається Safe Area Layout Guide - це простір, необхідний для безпечного перегляду.
Додайте індикатор дому як невід'ємну частину дизайну. Його слід розмістити в центрі нижнього краю.
Після того, як ви додали основні елементи, ви можете скопіювати і вставити весь розділ у потрібне місце. Не забудьте відрегулювати інтервали після копіювання.
Повторіть цей процес для контролера чату. Зробіть копію дизайну і перейменуйте його відповідним чином.
Замініть іконки для вкладок і налаштуйте відображення. Важливо ретельно підібрати правильні символи і тексти.
Зверніть увагу на інтервали, особливо між бульбашками чату та панеллю вкладок. Дотримуйтесь відстані в 16 пікселів, щоб елементи добре гармоніювали один з одним.
Ці кроки показують, як швидко ви можете адаптувати свій дизайн до нового формату. Однак, якщо щось залишиться незрозумілим, не проблема просто доопрацювати дизайн.
У наступному уроці ви дізнаєтеся, як працювати з додатковими ефектами в області профілю, включаючи використання ефектів розмиття.
Резюме - Ефективний дизайн iPhone X в Sketch
Адаптація ваших проектів до iPhone X відкриває нові можливості. При правильному розумінні нових форматів екрану і елементів інтерфейсу ви зможете створювати приголомшливі користувальницькі інтерфейси.
Поширені запитання
Яка висота екрану iPhone X?Висота екрану iPhone X становить 812 пікселів.
Як налаштувати панель вкладок? Панельвкладок повинна мати висоту 83 пікселі, щоб добре працювати в макеті.
Що потрібно враховувати при розробці дизайну?Переконайтеся, що безпечна зона та елементи не виступають за межі заокруглених областей.
Як внести зміни в Sketch? Скопіюйтеіснуючі елементи контролера та налаштуйте їх за допомогою бібліотеки iOS 11.
Чи потрібно налаштовувати панель навігації?Так, панель навігації має висоту 88 пікселів і повинна бути налаштована для візуальної узгодженості.
