Criar conteúdo para exibição holográficaDesigning content for holographic display

Local do ulnar

Ao criar conteúdo para exibições do Holographic, há vários elementos que você precisa considerar para obter a melhor experiência.When designing content for holographic displays, there are several elements that you need to consider for achieving the best experience. Listamos algumas das nossas recomendações abaixo e você pode aprender mais sobre as características de exibições do Holographic na página cor, luz e materiais .We've listed some of our recommendations below and you can learn more about the characteristics of holographic displays at Color, light and materials page.


Desafios com uma cor brilhante em uma grande superfícieChallenges with bright color on a large surface

Com base em nossa pesquisa e teste de experiência de HoloLens, descobrimos que o uso de cores brilhantes em uma grande área da exibição pode causar vários problemas:Based on our HoloLens experience research and testing, we found that using bright colors in a large area of the display can cause several issues:

Fadiga de olhoEye fatigue

Como a exibição de Holographic é aditiva, os hologramas com cores brilhantes usam mais luz.Since holographic display is additive, holograms with bright colors use more light. Uma cor sólida e brilhante em uma grande área da exibição pode facilmente causar fadigas de olho para o usuário.Bright, solid color in a large area of the display can easily cause eye fatigue for the user.

Oclusão mãoHand occlusion

A cor brilhante torna difícil para o usuário ver suas mãos ao interagir diretamente com objetos.Bright color makes it difficult for the user to see their hands when directly interacting with objects. Como o usuário não consegue ver suas mãos, fica difícil perceber a profundidade/distância entre a mão/dedo para a superfície de destino.Since the user can't see their hands, it becomes difficult to perceive the depth/distance between the hand/finger to the target surface. O cursor Finger ajuda a compensar esse problema, mas ainda pode ser desafiador em uma superfície branca brilhante.The Finger Cursor helps compensate for this issue, but it can still be challenging on a bright white surface.

Cor e mão oclusão dificuldade para ver a mão na placa traseira de conteúdo colorido brilhanteColor and hand occlusion Difficult to see the hand on the bright colored content backplate

Uniformidade de coresColor uniformity

Devido às características das exibições do Holographic, uma grande área brilhante na exibição pode se tornar blotchy.Because of the characteristics of holographic displays, a large bright area on the display can become blotchy. Usando esquemas de cores escuros, você pode minimizar esse problema.By using dark color schemes, you can minimize this issue.

Diretrizes de design para opções de coresDesign guidelines for color choices

Usar cor escura para o plano de fundo da interface do usuárioUse dark color for the UI background

Usando o esquema de cores escuro, você pode minimizar os olhos fadiga e melhorar a confiança em interações diretas.By using the dark color scheme, you can minimize eye fatigue and improve the confidence on direct hand interactions.

Exemplos de cores escuras usadas para os exemplos de conteúdo em segundo plano da cor escura usada para o plano de fundo do conteúdoExamples of dark color used for the content background Examples of dark color used for the content background

Usar seminegrito ou espessura de fonte em negritoUse semibold or bold font weight

O HoloLens permite que sua experiência mostre um lindo texto de alta resolução.HoloLens allows your experience to show beautiful high-resolution text. No entanto, é recomendável que você evite pesos de fontes finas, como luz ou semileve, porque os traços verticais podem se tremular em tamanho de fonte pequeno.However, it's recommended that you avoid thin font weights such as light or semi-light because the vertical strokes can jitter in small font size.

A espessura da fonte em negrito ou seminegrito (painel superior) melhora a espessura da fonte de negrito ou seminegrito (painel superior) melhora a legibilidadeBold or semi-bold font weight (upper panel) improves the legibility Bold or semi-bold font weight (upper panel) improves the legibility

Usar o material de HolographicBackplate do MRTKUse MRTK’s HolographicBackplate material

O material HolographicBackplate é aplicado a vários painéis de interface do usuário no Shell do HoloLens.The HolographicBackplate material is applied to several UI panels in the HoloLens shell. Um de seus recursos é um efeito iridescence que é visível para os usuários à medida que eles alternam sua posição com base no painel.One of its features is an iridescence effect that is visible to users as they shift their position based on the panel. A cor da chapa traseira muda sutilmente em um espectro predefinido, criando um efeito visual envolvente e dinâmico sem interferir na legibilidade do conteúdo.The backplate color shifts subtly across a predefined spectrum, creating an engaging and dynamic visual effect without interfering with content readability. Essa mudança sutil na cor também serve para compensar as irregularidades de cores secundárias.This subtle shift in color also serves to compensate for any minor color irregularities.

Desafios com a placa traseira da interface do usuário Transparent ou translúcidaChallenges with transparent or translucent UI backplate

Exemplos de interface do usuário transparente exemplos de placa traseira da interface do usuário transparenteTransparent UI examples Examples of transparent UI backplate

Complexidade e acessibilidade VisualVisual complexity and accessibility

