通过

Windows 应用中的版式

  • 项目

主图

作为语言的视觉表示形式，版式的主要任务是传达信息。 它的样式应永远不妨碍该目标。 本文介绍如何在 Windows 应用中设计版式以帮助用户轻松高效地了解内容。

字体

应用的全部 UI 应使用同一种字体，建议始终使用 Windows 应用的默认字体 Segoe UI Variable。 其设计目的是为保持不同字体大小和像素密度下的最佳可读性，并提供可润色系统内容的清晰、明朗的美学效果。

Segoe UI 变量字体的示例文本。

若要在应用上显示非英语语言或为应用选择另一种字体，请参阅语言和字体，了解我们推荐的 Windows 应用字体。

绿色栏的第一个屏幕截图，其中包含绿色复选标记和文本“执行”。 为 UI 选择一个字体。

这次测试 不要混合多个字体。

可变字体轴

Segoe UI Variable 字体包含两个轴，用于更精细地控制文本。 此字体有一个粗细轴 (wght)，粗细从细 (100) 到粗 (700)。 它还有一个光学尺寸轴 (opsz)，支持从 8pt 到 36pt 的光学缩放。 使用 XAML 通用控件时，默认情况下会为支持的语言选择 Segoe UI Variable 字体。 使用此字体或其他带有光轴的可变字体时，光学尺寸将自动匹配请求的字体大小。 使用 HTML 时，也会自动进行光学缩放，但需要在 CSS 中指定 Segoe UI Variable 字体。

大小和缩放

UWP 应用中的字号可在所有设备上自动缩放。 该缩放算法确保可从 10 英尺远处识别 Surface Hub 上高 24 像素的字体，正如从几英寸远处识别 5 英寸手机上高 24 像素的字体。

不同设备的观看距离。

因系统缩放的工作原理，设计时采用的是有效像素而非实际物理像素，所以不必更改字体大小来适应不同尺寸的屏幕的分辨率。

绿色栏的第二个屏幕截图，其中包含绿色复选标记和文本“执行”。 按照 Windows 类型渐变 大小调整。

这次测试 不要使用小于 12 像素的字号。

层次结构

用户在扫描页面时依赖于视觉层次结构：标题用于总结内容，正文文本用于提供更多详细信息。 若要在应用中创建清晰的视觉层次结构，请遵循 Windows 字体渐变。

三行文本的屏幕截图，其中字体大小一行比一行小。

类型渐变

Windows 字体渐变可在页面上的字型之间建立关键关系，帮助用户轻松阅读内容。 所有大小均以有效像素为单位，并针对所有设备上运行的 UWP 应用进行了优化。

Windows 字体渐变。

有关更多详细信息，请查看有关使用 XAML 字体渐变的指南。

对齐

默认 TextAlignment 是左对齐，在大多数情况下，左边对齐但右边不对齐可提供一致的内容编排效果和统一的布局。 有关 RTL 语言，请参阅调整布局和字体以支持全球化。

显示刷新左文本。

<TextBlock TextAlignment="Left">

字符计数

绿色栏的第四个屏幕截图，其中包含绿色复选标记和文本“执行”。 保持每行 50–60 个字母，以方便阅读。

这次测试 不要使用少于 20 个字符或每行 60 个字符，因为很难阅读。

剪裁和省略号

当文本数量超出可用空间时，建议剪裁文本并插入省略号 [...]，这是大多数 UWP 文本控件的默认行为。

显示剪裁一些文本后的设备框架。

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

绿色栏的第五个屏幕截图，其中包含绿色复选标记和文本“执行”。 剪辑文本，并在启用多行时换行。

这次测试 不要使用省略号来避免视觉混乱。

注意

如果未对容器进行完善定义（例如，不区分背景颜色），或者存在用于查看更多文本的链接，则使用省略号。

语言

Segoe UI Variable 是用于英语、欧洲语言、希腊语和俄语的字体。 对于其他语言，请参阅以下建议。

全球化/本地化字体

使用 LanguageFont 字体映射 API 以编程方式访问特定语言的建议字体系列、大小、粗细和样式。 LanguageFont 对象提供对各种类别内容的正确字体信息的访问权限，包括 UI 标头、通知、正文文本和用户可编辑的文档正文字体。 有关详细信息，请参阅 调整布局和字体以支持全球化。

