Diseño para la realidad mixtaDesigning for Mixed Reality

Diseña tu aplicación para que tenga un buen aspecto en realidad mixta y aprovecha los nuevos métodos de entrada.Design your app to look good in Mixed Reality, and take advantage of new input methods.

Información generalOverview

La realidad mixta es el resultado de mezclar el mundo físico con el mundo digital.Mixed Reality is the result of blending the physical world with the digital world. El espectro de experiencias de realidad mixta incluye en un dispositivo extremo, como HoloLens (un dispositivo que combina contenido generado por el equipo con el mundo real) y, en el otro, una vista totalmente envolvente de la realidad virtual (como se ve con un casco de la realidad mixta de Windows).The spectrum of mixed reality experiences includes at one extreme devices such as the HoloLens (a device that mixes computer generated content with the real world), and at the other a completely immersive view of Virtual Reality (as viewed with a Windows Mixed Reality headset). Vea tipos de aplicaciones de realidad mixta para ver ejemplos de cómo variarán las experiencias.See Types of mixed reality apps for examples of how experiences will vary.

Casi todas las aplicaciones UWP existentes se ejecutarán en el entorno de realidad mixta como aplicaciones 2D sin cambios, aunque la experiencia del usuario se puede mejorar siguiendo algunas de las instrucciones de este tema.Almost all existing UWP apps will run in the Mixed Reality environment as 2D apps with no changes, although the experience for the user can be improved by following some of the guidance in this topic.

Vista de realidad mixta

Los auriculares HoloLens y Windows Mixed Reality admiten aplicaciones que se ejecutan en la plataforma UWP y ambos admiten dos tipos distintos de experiencia.Both the HoloLens and Windows Mixed Reality headsets support applications running on the UWP platform, and both support two distinct types of experience.

Experiencia en 2D frente a la experiencia envolvente2D vs. Immersive Experience

Una aplicación envolvente usa toda la presentación visible para el usuario y la coloca en el centro de una vista creada por la aplicación.An immersive app takes over the entire display visible to the user, placing her at the center of a view created by the app. Por ejemplo, un juego envolvente podría poner al usuario en la superficie de un planeta extranjero, o una aplicación de guía de paseo podría poner al usuario en un pueblo de Sudamérica.For example, an immersive game might place the user on the surface of an alien planet, or a tour guide app might place the user in a South American village. La creación de una aplicación envolvente requiere gráficos 3D o vídeo Stereographic capturado.Creating an immersive app requires 3D graphics or captured stereographic video. Las aplicaciones envolventes se suelen desarrollar con un motor de juegos de terceros, como Unity o con DirectX.Immersive apps are often developed using a 3rd party game engine such as Unity, or with DirectX.

Si va a crear aplicaciones envolventes, visite el centro de desarrollo de la realidad mixta de Windows para obtener más información.If you are creating immersive apps, you should visit the Windows Mixed Reality Dev Center for more information.

Una aplicación 2D se ejecuta como una ventana plana tradicional dentro de la vista del usuario.A 2D app runs as a traditional flat window within the user's view. En HoloLens, es decir, una vista anclada a la pared o un punto en el espacio de los usuarios en la sala de reuniones o la oficina del mundo real.On the HoloLens, that means a view pinned to the wall or a point in space in the users own real-world living room or office. En un casco de realidad mixta de Windows, la aplicación está anclada a una pared en la Página principal de realidad mixta (a veces denominada casa del acantilado).In a Windows Mixed Reality headset, the app is pinned to a wall in the mixed reality home (sometimes called the Cliff House).

Varias aplicaciones que se ejecutan en realidad mixta

Estas aplicaciones 2D no asumen toda la vista: se colocan en ella.These 2D apps do not take over the entire view: they are placed within it. Puede haber varias aplicaciones 2D en el entorno a la vez.Multiple 2D apps can exist in the environment at once.

En el resto de este tema se describen las consideraciones de diseño para la experiencia 2D.The remainder of this topic discusses design considerations for the 2D experience.

Inicio de aplicaciones 2DLaunching 2D apps

Menú Inicio de realidad mixta

Todas las aplicaciones se inician desde el menú Inicio, pero también es posible crear un objeto 3D para que actúe como un iniciador de aplicaciones.All apps are launched from the Start Menu, but it's also possible to create a 3D object to act as an app launcher. Vea este vídeo para obtener más información.See this video for details.

Introducción a la entrada de la aplicación 2DThe 2D App Input Overview

