Caso práctico: creación de HoloSketch, un diseño espacial y una aplicación de boceto de experiencia de usuario para HoloLensCase study - Building HoloSketch, a spatial layout and UX sketching app for HoloLens

HoloSketch es un diseño espacial en el dispositivo y una herramienta de boceto de la experiencia del usuario para HoloLens que ayuda a crear experiencias holográficas.HoloSketch is an on-device spatial layout and UX sketching tool for HoloLens to help build holographic experiences. HoloSketch funciona con un teclado y un mouse Bluetooth emparejados, así como con comandos de gestos y voz.HoloSketch works with a paired Bluetooth keyboard and mouse as well as gesture and voice commands. El objetivo de HoloSketch es proporcionar una sencilla herramienta de diseño de la experiencia de usuario para la visualización y la iteración rápidas.The purpose of HoloSketch is to provide a simple UX layout tool for quick visualization and iteration.

HoloSketch: una aplicación de diseño espacial y de boceto de la experiencia de usuario para HoloLens.HoloSketch: A spatial layout and UX sketching app for HoloLens.
HoloSketch: aplicación de diseño espacial y de boceto de la experiencia de usuario para HoloLensHoloSketch: spatial layout and UX sketching app for HoloLens

Una herramienta de diseño de experiencia de usuario sencilla para una visualización rápida e iteración.A simple UX layout tool for quick visualization and iteration.
Una herramienta de diseño de experiencia de usuario sencilla para una visualización rápida e iteraciónA simple UX layout tool for quick visualization and iteration

CaracterísticasFeatures

Primitivas para estudios rápidos y creación de prototipos de escaladoPrimitives for quick studies and scale-prototyping

Usar formas primitivas

Use formas primitivas para los estudios y la creación de prototipos de escalado rápido.Use primitive shapes for quick massing studies and scale-prototyping.

Importar objetos a través de OneDriveImport objects through OneDrive

importar objetos

Importe imágenes PNG/JPG o objetos FBX 3D (requiere empaquetado en Unity) en el espacio de realidad mixta a través de OneDrive.Import PNG/JPG images or 3D FBX objects(requires packaging in Unity) into the mixed reality space through OneDrive.

Manipular objetosManipulate objects

manipular objetos

Manipular objetos (Move/Rotate/Scale) con una interfaz de objeto 3D conocida.Manipulate objects (move/rotate/scale) with a familiar 3D object interface.

Bluetooth, Mouse/teclado, gestos y comandos de vozBluetooth, mouse/keyboard, gestures and voice commands

admite Bluetooth

HoloSketch admite comandos de mouse/teclado, gestos y comandos de voz de Bluetooth.HoloSketch supports Bluetooth mouse/keyboard, gestures and voice commands.

Segundo planoBackground

Importancia de experimentar el diseño en el dispositivoImportance of experiencing your design in the device

Al diseñar algo para HoloLens, es importante experimentar el diseño en el dispositivo.When you design something for HoloLens, it is important to experience your design in the device. Uno de los mayores desafíos en el diseño de aplicaciones de realidad mixta es que es difícil obtener el sentido de la escala, la posición y la profundidad, especialmente a través de los bocetos 2D tradicionales.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.

Costo de la comunicación basada en 2DCost of 2D based communication

Para comunicar de forma eficaz los flujos y escenarios de la experiencia de usuario a otros, un diseñador puede acabar invirtiendo mucho tiempo en crear recursos mediante herramientas tradicionales de 2D como Illustrator, Photoshop y PowerPoint.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. Estos diseños 2D suelen requerir un esfuerzo adicional para convertirlos en 3D.These 2D designs often require additional effort to convert them it into 3D. En esta traducción se pierden algunas ideas de 2D a 3D.Some ideas are lost in this translation from 2D to 3D.

Proceso de implementación complejoComplex deployment process

Dado que la realidad mixta es un nuevo lienzo para nosotros, implica una gran cantidad de iteración de diseño y de prueba y error por su naturaleza.Since mixed reality is a new canvas for us, it involves a lot of design iteration and trial and error by its nature. En el caso de los diseñadores que no están familiarizados con herramientas como Unity y Visual Studio, no es fácil poner nada en HoloLens.For designer who are not familiar with tools such as Unity and Visual Studio, it is not easy to put something together in HoloLens. Normalmente tiene que seguir el proceso siguiente para ver la ilustración 2D/3D en el dispositivo.Typically you have to go through the process below to see your 2D/3D artwork in the device. Esta era una gran barrera para diseñadores que recorren ideas y escenarios rápidamente.This was a big barrier for designers iterating on ideas and scenarios quickly.

Proceso de implementación complejoComplex deployment process
Proceso de implementaciónDeployment process

Proceso simplificado con HoloSketchSimplified process with HoloSketch

