Як дизайнеру створити свій перший VR-інтерфейс за 5 хвилин (Частина 3)

Співзасновники дизайн-студії Kickpush Сем Епплбі (Sam Applebee) і Алекс Деруетт (Alex Deruette) розповіли, як застосувати досвід проектування традиційних додатків до дизайну інтерфейсів для віртуальної реальності ().

А DesignTalk.club традиційно зробив адаптивний переклад цього діла українською 😉

Частина 3

Другу частину можна прочитати тут

Процес проектування крок за кроком

Цей розділ являє собою короткий посібник з розробки VR-інтерфейсу. Разом ми за п’ять хвилин може зібрати простенький інтерфейс.

Завантажте набір ассетів з окремими елементами UI і фоновим зображенням. Можете використовувати власні ассети.

Встановіть «360 View»

Розпочнемо з самого початку. Створимо область з 360-градусним оглядом. Відкрийте в новий документ і створіть монтажну область 3600×1800 пікселів.

Імпорт файл під ім’ям background.jpg і помістіть його в середині цієї області. Якщо ви використовуєте свій власний рівнопроміжний фон, переконайтеся, що його пропорції – 2:1, а потім змініть розмір на 3600×1800 пікселів.

Встановіть монтажну область

Як зазначено раніше, «UI View» – це коротка версія «360 View». Вона потрібна, щоб ми могли сфокусуватися на VR-інтерфейсі. Створіть нову область 1200×600 пікселів поруч з попередньою. Потім скопіюйте фон, який ми щойно додали до нашої області «360 View», і помістіть його в центр. Не міняйте його. Нам потрібно зберегти цю обрізану версію фону.

Створіть інтерфейс

Ми будемо створювати інтерфейс на полотні «UI View». Щоб не ускладнювати завдання, вибудуємо в ряд кілька карток-плиток. Можна просто взяти файл tile.png в пакеті ассетів і перетягнути його в центр області «UI View».

Повторіть ваші дії, щоб отримати ряд з трьох плиток. Після цього візьміть kickpush-logo.png з пакета ассетів і помістіть його між плитками.

З’єднайте і експортуйте ваші полотна

Тепер трохи повеселимося. Переконайтеся, що в списку шарів область «UI View» знаходиться над «360 View». Помістіть панель «UI View» в середину панелі «360 View». Експортуйте панель «360 View» в форматі PNG – тоді «UI View» виявиться зверху.

Протестуйте в VR

Відкрийте GoPro VR-плеєр і перетягніть туди експортовану вами область «360 View» в форматі PNG. Мишкою перемістіть це зображення на місце превью 360-градусного середовища. Готово.

Якщо у вас встановлений Oculus Rift, GoPro VR Player повинен його знайти, і тоді ви зможете зробити прев’ю зображення за допомогою вашого VR-пристрою. Можливо, доведеться повозитися з настройками екрану в MacOS, це залежить від вашої конфігурації.

 

На що потрібно звернути увагу

Низьке вирішення

Вирішення у VR-гарнітура досить погане. Втім, це не зовсім правда: воно таке ж, як на вашому телефоні. Якщо ви піднесете його на відстані п’яти сантиметрів від ваших очей, екран буде виглядати розмито. Щоб ОТРИМАТИ чітке VR-зображення, для КОЖНОГО ОКА потрібен екран розміром 8к, тобто 15360×7680 пікселів. Поки що ми від цього далекі )))

Читабельність тексту

Через незьке вирішення екрану, всі UI-елементи які спочатку чіткі, будуть здаватися зернистимим. Це ускладнює читання тексту і робить прямі лінії ступінчастим. Тому постарайтеся уникати використання великих текстових блоків і UI-елементів, що містять дрібні деталі.

Останні штрихи

Карта

Пам’ятаєте процес створення нашого мобільного додатку, який ми адаптували для VR-інтерфейсу? За допомогою наших UI-областей ми організували всі потоки в зрозумілу схему, що допомагає розробникам зрозуміти загальну архітектуру нашої апки.

Motion-дизайн

Створити гарний користувальницький інтерфейс UI набагато легше, ніж анімувати його. Спробуємо зробити це за допомогою двовимірної перспективи, наших дизайнів в Sketch, а також Adobe і Principle. Хоча це ще не тривимірний результат, його можна використовувати в якості керівництва для команди розробників. Та й клієнтам буде легше зрозуміти наше бачення на ранніх етапах процесу.

Ви, напевно, думаєте: «Ну так, це все зрозуміло, але ж VR-додатки можуть бути набагато складнішими». Це дійсно так. Але давайте подумаємо про те, наскільки далеко ми можемо зайти, проектуючи UX і UI для цього нового середовища.

Другу частину туторіала можна прочитати тут

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