Los teclados y ratones se admiten en las plataformas HoloLens y Mixed Reality.Keyboards and mice are supported on both HoloLens and Mixed Reality platforms. Puede emparejar un teclado y un mouse directamente con HoloLens a través de Bluetooth.You can pair a keyboard and mouse directly with the HoloLens over Bluetooth. Las aplicaciones de realidad mixta admiten el mouse y el teclado conectados al equipo host.Mixed Reality apps support the mouse and keyboard connected to the host computer. Ambos pueden ser útiles en situaciones en las que es necesario un nivel de control preciso.Both may be useful in situations when a fine-level of control is necessary.

También se admiten otros métodos de entrada, más naturales, y pueden ser especialmente útiles cuando el usuario no está sentado en un escritorio con un teclado real delante o cuando se necesita un control preciso.Other, more natural, input methods are also supported, and these may be particularly useful when the user isn't sitting at a desk with a real keyboard in front of them, or when fine control is needed.

Sin ningún hardware o codificación adicional, las aplicaciones usarán fijamente: el vector que busca el usuario, como puntero del mouse al trabajar con aplicaciones 2D.Without any extra hardware or coding, apps will use gaze - the vector your user is looking along - as a mouse pointer when working with 2D apps. Se implementa como si el puntero del mouse se desplace sobre algo de la escena virtual.It is implemented as if a mouse pointer was hovering over something in the virtual scene.

En una interacción típica, el usuario observará un control en la aplicación, lo que hará que se resalte.In a typical interaction, your user will look at a control in your app, causing it to highlight. El usuario iniciará una acción, mediante un gesto (en HoloLens) o un contratador, o bien proporcionando un comando de voz.The user will when trigger an action, using either a gesture (on the HoloLens), or a contoller or by giving a voice command. Si el usuario selecciona un campo de entrada de texto, aparecerá el teclado del software.If the user selects a text input field, the software keyboard will appear.

Teclado emergente en realidad mixta

Es importante tener en cuenta que todas estas interacciones se realizarán automáticamente sin codificación adicional por su parte, como consecuencia de la ejecución en la plataforma de UWP.It's important to note that all these interactions will happen automatically with no extra coding on your part, as a consequence of running on the UWP platform. La entrada de los auriculares HoloLens y de realidad mixta aparecerá como entrada táctil en la aplicación 2D.Input from the HoloLens and Mixed Reality headset will appear as touch input to the 2D app. Esto significa que muchas aplicaciones de UWP se ejecutarán y se podrán usar en la realidad mixta de forma predeterminada.This means that many UWP apps will run and be usable in Mixed Reality, by default.

Dicho esto, con algún trabajo adicional, la experiencia puede mejorar en gran medida.That said, with some extra work, the experience can be improved greatly. Por ejemplo, el control de voz puede ser especialmente eficaz.For example, voice control can be especially effective. Tanto HoloLens como entornos de realidad mixta admiten comandos de voz para iniciar e interactuar con aplicaciones, y la compatibilidad con voz aparecerá como una extensión natural de este enfoque.Both HoloLens and Mixed Reality environments support voice commands for launching and interacting with apps, and including voice support will appear as a natural extension of this approach. Consulte interacciones de voz para más información sobre cómo agregar compatibilidad con voz a la aplicación para UWP.See Speech interactions for more information on adding voice support to your UWP app.

Seleccionar el controlador adecuadoSelecting the right controller

Controladores de movimiento de realidad mixta

Varios métodos de entrada nuevos se han diseñado especialmente para su uso con la realidad mixta, en concreto:Several novel input methods have been designed especially for use with Mixed Reality, specifically:

Estos controladores hacen que la interacción con objetos virtuales parezca natural y precisa.These controllers make interacting with virtual objects seem natural and precise. Algunas de las interacciones que obtendrá de forma gratuita.Some of the interactions you get for free. Por ejemplo, el gesto de selección de HoloLens o al hacer clic en la tecla o el desencadenador de Windows del controlador de movimiento generará la respuesta de entrada que cabría esperar, de nuevo, sin necesidad de codificación por su parte.For example, the HoloLens select gesture or clicking on the Motion Controller's Windows key or trigger will generate the input response you would expect, again, with no coding on your part.

En otras ocasiones, querrá agregar código para aprovechar las ventajas de la información adicional y las entradas que están disponibles.At other times, you will want to add code to take advantage of the extra information and inputs that are made available. Por ejemplo, los controladores de movimiento se pueden usar para manipular objetos con un nivel de control fino, si escribe código que tenga en cuenta la posición y las pulsaciones de botones.For example, the Motion Controllers can be used to manipulate objects with a fine level of control, if you write code that takes their position and button presses into account.

Nota

En Resumen: la entidad de seguridad de GUID debe ser proporcionar siempre al usuario como un método de entrada natural y sin problemas como sea posible.In summary: the guiding principal should be to always provide the user with as natural and frictionless an input method as possible.

