Prototipazione AR / VR:

Prendi disegni dalla carta agli occhiali

Seconda parte

Per ulteriori informazioni sul processo iniziale e l'installazione, fare riferimento al mio precedente articolo, Parte I.

Intro

Al momento la prototipazione in Realtà Aumentata è un po 'un'ipotesi e un processo di verifica. Può essere frustrante trovare gli strumenti giusti e quindi imparare come usarli. Tuttavia, dopo numerosi test di gioco su una vasta gamma di strumenti, ho trovato il mio attuale processo di prototipazione. Di seguito è riportato l'elenco e il processo di strumenti che utilizzo per portare idee nelle Smartglass del mio ODG.

Tieni presente che questo processo si rivolge specificamente al mio lavoro di designer presso ODG per la realtà aumentata. Ci sono molti strumenti che non ho aggiunto a questo elenco perché i loro punti di forza non soddisfano il mio lavoro. Tuttavia, poiché gli strumenti continuano a svilupparsi e i miei progetti cambiano, non ho dubbi sul fatto che il mio processo maturerà di conseguenza. Indipendentemente dal tuo caso d'uso specifico, trovo molti di questi strumenti universalmente utili e ho anche suggerito strumenti aggiuntivi che potrebbero essere utili per casi d'uso alternativi in ​​ogni fase della prototipazione.

Utilizzalo in buona salute e spero di continuare a perfezionare questo lavoro con tutte le intuizioni e le esperienze che desideri condividere!

Panoramica

Cominciamo con una spiegazione di alto livello della prototipazione per AR. Di seguito è riportato il grafico completo che riepiloga ogni strumento di cui parlerò. È importante notare che, sebbene il formato di questo articolo sia lineare, il processo di progettazione con questi strumenti non lo è. Uso alcuni strumenti, come Sketch, in tutto, mentre altri sono specifici per le fasi iniziali o finali dell'ideazione.

Inoltre, faccio riferimento a questo elenco anche nella parte I, ma questo è un elenco di alcuni grandi lavori che ho scoperto lungo il mio viaggio, che vanno dagli strumenti di apprendimento ai progetti di ispirazione. Consiglia di sfogliare.

Lo-Fi

Lo stadio a bassa fedeltà ti toglie le idee dalla testa e nel mondo come un prototipo rapido per testare concetti generali e visualizzare idee.

È difficile visualizzare idee nelle prime fasi di AR / VR poiché molti degli strumenti di ideazione familiari, inclusi gli schermi dei nostri computer, sono piatti. Inizia sulla carta, ma non rimanere a lungo in questo spazio 2D.

Annota l'ideazione generale e i concetti che desideri visualizzare in seguito. Carta e penna sono sempre la cattura rapida delle idee! Durante tutto il mio processo, scriverò mini schizzi di idee o layout per riflettere, ridisegnare e vedere cosa succede quando lo ricrea nello spazio 3D.

Agisci! Se le cose si muovono nello spazio fisico, sposta la carta, i prototipi nello spazio fisico. Nastro sui muri o tieni premuto e muovi mentre rieviti un flusso utente. Test utente Lo-Fi progetta in questo modo per ottenere approfondimenti. Sperimenta, dal momento che potrebbero essere necessari più metodi per comprendere i takeaway dell'utente. Diventa creativo!

AfterNow ha pubblicato un meraviglioso esempio di processo sull'utilizzo di questo metodo di prototipazione.

