AR / VR-prototyper:

Tag design fra papir til briller

Del II

For mere information om den indledende proces og opsætning, se tilbage til min tidligere artikel, del I.

Introduktion

Prototyping i Augmented Reality er lidt af en gæt og check-proces i øjeblikket. Det kan være frustrerende at finde de rigtige værktøjer og derefter lære, hvordan man bruger dem. Men efter betydelig play-test på tværs af en række værktøjer fandt jeg min nuværende prototypeproces. Nedenfor er listen og processen med værktøjer, jeg bruger til at bringe ideer ind i min ODG's Smartglasses.

Husk, at denne proces specifikt henviser til mit arbejde som designer hos ODG for Augmented Reality. Der er mange værktøjer, som jeg ikke har føjet til denne liste, fordi deres styrker ikke svarede til mit arbejde. Da værktøjer fortsat udvikler sig og mine projekter ændres, er jeg ikke i tvivl om, at min proces modnes i overensstemmelse hermed. Uanset din specifikke brugssag finder jeg mange af disse værktøjer universelt nyttige. Jeg foreslog også yderligere værktøjer, der kan være nyttige til tilfælde af alternativ anvendelse på hvert trin i prototype.

Brug til godt helbred, og jeg håber, at jeg kan fortsætte med at forbedre dette arbejde med al den indsigt og oplevelse, du er interesseret i at dele!

Oversigt

Lad os starte med en forklaring på højt niveau af prototyper til AR. Nedenfor er det fulde diagram, der opsummerer hvert værktøj, jeg vil diskutere. Det er vigtigt at bemærke, at selvom formatet på denne artikel er lineært, er designprocessen med disse værktøjer ikke. Jeg bruger nogle værktøjer, såsom Sketch, hele vejen igennem, mens andre specifikt er til begyndelses- eller sidste ideationstadier.

Derudover refererer jeg også denne liste til del I, men dette er en liste over nogle gode arbejde, jeg har opdaget under min rejse, lige fra læringsværktøjer til inspirerende projekter. Anbefaler at du gennemser.

Lo-Fi

Lavtidelighedsstadiet tager ideer ud af dit hoved og ind i verden som en hurtig prototype til at teste brede koncepter og visualisere ideer.

Det er udfordrende at visualisere ideer i de tidlige stadier af AR / VR, da mange af de velkendte ideationsværktøjer, inklusive vores computerskærme, er flade. Start på papir, men bliv ikke i denne 2D-plads længe.

Skriv den generelle idé og koncepter, du vil visualisere senere, ned. Papir og pen er altid hurtig indfangning af ideer! Gennem min proces vil jeg skrive mini-skitser af ideer eller layout til at tænke igennem, tegne igen og derefter se, hvad der sker, når jeg genskaber det i 3D-rum.

Handle det ud! Hvis ting bevæger sig rundt i det fysiske rum, skal du flytte papir, prototyper rundt i det fysiske rum. Bånd til vægge, eller hold og bevæg, mens du genindfører en brugerstrøm. Brugertest Lo-Fi-design på denne måde for at få indsigt. Eksperimenter, da det kan tage flere metoder til at forstå brugernes afhentning. Bliv kreativ!

AfterNow postede et vidunderligt proceseksempel på anvendelse af denne prototype-metode.

Dette er sandsynligvis den mest kendte del af designprocessen. Jeg elsker stadig den måde, som Sketch giver dig mulighed for at lægge tegnebræt på, til at skabe arkitekturen for et produkt og anbefale som et vigtigt UI-skabelsesværktøj.

  • Layoutprogression af brugerflowskærme i skitse. Dette er LO-FI, IKKE fuld brugerstrømme! Blokér ud i former for at identificere størrelse, afstand osv. Og testtesttest!
  • Fortsæt med at pop ind i spilleren for at se, (se næste afsnit, hvor dette kommer i spil)
  • Sketch til VR-plugin [Artboard er 2: 1-forhold, 3600px x 1800px]
  • Proto.io [Container / Artboard er 2: 1-forhold, 4096px x 2048px]
  • Forstå arkitekturen: Hvordan eksisterer det storyboard som en fuld strøm gennem et stykke indhold. Hvordan navigerer du fra dette til det?
  • Definer det komfortable bevægelsesområde. Hvor mange grader kan indhold sidde over / under / ved siden af ​​brugeren, inden de skal flytte for at se eller interagere? En god henvisning, jeg har fundet, er Mike Algars arbejde med at identificere komfortable områder
  • UI-struktur til AR / VR-plads. Overvej hvordan designbeslutninger adskiller sig eller relaterer til eksisterende 2D-grænseflader. Bruger du eksisterende konventioner, fordi de er almindelig praksis i 2D UI, eller vedvarer de faktisk til 3D-plads? Hvis brugerne for eksempel er vant til, at en tilbage-knap eller en exit-knap er øverst til venstre på skærmen, hvorfor er det så? Hvis det vedrører enhedens kontekst, siger tommelfingerens rækkevidde på en iphone, og det er en forventet placering, er det fornuftigt. Men er dette tilfældet for dit AR / VR UI?
  • Navngiv indholdet korrekt! At navngive tegnebræt (og oprette symboler, når du når hi-fi), hjælper dig enormt senere! Det virker kedeligt, men overvej alternativet til at indtaste et navn, hver gang du eksporterer tegnebrættet.

