Fallstudie: Erstellen von HoloSketch, einer App für räumliches Layout und UX-Skizzen für HoloLens

HoloSketch ist ein gerätseitiges Raumlayout- und UX-Skizzentool für HoloLens, um holografische Erfahrungen zu erstellen. HoloSketch funktioniert mit einer gekoppelten Bluetooth-Tastatur und -Maus sowie Gesten- und Sprachbefehlen. Der Zweck von HoloSketch besteht darin, ein einfaches UX-Layouttool für schnelle Visualisierung und Iteration bereitzustellen.

HoloSketch: App für räumliches Layout und UX-Skizzen für HoloLens

Ein einfaches UX-Layouttool für schnelle Visualisierung und Iteration

Features

Grundtypen für schnelle Studien und skalierungsbasierte Prototypen

Verwenden Sie primitive Formen für schnelle Massingstudien und Skalierungsprototypen.

Importieren von Objekten über OneDrive

Importieren Sie PNG-/JPG-Bilder oder 3D-FBX-Objekte (muss in Unity verpackt werden) über OneDrive in den Mixed Reality-Bereich.

Bearbeiten von Objekten

Bearbeiten von Objekten (Verschieben/Drehen/Skalieren) mit einer vertrauten 3D-Objektschnittstelle.

Bluetooth, Maus/Tastatur, Gesten und Sprachbefehle

HoloSketch unterstützt Bluetooth-Maus/Tastatur, Gesten und Sprachbefehle.

Hintergrund

Wichtig, dass Sie Ihr Design auf dem Gerät erleben

Wenn Sie etwas für HoloLens entwerfen, ist es wichtig, ihr Design auf dem Gerät zu erleben. Eine der größten Herausforderungen beim Entwurf von Mixed Reality-Apps besteht darin, dass es schwierig ist, das Gefühl von Skalierung, Position und Tiefe zu bekommen, insbesondere durch herkömmliche 2D-Skizzen.

Kosten der 2D-basierten Kommunikation

Um UX-Flows und -Szenarien effektiv mit anderen zu kommunizieren, kann ein Designer viel Zeit damit verbringen, Ressourcen mit herkömmlichen 2D-Tools wie Illustrator, Photoshop und PowerPoint zu erstellen. Diese 2D-Designs erfordern oft zusätzlichen Aufwand, um sie in 3D zu konvertieren. Einige Ideen gehen bei dieser Übersetzung von 2D in 3D verloren.

Komplexer Bereitstellungsprozess

Da Mixed Reality eine neue Canvas für uns ist, beinhaltet es viele Designiterationen und Versuch und Fehler von Natur aus. Für Designer, die nicht mit Tools wie Unity und Visual Studio vertraut sind, ist es nicht einfach, etwas in HoloLens zusammenzustellen. In der Regel müssen Sie den folgenden Prozess durchlaufen, um Ihre 2D-/3D-Grafiken auf dem Gerät anzuzeigen. Dies war eine große Barriere für Designer, die Ideen und Szenarien schnell durchlaufen.

Bereitstellungsvorgang

Vereinfachter Prozess mit HoloSketch

Mit HoloSketch wollten wir diesen Prozess vereinfachen, ohne Entwicklungstools und Geräteportalkopplungen einzubeziehen. Mit OneDrive können Benutzer problemlos 2D-/3D-Ressourcen in HoloLens einfügen.

Vereinfachter Prozess mit HoloSketch

Förderung dreidimensionaler Entwurfsdenken und -lösungen

Wir dachten, dass dieses Tool Designern die Möglichkeit geben würde, Lösungen in einem wirklich dreidimensionalen Raum zu erkunden und nicht in 2D stecken zu bleiben. Sie müssen nicht darüber nachdenken, einen 3D-Hintergrund für ihre Benutzeroberfläche zu erstellen, da der Hintergrund im Fall von HoloLens die reale Welt ist. HoloSketch bietet Designern eine Möglichkeit, das 3D-Design auf HoloLens einfach zu erkunden.

Erste Schritte

Importieren von 2D-Bildern (JPG/PNG) in HoloSketch

• Laden Sie JPG-/PNG-Bilder in Ihren OneDrive-Ordner "Dokumente/HoloSketch" hoch.
• Im OneDrive-Menü in HoloSketch können Sie das Bild auswählen und in der Umgebung platzieren.

Importieren von Bildern und 3D-Objekten über OneDrive

Importieren von 3D-Objekten in HoloSketch

Führen Sie vor dem Hochladen in Ihren OneDrive-Ordner die folgenden Schritte aus, um Ihre 3D-Objekte in ein Unity-Ressourcenpaket zu packen. Mit diesem Prozess können Sie Ihre FBX/OBJ-Dateien aus 3D-Software wie Maya, Cinema 4D und Microsoft Paint 3D importieren.

