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

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

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

Частина 2

Першу частину можна прочитати тут

Налаштування

Розмір полотна (канвасу)

Чим простіше проблема, тим важче за неї взятися. Коли дивишся на 360-градусну область, важко навіть збагнути, з чого почати. Як з’ясувалося, UX- і UI-дизайнерам легше зосередитися на конкретній ділянці загального простору.

Щоб застосувати робочий процес для мобільного додатку до розробки VR UI, потрібно визначитися з розмірами «полотна» (канвасу). Для мобільних додатків цей розмір визначається габаритами пристроїв: 1334×750 пікселів для iPhone і приблизно 1280×720 пікселів для Android. А на визначення відповідного розміру для VR у нас пішло кілька тижнів.

На зображенні знизу видно, як виглядає 360-градусне середовище, якщо його розгорнути. Це називається рівнопроміжною проекцією. У віртуальному 3D-середовищі ці проекції розташовуються навколо сфери, моделюючи реальний світ.

Повний розмір проекції становить 360 градусів в ширину і 180 градусів у висоту. Ми можемо використовувати це, щоб визначити піксельний крок: 3600×1800.

Робота на такому величезному полі здається справжнім викликом. Але, оскільки ми заздалегідь прояснили особливості VR-додатків, ми можемо сконцентруватися на окремому сегменті цього полотна.

Спираючись на дослідження Майка Елгара про зручні зони перегляду, ми можемо відокремити ту ділянку, де інтерфейс буде мати сенс. Область нашого інтересу – це одна дев’ята 360-градусного середовища. Вона розміщується в центрі цього рівнопроміжного зображення і займає 1200×600 пікселів.

Тестування

Причина для того, щоб використовувати дві області для одного екрану, криється в зручності тестування. Виділення «UI View» допомагає фокусуватися на самому інтерфейсі і спрощує процес розробки. «360 View» використовується для попереднього знайомства з інтерфейсом в VR-середовищі.

Щоб отримати реальне уявлення про спотворення пропорцій, потрібно протестувати інтерфейс за допомогою VR-гарнітури.

Інструменти

Перед тим, як почати свій аналіз, перерахуємо інструменти, які нам знадобляться:


  • Ми будемо використовувати Sketch для розробки наших інтерфейсів і призначених для користувача сценаріїв. Якщо у вас його немає, можете завантажити пробну версію. Нам подобається працювати з цією програмою, але якщо ви віддаєте перевагу або чомусь іншому, нічого страшного.
  • GoPro VR Player
    Це програма для 360-градусного перегляду контенту. Компанія GoPro поставляє її безкоштовно. Ми використовуємо її для перегляду і тестування наших розробок в контексті.
  • Oculus Rift
    Завантаживши Oculus Rift в GoPro VR Player, ми можемо тестувати дизайн в контексті.

________

Закінчення 2-ї частини

Продовження шукайте у нашій рубриці Туторіали

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