AR / VR Прототипирование:

Перенос дизайнов из бумаги в очки

Часть II

Подробнее о начальном процессе и настройке см. В предыдущей статье, часть I.

вступление

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

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

Доброго здоровья, и я надеюсь продолжить совершенствовать эту работу с любой информацией и опытом, которым вы хотите поделиться!

обзор

Начнем с объяснения прототипов AR для высокого уровня. Ниже приведена полная таблица с описанием каждого инструмента, который я буду обсуждать. Важно отметить, что, хотя формат этой статьи является линейным, процесс проектирования с использованием этих инструментов не является. Я использую некоторые инструменты, такие как Sketch, повсюду, в то время как другие предназначены специально для начальных или конечных этапов идеи.

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

Lo-Fi

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

Трудно визуализировать идеи на ранних стадиях AR / VR, так как многие знакомые инструменты идей, в том числе наши экраны компьютеров, плоские. Начните с бумаги, но не оставайтесь в этом 2D-пространстве надолго.

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

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

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

Это, наверное, самая знакомая часть процесса проектирования. Мне все еще нравится, как Sketch позволяет размещать артборды, создавать архитектуру продукта и рекомендовать в качестве основного инструмента для создания пользовательского интерфейса.

  • Последовательность макетов экранов пользовательских потоков в эскизе. Это LO-FI, а не полные пользовательские потоки! Вычеркните фигуры, чтобы определить размеры, расстояние и т. Д. И провести тестовые испытания!
  • Продолжайте заходить в плеер для просмотра (см. Следующий раздел, где это вступает в игру)
  • Плагин Sketch to VR [Artboard с соотношением 2: 1, 3600px x 1800px]
  • Proto.io [Соотношение Контейнер / Артборд 2: 1, 4096px x 2048px]
  • Понимание архитектуры: как эта раскадровка существует в виде полного потока контента. Как вы переходите от этого к этому?
  • Определите удобный диапазон движения. На сколько градусов контент может находиться выше / ниже / рядом с пользователем, прежде чем ему придется двигаться, чтобы увидеть или взаимодействовать? Отличная ссылка, которую я нашел, - это работа Майка Алджера, в которой определяются удобные диапазоны
  • Структура пользовательского интерфейса для пространства AR / VR. Подумайте, как проектные решения отличаются или связаны с существующими 2D интерфейсами. Используете ли вы существующие соглашения, потому что они являются обычной практикой в ​​2D UI, или они действительно сохраняются для 3D-пространства? Например, если пользователи привыкли к тому, что кнопка «Назад» или «Выход» находятся в верхнем левом углу экрана, почему это так? Если это относится к контексту устройства, скажем, расстояние между пальцами на iphone и это ожидаемое размещение, это имеет смысл. Но так ли это для вашего интерфейса AR / VR?
  • Назовите контент соответствующим образом! Обозначение артбордов (и создание символов по мере того, как вы достигаете hi-fi) поможет вам в дальнейшем! Это кажется утомительным, но рассмотрите вариант ввода имени каждый раз, когда вы экспортируете артборд.

Ссылка: https://www.sketchapp.com/

Дополнительные инструменты: Adobe After Effects надежно помогает создавать движение на ранней стадии, особенно потому, что большинство инструментов для создания прототипов не имеют возможности для анимации перехода в прототипах. Вы также можете вставлять короткие клипы в 3D-видеоплееры, но имейте в виду, что они растягиваются в зависимости от типа, размера и расположения плеера.

Получи 3D! Как можно раньше, неоценимо видеть вашу работу в 3D. Хотя мой основной рабочий процесс находится в Sketch, я перетаскиваю эти страницы в наши очки или в программу просмотра как можно чаще.

Этот плагин хорошо работает как для чертежей, так и для файлов эскизов. Вы можете набросать идеи на 3D-шаблон, чтобы представить свою работу в перспективе для VR! Используйте этот ресурс для загрузки шаблонов 3D рисунков. Затем загрузите плагин Sketch to VR и следуйте их руководству по настройке программы просмотра. Это отличный первый, быстрый способ перенести контент в трехмерное пространство.

Техническая помощь: я все еще использую терминал, чтобы открывать localhost каждый раз, когда я его использую, опция SimpleHTTPServer никогда не появлялась в моем меню правой кнопки мыши. Вместо этого, если вы откроете терминал и наберете: python -m SimpleHTTPServer. Он запустит localhost в вашем браузере, где вы можете открыть новое окно, набрать: localhost: 8000 и найти местоположение файла. Отсюда вам просто нужно обновлять браузер каждый раз, когда вы меняете изображения.

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

Ссылка: https://blog.prototypr.io/sketch-plugin-sketch-to-vr-4e23ced47e6

Дополнительные инструменты: я также использую GoPro VR Player в качестве быстрого перетаскивания для просмотра содержимого в 3D-пространстве. он также может импортировать видео, которые могут имитировать движение интерфейса и переходы. Делайте видео AE с размером монтажной области 2: 1, с содержанием по центру до 600 пикселей и фоновым изображением с наполнителем 360 (я использую черный, поскольку он прозрачен для AR). Анимируйте видео, чтобы показать движение и контент внутри. Эти фоны для VR Wraps полезны!

