VR-прототипирование — стратегии

Трудно найти подходящие инструменты дизайна для виртуальной реальности, а особенно для прототипирования. Благо, что растущее сообщество VR стремится к решению проблем и быстро разрабатывает новые стратегии.

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

Источник

Перед запуском нового дизайна-проекта будет логично сделать шаг назад и разработать план разработки от А до Я — начиная исследованиями и заканчивая проектированием, прототипированием и тестированием. За прошедшие годы мы разработали несколько передовых методов мобильного, веб- и VR-прототипирования.

Но мы имеем дело с дизайном виртуальной реальности, который пока что остаётся новой отраслью. VR это действительно иная вещь.

Трудно найти подходящие инструменты дизайна для виртуальной реальности, а особенно для прототипирования. Вместо них дизайнеры использовали софт для мобильного дизайна, который не очень хорошо подходит для 360-градусного интерфейса.

Однако, на горизонте замаячили и хорошие новости. Растущее сообщество VR стремится к решению проблем и быстро разрабатывает новые стратегии. Вероятно, вы видели много новых инструментов виртуальной реальности, появляющихся в последнее время, поэтому давайте взглянем на них и подумаем, как они могут вписаться в рабочий процесс вашего проекта.

Инструменты и проблема рабочего процесса

В цифровом дизайне есть уже обжитый и проверенный годами рабочий процесс: эскизы, каркасные модели, низкокачественные прототипы, визуальные эффекты, прототипы с микровзаимодействием, редлайны и разработка. И работает это неплохо. С прожитыми десятилетиями плечом к плечу мобильным дизайном за плечами мы разработали вспомогательные инструменты, которые помогут дизайнеру решить его самые мучительные проблемы.

Мы можем успешно спроектировать 2D-опыт и протестировать его на 2D-девайсе.

Дизайн для VR — это не совсем такой же процесс. Для многих VR-приложений требуется создание 3D-моделей и анимаций, для чего существующие сегодня инструменты подходят с лихвой. Однако другая важная часть процесса состоит из создания прототипов и тестирования полных 360-градусных сцен — именно здесь мы и сталкиваемся с проблемами:

  • Плоские мониторы.
  • Такие инструменты дизайна, как Photoshop, Sketch и Illustrator, двумерные.
  • Двумерные инструменты для создания прототипов.
  • Эскизы на бумажках тоже плоские (если только вы не умеете обращаться с ножницами).

Как мы можем увидеть наши проекты в 360°, когда все наши инструменты плоские и двумерные?

Традиционные 2D-инструменты просто не работают должным образом с VR, что создаёт проблемы для рабочего процесса. Существуют совершенно новые типы прототипирования для виртуальной реальности: от набросков на бумаге до тестирования 3D-моделей в сцене со взаимодействиями. Это не те соображения, о которых нам когда-либо приходилось беспокоиться при проектировании 2D.

Из всего этого возникает вопрос: как нам подойти к фрагментированному рабочему процессу с ограниченным количеством подходящих инструментов?

План действий

Скажем сразу, что программирование всего с нуля в Unity только ради прототипирования может быть излишним. Это тяжелая работа, занимающая много времени. Мы определённо хотим использовать более простой подход для быстрой обратной связи.

К нашему счастью, существуют отличные новые инструменты прототипирования, специфичные для виртуальной реальности под различные типы проектов — создания эскизов, работы с 2D-изображениями и 3D-моделями. Объедините их с оптимизированной стратегией рабочего процесса и вы встанете на путь истинный.

Прототипирование в VR может показаться довольно приятным

Чтобы упростить рабочий процесс, сделайте заранее несколько вещей: определите вопросы, на которые хотите получить ответы, свою цель и имеющиеся ресурсы. Это поможет вам не попасть в производственный ад.

Например, если я хочу протестировать размещение в комнате 3D-объектов (мой вопрос), которые будут создаваться в Unity (цель) с помощью 3D-ассетов (мои ресурсы), тогда я могу захотеть использовать подход к созданию 3D-прототипов посложнее. Однако, если же я создаю статичный UI для Cardboard, мне может понадобиться просто набросать и протестировать 2D-картинки.

Давайте же рассмотрим некоторые из этих инструментов поподробнее и найдём способы адаптировать их под ваши ресурсы и типы проектов.

Часть 1: Эскиз

Допустим, у вас нет ничего, кроме идеи. Значит берём карандаш и начинаем эти идеи зарисовывать!