consideraciones sobre el diseño de aplicaciones en 2D: funcionalidad2D App Design considerations: Functionality

Al crear una aplicación para UWP que se usará potencialmente en una plataforma de realidad mixta, hay varios aspectos que hay que tener en cuenta.When creating a UWP app that will potentially be used on a Mixed Reality platform, there are several things to keep in mind.

  • La operación de arrastrar y colocar no funciona bien cuando se usa con controladores de movimiento, controladores de juegos o gestos.Drag and drop may not work well when used with Motion Controllers, gamepads or gestures. Si su aplicación depende en gran medida de arrastrar y colocar, deberá proporcionar un método alternativo para admitir esta acción, como presentar un cuadro de diálogo que confirma si los objetos se van a pasar a una nueva ubicación.If your application depends heavily on drag and drop, you will need to provide an alternative method of supporting this action, such as presenting a dialog confirming if objects to be moved to a new location.

  • Tenga en cuenta cómo cambia el sonido.Be aware how sound changes. Si la aplicación genera efectos de sonido, el origen del sonido parecerá ser la ubicación anclada de la aplicación en el mundo virtual.If your app generates sound effects, the source of the sound will appear to be your app's pinned location in the virtual world. Cuando el usuario sale de la aplicación, el sonido disminuirá.As the user moves away from the app, sound will diminish. Consulte sonido espacial para obtener más información.See Spatial sound for more information.

  • Tenga en cuenta el campo de vista y proporcione prestaciones.Consider the field of view and provide affordances. No todos los dispositivos proporcionarán un campo de vista tan grande como monitor del equipo.Not every device will provide as large a field of view as a computer monitor. Consulte el marco holográfica para obtener detalles completos.See Holographic frame for complete details. Además, el usuario puede estar lejos de una aplicación en ejecución.Furthermore, the user may be some distance away from a running app. Es decir, la aplicación puede aparecer anclada a la pared en una ubicación diferente del mundo (real o virtual).That is, the app may appear pinned to the wall at a different location in the world (real or virtual). Es posible que la aplicación necesite tener la atención de los usuarios o tener en cuenta que toda la vista no es visible en todo momento.Your app may need to get the users attention, or take into account that the entire view is not visible at all times. Las notificaciones del sistema están disponibles, pero otra manera de obtener la atención del usuario puede ser generar una alerta de sonido o de voz .Toast notifications are available, but another way to get the user's attention might be to generate a sound or speech alert.

  • A una aplicación de 2D se le asigna automáticamente una barra de aplicación para que el usuario pueda moverla y escalarla en el entorno virtual.A 2D app is automatically given an app bar to allow the user to move and scale them in the virtual environment. Se puede cambiar el tamaño de las vistas verticalmente o cambiar su tamaño manteniendo la misma relación de aspecto.The views can be resized vertically, or resized maintaining the same aspect ratio.

consideraciones sobre el diseño de aplicaciones en 2D: UI/UX2D app design considerations: UI/UX

  • Los controles XAML que implementan el sistema de diseño fluida , como la vista de navegación, y efectos como acrílico funcionan especialmente bien en aplicaciones de realidad mixta 2D.XAML controls which implement the Fluent Design System such as the Navigation view, and effects such as Acrylic all work especially well in 2D Mixed Reality apps.

  • Pruebe el tamaño de Windows y el texto de la aplicación en un dispositivo de realidad mixta o, al menos, en el simulador de realidad mixta.Test your app's text and windows size in a Mixed Reality device, or at the very least in the Mixed Reality Simulator. La aplicación tendrá un tamaño de Windows predeterminado de 853x480 píxeles efectivos.Your app will have a default windows size of 853x480 effective pixels. Use tamaños de fuente mayores (se recomienda un tamaño de punto de aproximadamente 32) y lea actualización de la aplicación universal existente para Hololens.Use larger font sizes (a point size of approximately 32 is recommended), and read Updating your existing universal app for Hololens. En la tipografía del artículo se trata en detalle este tema.The article Typography covers this topic in detail. Al trabajar en Visual Studio, hay una configuración de editor de diseño XAML para una aplicación de 57 "HoloLens 2D que proporciona una vista con la escala y las dimensiones correctas.When working in Visual Studio, there is a XAML design editor setting for a 57" HoloLens 2D App which provides a view with the correct scale and dimensions.