Link: https://www.sketchapp.com/

Yderligere værktøjer: Adobe After Effects er pålideligt nyttigt til at skabe bevægelse tidligt, især fordi de fleste prototype-værktøjer ikke har en mulighed for overgangsanimationer i prototyper. Du kan også trække korte klip ind i 3D-videoafspillere, men husk, at de vil strække sig afhængigt af afspillerens type, størrelse og placering.

Få 3D! Så tidligt som muligt er det uvurderligt at se dit arbejde i 3D. Selvom min primære arbejdsgang findes i Sketch, trækker jeg disse sider i vores briller eller en seer så ofte som muligt.

Dette plugin fungerer godt til både tegninger og skitse filer. Du kan tegne ideer til en 3D-skabelon for at placere dit arbejde i perspektiv for VR! Brug denne ressource til at downloade 3D-tegneskabeloner. Download derefter Sketch til VR-plugin og følg deres tutorial for at konfigurere fremviseren. Dette er en fantastisk første, hurtig måde at få indhold i et 3D-rum på.

Teknisk hjælp: Jeg bruger stadig terminal til at åbne localhost, hver gang jeg bruger den, vises muligheden for SimpleHTTPServer aldrig i min højreklik-menu. I stedet for, hvis du åbner terminal og skriver: python-m SimpleHTTPServer. Det begynder at køre localhost i din browser, hvor du kan åbne et nyt vindue, skriv: localhost: 8000 og finde filens placering. Herfra skal du bare opdatere browseren, hver gang du skifter billeder.

På dette trin trækker jeg også tingene i vores briller for at teste, hvordan design oversættes fra computer til AR. Dette er afgørende for validering af beslutninger fra farver og tekststørrelse til indholdsplacering. Det er nyttigt at vide, hvilken platform du designer til og overveje deres forskelle.

Link: https://blog.prototypr.io/sketch-plugin-sketch-to-vr-4e23ced47e6

Yderligere værktøjer: Jeg bruger også GoPro VR Player som et hurtigt træk og slip for at se indhold i 3D-rum. det kan også importere videoer, der kan simulere interface-bevægelse og overgange. Lav AE-videoer i tegnebrættet størrelse 2: 1, med indhold centreret til est. 600 px og en fylder 360-baggrund (jeg bruger sort, da det er gennemsigtigt for AR). Animeret video, der viser bevægelse og indhold inden for. Disse baggrunde til VR-indpakninger er nyttige!

Sketch har et antal meget nyttige sketch plugins:

  • Indholdsgenerator: giver dig fyldning af tekst, billeder, navne og numre osv.
  • Proto.io-eksport: Forenkler overførselsprocessen til Proto.io-værktøjet
  • Omdøb lag: Fremragende til at tilføje præfiks / efterfølger, så tegnebræt ikke utilsigtet overskriver hinanden i Google Slides eller Zeplin
  • Synkronisering til lysbilleder: Nem måde at fremstille lysbilleder på sidestrømme på
  • Zeplin: Skitseeksport direkte til Zeplin for udviklere at trække dimensioner!

Lo-Fi til Mid-Fi

Nu er det tid til at få en mere detaljeret. Disse værktøjer hjælper med at forfine arkitektur, indhold og brugerstrømme. Mid fidelity designs begynder at udforske farve, type og stil. Derudover bruger jeg disse værktøjer til at udføre test af brugerne.

Proto.io er et fremragende værktøj, som jeg for nylig fandt til VR-prototyper. På lignende måde som Sketch til VR Plugin kan du nemt trække aktiver ind for at se en prototypeopdatering i realtid, mens du arbejder!

Opret blot en konto, og download appen til din telefon. Proto.ios VR-komponentblog beskriver værktøjet og har to tutorials til at guide dig igennem opsætning og brug. Jeg fandt denne tutorial særlig nyttig til min brugssag.

Hurtige tip, sørg for, at dit indhold i Sketch er velkendt til nem overførsel. Jeg anbefaler, at du har en separat kopieret skissefil til prototypestykker end dine designfiler, da du grupperer og eksporterer ting meget anderledes.

Herfra har du brug for et headset, pap, Google Daydream osv., Og du er klar til at gå!

Link: https://proto.io/

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

Yderligere værktøjer: InstaVR er et lige så fremragende værktøj til at skabe prototyper på lignende måde. Jeg har endnu ikke dybt for langt ind i dette værktøj, men ud fra det, jeg har oplevet, virker det intuitivt og kan integrere videospil.