Questa è probabilmente la parte più familiare del processo di progettazione. Adoro ancora il modo in cui Sketch ti consente di disporre le tavole da disegno, creare l'architettura di un prodotto e raccomandare come strumento essenziale per la creazione dell'interfaccia utente.

  • Avanzamento del layout delle schermate del flusso utente nello schizzo. Questo è LO-FI, NON flussi utente completi! Bloccalo in forme per identificare dimensionamento, spaziatura, ecc. E test test test!
  • Continua a comparire nel giocatore per vederlo, (vedi la prossima sezione in cui questo entra in gioco)
  • Plug-in Sketch to VR [La tavola da disegno ha un rapporto 2: 1, 3600px x 1800px]
  • Proto.io [Il contenitore / tavola da disegno ha un rapporto di 2: 1, 4096px x 2048px]
  • Comprendi l'architettura: come esiste lo storyboard come flusso completo attraverso un pezzo di contenuto. Come navighi da questo a quello?
  • Definire il comodo raggio di movimento. Di quanti gradi possono trovarsi i contenuti sopra / sotto / accanto all'utente prima che debbano spostarsi per vedere o interagire? Un grande riferimento che ho trovato è il lavoro di Mike Alger che identifica le gamme confortevoli
  • Struttura dell'interfaccia utente per lo spazio AR / VR. Considera in che modo le decisioni di progettazione differiscono o riguardano interfacce 2D esistenti. Stai utilizzando convenzioni esistenti perché sono pratiche comuni nell'interfaccia utente 2D o persistono effettivamente per lo spazio 3D? Ad esempio, se gli utenti sono abituati a un pulsante Indietro o a un pulsante di uscita nella parte superiore sinistra dello schermo, perché? Se si riferisce al contesto del dispositivo, dire che il pollice si trova su un iPhone ed è un posizionamento previsto, questo ha senso. Ma è questo il caso della tua interfaccia utente AR / VR?
  • Denominare il contenuto in modo appropriato! Assegnare nomi alle tavole da disegno (e creare simboli quando si raggiunge l'hi-fi) ti aiuterà immensamente in seguito! Sembra noioso, ma considera l'alternativa di digitare un nome ogni volta che esporti la tavola da disegno.

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

Strumenti aggiuntivi: Adobe After Effects è affidabile per la creazione anticipata di animazioni, soprattutto perché la maggior parte degli strumenti di prototipazione non ha un'opzione per le animazioni di transizione nei prototipi. Puoi anche inserire brevi clip nei lettori video 3D, ma tieni presente che si allungheranno in base al tipo di lettore, alle dimensioni e al posizionamento.

Ottieni 3D! Il più presto possibile, è prezioso vedere il tuo lavoro in 3D. Sebbene il mio flusso di lavoro principale risieda in Sketch, inserisco quelle pagine nei nostri occhiali o in un visualizzatore il più spesso possibile.

Questo plugin funziona bene sia per i disegni che per i file di schizzo. Puoi disegnare idee su un modello 3D per mettere il tuo lavoro in prospettiva per la realtà virtuale! Utilizzare questa risorsa per scaricare i modelli di disegno 3D. Quindi, scarica il plug-in Sketch to VR e segui il loro tutorial per configurare il visualizzatore. Questo è un ottimo primo modo rapido per ottenere contenuti in uno spazio 3D.

Assistenza tecnica: utilizzo ancora il terminale per aprire localhost ogni volta che lo utilizzo, l'opzione per SimpleHTTPServer non è mai stata visualizzata nel menu di scelta rapida. Invece, se apri il terminale e digiti: python -m SimpleHTTPServer. Inizierà a eseguire localhost nel tuo browser, dove puoi aprire una nuova finestra, digitare: localhost: 8000 e trovare il percorso del file. Da qui, devi solo aggiornare il browser ogni volta che modifichi le immagini.

A questo punto, metto anche le cose nei nostri occhiali per testare come i progetti si traducono dal computer all'AR. Questo è fondamentale per convalidare le decisioni dai colori e dimensioni del testo, al posizionamento dei contenuti. È utile sapere per quale piattaforma stai progettando e considerare le loro differenze.

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

Strumenti aggiuntivi: utilizzo anche GoPro VR Player come trascinamento rapido per visualizzare i contenuti nello spazio 3D. può anche importare video in grado di simulare il movimento e le transizioni dell'interfaccia. Realizza video AE con dimensioni della tavola da disegno di 2: 1, con contenuto centrato a circa 600 px e uno sfondo di immagine di riempimento 360 (uso il nero poiché è trasparente per AR). Animare video per mostrare movimento e contenuti all'interno. Questi sfondi per i wrapping VR sono utili!

Sketch ha un numero di plugin di sketch molto utili:

  • Generatore di contenuti: ti dà testo, immagini, nomi e numeri di riempimento, ecc.
  • Esportazione Proto.io: semplifica il processo di riporto nello strumento Proto.io
  • Rinomina livelli: ideale per aggiungere prefisso / suffissi in modo che le tavole da disegno non si sovrascrivano involontariamente tra loro in Presentazioni Google o Zeplin
  • Sincronizza diapositive: un modo semplice per creare mazzi di diapositive di flussi di pagine
  • Zeplin: Sketch esporta direttamente su Zeplin per consentire agli sviluppatori di creare dimensioni!

Da Lo-Fi a Mid-Fi

Ora è il momento di ottenere un dettaglio più dettagliato. Questi strumenti aiutano a perfezionare l'architettura, i contenuti e i flussi di utenti. I design a media fedeltà iniziano a esplorare colore, tipo e stile. Inoltre, utilizzo questi strumenti per eseguire test utente.

Proto.io è uno strumento eccellente che ho recentemente trovato per la prototipazione VR. In modo simile al plugin Sketch to VR, puoi facilmente estrarre risorse per vedere un prototipo di aggiornamento in tempo reale mentre lavori!

Basta creare un account e scaricare l'app per il tuo telefono. Il Blog sui componenti VR di Proto.io descrive lo strumento e ha due tutorial per guidarti nella configurazione e nell'uso. Ho trovato questo tutorial particolarmente utile per il mio caso d'uso.

Suggerimenti rapidi, assicurati che i tuoi contenuti in Sketch siano ben denominati per un facile trasferimento. Ti consiglio di avere un file di schizzo copiato separato per i pezzi di prototipazione rispetto ai tuoi file di progettazione, poiché raggrupperai ed esporterai le cose in modo molto diverso.

Da qui, tutto ciò che ti serve un auricolare, un cartone, Google Daydream, ecc. E sei pronto per partire!

Link: https://proto.io/

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

Strumenti aggiuntivi: InstaVR è uno strumento altrettanto eccellente per la creazione di prototipi in modo simile. Devo ancora approfondire troppo questo strumento, tuttavia da quello che ho sperimentato sembra intuitivo e può integrare la riproduzione video.

InVision è anche un ottimo strumento di flusso utente per la prototipazione. Sebbene sia uno strumento di prototipazione 2D, trovo comunque che sia il modo più rapido per mostrare l'architettura in contenuti "piatti", come menu o modali. Potrebbe essere necessario articolare il contenuto per il tuo team che presenta alcuni cambiamenti di stato, questo può essere uno strumento rapido e stabilire il posizionamento spaziale e il dimensionamento altrove.

Sketchbox è un eccellente strumento di storyboard per estrarre rapidamente i contenuti, spostarli in VR e creare fasi di clic in una storia. Ho trovato questo strumento particolarmente utile per avere un'idea generale del dimensionamento e della distanza dei contenuti e per creare "presentazioni" 3D di un utente che esegue una serie specifica di azioni.

Sketchbox importa immagini (esporta direttamente da Sketch), 360 immagini e modelli 3D e, sebbene non utilizzi questa funzione, è degno di nota dire che Sketchbox esporta anche come file FBX per essere inserito direttamente nel tuo motore di gioco preferito!

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

Strumenti aggiuntivi: Artefact ha rilasciato uno strumento chiamato Storyboard VR, che consente di prototipare nello spazio 3D in modo simile. Personalmente devo ancora provarlo, ma sembra essere uno strumento di prototipazione intuitivo e potente.

Strumenti di creazione 3D: sia MakeVR che Gravity Sketch sono potenti strumenti di creazione per creare contenuti 3D all'interno della realtà virtuale.

Da Mid-Fi a Hi-Fi

A questo punto, dovresti avere una forte sensazione per la tua direzione e sei pronto per un ulteriore affinamento visivo e spaziale.

Halo è una gemma nascosta con cui ho sperimentato varie fasi di prototipazione. Lo strumento è intuitivo e semplifica la progettazione di flussi utente completi nello spazio 3D. Per i progettisti che continuano a orientarsi con la creazione in ambienti di motori di gioco, Halo non richiede codice per aggiungere funzionalità ed è ottimo per la creazione di prototipi più dettagliati.

Halo importa immagini, Gif, video e modelli 3D e aggiunge funzionalità in azioni come l'attivazione di eventi su clic / passaggio del mouse, ecc. Inoltre, le loro nuove funzionalità aggiungono strumenti di collaborazione per commentare e creare schede per la delega di attività in progetti condivisi. Halo integra inoltre Google Blocks e Fonts per aggiungere contenuto e font 3D al tuo progetto dall'interno dello strumento.

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

Hi-Fi

Nella fase di alta fedeltà, il tuo design è raffinato e pronto per la costruzione dettagliata e test utente!

L'unità è quella complicata che inizia. Tuttavia, è anche lo strumento più robusto per creare progetti finali. Unity ha anche rilasciato EditorVR, da prototipare direttamente in un visore VR!

Imposta un sistema di prototipazione: usando l'unità, costruisci un ambiente di base con la distanza corretta, la dimensione del FOV, ecc. In modo da poter scambiare i contenuti rapidamente e facilmente. Come consente il comfort di Unity, è possibile continuare a costruire questo prototipo per essere robusto quanto desiderato, con interazioni e flussi utente completi per test utente e dimostrazioni.

Esistono numerosi tutorial per iniziare con il layout e diversi flussi di lavoro. Ne ho alcuni che mi hanno aiutato molto, tra cui l'eccellente set di tutorial di Unity, questo corso Udemy per iniziare a imparare C # attraverso la costruzione di giochi e i mini corsi presso VR Dev School. Ci sono molti là fuori che consiglio di esplorare, in quanto ognuno di essi ha un focus un po 'diverso, ma seguire un corso è un modo divertente per familiarizzare con l'ambiente!

Devo ancora esplorare EditorVR di Unity, ma sembra un punto di svolta per la prototipazione. Lo strumento prende Unity e lo sposta dal desktop direttamente nell'auricolare VR per sperimentare il tuo lavoro mentre lavori!

Link: https://unity3d.com/

Strumenti aggiuntivi: Unreal Engine è anche un robusto motore di gioco in grado di costruire lavori stellari. Unreal ha anche "Blueprints", un flusso visivo di proprietà per costruire comportamenti e interazioni senza codice! (So ​​che Unity ha anche un plugin per questo). Non ho ancora usato Unreal, quindi vale la pena controllarli entrambi e vedere quale funziona per te.

Il mio background

Un po 'su di me, ho progredito attraverso le belle arti, il design industriale, la progettazione dell'esperienza utente e ora lavoro come designer UX / UI in Realtà Aumentata presso Osterhout Design Group. Mi sono laureato alla Carnegie Mellon University in Industrial Design, come primo designer a completare un minore in Ingegneria. Dopo la laurea, ho esplorato la UX e il design industriale che vanno da grandi aziende, come Samsung e IBM, al lavoro freelance in progettazione medica e istruzione.

Adoro creare e avere un'insaziabile curiosità. Oh, e ho un afro!

Grazie!