Case study - Building HoloSketch, a spatial layout and UX sketching app for HoloLens

HoloSketch è uno strumento di disegno nello spazio del dispositivo e dell'esperienza utente per HoloLens per creare esperienze olografiche. HoloSketch funziona con una tastiera Bluetooth abbinata e un mouse e comandi vocali. Lo scopo di HoloSketch è fornire un semplice strumento di layout dell'esperienza utente per la visualizzazione rapida e l'iterazione.

HoloSketch: un'app di disegno dell'esperienza utente e layout spaziale per HoloLens.
HoloSketch: layout spaziale e app di disegno dell'esperienza utente per HoloLens

Semplice strumento di layout dell'esperienza utente per la visualizzazione rapida e l'iterazione.
Semplice strumento di layout dell'esperienza utente per la visualizzazione rapida e l'iterazione

Funzionalità

Primitive per studi rapidi e prototipi di scalabilità

Uso di forme primitive

Usare forme primitive per studi di massa rapida e prototipi di scalabilità.

Importare oggetti tramite OneDrive

importazione di oggetti

Importare immagini PNG/JPG o oggetti FBX 3D(richiede la creazione di pacchetti in Unity) nello spazio di realtà mista tramite OneDrive.

Modificare gli oggetti

modifica degli oggetti

Modificare gli oggetti (spostare/ruotare/ridimensionare) con un'interfaccia dell'oggetto 3D familiare.

Bluetooth, mouse/tastiera, movimenti e comandi vocali

supporta Bluetooth

HoloSketch supporta i comandi mouse/tastiera Bluetooth, movimenti e voce.

Sfondo

Importanza della progettazione nel dispositivo

Quando si progetta qualcosa per HoloLens, è importante sperimentare la progettazione nel dispositivo. Una delle principali sfide nella progettazione di app di realtà mista è che è difficile ottenere il senso della scalabilità, della posizione e della profondità, soprattutto attraverso gli schizzo 2D tradizionali.

Costo della comunicazione basata su 2D

Per comunicare in modo efficace i flussi e gli scenari dell'esperienza utente ad altri utenti, un designer può trascorrere molto tempo creando asset usando strumenti 2D tradizionali, ad esempio Illustrator, Photoshop e PowerPoint. Questi progetti 2D richiedono spesso sforzi aggiuntivi per convertirli in 3D. Alcune idee si perdono in questa traduzione da 2D a 3D.

Processo di distribuzione complesso

Poiché la realtà mista è un nuovo canvas per noi, implica un sacco di iterazione di progettazione e prova e errore per la sua natura. Per i designer che non hanno familiarità con gli strumenti come Unity e Visual Studio, non è facile mettere insieme qualcosa in HoloLens. In genere è necessario eseguire il processo seguente per visualizzare le opere d'arte 2D/3D nel dispositivo. Questa era una grande barriera per i progettisti iterando rapidamente idee e scenari.

Processo di distribuzione complesso
Processo di distribuzione

Processo semplificato con HoloSketch

Con HoloSketch, abbiamo voluto semplificare questo processo senza coinvolgere gli strumenti di sviluppo e l'associazione del portale dei dispositivi. Usando OneDrive, gli utenti possono facilmente inserire asset 2D/3D in HoloLens.

Processo semplificato con HoloSketch
Processo semplificato con HoloSketch

Incoraggiare il pensiero e le soluzioni di progettazione tridimensionale

Abbiamo pensato che questo strumento darebbe ai progettisti un'opportunità di esplorare soluzioni in uno spazio veramente tridimensionale e non essere bloccato in 2D. Non devono pensare alla creazione di uno sfondo 3D per l'interfaccia utente poiché lo sfondo è il mondo reale nel caso di HoloLens. HoloSketch consente ai progettisti di esplorare facilmente la progettazione 3D in HoloLens.

Introduzione

Come importare immagini 2D (JPG/PNG) in HoloSketch

  • Caricare immagini JPG/PNG nella cartella di OneDrive 'Documents/HoloSketch'.
  • Dal menu OneDrive in HoloSketch sarà possibile selezionare e posizionare l'immagine nell'ambiente.

Importazione di immagini 2D
Importazione di immagini e oggetti 3D tramite OneDrive

Come importare oggetti 3D in HoloSketch

Prima di caricare nella cartella di OneDrive, seguire questa procedura per creare un pacchetto di oggetti 3D in un bundle di asset Unity. Usando questo processo è possibile importare i file FBX/OBJ dal software 3D, ad esempio Maya, Cinema 4D e Microsoft Paint 3D.

Importante

