设计适用于全息显示器的内容Designing content for holographic display

Ulnar 端位置

设计全息显示器内容时,需要考虑几个元素,以便获得最佳体验。When designing content for holographic displays, there are several elements that you need to consider for achieving the best experience. 下面列出了下面的一些建议,你可以在 "颜色、光线和材料 " 页面上详细了解全息版显示的特征。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.


大型表面上明亮的颜色挑战Challenges with bright color on a large surface

根据我们的 HoloLens 体验研究和测试,我们发现,在大范围的显示中使用明亮的颜色可能会导致几个问题: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:

眼睛疲劳Eye fatigue

由于全息显示是累加的,因此具有明亮颜色的全息影像会占用更少的颜色。Since holographic display is additive, holograms with bright colors use more light. 在较大的显示区域中,颜色明亮,很容易导致用户的眼睛疲劳。Bright, solid color in a large area of the display can easily cause eye fatigue for the user.

手动封闭Hand occlusion

明亮的颜色使用户在直接与对象交互时很难看到其手。Bright color makes it difficult for the user to see their hands when directly interacting with objects. 由于用户无法看到其手,因此很难感觉到该手指与目标表面之间的深度/距离。Since the user can't see their hands, it becomes difficult to perceive the depth/distance between the hand/finger to the target surface. Finger 游标有助于弥补此问题,但在明亮的表面上,它仍会有挑战性。The Finger Cursor helps compensate for this issue, but it can still be challenging on a bright white surface.

颜色和手封闭 很难看到鲜艳的彩色内容 backplateColor and hand occlusion Difficult to see the hand on the bright colored content backplate

颜色一致性Color uniformity

由于全息显示器的特性,显示屏上的一个较亮的区域可能会变得 blotchy。Because of the characteristics of holographic displays, a large bright area on the display can become blotchy. 通过使用暗色方案,你可以最大程度地减少此问题。By using dark color schemes, you can minimize this issue.

颜色选择设计准则Design guidelines for color choices

为 UI 背景使用暗色Use dark color for the UI background

通过使用暗色方案,你可以最大程度地减少眼睛疲劳并改善直接交互的置信度。By using the dark color scheme, you can minimize eye fatigue and improve the confidence on direct hand interactions.

用于 内容背景的深色颜色示例 的深色颜色示例Examples of dark color used for the content background Examples of dark color used for the content background

使用 semibold 或粗体字体粗细Use semibold or bold font weight

HoloLens 允许你的体验显示漂亮的高分辨率文本。HoloLens allows your experience to show beautiful high-resolution text. 但是,建议您避免使用细的字体粗细,如浅色或半光,因为垂直笔划可以在小字号内抖动。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.

 (上部面板的粗体或半粗体字体粗细) 会提高清晰度 粗体或半粗体字体粗细, (上面板) 提高清晰度Bold or semi-bold font weight (upper panel) improves the legibility Bold or semi-bold font weight (upper panel) improves the legibility

使用 MRTK 的 HolographicBackplate 材料Use MRTK’s HolographicBackplate material

HolographicBackplate 材料适用于 HoloLens shell 中的几个 UI 面板。The HolographicBackplate material is applied to several UI panels in the HoloLens shell. 其中一项功能是在用户根据面板移动其位置时对用户可见的 iridescence 效果。One of its features is an iridescence effect that is visible to users as they shift their position based on the panel. Backplate 颜色在一系列预定义的光谱上略有变化,从而创造生动生动的动态视觉效果,而不会干扰内容的可读性。The backplate color shifts subtly across a predefined spectrum, creating an engaging and dynamic visual effect without interfering with content readability. 此微妙的颜色转变还用于弥补任何次要颜色不规则性。This subtle shift in color also serves to compensate for any minor color irregularities.

透明或半透明 UI backplate 的挑战Challenges with transparent or translucent UI backplate

透明 ui backplate 的 透明 ui 示例Transparent UI examples Examples of transparent UI backplate

视觉对象复杂性和辅助功能Visual complexity and accessibility

由于全息对象与物理环境混合,透明或半透明窗口上的内容或 UI 清晰度可能会下降。Since holographic objects blend with the physical environment, content or UI legibility on transparent or translucent windows could be degraded. 此外,当透明全息对象重叠在一起时,这可能会使用户难以在不太深入的情况下进行交互。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.

“性能”Performance

若要正确呈现透明或半透明对象,必须将其与存在于后台的任何对象进行排序和混合。For transparent or translucent objects to render correctly they must be sorted and blended with any objects, which exist in the background. 透明对象的排序具有适度的 CPU 开销,混合具有相当大的 GPU 开销,因为它不允许 GPU 通过 z 剔除来执行隐藏的图面删除 (例如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 深度测试) 。depth testing). 不允许隐藏的图面会增加最终呈现的像素所需的操作的数目。Not allowing hidden surface removal increases the number of operations needed for the final rendered pixel. 这将导致更多压力填充率约束。This puts on more pressure fill rate constraints.

LSR 技术的全息影像稳定性问题Hologram stability issue with Depth LSR technology

若要改善全息 reprojection 或全息图稳定性,应用程序可以为每个呈现的帧提交系统的深度缓冲区。To improve holographic reprojection, or hologram stability, an application can submit a depth buffer to the system for every rendered frame. 使用 reprojection 的深度缓冲区时,需要为每个颜色呈现的像素写入一个相应深度的深度缓冲区。When using the depth buffer for reprojection, you need to write a depth buffer for every color rendered pixel a corresponding depth. 具有深度值的任何像素还应具有颜色值。Any pixel with a depth value should also have color value. 如果未遵循上述指导原则,呈现图像中缺少有效深度信息的区域可能会 reprojected 生成项目的方式,这通常作为类似于波形的失真显示。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.

透明元素的设计准则Design guidelines for transparent elements

使用不透明的 UI 背景Use opaque UI background

默认情况下,透明或半透明对象不会写入深度以允许进行适当的混合。By default, transparent or translucent objects don't write depth to allow for proper blending. 缓解此问题的方法包括:使用不透明对象,并确保半透明对象接近于不透明的对象 (例如,在不透明的 backplate) 前面添加半透明的按钮、强制半透明对象写入深度 (不适用于所有方案) ,或呈现代理对象,这些对象只在帧末尾提供深度值。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.

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

通过使用纯和不透明的 backplate,我们可以确保可读性和交互置信度。By using a solid and opaque backplate, we can secure legibility and interaction confidence.

最大程度地减少受影响的像素数Minimize the number of pixels affected

如果项目必须使用透明对象,请尝试最大程度地减少受影响的像素数。If your project must use transparent objects, try to minimize the number of pixels affected. 例如,如果某一对象仅在某些条件下可见 (如) 的加法光亮效果,则在该对象完全不可见时禁用该对象 (而不是将附加颜色设置为黑色) 。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). 对于使用带有 alpha 掩码的四核创建的简单二维形状,请考虑改为使用不透明着色器来创建形状的网格表示形式。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.




MRTK 中的深色 UI 示例 (混合现实工具包) 适用于 UnityDark UI examples in MRTK (Mixed Reality Toolkit) for Unity

MRTK 提供了许多基于深色方案的 UI 构建基块示例。MRTK provides many UI building block examples based on the dark color schemes.



另请参阅See also