Como o Holographic Objects Blend com o ambiente físico, o conteúdo ou a interface do usuário legível em janelas transparentes ou translúcidas pode ser degradado.Since holographic objects blend with the physical environment, content or UI legibility on transparent or translucent windows could be degraded. Além disso, quando os objetos Holographic transparentes são sobrepostos uns dos outros, pode dificultar o usuário de interagir devido à profundidade confusa.Additionally, when transparent holographic objects are overlaid on top of each other, it could make it difficult for the user to interact because of the confusing depth.

DesempenhoPerformance

Para que objetos transparentes ou translúcidas sejam renderizados corretamente, eles devem ser classificados e mesclados com todos os objetos, que existem em segundo plano.For transparent or translucent objects to render correctly they must be sorted and blended with any objects, which exist in the background. A classificação de objetos transparentes tem um custo modesto de CPU, a mesclagem tem um custo de GPU considerável porque não permite que a GPU Faça a remoção da superfície oculta por meio de seleção de z (ou seja,Sorting of transparent objects has a modest CPU cost, blending has considerable GPU cost because it doesn't allow the GPU to do hidden surface removal via z-culling (i.e teste de profundidade).depth testing). Não permitir remoção de superfície oculta aumenta o número de operações necessárias para o pixel renderizado final.Not allowing hidden surface removal increases the number of operations needed for the final rendered pixel. Isso coloca mais restrições de taxa de preenchimento de pressão.This puts on more pressure fill rate constraints.

Problema de estabilidade de holograma com profundidade LSR tecnologiaHologram stability issue with Depth LSR technology

Para melhorar a Reprojeção do Holographic ou a estabilidade do holograma, um aplicativo pode enviar um buffer de profundidade ao sistema para cada quadro renderizado.To improve holographic reprojection, or hologram stability, an application can submit a depth buffer to the system for every rendered frame. Ao usar o buffer de profundidade para a Reprojeção, você precisa escrever um buffer de profundidade para cada cor renderizada em pixel como uma profundidade correspondente.When using the depth buffer for reprojection, you need to write a depth buffer for every color rendered pixel a corresponding depth. Qualquer pixel com um valor de profundidade também deve ter um valor de cor.Any pixel with a depth value should also have color value. Se as diretrizes acima não forem seguidas, as áreas da imagem renderizada que não possuam informações de profundidade válidas poderão ser reprojetadas de uma forma que produza artefatos, que geralmente são visíveis como uma distorção do tipo Wave.If the above guidance isn't followed, areas of the rendered image that lack valid depth information may be reprojected in a way that produces artifacts, which are often visible as a wave-like distortion.

Diretrizes de design para elementos transparentesDesign guidelines for transparent elements

Usar plano de fundo opaco da interface do usuárioUse opaque UI background

Por padrão, os objetos Transparent ou translúcidas não gravam profundidade para permitir a mistura adequada.By default, transparent or translucent objects don't write depth to allow for proper blending. Maneiras de atenuar esse problema incluem, usando objetos opacos, garantindo que objetos translúcidas pareçam próximos a objetos opacos (como um botão translúcida na frente de uma chapa traseira opaca), forçando os objetos translúcidas a gravar profundidade (não aplicável em todos os cenários) ou renderizando objetos proxy, que só contribuem com valores de profundidade no final do quadro.Ways to mitigate this issue include, using opaque objects, ensuring translucent objects appear close to opaque objects (such as a translucent button in front of an opaque backplate), forcing translucent objects to write depth (not applicable in all scenarios), or rendering proxy objects, which only contribute depth values at the end of the frame.

Soluções dentro do MRTK-Unity: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/hologram-stabilization.html#depth-buffer-sharing-in-unitySolutions within MRTK-Unity: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/hologram-stabilization.html#depth-buffer-sharing-in-unity

Usando uma chapa invertida sólida e opaca, podemos proteger a segurança da legibilidade e da interação.By using a solid and opaque backplate, we can secure legibility and interaction confidence.

Minimizar o número de pixels afetadosMinimize the number of pixels affected

Se o seu projeto deve usar objetos transparentes, tente minimizar o número de pixels afetados.If your project must use transparent objects, try to minimize the number of pixels affected. Por exemplo, se um objeto só estiver visível em determinadas condições (como um efeito de brilho aditivo), desabilite o objeto quando ele estiver totalmente invisível (em vez de definir a cor aditiva como preto).For example, if an object is only visible under certain conditions (like an additive glow effect), disable the object when it's fully invisible (instead of setting the additive color to black). Para formas 2D simples criadas usando um quad com uma máscara alfa, considere a criação de uma representação de malha da forma com um sombreador opaco em vez disso.For simple 2D shapes created using a quad with an alpha mask, consider creating a mesh representation of the shape with an opaque shader instead.




Exemplos escuros da interface do usuário em MRTK (Mixed Reality Toolkit) para o UnityDark UI examples in MRTK (Mixed Reality Toolkit) for Unity

O MRTK fornece muitos exemplos de blocos de construção de interface do usuário com base nos esquemas de cores escuros.MRTK provides many UI building block examples based on the dark color schemes.



Veja tambémSee also