Зарисовывать перспективу бывает непросто

Скорее всего, вы быстро поймёте, что нарисовать 360° дизайн на бумаге ой как не просто. Я до сих пор начинаю любой проект с зарисовки, потому что в процессе можно записать основные идеи. Но если вы хотите углубиться в процесс быстрой визуализации, есть несколько инструментов, которые могут вам помочь.

Шаблон раскадровки

Это отличный способ быстро визуализировать вашу сцену. Просто скачайте шаблон, распечатайте его и примерно так, как вам нравится, разместите элементы в каждой части сцены.

Шаблон раскадровки

Панорамная сетка

Используйте сетку, чтобы нарисовать перспективный вид ваших сцен. Рисовать в таком ракурсе сложновато, но немного попрактиковавшись, вы сможете перенести все свои идеи на бумагу. Кроме того, их можно быстро поместить в приложение для просмотра 360° сцен (GoProVR, например). Хороший вариант для быстрого фидбека.

Панорамная сетка

Часть 2: Прототипирование с 2D-ассетами

Теперь, когда вы воплотили все свои идеи на бумаге (или закончилось терпение рисовать от руки), вы можете сесть за компьютер, чтобы попробовать несколько простых визуализаций.

Плоский дизайн с перспективой

Допустим, вы нашли несколько картинок-затычек, с которыми хотите сразу же начать работу. Вы можете поместить их в [вставьте сюда свой инструмент дизайна], а после попробуйте добавить немного перспективы с помощью инструмента искажения или разместите мелкие размытые элементы на заднем плане, чтобы имитировать глубину.

Моя концепция аркады от первого лица. Размытый маленький Пикачу на заднем плане

А теперь возьмите свой маленький хитрый дизайн и представьте, что вы находитесь внутри него. «Вроде бы вижу», говорите вы себе, прищурившись и наклонив голову.

Быстрый способ выразить основную идею, но не самый лучший опыт в 360°. Пора бы уже перейти к следующему шагу.

Вариант с плоской оболочкой

Чтобы развить идею плоского визуализированного макета, можно совместить несколько 2D-изображений, добавить текст и посмотреть на это, как на плоскую обёртку. Если вы хотите создать виртуальную реальность с фиксированным положением для Cardboard, GearVR и т.д., то это может стать хорошим началом для визуализации того, как на самом деле будет выглядеть ваш интерфейс. Для ощущения масштаба комнаты можно продумать приблизительную планировку в комнате.

Шаблон VR-прототипа Facebook

Разместите свои изображения и ресурсы с руководством по шаблонам Sketch или PS (трёхмерные ассеты тоже будут работать, но с ними нельзя взаимодействовать). После чего перетащите изображение в Unity, чтобы посмотреть на своё творение в игровом режиме, в Rift или Gear VR.

Сделанное на скорую руку меню в виде оболочки (3D-Бульбазавр пришёл на прогулку)

Если надеть шлем и увидеть макет своими глазами, то высока вероятность получения хорошего фидбека. Отличный вариант для просмотра 2D-набросков, но не обязателен при создании слоёв в пространстве. В конце концов, мы просто имитируем 360°, что уже довольно хорошо.

Часть 3: 360° прототипирование с 2D-ассетами

Похоже на 2D-оболочку, но с фоновым изображением на 360°. Большим преимуществом является наличие настоящего скайбокса вокруг вашей сцены. Вам просто нужно найти равнопрямоугольную фотографию в 360°.

Kickpush шаблон

Создайте макет в Sketch и запустите его в программе просмотра GoProVR.

Шаблон Kickpush Sketch

Добавьте своё 360-градусное равнопрямоугольное изображение в шаблон Sketch и экспортируйте его как png или jpeg. Неплохой вариант если вы хотите быстро увидеть свою идею в браузере или на мобильном устройстве.

Прокрутка шаблона по умолчанию Kickpush 360° в программе просмотра GoProVR

Sketch-to-VR

Используйте этот плагин Sketch для создания 360°-макета и просмотра его в вебе.

Шаблон Sketch

Добавьте своё 360-градусное равноугольное изображение и 2D-ассеты на два разных артборда. Экспортируйте папку и просмотрите, что получилось в браузере. Результат такой же, как и у инструмента Kickpush, но здесь нам не нужен GoProVR Viewer. Ещё один этап, который следует учесть — настройка локального сервера для просмотра проекта.

Компонентный модуль Framer VR

