版式Typography

HoloLens 中的版式示例

文本是在应用程序体验中提供信息的重要元素。Text is an important element for delivering information in your app experience. 就像2D 屏幕上的版式一样,目标应清晰且易懂。Just like typography on 2D screens, the goal is to be clear and readable. 由于混合现实的三维方面,有机会以更好的方式影响文本和总体用户体验。With the three-dimensional aspect of mixed reality, there's an opportunity to affect the text and the overall user experience in an even greater way.

当我们谈到3D 中的类型时,我们倾向于容量耗尽3D 文本。When we talk about type in 3D, we tend to think extruded, volumetric 3D text. 除了某些标识设计和一些其他有限的应用程序,延伸文本往往会降低文本的可读性。Except for some logotype designs and a few other limited applications, extruded text tends to degrade the readability of the text. 尽管我们正在设计3D 体验,但我们对类型使用2D,因为它更清晰且更易于阅读。Even though we're designing experiences for 3D, we use 2D for the type because it's more legible and easier to read.

在 HoloLens 中,类型是使用基于附加颜色系统的轻型的影像构建的。In HoloLens, type is constructed with holograms using light based on the additive color system. 就像其他全息影像一样,可以将类型放在实际的环境中,在该环境中,可以从任何角度进行世界锁定和观察。Just like other holograms, type can be placed in the actual environment where it can be world locked and observed from any angle. 类型和环境之间的 视差 效果也增加了体验的深度。The parallax effect between the type and the environment also adds depth to the experience.

混合现实中的版式Typography in mixed reality

混合现实中的版式规则与其他任何地方都没有什么不同。Typographic rules in mixed reality are no different from anywhere else. 物理世界和虚拟世界中的文本都需要更清晰且更易读。Text in both the physical world and the virtual world needs to be legible and readable. 文本可能位于墙上,或在物理对象上重叠。Text could be on a wall or superimposed on a physical object. 它可以与数字用户界面一起浮动。It could be floating along with a digital user interface. 无论使用何种上下文,都将使用相同的印刷规则来进行读取和识别。Whatever the context, we apply the same typographic rules for reading and recognition.

创建清晰的层次结构Create clear hierarchy

使用不同类型的大小和权重生成对比度和层次结构。Build contrast and hierarchy by using different type sizes and weights. 在整个应用程序体验中定义类型斜坡并遵循它将提供具有一致的信息层次结构的丰富用户体验。Defining a type ramp and following it throughout the app experience will provide a great user experience with consistent information hierarchy.

键入斜坡示例Type ramp examples
定义类型斜坡,并在整个应用体验中执行Define your type ramp and follow it throughout the app experience

限制字体Limit your fonts

避免在一个上下文中使用两个以上的不同字体系列。Avoid using more than two different font families in a single context. 字体过多会破坏体验的协调和一致性,并使其难以使用信息。Too many fonts will break the harmony and consistency of your experience and make it harder to consume information. 在 HoloLens 中,由于信息是在物理环境上重叠的,因此使用太多字体样式会降低体验。In HoloLens, since the information is overlaid on top of the physical environment, using too many font styles will degrade the experience. Segoe UI 是所有 Microsoft 数字设计的字体。Segoe UI is the font for all Microsoft digital designs. 它在 Windows Mixed Reality shell 中一致地使用。It's used consistently in the Windows Mixed Reality shell. 您可以从 Windows 设计工具包页下载 Segoe UI 的字体文件。You can download the Segoe UI font file from the Windows design toolkit page.

有关 Segoe UI 字样的详细信息More information about the Segoe UI typeface

避免精简字体粗细Avoid thin font weights

避免在42磅下为类型大小使用光源或 semilight 字体粗细,因为精简垂直笔划将振动并降低清晰度。Avoid using light or semilight font weights for type sizes under 42 pt because thin vertical strokes will vibrate and degrade legibility. 具有足够笔划粗细的新式字体很好地运行。Modern fonts with enough stroke thickness work well. 例如,使用常规或粗体时,Arial 和 Arial 可以在 HoloLens 中清晰地显示。For example, Helvetica and Arial are legible in HoloLens using regular or bold weights.

ColorColor

在 HoloLens 中,由于全息影像是使用加法光源系统构建的,因此白色文本非常清晰。In HoloLens, since the holograms are constructed with an additive light system, white text is highly legible. 你可以在 "开始" 菜单和应用栏上找到白色文本的示例。You can find examples of white text on the Start menu and the App bar. 即使在不使用 HoloLens 的背面的情况下白色文本也能正常工作,复杂的物理背景也可能使类型难以阅读。Even though white text works well without a back plate on HoloLens, a complex physical background could make the type difficult to read. 建议在黑色或彩色背面使用白色文本,以改善用户的注意力,并尽量减少物理背景中的干扰。We recommend using white text on a dark or colored back plate to improve the user's focus and minimize the distraction from a physical background.