El texto que se muestra en las aplicaciones de realidad mixta debe ser grande.

  • Su mirada es el mouse.Your gaze is your mouse. Cuando el usuario mira algo, actúa como un evento Touch Hover , por lo que simplemente examinar un objeto puede desencadenar una interacción emergente involuntaria u otra interacción no deseada.When the user looks at something, it acts as a touch hover event, so simply looking at an object may trigger an inadvertent pop-up or other unwanted interaction. Es posible que necesite detectar si la aplicación se está ejecutando actualmente en la realidad mixta y cambiar este comportamiento.You may need to detect if the app is currently running in Mixed Reality and change this behavior. Vea compatibilidad con tiempo de ejecución, a continuación.See Runtime support, below.

  • Cuando un usuario mira algo o apunta con un controlador de movimiento, se producirá un evento de desplazamiento táctil .When a user gazes towards something or points with a motion controller, a touch hover event will occur. Se compone de un PointerPoint donde PointerType es Touch, pero IsInContact es false.This consists of a PointerPoint where PointerType is Touch, but IsInContact is false. Cuando se produce alguna forma de confirmación (por ejemplo, se presiona un botón A un botón, se presiona un dispositivo de clic, se presiona un desencadenador de control de movimiento o se "selecciona" la cabeza de reconocimiento de voz), se produce una pulsación táctil , con el PointerPoint que tiene IsInContact de ser true.When some form of commit occurs (for example, gamepad A button is pressed, a clicker device is pressed, a motion controller trigger pressed, or voice recognition heads "Select"), a touch press occurs, with the PointerPoint having IsInContact become true. Consulte interacciones táctiles para obtener más información sobre estos eventos de entrada.See Touch interactions for more information on these input events.

  • Recuerde que la mirada no es tan precisa como el puntero del mouse.Remember, gaze is not as accurate as mouse pointing. Los botones o los destinos del mouse más pequeños pueden causar frustración a los usuarios, por lo que cambiar el tamaño de los controles en consecuencia.Smaller mouse targets or buttons may cause frustration for your users, so resize controls accordingly. Si están diseñados para tocar, funcionarán en una realidad mixta, pero puede que decida ampliar algunos botones en tiempo de ejecución.If they are designed for touch, they will work in Mixed Reality, but you may decide to enlarge some buttons at runtime. Consulte actualización de la aplicación universal existente para Hololens.See Updating your existing universal app for Hololens.

  • HoloLens define el color negro como ausencia de luz.The HoloLens defines the color black as the absence of light. Simplemente no se representa, lo que permite que el mundo real se muestre.It's simply not rendered, allowing the "real world" so show through. La aplicación no debe usar negro Si esto causará confusión.Your application should not use black if this is would cause confusion. En un casco de realidad mixta, el negro es negro.In a Mixed Reality headset, black is black.

  • HoloLens no admite temas de color en las aplicaciones y su valor predeterminado es azul para garantizar la mejor experiencia para los usuarios.The HoloLens does not support color themes in apps, and defaults to blue to ensure the best experience for users. Para obtener más consejos sobre la selección de colores, debe consultar este tema , en el que se explica el uso de color y material en los diseños de realidad mixta.For more advice about selecting colors, you should consult this topic which discusses the use of color and material in Mixed Reality designs.

Otros puntos a tener en cuentaOther points to consider

  • Aunque el puente de escritorio puede ayudar a realizar aplicaciones de escritorio existentes (Win32) en Windows 10 y en el Microsoft Store, no puede crear aplicaciones que se ejecuten en HoloLens o en realidad mixta en este momento.Although the Desktop Bridge can help bring existing (Win32) desktop apps to Windows 10 and the Microsoft Store, it cannot create apps that run on HoloLens or in Mixed Reality at this time.

Compatibilidad con el tiempo de ejecuciónRuntime support

Es posible que la aplicación determine si se está ejecutando en un dispositivo de realidad mixta en tiempo de ejecución, y usarlo como una oportunidad para cambiar el tamaño de los controles u otras maneras de optimizar la aplicación para su uso en un casco.It is possible for your app to determine if it is running on a Mixed Reality device at runtime, and use this as an opportunity to resize controls or in other ways optimize the app for use on a headset.

A continuación se muestra una breve parte del código que cambia el tamaño del texto dentro de un control TextBlock de XAML solo si la aplicación se usa en un dispositivo de realidad mixta.Here's a short piece of code that resizes the text inside a XAML TextBlock control only if the app is being used on a Mixed Reality device.


bool isViewingInMR = Windows.ApplicationModel.Preview.Holographic.HolographicApplicationPreview.IsCurrentViewPresentedOnHolographicDisplay();

            if (isViewingInMR)
            {
                // Running on headset, resize the XAML text
                textBlock.Text = "I'm running in Mixed Reality!";
                textBlock.FontSize = 32;
            }
            else
            {
                // Running on desktop
                textBlock.Text = "I'm running on the desktop.";
                textBlock.FontSize = 14;
            }