非拉丁语言的字体

字体系列 样式 备注
Ebrima 常规、粗体 非洲语言脚本的用户界面字体（阿德拉姆文、埃塞俄比亚文、西非书面文、索马里文、提芬纳格文、瓦伊文）。
Gadugi 常规、粗体 北美语言脚本的用户界面字体（加拿大音节文字、切罗基语、奥塞治文）。
Leelawadee UI

 常规、半光、粗体 东南亚语言脚本的用户界面字体（布吉斯语、高棉语、老挝语、泰语）。
Malgun Gothic

 常规 适用于朝鲜语的用户界面字体。
Microsoft JhengHei UI

 常规、粗体、浅色 繁体中文的用户界面字体。
Microsoft YaHei UI

 常规、粗体、浅色 简体中文的用户界面字体。
缅甸文

 常规 缅甸脚本的回退字体。
Nirmala UI

 常规、半光、粗体 南亚语言脚本的用户界面字体（孟加拉语、查克马文、梵文、古吉拉特语、锡克教文、埃纳德语、马拉雅拉姆语、曼尼普尔文、奥里亚语、欧甘语、僧伽罗语、索拉文、泰米尔语、泰卢固语）。
Segoe UI

 常规、斜体、浅斜体、黑色斜体、粗体、粗斜体、浅色、半光、半蓬勃、黑色 阿拉伯语、亚美尼亚语、格鲁吉亚语和希伯来语的用户界面字体。
SimSun

 常规 旧版中文 UI 字体。
Yu Gothic UI

 细体、半细、常规、半粗、粗体 日语的用户界面字体。

字体

Sans-serif 字体

Sans-serif 字体是标题和 UI 元素的绝佳选择。

字体系列 样式 备注
Arial 常规、斜体、粗体、粗体斜体、黑色 支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚语和希伯来语）。 黑粗体仅支持欧洲语言脚本。
Calibri 常规、斜体、粗体、粗体斜体、浅斜体、浅斜体 支持欧洲和中东脚本（拉丁文、希腊文、西里尔文、阿拉伯语和希伯来语）。 阿拉伯语仅在直立中可用。
Consolas 常规、斜体、粗体、粗体斜体 固定了支持欧洲脚本（拉丁文、希腊文和西里尔文）的宽度字体。
Segoe UI 常规、斜体、浅斜体、黑色斜体、粗体、粗斜体、浅色、半光、半蓬勃、黑色 欧洲和中东脚本（阿拉伯语、亚美尼亚语、西里尔文、格鲁吉亚语、希腊语、希伯来语、拉丁语）和 Lisu 脚本的用户界面字体。
Selawik 常规、半光、浅色、粗体、半曲 计量方面与 Segoe UI 兼容的开源字体，用于其他平台上不希望包含 Segoe UI 的应用。 在 GitHub 上获取 Selawik。

Serif 字体

Serif 字体非常适合呈现大量文本。

字体系列 样式 备注
Cambria 常规 支持欧洲脚本的 Serif 字体（拉丁语、希腊文、西里尔文）。
Courier New 常规、斜体、粗体、粗体斜体 支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚语和希伯来语）的 Serif 固定宽度字体。
格鲁吉亚 常规、斜体、粗体、粗体斜体 支持欧洲脚本（拉丁文、希腊文和西里尔文）。
宋体, Times New Roman 常规、斜体、粗体、粗体斜体 支持欧洲脚本（拉丁文、希腊文、西里尔文、阿拉伯语、亚美尼亚文、希伯来语）的旧字体。

可变字体

可变字体有利于精确控制文本的外观。

字体系列 Axes 备注
Bahnschrift 粗细、宽度 支持拉丁文、希腊语和西里尔文的可变字体。
Segoe UI Variable 粗细、光学尺寸 支持拉丁文、希腊语和西里尔文的可变字体。

符号和图标

字体系列 样式 备注
Segoe MDL2 Assets 常规 应用图标的用户界面字体。 有关详细信息，请参阅 Segoe MDL2 Assets 一文。
Segoe UI 表情符号 常规 表情符号的用户界面字体。
Segoe UI 符号 常规 符号的后备字体。