Fallstudie: Erstellen von holosketch, ein räumliches Layout und eine UX-skizzieren-App für hololensCase study - Building HoloSketch, a spatial layout and UX sketching app for HoloLens

Holosketch ist ein auf dem Gerät räumliches Layout und UX-skeshottool für hololens, das Sie bei der Erstellung von Holographic-Erfahrungen unterstützt.HoloSketch is an on-device spatial layout and UX sketching tool for HoloLens to help build holographic experiences. Holosketch funktioniert mit einer gekoppelten Bluetooth-Tastatur und-Maus sowie mit Gesten-und Sprachbefehlen.HoloSketch works with a paired Bluetooth keyboard and mouse as well as gesture and voice commands. Der Zweck von holosketch besteht darin, ein einfaches UX-Layouttool für die schnelle Visualisierung und Iterationen bereitzustellen.The purpose of HoloSketch is to provide a simple UX layout tool for quick visualization and iteration.

Holosketch: ein räumliches Layout und eine UX-skizzieren-App für hololens.HoloSketch: A spatial layout and UX sketching app for HoloLens.
Holosketch: räumliche Layout und UX-App für hololensHoloSketch: spatial layout and UX sketching app for HoloLens

Ein einfaches UX-Layouttool für die schnelle Visualisierung und Iterationen.A simple UX layout tool for quick visualization and iteration.
Ein einfaches UX-Layouttool für die schnelle Visualisierung und IterationenA simple UX layout tool for quick visualization and iteration

FeaturesFeatures

Grundtypen für schnelles Studium und Skalierung von PrototypenPrimitives for quick studies and scale-prototyping

Verwenden primitiver Formen

Verwenden Sie primitive Formen für schnelle und skalierbare Prototypen.Use primitive shapes for quick massing studies and scale-prototyping.

Importieren von Objekten über onedriveImport objects through OneDrive

Importieren von Objekten

Importieren Sie PNG/JPG-Images oder 3D-b-Objekte (erfordert Verpacken in Unity) in den gemischten Reality-Raum über onedrive.Import PNG/JPG images or 3D FBX objects(requires packaging in Unity) into the mixed reality space through OneDrive.

Objekte bearbeitenManipulate objects

Bearbeiten von Objekten

Bearbeiten Sie Objekte (verschieben/drehen/Skalieren) mit einer vertrauten 3D-Objektschnittstelle.Manipulate objects (move/rotate/scale) with a familiar 3D object interface.

Bluetooth-, Maus-/Tastatur-, Gesten-und SprachbefehleBluetooth, mouse/keyboard, gestures and voice commands

unterstützt Bluetooth

Holosketch unterstützt Bluetooth-Maus/Tastatur, Gesten und Sprachbefehle.HoloSketch supports Bluetooth mouse/keyboard, gestures and voice commands.

HintergrundBackground

Wichtigkeit der Erfahrung des Entwurfs im GerätImportance of experiencing your design in the device

Wenn Sie etwas für hololens entwerfen, ist es wichtig, dass Sie Ihr Design auf dem Gerät haben.When you design something for HoloLens, it is important to experience your design in the device. Eine der größten Herausforderungen beim Mixed Reality-App-Entwurf besteht darin, dass es schwierig ist, den Sinn von Skalierbarkeit, Position und Tiefe zu erzielen, insbesondere durch herkömmliche 2D-Skizzen.One of the biggest challenges in mixed reality app design is that it is hard to get the sense of scale, position and depth, especially through traditional 2D sketches.

Kosten der 2D-basierten KommunikationCost of 2D based communication

Zum effektiven kommunizieren von UX-Flows und-Szenarien für andere kann es sein, dass ein Designer viel Zeit für die Erstellung von Assets mit herkömmlichen 2D-Tools wie Illustrator, Photoshop und PowerPoint aufwenden könnte.To effectively communicate UX flows and scenarios to others, a designer may end up spending a lot of time creating assets using traditional 2D tools such as Illustrator, Photoshop and PowerPoint. Diese 2D-Entwürfe erfordern häufig zusätzlichen Aufwand, Sie in 3D zu konvertieren.These 2D designs often require additional effort to convert them it into 3D. Einige Ideen gehen bei dieser Übersetzung von 2D in 3D verloren.Some ideas are lost in this translation from 2D to 3D.

Komplexer Bereitstellungs ProzessComplex deployment process

Da gemischte Realität eine neue Canvas für uns ist, umfasst Sie viele Entwurfs Iterationen und-Testversionen und-Fehler.Since mixed reality is a new canvas for us, it involves a lot of design iteration and trial and error by its nature. Für Designer, die mit Tools wie Unity und Visual Studio nicht vertraut sind, ist es nicht einfach, etwas in hololens zu platzieren.For designer who are not familiar with tools such as Unity and Visual Studio, it is not easy to put something together in HoloLens. In der Regel müssen Sie den folgenden Prozess durchlaufen, um Ihre 2D/3D-Grafik im Gerät anzuzeigen.Typically you have to go through the process below to see your 2D/3D artwork in the device. Dies war eine große Barriere für Entwickler, die Ideen und Szenarios schnell durchlaufen.This was a big barrier for designers iterating on ideas and scenarios quickly.

Komplexer Bereitstellungs ProzessComplex deployment process
BereitstellungsprozessDeployment process

Vereinfachter Prozess mit holosketchSimplified process with HoloSketch

Mit holosketch wollten wir diesen Prozess vereinfachen, ohne die Entwicklungs Tools und Geräte Portal Kopplung einzubeziehen.With HoloSketch, we wanted to simplify this process without involving development tools and device portal pairing. Mithilfe von onedrive können Benutzer problemlos 2D/3D-Assets in hololens einfügen.Using OneDrive, users can easily put 2D/3D assets into HoloLens.

Vereinfachter Prozess mit holosketchSimplified process with HoloSketch
Vereinfachter Prozess mit holosketchSimplified process with HoloSketch

Fördern von dreidimensionalen Entwurfs Gedanken und-LösungenEncouraging three-dimensional design thinking and solutions

Wir dachten, dass dieses Tool Entwicklern die Möglichkeit bietet, Lösungen in einem wirklich dreidimensionalen Raum zu untersuchen und nicht in 2D stecken zu müssen.We thought this tool would give designers an opportunity to explore solutions in a truly three-dimensional space and not be stuck in 2D. Sie müssen sich keine Gedanken über das Erstellen eines 3D-Hintergrunds für die Benutzeroberfläche machen, da der Hintergrund im Fall von hololens die wirkliche Welt ist.They don’t have to think about creating a 3D background for their UI since the background is the real world in the case of HoloLens. Holosketch öffnet eine Methode, mit der Designer den 3D-Entwurf auf hololens problemlos untersuchen können.HoloSketch opens up a way for designers to easily explore 3D design on HoloLens.

Erste SchritteGet Started

Importieren von 2D-images (JPG/PNG) in holosketchHow to import 2D images (JPG/PNG) into HoloSketch

  • Laden Sie JPG/PNG-Bilder in ihren onedrive-Ordner "Documents/holosketch" hoch.Upload JPG/PNG images to your OneDrive folder ‘Documents/HoloSketch’.
  • Über das onedrive-Menü in holosketch können Sie das Bild auswählen und in der Umgebung platzieren.From the OneDrive menu in HoloSketch, you will be able to select and place the image in the environment.

Importieren von 2D-imagesImporting 2D images
Importieren von Bildern und 3D-Objekten über onedriveImporting images and 3D objects through OneDrive

Importieren von 3D-Objekten in holosketchHow to import 3D objects into HoloSketch

Führen Sie vor dem Hochladen in ihren onedrive-Ordner die folgenden Schritte aus, um die 3D-Objekte in ein Unity-Ressourcen Bündel zu packen.Before uploading to your OneDrive folder, please follow the steps below to package your 3D objects into a Unity asset bundle. Mithilfe dieses Prozesses können Sie Ihre Dateien mit dem Namen "f" und "obj" aus 3D-Software importieren, z. b. Maya, Kino 4D und Microsoft Paint 3D.Using this process you can import your FBX/OBJ files from 3D software such as Maya, Cinema 4D and Microsoft Paint 3D.

Wichtig

Derzeit wird die Erstellung von Asset-Paketen mit Unity-Version 5.4.5 F1 unterstützt.Currently, asset bundle creation is supported with Unity version 5.4.5f1.

  1. Das Unity-Projekt "AssetBunlder_Unity"herunterladen und öffnen.Download and open the Unity project 'AssetBunlder_Unity'. Dieses Unity-Projekt enthält das Skript für die Bundle-Asset-Generierung.This Unity project includes the script for the bundle asset generation.

  2. Erstellen Sie ein neues gameobject-Objekt.Create a new GameObject.

  3. Benennen Sie das gameobject basierend auf dem Inhalt.Name the GameObject based on the contents.

  4. Klicken Sie im Inspektor-Panel auf "Komponente hinzufügen", und fügen Sie "Box Collider" hinzu.In the Inspector panel, click ‘Add Component’ and add ‘Box Collider’.

    Klicken Sie im Inspektor-Panel auf "Komponente hinzufügen", und fügen Sie "Box Collider" hinzu.

    Klicken Sie im Inspektor-Panel auf "Komponente hinzufügen", und fügen Sie den #2 "Box Collider" hinzu.

  5. Importieren Sie die 3D-Datei-Datei, indem Sie Sie in das Projekt Panel ziehen.Import the 3D FBX file by dragging it into the project panel.

  6. Ziehen Sie das Objekt in den Bereich Hierarchie unter dem neuen gameobject .Drag the object into the Hierarchy panel under your new GameObject .

    Ziehen Sie das Objekt in den Bereich Hierarchie unter dem neuen gameobject.

  7. Passen Sie die Collider-Dimension an, wenn Sie nicht mit dem-Objekt identisch ist.Adjust the collider dimension if it does not match the object. Drehen Sie das Objekt um die Z-Achse .Rotate the object to face Z-axis .

    Passen Sie die Collider-Dimension an, wenn Sie nicht mit dem Objekt identisch ist.

  8. Ziehen Sie das Objekt aus dem Bereich Hierarchie in das Projekt Panel, um es vorzu machen .Drag the object from the Hierarchy panel to the Project panel to make it prefab .

  9. Klicken Sie unten im Inspektor-Panel auf die Dropdown Liste, erstellen Sie einen neuen eindeutigen Namen, und weisen Sie ihn zu.On the bottom of the inspector panel, click the dropdown, create and assign a new unique name. Das folgende Beispiel zeigt das Hinzufügen und Zuweisen von "brownstuhl" für den assetbundle-Namen.Below example shows adding and assigning 'brownchair' for the AssetBundle Name.

    Klicken Sie im unteren Bereich des inspektorbereichs auf die Dropdown Liste, und weisen Sie einen neuen eindeutigen Namen zu.

  10. Bereiten Sie ein Miniaturbild für das Modell Objekt vor.Prepare a thumbnail image for the model object. Ziehen Sie ein Bild in das Projekt Panel, und weisen Sie den Namen zu, der für das Objekt verwendet wird.Drag an image into the project panel and assign the name used for the object.

  11. Erstellen Sie im Ordner "Asset" des Unity-Projekts einen Ordner mit dem Namen "assetbundles".Create a folder named ‘Assetbundles’ under the Unity project’s ‘Asset’ folder.

  12. Wählen Sie im Menü Assets die Option zum Erstellen von assetbundles aus, um die Datei zu generieren.From the Assets menu, select ‘Build AssetBundles’ to generate file. Wählen Sie im Menü Assets die Option zum Erstellen von assetbundles aus, um die Datei zu generieren.From the Assets menu, select ‘Build AssetBundles’ to generate file.

  13. Laden Sie die generierte Datei in den Ordner/Files/Documents/HoloSketch auf onedrive hoch.Upload the generated file to the /Files/Documents/HoloSketch folder on OneDrive. Laden Sie nur die asset_unique_name Datei hoch.Upload the asset_unique_name file only. Manifestressourcen oder assetbundle-Dateien müssen nicht hochgeladen werden.You don’t need to upload manifest files or AssetBundles file.
    Dateien zu Dateien/Dokumenten/holosketch/Ordner hinzufügen  im onedrive-Menü von holosketch wird ein hinzugefügtes 3D-Objekt angezeigt.Add files to Files/Documents/HoloSketch/ folder You will see added 3D object in HoloSketch's OneDrive menu

Vorgehensweise beim Bearbeiten der ObjekteHow to manipulate the objects

Holosketch unterstützt die herkömmliche Oberfläche, die häufig in 3D-Software verwendet wird.HoloSketch supports the traditional interface that is widely used in 3D software. Sie können das Verschieben, drehen und Skalieren der Objekte mit Gesten und Maus verwenden.You can use move, rotate, scale the objects with gestures and a mouse. Sie können schnell zwischen verschiedenen Modi mit Stimme oder Tastatur wechseln.You can quickly switch between different modes with voice or keyboard.

Objekt BearbeitungsmodiObject manipulation modes

Vorgehensweise beim Bearbeiten der ObjekteHow to manipulate the objects
Vorgehensweise beim Bearbeiten der ObjekteHow to manipulate the objects

Kontext-und toolbandmenüsContextual and Tool Belt menus

Verwenden des KontextmenüsUsing the Contextual Menu

Doppel Tippen Sie auf, um das Kontextmenü zu öffnen.Double air tap to open the Contextual Menu.

Menü Elemente:Menu items:

  • Layoutoberfläche: Dabei handelt es sich um ein 3D-Raster System, in dem Sie mehrere Objekte erstellen und als Gruppe verwalten können.Layout Surface: This is a 3D grid system where you can layout multiple objects and manage them as a group. Doppel Tippen Sie auf die layoutoberfläche, um Ihr Objekte hinzuzufügen.Double air-tap on the Layout Surface to add objects to it.
  • Primitive: Verwenden Sie Cubes, Bereiche, Zylinder und Kegel zum Durchführen von Studien.Primitives: Use cubes, spheres, cylinders and cones for massing studies.
  • Onedrive: Öffnen Sie das onedrive-Menü, um Objekte zu importieren.OneDrive: Open the OneDrive menu to import objects.
  • Hilfe: Zeigt den Hilfe Bildschirm an.Help: Displays help screen.

KontextmenüContextual menu
KontextmenüContextual menu

Verwenden des toolbandmenüsUsing the Tool Belt Menu

Verschieben, drehen, skalieren, speichern und Laden von Szenen sind im Menüband-Menü verfügbar.Move, Rotate, Scale, Save, and Load Scene are available from the Tool Belt Menu.

Verwenden von Tastatur, Gesten und SprachbefehlenUsing keyboard, gestures and voice commands

Tastatur-, Gesten-und SprachbefehleKeyboard, Gestures and Voice Commands
Tastatur-, Gesten-und SprachbefehleKeyboard, gestures, and voice commands

Herunterladen der AppDownload the app

HoloSketch app icon Laden Sie die holosketch-App kostenlos herunter, und installieren Sie Sie im Microsoft Store Download and install the HoloSketch app for free from the Microsoft Store

Bekannte ProblemeKnown issues

  • Derzeit wird die Erstellung von Ressourcen Paketen mit Unity-Version 5.4.5 F1 unterstützt.Currently asset bundle creation is supported with Unity version 5.4.5f1.
  • Abhängig von der Datenmenge in Ihrem onedrive wird die APP möglicherweise so angezeigt, als ob Sie beim Laden von onedrive-Inhalten angehalten wurde.Depending on the amount of data in your OneDrive, the app might appear as if it has stopped while loading OneDrive contents
  • Zurzeit unterstützt die Funktion "Speichern und laden" nur primitive Objekte.Currently, Save and Load feature only supports primitive objects
  • Text-, Ton-, Video-und Fotomenüs sind im Kontextmenü deaktiviert.Text, Sound, Video and Photo menus are disabled on the contextual menu
  • Die Wiedergabe Schaltfläche im Menüband-Menü löscht die Manipulation GizmosThe Play button on the Tool Belt menu clears the manipulation gizmos

Freigeben von SkizzenSharing your sketches

Sie können das Video Aufzeichnungs Feature in hololens verwenden, indem Sie "Hey Cortana, Start/stoppaufzeichnung" sagen.You can use the video recording feature in HoloLens by saying 'Hey Cortana, Start/Stop recording'. Drücken Sie die Taste nach oben/unten, um ein Bild der Skizze zu machen.Press the volume up/down key together to take a picture of your sketch.

Über die AutorenAbout the authors

Picture of Dong Yoon Park Dong-Yoon-ParkDong Yoon Park
UX-Designer @MicrosoftUX Designer @Microsoft
Picture of Patrick Sebring Patrick-BringPatrick Sebring
Trägers @MicrosoftDeveloper @Microsoft