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

Вземете дизайни от хартия до очила

Част II

За повече информация относно първоначалния процес и настройка, вижте предишната ми статия, част I.

Intro

В момента прототипирането в усъвършенстваната реалност е малко предположение и проверка. Може да е неприятно да намерите правилните инструменти и след това да се научите как да ги използвате. Въпреки това, след значителни тестове за игра в редица инструменти, открих текущия си процес на прототипиране. По-долу е списъкът и процесът на инструментите, които използвам за въвеждане на идеи в Smartglasses на ODG.

Имайте предвид, че този процес се занимава специално с работата ми като дизайнер в ODG за усъвършенствана реалност. Има много инструменти, които не съм добавил в този списък, защото силните им страни не се погрижиха за работата ми. Докато инструментите продължават да се развиват и моите проекти се променят, не се съмнявам, че процесът ми ще съзрее съответно. Независимо от вашия конкретен случай на употреба, намирам много от тези инструменти като цяло полезни. Предложих и допълнителни инструменти, които могат да бъдат полезни за случаи с алтернативна употреба на всеки етап от прототипирането.

Използвайте в добро здраве и се надявам да продължите да усъвършенствате тази работа с всякакви прозрения и опит, които искате да споделите!

Преглед

Нека започнем с обяснение на прототипи за AR на високо ниво. По-долу е дадена пълната диаграма, обобщаваща всеки инструмент, който ще обсъдя. Важно е да се отбележи, че въпреки че форматът на тази статия е линеен, процесът на проектиране с тези инструменти не е такъв. Използвам някои инструменти, като Sketch, навсякъде, докато други са специално за начални или крайни етапи на идея.

Освен това споменавам този списък и в част I, но това е списък на някои страхотни работи, които открих по време на пътуването си, вариращи от инструменти за обучение до проекти за вдъхновение. Препоръчайте разглеждането.

Lo-Fi

Етапът с ниска вярност изважда идеите от главата ви и в света като бърз прототип за тестване на широки концепции и визуализиране на идеи.

Трудно е да се визуализират идеи в ранните етапи на AR / VR, тъй като много от познатите инструменти за идеи, включително нашите компютърни екрани, са плоски. Започнете на хартия, но не оставайте дълго в това двуизмерно пространство.

Начертайте общи идеи и концепции, които искате да визуализирате по-късно. Хартията и химикалката винаги са бързо заснемане на идеи! По време на моя процес ще изрисувам мини скици на идеи или оформления, за да ги обмислям, преначертая и след това ще видя какво се случва, когато го пресъздам в 3D пространство.

Изиграй го! Ако нещата се движат във физическо пространство, преместете хартия, прототипи наоколо във физическо пространство. Залепете към стените или задръжте и преместете, докато възстановите потребителския поток. Потребителският тест Lo-Fi проектира по този начин, за да добие представа. Експериментирайте, тъй като може да са необходими няколко метода, за да разберете начина на поемане на потребителите. Бъдете креативни!

AfterNow публикува прекрасен пример за използване на този метод за прототипиране.

Това е може би най-познатата част от процеса на проектиране. Все още обичам начина, по който Sketch ви позволява да полагате графики, да създавате архитектурата на даден продукт и да препоръчате като основен инструмент за създаване на потребителски интерфейс.

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

Линк: https://www.sketchapp.com/

Допълнителни инструменти: Adobe After Effects е надеждно полезен за създаване на движение в началото, особено защото повечето инструменти за прототипиране нямат опция за преходни анимации в прототипите. Можете да изтегляте кратки клипове и в 3D видео плейъри, но имайте предвид, че те ще се разтеглят в зависимост от типа на плейъра, оразмеряването и разположението.

Вземете 3D! Колкото е възможно по-рано, е безценно да виждате работата си в 3D. Въпреки че основният ми работен процес пребивава в Sketch, аз дърпам тези страници в нашите очила, или на зрител възможно най-често.

Този плъгин работи добре както за рисунки, така и за файлове на скици. Можете да скицирате идеи на 3D шаблон, за да поставите работата си в перспектива за VR! Използвайте този ресурс, за да изтеглите шаблоните за 3D рисуване. След това изтеглете Sketch to VR Plugin и следвайте техния урок, за да настроите зрителя. Това е чудесен първи, бърз начин за въвеждане на съдържание в 3D пространство.

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

На тази стъпка аз също дърпам нещата в нашите очила, за да проверя как дизайните се превеждат от компютър в AR. Това е от съществено значение за валидиране на решения от цветове и оразмеряване на текст, до разположение на съдържанието. Полезно е да знаете за каква платформа проектирате и да вземете предвид техните разлики.

Линк: https://blog.prototypr.io/sketch-plugin-sketch-to-vr-4e23ced47e6

Допълнителни инструменти: Аз също използвам GoPro VR плейър като бързо плъзгане и пускане за преглед на съдържание в 3D пространство. той също може да импортира видеоклипове, които могат да симулират движение на интерфейса и преходи. Направете AE видеоклипове с големина на таблото 2: 1, със съдържание, центрирано до приблизително 600 px и фон за изображение на пълнител 360 (използвам черно, тъй като е прозрачно за AR). Анимирано видео за показване на движение и съдържание в рамките на. Тези фонове за VR Wraps са полезни!

Sketch има редица много полезни приставки за скици:

  • Създател на съдържание: Дава ви запълващ текст, изображения, имена и номера и т.н.
  • Износ на Proto.io: Опростява пренасянето на процеса към инструмента Proto.io
  • Преименувайте слоеве: Чудесно за добавяне на префикс / суфикси, така че Artboards не се презаписват неволно взаимно в Google Slides или Zeplin
  • Синхронизиране със слайдове: Лесен начин да направите слайдове на потокове от страници
  • Zeplin: Sketch изнася направо в Zeplin, за да може разработчиците да изтеглят размери!