В Sketch есть несколько очень полезных плагинов для эскизов:

  • Генератор контента: дает вам текст, изображения, имена, номера и т. Д.
  • Экспорт в Proto.io: упрощает перенос процесса на инструмент Proto.io
  • Переименовать слои: отлично подходит для добавления префиксов / суффиксов, чтобы артборды не перезаписывали друг друга случайно в Google Slides или Zeplin
  • Sync to Slides: простой способ сделать слайд-колоду из потоков страниц
  • Zeplin: Sketch экспортирует прямо в Zeplin, чтобы разработчики могли измерять размеры!

Lo-Fi в Mid-Fi

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

Proto.io - отличный инструмент, который я недавно нашел для создания прототипов виртуальной реальности. Подобно плагину Sketch to VR, вы можете легко получить ресурсы, чтобы увидеть обновление прототипа в режиме реального времени во время работы!

Просто создайте учетную запись и загрузите приложение для своего телефона. Блог VR по компонентам Proto.io описывает инструмент и содержит два руководства, которые помогут вам в настройке и использовании. Я нашел этот учебник особенно полезным для моего случая использования.

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

Отсюда все, что вам нужно - это гарнитура, картон, Google Daydream и т. Д., И вы готовы к работе!

Ссылка: https://proto.io/

https://support.proto.io/hc/en-us/articles/115002611692

Дополнительные инструменты: InstaVR - в равной степени отличный инструмент для создания прототипов подобным образом. Мне еще предстоит углубиться в этот инструмент, однако из того, что я испытал, он кажется интуитивно понятным и может интегрировать воспроизведение видео.

InVision также является отличным инструментом для создания прототипов. Хотя это инструмент для 2D-прототипирования, я все же считаю, что это самый быстрый способ показать архитектуру в «плоском» контенте, таком как меню или модалы. Возможно, вам придется сформулировать контент для вашей команды, который имеет довольно мало изменений состояния, это может быть быстрый инструмент, и установить пространственное размещение и размеры в другом месте.

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

Sketchbox импортирует изображения (экспорт прямо из Sketch), 360 изображений и 3D-модели, и, хотя я не использую эту функцию, стоит отметить, что Sketchbox также экспортирует в виде файлов FBX, чтобы загружать их непосредственно в выбранный вами движок игры!

Ссылка: https://www.sketchbox3d.com/

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

Инструменты для создания 3D: MakeVR и Gravity Sketch являются мощными инструментами для создания 3D-контента в виртуальной реальности.

Mid-Fi в Hi-Fi

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

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

Halo импортирует изображения, GIF-файлы, видео и 3D-модели, а также добавляет функциональность в такие действия, как запуск событий при нажатии / наведении и т. Д. Кроме того, в их новые функции добавлены средства совместной работы для комментирования и создания карточек для делегирования задач в общих проектах. Halo также интегрирует блоки Google и шрифты для добавления 3D-контента и шрифтов в ваш проект из инструмента.

Ссылка: https://www.halolabs.io/

Привет-Fi

На этапе высокой точности ваш дизайн доработан и готов к детальному построению и пользовательскому тестированию!

Начинается единство. Тем не менее, это также самый надежный инструмент для создания конечных проектов. Unity также выпустила EditorVR для создания прототипа прямо в гарнитуре VR!

Настройте систему создания прототипов: используя единство, создайте базовую среду с правильным расстоянием, размером поля зрения и т. Д., Чтобы вы могли быстро и легко поменять содержимое. Поскольку комфорт с Unity позволяет, вы можете продолжать создавать этот прототип, чтобы он был максимально надежным, с взаимодействиями и полными пользовательскими потоками для пользовательского тестирования и демонстраций.

Есть множество учебных пособий, которые помогут вам начать работу с макетом и различными рабочими процессами. У меня есть несколько, которые мне очень помогли, в том числе превосходный набор учебных пособий Unity, этот курс Udemy для начала изучения C # с помощью строительных игр и мини-курсы в VR Dev School. Есть много, которые я рекомендую исследовать, поскольку каждый из них имеет свою специфику, но посещение курса - увлекательный способ познакомиться с окружающей средой!

Мне еще предстоит исследовать Unity EditorVR, но похоже, что это изменит правила игры для создания прототипов. Инструмент берет Unity и перемещает его с рабочего стола прямо в вашу гарнитуру VR, чтобы испытать вашу работу во время работы!

Ссылка: https://unity3d.com/

Дополнительные инструменты: Unreal Engine - это также мощный игровой движок, способный создавать звездную работу. Unreal также имеет «Blueprints», визуальный поток свойств для построения поведения и взаимодействия без кода! (Я знаю, что в Unity есть плагин для этого). Я еще не использовал Unreal, поэтому стоит проверить их оба и посмотреть, что работает для вас.

Мой фон

Немного обо мне, я прошел через изобразительное искусство, промышленный дизайн, дизайн пользовательского опыта, а теперь работаю дизайнером UX / UI в Augmented Reality в Osterhout Design Group. Я окончила Университет Карнеги-Меллона по промышленному дизайну, как первый дизайнер, получивший степень по инженерным специальностям. После окончания университета я изучал UX и промышленный дизайн, начиная от крупных компаний, таких как Samsung и IBM, и заканчивая внештатной работой в области медицинского дизайна и образования.

Я люблю творить, и у меня есть ненасытное любопытство. Ох, и у меня есть афро!

Спасибо!