Wichtig

Derzeit wird die Erstellung von Ressourcenpaketen mit Unity-Version 5.4.5f1 unterstützt.

1. Laden Sie das Unity-Projekt "AssetBunlder_Unity" herunter, und öffnen Sie es. Dieses Unity-Projekt enthält das Skript für die Generierung der Bündelressource.

2. Erstellen Sie ein neues GameObject.

3. Benennen Sie das GameObject basierend auf dem Inhalt.

4. Klicken Sie im Bereich Inspector auf "Add Component" (Komponente hinzufügen), und fügen Sie "Box Collider" hinzu.

   

   

5. Importieren Sie die 3D-FBX-Datei, indem Sie sie in den Projektbereich ziehen.

6. Ziehen Sie das Objekt in den Hierarchiebereich unter Ihrem neuen GameObject.

   

7. Passen Sie die Colliderdimension an, wenn sie nicht mit dem Objekt übereinstimmt. Drehen Sie das Objekt so, dass die Z-Achse angezeigt wird.

   

8. Ziehen Sie das Objekt aus dem Hierarchiebereich in den Projektbereich, um es als Prefab zu erstellen.

9. Klicken Sie unten im Inspektorbereich auf die Dropdownliste, erstellen Sie, und weisen Sie einen neuen eindeutigen Namen zu. Das folgende Beispiel zeigt das Hinzufügen und Zuweisen von "brownchair" für den AssetBundle-Namen.

   

10. Bereiten Sie eine Miniaturansicht für das Modellobjekt vor.

11. Erstellen Sie einen Ordner mit dem Namen "Assetbundles" im Ordner "Asset" des Unity-Projekts.

12. Wählen Sie im Menü Assets die Option "AssetBundles erstellen" aus, um die Datei zu generieren.

13. Laden Sie die generierte Datei in den Ordner /Files/Documents/HoloSketch auf OneDrive hoch. Laden Sie nur die asset_unique_name-Datei hoch. Sie müssen keine Manifestdateien oder AssetBundles-Dateien hochladen.
    ".

Bearbeiten der Objekte

HoloSketch unterstützt die herkömmliche Schnittstelle, die in 3D-Software weit verbreitet ist. Sie können die Objekte mit Gesten und einer Maus verschieben, drehen und skalieren. Sie können schnell zwischen verschiedenen Modi mit Sprache oder Tastatur wechseln.

Objektbearbeitungsmodi

Bearbeiten der Objekte

Kontextmenüs und Menüs "Tool belt"

Verwenden des Kontextmenüs

Doppeltippen Sie, um das Kontextmenü zu öffnen.

Menüelemente:

• Layoutoberfläche: Dies ist ein 3D-Rastersystem, in dem Sie mehrere Objekte layouten und als Gruppe verwalten können. Doppeltippen Sie auf der Layoutoberfläche, um Ihr Objekte hinzuzufügen.
• Primitive: Verwenden Sie Würfel, Kugeln, Zylinder und Kegel für Massingstudien.
• OneDrive: Öffnen Sie das OneDrive-Menü, um Objekte zu importieren.
• Hilfe: Zeigt den Hilfebildschirm an.

Kontextmenü

Verwenden des Menüs "Tool Belt"

Szene verschieben, drehen, skalieren, speichern und laden sind über das Menü "Tool Belt" verfügbar.

Verwenden von Tastatur, Gesten und Sprachbefehlen

Tastatur, Gesten und Sprachbefehle

Herunterladen der App

Laden Sie die HoloSketch-App kostenlos aus dem Microsoft Store herunter, und installieren Sie sie.

Bekannte Probleme

• Derzeit wird die Erstellung von Ressourcenpaketen mit Unity-Version 5.4.5f1 unterstützt.
• Abhängig von der Datenmenge in Ihrem OneDrive kann die App so aussehen, als ob sie beim Laden von OneDrive-Inhalten angehalten wurde.
• Derzeit unterstützt das Feature "Speichern und Laden" nur primitive Objekte.
• Die Menüs "Text", "Sound", "Video" und "Foto" sind im Kontextmenü deaktiviert.
• Die Schaltfläche "Wiedergabe" im Menü "Tool Belt" löscht die Manipulations-Gizmos.

Freigeben von Skizzen

Sie können die Videoaufzeichnungsfunktion in HoloLens verwenden, indem Sie "Hey Cortana, Aufzeichnung starten/beenden" sagen. Drücken Sie die Lauter-Taste zusammen, um ein Bild ihrer Skizze zu machen.

Über die Autoren

	Yoon Park UX-Designer @Microsoft
Patrick Sebring Entwickler-@Microsoft