Lo-Fi до Mid-Fi

Сега е време да получите по-подробно. Тези инструменти помагат за усъвършенстване на архитектурата, съдържанието и потребителските потоци. Дизайните със средна вярност започват да изследват цвят, тип и стил. Освен това използвам тези инструменти за извършване на потребителски тестове.

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

Просто създайте акаунт и изтеглете приложението за телефона си. В VR блогът на Proto.io описва инструмента и има два урока, за да ви преведе през настройката и използването. Намерих този урок за особено полезен за моя случай на употреба.

Бързи съвети, уверете се, че съдържанието ви в Sketch е добре кръстено за лесно прехвърляне. Препоръчвам да имате отделен копиран файл на скица за създаване на прототипи от вашите дизайнерски файлове, тъй като ще групирате и експортирате нещата по различен начин.

От тук всичко, от което се нуждаете, слушалки, картон, Google Daydream и т.н., и сте готови да започнете!

Линк: https://proto.io/

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

Допълнителни инструменти: InstaVR е също толкова отличен инструмент за създаване на прототипи по подобен начин. Все още не съм задълбочен в този инструмент, но от това, което преживях, изглежда интуитивно и може да интегрира видео игра.

InVision е също чудесно средство за прототипиране на потребителски поток. Въпреки че това е 2D инструмент за прототипиране, все пак намирам, че това е най-бързият начин за показване на архитектура в „плоско“ съдържание, като например менюта или модали. Може да се наложи да формулирате съдържание на вашия екип, който има доста промени в състоянието, това може да бъде бърз инструмент и да установите пространственото разположение и оразмеряване на друго място.

Sketchbox е отличен инструмент за разказване на файлове за бързо изтегляне на съдържание, преместване в VR и създаване на кликвания през етапи на историята. Намерих този инструмент за особено полезен за получаване на общо усещане за оразмеряване и разстояние на съдържанието и създаване на 3D „слайдшоу“ на потребител, изпълняващ определен набор от действия.

Sketchbox импортира изображения (експорт директно от Sketch), 360 изображения и 3D модели и макар да не използвам тази функция, забележимо е да се каже, че Sketchbox също така експортира като FBX файлове, за да се изтегли директно във вашия двигател по избор!

Линк: https://www.sketchbox3d.com/

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

Инструменти за създаване на 3D: MakeVR и Gravity Sketch са мощни инструменти за създаване за изграждане на 3D съдържание в VR.

Mid-Fi до Hi-Fi

На този етап трябва да имате силно усещане за посоката си и сте готови за по-нататъшно усъвършенстване визуално и пространствено.

Halo е скрит скъпоценен камък, с който експериментирах за различни етапи на прототипиране. Инструментът е интуитивен и носи простота за проектиране на пълни потребителски потоци в 3D пространство. За дизайнерите, които все още получават своите лагери с създаването в средите на игровите двигатели, Halo не изисква код за добавяне на функционалност и е чудесно за по-подробно изграждане на прототип.

Halo импортира изображения, Gifs, видеоклипове и 3D модели и добавя функционалност в действия като задействане на събития при щракване / задържане и др. Освен това, новите им функции добавят инструменти за сътрудничество за коментиране и създаване на карти за делегиране на задачи в споделени проекти. Halo също така интегрира Google Blocks and Fonts, за да добави 3D съдържание и шрифтове във вашия проект от инструмента.

Линк: https://www.halolabs.io/

Hi-Fi

На етапа с висока вярност, вашият дизайн е усъвършенстван и готов за подробно изграждане и тестване на потребителите!

Единството е трудният, който започва. Това обаче е и най-здравият инструмент за създаване на окончателни проекти. Unity също пусна EditorVR, за да прототипи директно в VR слушалки!

Настройте система за създаване на прототипи: Използвайки единство, изградете основна среда с правилното разстояние, размер FOV и др., След което можете да разменяте бързо и лесно съдържание. Тъй като комфортът с Unity позволява, можете да продължите да изграждате този прототип, за да бъдете толкова здрави, колкото е необходимо, с взаимодействия и пълни потребителски потоци за тестване на потребители и демонстрации.

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

Тепърва ще проуча EditorVR на Unity, но изглежда като чейнджър на играта за прототипиране. Инструментът взема Unity и го премества от работния плот директно във вашата VR слушалка, за да изпитате работата си, докато работите!

Връзка: https://unity3d.com/

Допълнителни инструменти: Unreal Engine също е стабилен игрален двигател, способен да изгради звездна работа. Unreal също има "Чертежи", визуален поток от свойства за изграждане на поведение и взаимодействия без код! (Знам, че Unity има приставка и за това). Все още не съм използвал Unreal, така че си струва да ги проверите и да видите коя работи за вас.

Моят произход

Малко за мен, напредвах в изобразителното изкуство, индустриалния дизайн, дизайна на потребителското изживяване и сега работя като UX / UI дизайнер в Augmented Reality в Osterhout Design Group. Завърших Университета в Карнеги Мелън по индустриален дизайн, като първият дизайнер, завършил непълнолетно образование в инженерните науки. След завършването си съм изследвал UX и индустриалния дизайн, вариращи от големи компании като Samsung и IBM, до работа на свободна практика в медицинския дизайн и образование.

Обичам да творя и имам ненаситно любопитство. О, и аз имам афро!

Благодаря ти!