InVision er også et godt prototype brugervenhedsværktøj. Selvom det er et 2D-prototyperingsværktøj, finder jeg det stadig den hurtigste måde at vise arkitektur i "fladt" indhold, f.eks. Menuer eller modaler. Det kan være nødvendigt at artikulere indhold til dit team, der har ganske mange tilstandsændringer, dette kan være et hurtigt værktøj og etablere den geografiske placering og størrelsen andre steder.

Sketchbox er et fremragende storyboarding værktøj til hurtigt at trække indhold, flytte det rundt i VR og skabe klik igennem faser i en historie. Jeg fandt dette værktøj særlig nyttigt til at få en generel fornemmelse af størrelse og afstand til indhold og oprette 3D “slideshows” af en bruger, der udfører et specifikt sæt handlinger.

Sketchbox importerer billeder (eksporteres direkte fra Sketch), 360 billeder og 3D-modeller, og selvom jeg ikke bruger denne funktion, er det bemærkelsesværdigt at sige, at Sketchbox også eksporterer som FBX-filer for at trække direkte ind i din valgte spilmotor!

Link: https://www.sketchbox3d.com/

Yderligere værktøjer: Artefact frigav et værktøj kaldet Storyboard VR, der giver dig mulighed for at prototype i 3D-rum på en lignende måde. Jeg har personligt endnu ikke prøvet det, men ser ud til at være et intuitivt og kraftfuldt prototyperværktøj.

3D-oprettelsesværktøjer: Både MakeVR og Gravity Sketch er kraftfulde oprettelsesværktøjer til at opbygge 3D-indhold i VR.

Mid-Fi til Hi-Fi

På dette tidspunkt skal du have en stærk fornemmelse af din retning og være klar til yderligere forfining visuelt og rumligt.

Halo er en skjult perle, som jeg har eksperimenteret med i forskellige stadier af prototyper. Værktøjet er intuitivt og giver enkelhed til at designe fulde brugerstrømme i 3D-rum. For designere, der stadig får deres lejer med at skabe i spillmotormiljøer, kræver Halo ikke kode for at tilføje funktionalitet, og det er fantastisk til en mere detaljeret prototypeopbygning.

Halo importerer billeder, Gifs, videoer og 3D-modeller og tilføjer funktionalitet i handlinger som at udløse begivenheder på klik / hover osv. Derudover tilføjer deres nye funktioner samarbejdsværktøjer til at kommentere og oprette kort til opgavedelegering i delte projekter. Halo integrerer også Google Blocks og skrifttyper for at tilføje 3D-indhold og skrifttyper til dit projekt fra værktøjet.

Link: https://www.halolabs.io/

Hi-Fi

På høj kvalitet er dit design raffineret og klar til detaljeret bygning og brugertest!

Enhed er den vanskelige der starter. Det er dog også det mest robuste værktøj til at skabe endelige projekter. Unity frigav også EditorVR til prototype direkte i et VR-headset!

Opret et prototypesystem: Brug enhed til at opbygge et grundlæggende miljø med den rigtige afstand, FOV-størrelse osv., Som du derefter kan udveksle indhold hurtigt og nemt. Som komfort med Unity tillader det, kan du fortsætte med at opbygge denne prototype, så den er så robust som ønsket, med interaktioner og fulde brugerstrømme til brugertest og demoer.

Der er adskillige tutorials for at komme i gang med layoutet og forskellige arbejdsgange. Jeg har nogle få, der hjalp mig meget, inklusive Unity's fremragende sæt tutorials, dette Udemy-kursus til at begynde at lære C # gennem bygningsspil og minikurserne på VR Dev School. Der er mange derude, som jeg anbefaler at udforske, da de hver især har lidt forskelligt fokus, men at tage et kursus er en sjov måde at sætte sig ind i miljøet på!

Jeg har endnu ikke undersøgt Unity's EditorVR, men det ser ud som en spiludveksler til prototype. Værktøjet tager Unity og flytter det fra skrivebordet direkte i dit VR-headset for at opleve dit arbejde, mens du arbejder!

Link: https://unity3d.com/

Yderligere værktøjer: Unreal Engine er også en robust spilmotor, der er i stand til at opbygge stjernernes arbejde. Unreal har også "Blueprints", en visuel strøm af egenskaber til at opbygge adfærd og interaktioner uden kode! (Jeg ved, at Unity også har et plugin til dette). Jeg har ikke brugt Unreal endnu, så det er værd at tjekke dem begge ud og se, hvad der fungerer for dig.

Min baggrund

Lidt om mig er jeg kommet igennem med kunst, industriel design, brugeroplevelsesdesign og arbejder nu som UX / UI designer i Augmented Reality hos Osterhout Design Group. Jeg er uddannet fra Carnegie Mellon University in Industrial Design, som den første designer, der afsluttede en mindreårig i ingeniørstudier. Siden uddannelsen har jeg udforsket UX og industrielt design lige fra store virksomheder som Samsung og IBM til freelance-arbejde inden for medicinsk design og uddannelse.

Jeg elsker at skabe og har en umættelig nysgerrighed. Åh, og jeg har en afro!

Tak skal du have!