Con HoloSketch, queríamos simplificar este proceso sin involucrar las herramientas de desarrollo y el emparejamiento del portal de dispositivos.With HoloSketch, we wanted to simplify this process without involving development tools and device portal pairing. Con OneDrive, los usuarios pueden colocar fácilmente activos 2D/3D en HoloLens.Using OneDrive, users can easily put 2D/3D assets into HoloLens.

Proceso simplificado con HoloSketchSimplified process with HoloSketch
Proceso simplificado con HoloSketchSimplified process with HoloSketch

Fomento de soluciones y pensamiento de diseño de tres dimensionesEncouraging three-dimensional design thinking and solutions

Pensamos que esta herramienta proporciona a los diseñadores una oportunidad para explorar soluciones en un espacio realmente tridimensional y no estar atascadas en 2D.We thought this tool would give designers an opportunity to explore solutions in a truly three-dimensional space and not be stuck in 2D. No tienen que preocuparse por crear un fondo 3D para su interfaz de usuario, ya que el fondo es el mundo real en el caso de HoloLens.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 abre una forma para que los diseñadores exploren fácilmente el diseño 3D en HoloLens.HoloSketch opens up a way for designers to easily explore 3D design on HoloLens.

IntroducciónGet Started

Cómo importar imágenes 2D (JPG/PNG) en HoloSketchHow to import 2D images (JPG/PNG) into HoloSketch

  • Cargue imágenes JPG/PNG en la carpeta de OneDrive "Documents/HoloSketch".Upload JPG/PNG images to your OneDrive folder ‘Documents/HoloSketch’.
  • En el menú de OneDrive de HoloSketch, podrá seleccionar y colocar la imagen en el entorno.From the OneDrive menu in HoloSketch, you will be able to select and place the image in the environment.

Importar imágenes 2DImporting 2D images
Importación de imágenes y objetos 3D a través de OneDriveImporting images and 3D objects through OneDrive

Cómo importar objetos 3D en HoloSketchHow to import 3D objects into HoloSketch

Antes de cargar en su carpeta de OneDrive, siga los pasos que se indican a continuación para empaquetar los objetos 3D en un paquete de recursos de Unity.Before uploading to your OneDrive folder, please follow the steps below to package your 3D objects into a Unity asset bundle. Con este proceso puede importar los archivos FBX/OBJ del software 3D, como Maya, Cinema 4D y 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.

Importante

Actualmente, la creación de paquetes de activos es compatible con la versión de Unity 5.4.5 F1.Currently, asset bundle creation is supported with Unity version 5.4.5f1.

  1. Descargue y abra el proyecto de Unity ' AssetBunlder_Unity '.Download and open the Unity project 'AssetBunlder_Unity'. Este proyecto de Unity incluye el script para la generación de recursos de agrupación.This Unity project includes the script for the bundle asset generation.

  2. Cree un nuevo GameObject.Create a new GameObject.

  3. Asigne el nombre GameObject a la base de contenido.Name the GameObject based on the contents.

  4. En el panel Inspector, haga clic en ' Agregar componente ' y en Agregar ' Box Colisionador '.In the Inspector panel, click ‘Add Component’ and add ‘Box Collider’.

    En el panel Inspector, haga clic en ' Agregar componente ' y en Agregar ' Box Colisionador '

    En el panel Inspector, haga clic en ' Agregar componente ' y en Agregar ' Box Colisionador ' #2

  5. Importe el archivo FBX 3D arrastrándolo al panel Proyecto.Import the 3D FBX file by dragging it into the project panel.

  6. Arrastre el objeto al panel jerarquía bajo el nuevo GameObject .Drag the object into the Hierarchy panel under your new GameObject .

    Arrastre el objeto al panel jerarquía bajo el nuevo GameObject

  7. Ajuste la dimensión del Colisionador si no coincide con el objeto.Adjust the collider dimension if it does not match the object. Gire el objeto al eje Z de la esfera.Rotate the object to face Z-axis .

    Ajuste la dimensión del Colisionador si no coincide con el objeto.

  8. Arrastre el objeto desde el panel jerarquía hasta el panel Proyecto para convertirlo en recurso prefabricado .Drag the object from the Hierarchy panel to the Project panel to make it prefab .

  9. En la parte inferior del panel Inspector, haga clic en la lista desplegable, crear y asignar un nuevo nombre único.On the bottom of the inspector panel, click the dropdown, create and assign a new unique name. En el ejemplo siguiente se muestra cómo agregar y asignar ' brownchair ' para el nombre de AssetBundle.Below example shows adding and assigning 'brownchair' for the AssetBundle Name.

    En la parte inferior del panel Inspector, haga clic en la lista desplegable y asigne un nuevo nombre único.

  10. Preparar una imagen en miniatura para el objeto de modelo.Prepare a thumbnail image for the model object. Arrastre una imagen al panel Proyecto y asigne el nombre usado para el objeto.Drag an image into the project panel and assign the name used for the object.

  11. Cree una carpeta denominada ' Assetbundles ' en la carpeta ' Asset ' del proyecto de Unity.Create a folder named ‘Assetbundles’ under the Unity project’s ‘Asset’ folder.

  12. En el menú activos, seleccione ' compilar AssetBundles ' para generar el archivo.From the Assets menu, select ‘Build AssetBundles’ to generate file. En el menú activos, seleccione ' compilar AssetBundles ' para generar el archivo.From the Assets menu, select ‘Build AssetBundles’ to generate file.

  13. Cargue el archivo generado en la carpeta/Files/Documents/HoloSketch en OneDrive.Upload the generated file to the /Files/Documents/HoloSketch folder on OneDrive. Cargue solo el archivo de asset_unique_name.Upload the asset_unique_name file only. No es necesario cargar los archivos de manifiesto o el archivo AssetBundles.You don’t need to upload manifest files or AssetBundles file.
    Agregar archivos a archivos/documentos/HoloSketch/carpeta verá el  objeto 3D agregado en el menú de OneDrive de HoloSketchAdd files to Files/Documents/HoloSketch/ folder You will see added 3D object in HoloSketch's OneDrive menu