Дизайн создавайте в Sketch, а Framer используйте для детальной проработки анимаций и интерактива.

Framer — это мощный инструмент для создания 2D-прототипов, который можно использовать и для 360°. Лучший выбор, если вы хотите донести до пользователя свои слои и интерактивность.

— Во Framer добавьте новый VRComponent и ваши шесть изображений с кубической текстурой, чтобы сформировать скайбокс.vr = new VRComponent front: “images/front.jpg” right: “images/right.jpg” left: “images/left.jpg” back: “images/back.jpg” bottom: “images/bottom.jpg” top: “images/top.jpg”

— Используйте layerA = new VRLayer для проецирования слоя (в сферической системе координат) или добавления анимации. Также можно использовать артборды из Sketch.

— Перемещайтесь по прототипу во Framer или на мобильных устройствах.

Выводы:

— Идеально подходит для проверки значений и состояний анимации. Полезно, если нужно передать эти значения разработчику.

— Не лучший вариант для создания прототипов с таким сложным интерактивом, как физика или с контроллерами от первого или третьего лица. Однако, это хороший вариант для менее сложных 360° взаимодействий с элементами UI.

— У Framer всегда есть удобные для пользователя параметры, но знайте, что он использует CoffeeScript. Он далеко не для людей с шаткими нервами, особенно если вам неудобно работать с кодом.

Часть 4: 3D-прототипирование без Unity

У вас уже есть 3D-ассеты? Или, может быть, вы нашли несколько сайтов с бесплатными и необходимыми для старта моделями. Чтобы увидеть, как они будут себя вести — их можно поместить в рабочую сцену-прототип. Да, потребуется немного больше усилий, особенно если вы захотите добавить интерактивности, но это будет максимально приближенный к реальности результат. Даже если вам неудобно работать с Unity или другими игровыми движками, вы всё равно сможете создать рабочий 3D-прототип.

A-frame

Симулятор движка HTML 3D на основе браузера.

A-Frame действительно продолжает развиваться как мощный инструмент с инспектором, компонентами и многим другим. Вы можете добавлять интерактивные 2D- или 3D-объекты в статичные сцены или сцены в масштабе комнаты. A-Frame соперничает по силе с Unity, поскольку многие взаимодействия обычно контролируются сценариями C#, но вместо этого он использует HTML — язык, с которым знакомы многие дизайнеры. Это большое преимущество A-Frame. Кроме того, есть хороший вариант для работы в Codepen. Результатом является 360° веб-сцена, которую можно редактировать с другими людьми, у которых может и не быть доступа к Unity или HMD.

— Доступно для просмотра с HMD или без него.

— Стили и добавление взаимодействий VR с HTML (с некоторыми пользовательскими модами A-frame).

— Мощный браузерный интерфейс.

Часть 5: 3D-прототипирование с помощью Unity

А вот тут уже становится по-настоящему весело. Если вы уже прошли путь 2D-прототипирования, испробовали все альтернативные 3D-методы или же просто хотите всё это пропустить и перейти в Unity со своим HMD, тогда этот метод именно для вас.

Для работы в Unity нужно будет получить некоторые скилы, если вы новичок. Этот метод лучше всего подходит для визуализации впечатлений в масштабе виртуальной комнаты, потому что вы сможете проверить движения во всех трёх плоскостях. Давайте же погрузимся в VR!

Тулкиты VRTK и Newton VR

Оба этих тулкита можно бесплатно загрузить из Unity Asset Store. Импортируйте их в Unity, настройте под Vive или Rift и запустите примеры сцен на своем HMD.

Интерактивные сцены из Newton VR (слева) и VRTK (справа)

— Предоставляются примеры сцен (более 20) с моделями и сценариями, которые обрабатывают множество основных взаимодействий.

— Отличный вариант для работы с контроллером от первого и третьего лица.

— Steam VR & Oculus Rift ready.

— Oculus Avatar SDK для визуализации рук.

— Если вы находитесь далеко от своего HMD (или у вас нет доступа к нему, но вы всё равно хотите это попробовать), у VRTK есть сборный модуль Simulator, который довольно хорошо работает в качестве превью в Unity. Взаимодействия с контроллерами конечно не заменит, но может стать хорошим «рабочим удалённым» вариантом.

— Хороший ресурс для изучения взаимодействий, 3D-моделей и скриптов управления объектами.

— Используйте эти тулкиты по отдельности или вместе, чтобы получить ещё больше функциональных возможностей. Подробнее о том, как это сделать:

Кастомизация тулкитов

Да, вы можете использовать эти инструменты для создания собственных проектов. Местами это может выглядеть как читерство, а может быть и не очень, но не расстраивайтесь. Переделка образцов под собственный дизайн доведёт вас до седьмого пота.

Вам нужно будет заменить существующие модели на свои 3D-ресурсы и, соответствующе, переписать скрипты. Чтобы правильно воспроизвести взаимодействия внутри объекта, обязательно учитывайте оснащение и анимацию ваших пользовательских моделей (например, нажатие на спусковой крючок или застегивание молнии).

— Хороший вариант, если вы уже знакомы с Unity.

— Если вы планируете создать опыт именно в Unity, создать его можно прямо с прототипа, а не копипастить работу из другой системы (например, Framer или A-Frame).

— Воспользуйтесь этой обширной выборкой общих сценариев взаимодействия.

Создание собственной сцены с нуля

Подробно описать шаги для этого варианта невозможно, потому что каждый случай индивидуален. Сценарии для контроллеров от первого или третьего лица, взаимодействия и движения объектов, физика — практически всё, что нужно знать о создании игры. Самостоятельное создание может быть хорошим способом изучить основы VR — и всегда хорошо знать основы (или, по крайней мере, немного в них разобраться).

Часть 6: Создание VR-искусства в VR

Наклонная и средняя кисти, перо

Рисуйте, лепите и делайте наброски в VR, чтобы создавать 3D-объекты или планировать пространство. Вы даже можете поделиться своими творениями в Sketchfab — растущем сообществе 3D-художников. Я не буду вдаваться в подробности, но об этом определённо стоит упомянуть. Люди создают удивительное искусство с помощью Quill, Tilt Brush и Medium.

Часть 7: Разработка VR в VR

Это может быть Святой Грааль или что-то очень близкое к нему. Вы наверняка узнаете этот порядок:

  • Надеть гарнитуру.
  • Протестировать сцену.
  • Понять, что всё не так.
  • Снять гарнитуру.
  • Настроить UI.
  • Повторять этот цикл снова и снова (бесконечно).

Вместо этого вы наденете гарнитуру, оставите её включённой и начнете проектировать прямо в виртуальной реальности.

Пример сцены и интерфейса Unity EditorVR (источник: VR Focus)

Unity EditorVR

EditorVR — это новая функция, которая находится поверх традиционного интерфейса Unity. Она позволяет создавать целые макеты внутри VR. Вы можете добавлять и изменять ассеты, использовать плавающие воркспейсы, «шахматные доски» с несколькими сценами и многое другое. Она всё ещё экспериментальна и нуждается в доработке, но это отличный первый шаг к будущему дизайна в виртуальной реальности.

На этом я и закончу. Надеюсь, вы начнёте думать о том, как эти инструменты VR-прототипирования могут вписаться в ваш рабочий процесс с помощью их комбинирования. Иногда имеет смысл подойти к этому с точки зрения логистики, следуя каждому этапу прописанного рабочего процесса.

Поиск отличного подхода к созданию прототипов для виртуальной реальности, безусловно, продолжается. Я уверена, что рассказала далеко не всё, поэтому, если я упустила какие-нибудь интересные инструменты или подходы, не стесняйтесь сообщить мне.

За будущее!

Источник: https://vc.ru/design/158284-vr-prototipirovanie-strategii

#бренд #брендинг #фирменныйстиль#разработкалоготипа #логотип #брендбук #упаковка #дизайн #дизайнинтерьера #дизайнер #дизайнпроект #дизайнквартиры #дизайндома #дизайн_интерьера #дизайнерскиевещи #дизайнбюро #дизайнвручную #дизайнкоттеджа #дизайнлоготипа #дизайнинтерьер #дизаин #дизайнофиса #дизайнерыроссии #интерьер #графика #вёрстка #оформление #ландшафт #стиль #креатив #архитектура #студия #фирменныйстиль #макет #сайт #ардеко #дизайнер #реклама #мода #веб #арт #одежда #композиция #искусство #типографика #паровоз #разработка #комната #проект #творчество #эстетика #квартира #канализация #branding #design #logo #graphicdesign #marketing #brand #poland #art #socialmedia #brandidentity #creative #graphic #marketingdigital #illustration #logodesign #logotype #vector #designer #business #adobe #digital #illustrator #graphicdesigner #webdesign #logodesigner #identity #photoshop #facebook

Author avatar
admin

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *