Desenvolvendo para realidade misturadaDesigning for Mixed Reality

Projete seu aplicativo para se encaixar bem na realidade misturada e aproveite os novos métodos de entrada.Design your app to look good in Mixed Reality, and take advantage of new input methods.

Visão geralOverview

A realidade misturada é o resultado da combinação do mundo físico com o mundo digital.Mixed Reality is the result of blending the physical world with the digital world. As experiências do espectro de realidade misturada incluem de um lado dispositivos extremos, como as HoloLens (um dispositivo que mistura conteúdo gerado por computador com o mundo real), e do outro uma exibição completamente imersiva de Realidade virtual (como visto com o headset do Windows Mixed Reality).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). Consulte Tipos de aplicativos de realidade misturada para obter exemplos de como as experiências poderão variar.See Types of mixed reality apps for examples of how experiences will vary.

Quase todos os aplicativos UWP existentes serão executados no ambiente de realidade misturada, como aplicativos 2D sem alterações, embora a experiência do usuário possa ser melhorada seguindo algumas das diretrizes neste tópico.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.

Visualização da realidade misturada

Tanto as HoloLens quanto os headsets do Windows Mixed Reality oferecem suporte a aplicativos sendo executados na plataforma UWP, e ambos suportam dois tipos de experiência distintos.Both the HoloLens and Windows Mixed Reality headsets support applications running on the UWP platform, and both support two distinct types of experience.

2D comparado a experiência imersiva2D vs. Immersive Experience

Um aplicativo imersivo assume a tela inteira visível ao usuário, posicionando-o no centro de uma visualização criada pelo aplicativo.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 exemplo, um jogo imersivo pode colocar o usuário na superfície de um planeta alienígena ou um aplicativo de tour guia pode colocar o usuário em uma vila da América do Sul.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. Criar um aplicativo imersivo requer elementos gráficos 3D ou vídeo estereográfico capturado.Creating an immersive app requires 3D graphics or captured stereographic video. Aplicativos imersivos geralmente são desenvolvidos usando um mecanismo de jogo de terceiros como Unity ou com DirectX.Immersive apps are often developed using a 3rd party game engine such as Unity, or with DirectX.

Se você estiver criando aplicativos imersivos, você deve visitar o Centro de desenvolvimento do Windows Mixed Reality para obter mais informações.If you are creating immersive apps, you should visit the Windows Mixed Reality Dev Center for more information.

Um aplicativo 2D é executado como uma janela tradicional simples em modo de exibição do usuário.A 2D app runs as a traditional flat window within the user's view. Nas HoloLens, isso significa uma exibição fixada na parede ou em um ponto no espaço na sala de estar ou escritório dos usuários.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. Em um headset do Windows Mixed Reality, o aplicativo está fixado em uma parede no ambiente de realidade misturada (às vezes chamado de Casa no Penhasco).In a Windows Mixed Reality headset, the app is pinned to a wall in the mixed reality home (sometimes called the Cliff House).

Vários aplicativos em execução em realidade misturada

Esses aplicativos 2D não tomam a exibição inteira: eles são colocados dentro dela.These 2D apps do not take over the entire view: they are placed within it. Vários aplicativos 2D podem existir no ambiente de uma só vez.Multiple 2D apps can exist in the environment at once.

O restante deste tópico aborda considerações de design para a experiência 2D.The remainder of this topic discusses design considerations for the 2D experience.

Iniciando aplicativos 2DLaunching 2D apps

Menu Iniciar de realidade misturada

Todos os apps são iniciados a partir do Menu Iniciar, mas também é possível criar um objeto 3D para atuar como um iniciador de aplicativo.All apps are launched from the Start Menu, but it's also possible to create a 3D object to act as an app launcher. Veja esse vídeo para obter detalhes.See this video for details.

A visão geral de entrada do aplicativo 2DThe 2D App Input Overview

Teclados e mouses são suportados nas plataformas HoloLens e de realidade misturada.Keyboards and mice are supported on both HoloLens and Mixed Reality platforms. Você pode emparelhar um teclado e mouse diretamente com as HoloLens via Bluetooth.You can pair a keyboard and mouse directly with the HoloLens over Bluetooth. Aplicativos de realidade misturada oferecem suporte a mouse e teclado conectados ao computador host.Mixed Reality apps support the mouse and keyboard connected to the host computer. Ambos podem ser úteis em situações onde um nível de controle fino é necessário.Both may be useful in situations when a fine-level of control is necessary.

Também há suporte para outros métodos de entrada mais naturais, e eles podem ser particularmente úteis quando o usuário não estiver sentado em uma mesa com um teclado real em sua frente ou quando controle fino é necessário.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.

Sem nenhuma codificação ou hardware extra, os aplicativos usarão focar - o vetor que seu usuário está vendo - como um ponteiro de mouse ao trabalhar com aplicativos 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. Ele é implementado como se um ponteiro do mouse estivesse passando sobre algo na cena virtual.It is implemented as if a mouse pointer was hovering over something in the virtual scene.