Attualmente, la creazione del bundle di asset è supportata con Unity versione 5.4.5f1.

  1. Scaricare e aprire il progetto Unity 'AssetBunlder_Unity'. Questo progetto Unity include lo script per la generazione di asset di bundle.

  2. Creare un nuovo GameObject.

  3. Assegnare un nome a GameObject in base al contenuto.

  4. Nel pannello Controllo fare clic su 'Aggiungi componente' e aggiungere 'Box Collider'.

    Nel pannello Controllo fare clic su 'Aggiungi componente' e aggiungere 'Box Collider'

    Nel pannello Controllo fare clic su 'Aggiungi componente' e aggiungere 'Box Collider' #2

  5. Importare il file FBX 3D trascinandolo nel pannello del progetto.

  6. Trascinare l'oggetto nel pannello Hierarchy sotto il nuovo GameObject.

    Trascinare l'oggetto nel pannello Hierarchy sotto il nuovo GameObject

  7. Regolare la dimensione del collider se non corrisponde all'oggetto. Ruotare l'oggetto sull'asse Z.

    Regolare la dimensione del collider se non corrisponde all'oggetto.

  8. Trascinare l'oggetto dal pannello Hierarchy nel pannello Project per renderlo prefab.

  9. Nella parte inferiore del pannello di controllo fare clic sull'elenco a discesa creare e assegnare un nuovo nome univoco. Nell'esempio seguente viene illustrato l'aggiunta e l'assegnazione di "brownchair" per il nome AssetBundle.

    Nella parte inferiore del pannello di controllo fare clic sull'elenco a discesa e assegnare un nuovo nome univoco.

  10. Preparare un'immagine di anteprima per l'oggetto modello. Trascinare un'immagine nel pannello del progetto e assegnare il nome usato per l'oggetto.

  11. Creare una cartella denominata "Assetbundles" nella cartella "Asset" del progetto Unity.

  12. Dal menu Asset selezionare "Build AssetBundles" (Compila assetBundles) per generare file. Dal menu Asset selezionare

  13. Caricare il file generato nella cartella /Files/Documents/HoloSketch in OneDrive. Caricare solo il file di asset_unique_name. Non è necessario caricare file manifesto o file AssetBundles.
    Aggiungere file alla cartella Files/Documents/HoloSketch/ Verrà aggiunto l'oggetto 3D nel menu OneDrive di HoloSketch

Come modificare gli oggetti

HoloSketch supporta l'interfaccia tradizionale ampiamente usata nel software 3D. È possibile usare lo spostamento, ruotare, ridimensionare gli oggetti con movimenti e un mouse. È possibile passare rapidamente tra diverse modalità con voce o tastiera.

Modalità di manipolazione degli oggetti

Come modificare gli oggetti
Come modificare gli oggetti

Menu a cintura di strumenti e contestuali

Uso del menu contestuale

Doppio tocco d'aria per aprire il menu contestuale.

Voci di menu:

  • Superficie di layout: Si tratta di un sistema di griglia 3D in cui è possibile layout di più oggetti e gestirli come gruppo. Doppio tocco sull'area di layout per aggiungerli.
  • Primitive: Usare cubi, sfere, cilindri e coni per studi di massa.
  • Onedrive: Aprire il menu OneDrive per importare oggetti.
  • Guida: Visualizza la schermata della Guida.

Menu di scelta rapida
Menu di scelta rapida

Uso del menu Barra strumenti

Spostare, ruotare, ridimensionare, salvare e caricare la scena sono disponibili dal menu della cintura degli strumenti.

Uso di tastiera, movimenti e comandi vocali

Tastiera, movimenti e comandi vocali
Tastiera, movimenti e comandi vocali

Scarica l'app

Icona dell'app HoloSketch Scaricare e installare l'app HoloSketch gratuitamente da Microsoft Store

Problemi noti

  • Attualmente la creazione del bundle asset è supportata con Unity versione 5.4.5f1.
  • A seconda della quantità di dati in OneDrive, l'app potrebbe essere visualizzata come se sia stata arrestata durante il caricamento del contenuto di OneDrive
  • Attualmente, la funzionalità Salva e Carica supporta solo oggetti primitivi
  • I menu Text, Sound, Video e Foto sono disabilitati nel menu contestuale
  • Il pulsante Play nel menu Tool Belt cancella le gizmos di manipolazione

Condivisione degli schizzo

È possibile usare la funzionalità di registrazione video in HoloLens dicendo "Hey Cortana, Start/Stop recording". Premere il tasto su/giù del volume per scattare un'immagine dello schizzo.

Informazioni sugli autori

Immagine di Patrick Sebring
Foto di Dong Yoon Park Yoon Park
Designer @Microsoft dell'esperienza utente
Patrick Sebring
@Microsoft sviluppatore