Windows 应用中的版式

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

字体

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

若要在应用上显示非英语语言或为应用选择另一种字体，请参阅语言和字体，了解我们推荐的 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 px 的字号。

层次结构

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

字体渐变

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

有关更多详细信息，请查看有关使用 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	常规、粗体、细体	简体中文的用户界面字体。
Myanmar Text	常规	缅甸文脚本的后备字体。
Nirmala UI	常规、半细、粗体	南亚语言脚本的用户界面字体（孟加拉语、查克马文、梵文、古吉拉特语、锡克教文、埃纳德语、马拉雅拉姆语、曼尼普尔文、奥里亚语、欧甘语、僧伽罗语、索拉文、泰米尔语、泰卢固语）。
Segoe UI	常规、斜体、细斜体、黑斜体、粗体、粗斜体、细体、半细、半粗、黑体	阿拉伯语、亚美尼亚语、格鲁吉亚语和希伯来语的用户界面字体。
SimSun	常规	传统的中文用户界面字体。
Yu Gothic UI	细体、半细、常规、半粗、粗体	日语的用户界面字体。

字体

Sans-serif 字体

Sans-serif 字体是用于标题和 UI 元素的不错选择。

字体系列	样式	注释
Arial	常规、斜体、粗体、粗斜体、黑体	支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚语和希伯来语）。 黑粗体仅支持欧洲语言脚本。
Calibri	常规、斜体、粗体、粗斜体、细体、细斜体	支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语和希伯来语）。 阿拉伯语仅在竖体中可用。
Consolas	常规、斜体、粗体、粗斜体	支持欧洲语言脚本（拉丁文、希腊语和西里尔文）的固定宽度字体。
Segoe UI	常规、斜体、细斜体、黑斜体、粗体、粗斜体、细体、半细、半粗、黑体	欧洲和中东语言脚本（阿拉伯语、亚美尼亚语、西里尔文、格鲁吉亚语、希腊语、希伯来语、拉丁文）以及傈僳语脚本的用户界面字体。
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 Emoji	常规	表情符号的用户界面字体。
Segoe UI Symbol	常规	符号的后备字体。

相关文章

• 文本控件
• XAML 主题资源
• XAML 样式
• Microsoft 板式
• 可变字体