Em uma interação típica, seu usuário olhará um controle em seu aplicativo, fazendo-o realçar.In a typical interaction, your user will look at a control in your app, causing it to highlight. O usuário então disparará uma ação usando um gesto (nas HoloLens) ou um controlador, ou fornecendo um 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. Se o usuário selecionar um campo de entrada de texto, o teclado de software será exibido.If the user selects a text input field, the software keyboard will appear.

O teclado pop-up na realidade misturada

É importante observar que todas essas interações ocorrerão automaticamente com nenhum código extra de sua parte, como consequência de executar na plataforma 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. Entrada de HoloLens e headset de realidade misturada aparecerá como entrada touch ao aplicativo 2D.Input from the HoloLens and Mixed Reality headset will appear as touch input to the 2D app. Isso significa que muitos aplicativos UWP serão executados e poderão ser usados na realidade misturada, por padrão.This means that many UWP apps will run and be usable in Mixed Reality, by default.

Dito isso, com algum trabalho extra, é possível melhorar consideravelmente a experiência.That said, with some extra work, the experience can be improved greatly. Por exemplo, controle de voz pode ser especialmente eficaz.For example, voice control can be especially effective. Os ambientes das HoloLens e de realidade misturada dão suporte a comandos de voz para iniciar e interagir com aplicativos, e incluem suporte de voz que aparecerá como uma extensão natural dessa abordagem.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 Interações de controle por voz para obter mais informações sobre como adicionar suporte de voz ao seu aplicativo UWP.See Speech interactions for more information on adding voice support to your UWP app.

Selecionando o controlador corretoSelecting the right controller

Controladores de movimento de realidade misturada

Vários métodos de entrada novos foram projetados principalmente para uso com de realidade misturada, especificamente:Several novel input methods have been designed especially for use with Mixed Reality, specifically:

Esses controladores fazem a interação com objetos virtuais se tornar natural e precisa.These controllers make interacting with virtual objects seem natural and precise. Algumas das interações você obtém gratuitamente.Some of the interactions you get for free. Por exemplo, o gesto de seleção do HoloLens ou o clique na chave do Windows ou no gatilho do controlador de movimento gerará a resposta de entrada que você esperaria, novamente, sem codificação de sua 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.

Em outras ocasiões, você desejará adicionar código para tirar proveito das informações extras e entradas que são disponibilizadas.At other times, you will want to add code to take advantage of the extra information and inputs that are made available. Por exemplo, os controladores de movimento podem ser usados para manipular objetos com um nível de controle fino, se você escrever um código que leva em consideração sua posição e pressionamento de botão.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.

Observação

Em resumo: a orientação principal deve ser sempre para fornecer ao usuário o método de entrada mais natural e sem atrito possível.In summary: the guiding principal should be to always provide the user with as natural and frictionless an input method as possible.

Considerações de design de aplicativo 2D: funcionalidade2D App Design considerations: Functionality

Ao criar um aplicativo UWP que possivelmente será usado em uma plataforma de realidade misturada, há várias coisas para se ter em mente.When creating a UWP app that will potentially be used on a Mixed Reality platform, there are several things to keep in mind.

  • Arrastar e soltar podem não funcionar bem quando usados com controladores de movimento, consoles ou gestos.Drag and drop may not work well when used with Motion Controllers, gamepads or gestures. Se seu aplicativo depende muito de arrastar e soltar, você precisará fornecer um método alternativo para dar suporte a essa ação, como apresentar uma caixa de diálogo confirmando se objetos devem ser movidos para um novo local.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.

  • Fique atento com a mudança de som.Be aware how sound changes. Se seu aplicativo gera efeitos de som, a origem do som aparecerá como sendo a localização fixa do seu aplicativo no 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. Conforme o usuário move para fora do aplicativo, o som reduzirá.As the user moves away from the app, sound will diminish. Consulte Som espacial para obter mais informações.See Spatial sound for more information.

  • Considere o campo de visão e forneça funcionalidades.Consider the field of view and provide affordances. Nem todos os dispositivo fornecerão um campo tão grande de visualização quanto um monitor de computador.Not every device will provide as large a field of view as a computer monitor. Consulte Quadro holográfico para obter detalhes completos.See Holographic frame for complete details. Além disso, o usuário pode estar distante de um aplicativo em execução.Furthermore, the user may be some distance away from a running app. Ou seja, o aplicativo pode aparecer fixo na parede em um local diferente do mundo (real ou virtual).That is, the app may appear pinned to the wall at a different location in the world (real or virtual). Seu aplicativo pode precisar chamar a atenção dos usuários ou levar em consideração que a exibição completa não está visível em todos os momentos.Your app may need to get the users attention, or take into account that the entire view is not visible at all times. Notificações do sistema estão disponíveis, mas outra maneira de obter a atenção do usuário pode ser gerar um som ou alerta de fala.Toast notifications are available, but another way to get the user's attention might be to generate a sound or speech alert.

  • Um aplicativo 2D recebe automaticamente uma barra de aplicativos para permitir que o usuário mova e dimensione-a no ambiente virtual.A 2D app is automatically given an app bar to allow the user to move and scale them in the virtual environment. Os modos de exibição podem ser redimensionados verticalmente ou redimensionados mantendo a mesma taxa de proporção.The views can be resized vertically, or resized maintaining the same aspect ratio.

