Прототипирование для очков дополненной реальности

Статья-перевод для желающих начать работу в AR с очками вроде Hololens или Magic Leap. И для тех, кто уже с ними работает, но не имеет четкого подхода к созданию качественных прототипов.

Если вы недавно гуглили «инструменты и гайды по созданию прототипов дополненной реальности», то вы попали по адресу и мы с вами достаточно похожи. Буквально пару месяцев назад я был занят примерно тем же. Если вы были разочарованы нехваткой инструментов, ресурсов, реальных проектов или статей по этой теме, то вы продолжали быть похожи на меня. Я привык к тому, что в интернете есть множество ресурсов, которые могут помочь мне с любыми вопросами. Хотите создать сайт? Получайте! Сотни вебинаров, тысячи видео на YouTube, статьи, репозитории с открытым исходным кодом и многое другое. То же самое применимо к мобильным приложениях и видеоиграм. И на контрасте с этим, я был разочарован количеством и качеством ресурсов для AR и HoloLens в частности. В этой статье мы обсудим лучшие инструменты для прототипирования AR-проектов.

Наша команда получила незабываемый экспириенс быстрого прототипирования и тестирования AR-проекта для Head-Mount Display (HMD). Мы подумали, что было бы неплохо создать некоторую документацию, которая помогла бы нам на этом пути. В этой статье основное внимание будет уделено инструментам, которые мы использовали для создания наших проектов и прототипов.

После создания раскадровок для разных уровней разработки мы начали думать о том, как нам следует создавать прототипы для тестирования. Для создания большинства традиционных элементов пользовательского интерфейса мы использовали такие инструменты, как Photoshop, Sketch и Cinema 4D (я объясню, как мы использовали каждый из них по ходу статьи).

Хотя мы не использовали этот метод для нашего проекта, я нашел отличное видео из архивов Apple WWDC, на котором Apple показывают процесс прототипирования с завидной точностью. Чтобы смоделировать, как может выглядеть некоторая информация в трехмерном пространстве, они нарисовали значки и подписи, которые затем были наклеены по четким исходя из точных измерений. Затем они включили камеры в приложениях, чтобы увидеть, как будет выглядеть этот дизайн. Это упражнение привело их к обнаружению множества недостатков первоначального дизайна, таких как разборчивость текста, масштабирование и иерархия информации. С первого взгляда, это может показаться глупым, занятием, но такой подход к созданию прототипов «на бумаге» является отличным способом раннего выявления проблем проектирования и экономии времени в целом.

Sketch — это классический инструмент дизайна, который отлично подходит для создания UI дизайна и макетов. Кроме того, его инструмент экспорта отлично подходит для использования более мелких компонентов вашего дизайна, таких как панель с текстом или элементы дисплея с надписями. Это позволило нам экспортировать все ассеты, которые составляли сцену, а затем использовать приложение для трехмерной верстки, чтобы создавать сцены для AR (или VR).

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

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

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

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

Если у вашей команды более одной гарнитуры виртуальной реальности, в Sketchbox существует режим совместной работы, в котором несколько человек работает в одном пространстве разработки. Благодаря этому я смог невероятно продуктивно и весело провести время с членом моей команды, который живет в тысячах миль от меня. Мы проектировали в виртуальной комнате вокруг нас, разговаривая, указывая на разные детали и просто рисуя. К сожалению, с функцией «экспорта в Unity» возникли некоторые проблемы, а именно проблемы возникли с текстурами упаковки. Именно поэтому мы не смогли использовать эту функцию в нашем рабочем процессе для создания прототипов.

Photoshop отлично подходит для того, чтобы брать AR-проекты из Sketchbox 3D и затем контекстуализировать их для распространения. Мы обнаружили, что если сделать скриншот в приложении на уровне головы, а затем наложить его на фотографию, сделанную под тем же углом, мы сможем создать визуальные макеты в кратчайшие сроки (примерно за 30 минут). Чтобы помочь с выделением фона и наложением AR-содержимого на изображение, можно создать гигантский зеленый (или синий) экран. Это поможет нам объяснить и изучить различные функции, которые мы обсуждали и хотим видеть в своем проекте.

Unity — самый сложный инструмент, который мы использовали для прототипирования. В зависимости от набора навыков вашей команды, данный инструмент можно пропустить. Однако, если вы создаете приложение для HoloLens, без этого инструмента не обойтись. Без него вы не сможете никак увидеть ваш дизайн в действии.

К счастью, Microsoft создала большую библиотеку ресурсов для разработчиков. Это позволит начинающим разработчикам чувствовать себя более комфортно и развиваться в этом направлении дальше. Я бы порекомендовал потратить некоторое время на настройку набора инструментов для смешанной реальности (MRTK). Например, вы можете получить уйму информации о взаимодействии людей с HoloLens.

Если вы хотите узнать, кнопки какой формы и цвета, больше нравится людям, вы сэкономите уйму времени, используя в качестве отправной точки пример кнопок из MRTK и просто внося в них изменения разного рода правки. Если вы хотите добавить элементы пользовательского интерфейса или трехмерные объекты, которые вы разработали для своего приложения, можно перетащить их на сцену и отрегулировать положение и повороты, для построения AR-макета. Оттуда вы можете использовать game viewer для навигации по вашей сцене, прямо как в видеоигре. Если у вас есть HoloLens под рукой, вы можете создать свой проект, следуя инструкциям, подобным этой.

Сделав еще один шаг вперед, если у вас есть возможность заниматься программированием на C#, вы можете расположить разные сцены и сгруппировать их в пустые игровые объекты. Затем вы можете сохранить эти различные макеты в массиве и использовать готовые кнопки для их циклического переключения. Если вы хотите сделать прототипы еще более реалистичными, вы можете создать невидимые кнопки, а затем наложить их поверх тех элементов навигации, которые уже существуют в ваших проектах. Эти кнопки могут использоваться для активации соответствующих сцен. Это фактически позволит вам выстроить большую часть навигации по вашим AR проектам для создания прототипов таким образом, который напоминает стиль прототипирования, который вам предоставят inVision или Sketch.

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

Помимо всего остального, мы использовали Powerpoint в работе над своими проектами. Хотя на первый взгляд это может показаться странным выбором, в Powerpoint есть функции, которые лучше всего соответствуют тому, что мы пытались протестировать. Одной из основных особенностей нашего дизайна был экран макета пользовательского интерфейса. Мы хотели посмотреть, сможем ли мы использовать предварительно записанные видео или GIF-файлы, чтобы объяснить различные функциональные возможности нашего пользовательского интерфейса. Ни Sketch, ни InVision не поддерживают встраивание видео в проекты, но Powerpoint… Powerpoint поддерживает их!

Используя функции гиперссылок PowerPoint, мы смогли создать полнофункциональное 2D-представление нашего дизайна всего за несколько часов. В целом, 2D — прототипы значительно повысили доверие пользователей в HoloLens.

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.