Cómo manipular los objetosHow to manipulate the objects

HoloSketch admite la interfaz tradicional que se usa ampliamente en el software 3D.HoloSketch supports the traditional interface that is widely used in 3D software. Puede usar la acción de desplazar, girar y escalar los objetos con gestos y un mouse.You can use move, rotate, scale the objects with gestures and a mouse. Puede cambiar rápidamente entre diferentes modos con voz o teclado.You can quickly switch between different modes with voice or keyboard.

Modos de manipulación de objetosObject manipulation modes

Cómo manipular los objetosHow to manipulate the objects
Cómo manipular los objetosHow to manipulate the objects

Menús contextuales y cinturón de herramientasContextual and Tool Belt menus

Usar el menú contextualUsing the Contextual Menu

Doble aire Puntee para abrir el menú contextual.Double air tap to open the Contextual Menu.

Elementos de menú:Menu items:

  • Superficie de diseño: Se trata de un sistema de cuadrícula 3D en el que puede diseñar varios objetos y administrarlos como un grupo.Layout Surface: This is a 3D grid system where you can layout multiple objects and manage them as a group. Haga doble punteo en la superficie de diseño para agregarle objetos.Double air-tap on the Layout Surface to add objects to it.
  • Primitivas: Use cubos, esferas, cilindros y conos para estudios en masa.Primitives: Use cubes, spheres, cylinders and cones for massing studies.
  • OneDrive: Abra el menú de OneDrive para importar objetos.OneDrive: Open the OneDrive menu to import objects.
  • Ayuda: Muestra la pantalla de ayuda.Help: Displays help screen.

Menú contextualContextual menu
Menú contextualContextual menu

Usar el menú de la herramienta cinturónUsing the Tool Belt Menu

La escena de movimiento, giro, escala, guardado y carga está disponible en el menú de cinturón de herramientas.Move, Rotate, Scale, Save, and Load Scene are available from the Tool Belt Menu.

Usar comandos de teclado, gestos y vozUsing keyboard, gestures and voice commands

Comandos de teclado, gestos y vozKeyboard, Gestures and Voice Commands
Teclado, gestos y comandos de vozKeyboard, gestures, and voice commands

Descargar la aplicaciónDownload the app

HoloSketch app icon Descargue e instale la aplicación HoloSketch gratuitamente desde el Microsoft Store Download and install the HoloSketch app for free from the Microsoft Store

Problemas conocidosKnown issues

  • Actualmente se admite la creación de paquetes de activos con la versión de Unity 5.4.5 F1.Currently asset bundle creation is supported with Unity version 5.4.5f1.
  • En función de la cantidad de datos en OneDrive, la aplicación podría aparecer como si se hubiera detenido mientras se cargaba el contenido de OneDriveDepending on the amount of data in your OneDrive, the app might appear as if it has stopped while loading OneDrive contents
  • Actualmente, la característica de guardar y cargar solo admite objetos primitivosCurrently, Save and Load feature only supports primitive objects
  • Los menús texto, sonido, vídeo y foto están deshabilitados en el menú contextualText, Sound, Video and Photo menus are disabled on the contextual menu
  • El botón reproducir del menú del cinturón de herramientas borra la Gizmos de manipulación.The Play button on the Tool Belt menu clears the manipulation gizmos

Compartir bocetosSharing your sketches

Puede usar la característica de grabación de vídeo de HoloLens diciendo "Hola Cortana, iniciar/detener grabación".You can use the video recording feature in HoloLens by saying 'Hey Cortana, Start/Stop recording'. Presione la tecla subir/bajar volumen para tomar una foto del boceto.Press the volume up/down key together to take a picture of your sketch.

Acerca de los autoresAbout the authors

Picture of Dong Yoon Park Dong Yoon ParkDong Yoon Park
Diseñador de la experiencia del usuario @MicrosoftUX Designer @Microsoft
Picture of Patrick Sebring Patrick SebringPatrick Sebring
Desarrollador @MicrosoftDeveloper @Microsoft