Considerações de design de aplicativo 2D: UI/UX2D app design considerations: UI/UX

  • Controles XAML que implementam o Sistema de Design Fluente, como o Modo de exibição de navegação e efeitos como Acrílico tudo funciona especialmente bem nos aplicativos de realidade misturada 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.

  • Teste o tamanho do texto e das janelas do aplicativo em um dispositivo de realidade misturada, ou no mínimo, no simulador de realidade misturada.Test your app's text and windows size in a Mixed Reality device, or at the very least in the Mixed Reality Simulator. Seu aplicativo terá um tamanho de janela padrão de 853 x 480 pixels efetivos.Your app will have a default windows size of 853x480 effective pixels. Use tamanhos de fonte maiores (recomenda-se um tamanho de ponto de aproximadamente 32) e leia Atualizando seu aplicativo universal existente para as Hololens.Use larger font sizes (a point size of approximately 32 is recommended), and read Updating your existing universal app for Hololens. O artigo Tipografia aborda esse tópico em detalhes.The article Typography covers this topic in detail. Ao trabalhar no Visual Studio, há um configuração de editor de design do XAML para um aplicativo 2D de HoloLens de 57 pol., que fornece uma exibição com a escala e dimensões corretas.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.

Texto exibido em aplicativos de realidade misturada deve ser grande.

  • Seu foco é o mouse.Your gaze is your mouse. Quando o usuário analisa algo, ele atua como um evento de foco por toque, então simplesmente olhar para um objeto poderá disparar um pop-up de forma inadvertida ou outras interações indesejadas.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. Talvez seja necessário detectar se o aplicativo está sendo executado na realidade misturada e alterar esse comportamento.You may need to detect if the app is currently running in Mixed Reality and change this behavior. Consulte Suporte de tempo de execução abaixo.See Runtime support, below.

  • Quando um usuário foca em direção a algo ou aponta com um controlador de movimento, um evento foco por toque ocorrerá.When a user gazes towards something or points with a motion controller, a touch hover event will occur. Isso consiste em uma PointerPoint onde PointerType é Touch, mas IsInContact é false.This consists of a PointerPoint where PointerType is Touch, but IsInContact is false. Quando ocorre alguma forma de confirmação (por exemplo, botão A do gamepad é pressionado, um dispositivo clicker é pressionado, um gatilho de controlador de movimento é pressionado, ou o reconhecimento de voz coordena "Selecionar"), um pressionamento de toque ocorre, com o PointerPoint tendo IsInContact se torna 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 Interações de toque para obter mais informações sobre esses eventos de entrada.See Touch interactions for more information on these input events.

  • Lembre-se, focar não é tão preciso quanto apontar com o mouse.Remember, gaze is not as accurate as mouse pointing. Destinos ou botões de mouse menores podem causar frustração em seus usuários, então redimensione os controles de acordo.Smaller mouse targets or buttons may cause frustration for your users, so resize controls accordingly. Se eles são projetados para toque, funcionarão na realidade misturada, mas você pode decidir ampliar alguns botões em tempo de execução.If they are designed for touch, they will work in Mixed Reality, but you may decide to enlarge some buttons at runtime. Consulte Atualizando seu aplicativo universal existente para as Hololens.See Updating your existing universal app for Hololens.

  • As HoloLens definem a cor preta como ausência de luz.The HoloLens defines the color black as the absence of light. Ela simplesmente não é processada, permitindo que o "mundo real" se mostre através dela.It's simply not rendered, allowing the "real world" so show through. Seu aplicativo não deve usar preto porque isso pode causar confusão.Your application should not use black if this is would cause confusion. Em um headset de realidade misturada, preto é preto.In a Mixed Reality headset, black is black.

  • As HoloLens não oferecem suporte a temas de cores em aplicativos, e padroniza como azul para garantir a melhor experiência para os usuários.The HoloLens does not support color themes in apps, and defaults to blue to ensure the best experience for users. Para obter mais conselhos sobre como selecionar cores, você deve consultar este tópico, que aborda o uso de cor e material em designs de realidade misturada.For more advice about selecting colors, you should consult this topic which discusses the use of color and material in Mixed Reality designs.

Outros pontos que devem ser consideradosOther points to consider

  • Embora a Ponte da Desktop possa ajudar a trazer aplicativos de área de trabalho (Win32) existentes ao Windows 10 e a Microsoft Store, ela não pode criar aplicativos que rodem em HoloLens ou em realidade misturada nesse 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.

Suporte de runtimeRuntime support

É possível para seu aplicativo determinar se ele está em execução em um dispositivo de realidade misturada no tempo de execução e usá-lo como uma oportunidade para redimensionar controles ou, de outra forma, otimizar o aplicativo para uso em um headset.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.

Aqui está um breve trecho de código que redimensiona o texto dentro de um controle TextBlock XAML somente se o aplicativo está sendo usado em um dispositivo de realidade misturada.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;
            }