建议在黑色或彩色背面使用白色文本。 深色或彩色后面板上的白色文本的示例。We recommend using white text on a dark or colored back plate. Examples of white text on a dark or colored back plate.

若要使用深色文本,您应该使用一个亮点,使其可供阅读。To use dark text, you should use a bright back plate to make it readable. 在 "附加颜色系统" 中,黑色显示为透明。In additive color systems, black is displayed as transparent. 这意味着,如果没有彩色的背面印版,则不会显示黑色文本。This means you won't see the black text without a colored back plate.

白底黑白色文本的示例Examples of white on black and black on white text
白底黑白色文本的示例Examples of white on black and black on white text

系统应用中的黑色文本示例-存储和设置Examples of black text in the system apps - Store and Settings
系统应用中的黑色文本示例-存储和设置Examples of black text in the system apps - Store and Settings



正如你所料,在电脑或平板电脑设备上使用的类型大小 (通常在12–32pt 之间,) 在2米的距离处查看小。As you can expect, type sizes that we use on a PC or a tablet device (typically between 12–32pt) look small at a distance of 2 meters. 这取决于每种字体的特征,但通常情况下,建议的最小查看角度和清晰度的字体高度基于用户研究研究0.35 °-0.4 °/12.21-13.97 mm。It depends on the characteristics of each font, but in general the recommended minimum viewing angle and the font height for legibility are around 0.35°-0.4°/12.21-13.97 mm based on our user research studies. 与 Unity 页面的 文本中 引入的缩放系数大约为35-40 磅。It's about 35-40 pt with the scaling factor introduced in Text in Unity page.

对于位于 0.45 m (45 厘米) 的近距离交互,最小清晰字体的查看角度和高度为0.4 °-0.5 °/3.14 –3.9 毫米。For the near interaction at 0.45 m(45 cm), the minimum legible font's viewing angle and the height are 0.4°-0.5° / 3.14–3.9mm. 它大约为 9-12 pt,其中的缩放系数在 Unity 文本中引入。It's about 9-12 pt with the scaling factor introduced in Text in Unity.

近和远交互范围内的近和远交互范围 内容Near and far interaction range Content at near and far interaction range

最小清晰字体大小The minimum legible font size

距离Distance 查看角度Viewing angle 文本高度Text height 字号 * *Font size**
45厘米 (直接操作距离) 45 cm (direct manipulation distance) 0.4 °-0.5 °0.4°-0.5° 3.14 –3.9 毫米3.14–3.9mm 8.9-11.13 pt8.9–11.13pt
2 m2 m 0.35 °0.4 °0.35°-0.4° 12.21 – 13.97 mm12.21–13.97mm 34.63-39.58 pt34.63-39.58 pt

可读性更清晰的字号The comfortably legible font size

距离Distance 查看角度Viewing angle 文本高度Text height 字号 * *Font size**
45厘米 (直接操作距离) 45 cm (direct manipulation distance) 0.65 °0.8 °0.65°-0.8° 5.1-6.3 毫米5.1-6.3 mm 14.47-17.8 pt14.47-17.8 pt
2 m2 m 0.6 °-0.75 °0.6°-0.75° 20.9-26.2 mm20.9-26.2 mm 59.4-74.2 pt59.4-74.2 pt

Segoe UI (Windows) 默认字体在大多数情况下都适用。Segoe UI (the default font for Windows) works well in most cases. 避免使用较小尺寸的轻型或半字形系列,因为精简垂直笔划会振动,并将降低清晰度。Avoid using light or semi light font families in small size since thin vertical strokes will vibrate and it will degrade the legibility. 具有足够笔划粗细的新式字体很好地运行。Modern fonts with enough stroke thickness work well. 例如,Arial 和 Arial 外观丰富多彩,并在 HoloLens 中以常规或粗体权重清晰。For example, Helvetica and Arial look gorgeous and are legible in HoloLens with regular or bold weights.

有关 Unity 中文本大小计算的详细信息,请参阅 unity 中的文本For more detailed information about text size calculation in Unity, refer to Text in Unity

查看角度 查看距离、角度和文本高度Viewing Angle Viewing distance, angle, and text height



资源Resources

Segoe 字体Segoe fonts

(Zip 文件) (Zip file)

HoloLens 字体HoloLens font

(Zip 文件) (Zip file)

映像: HoloLens 字体提供 Windows Mixed Reality 中使用的符号字形。Image: The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality.

HoloLens 字体提供 Windows Mixed Reality 中使用的符号字形



另请参阅See also