Windows应用开发中的屏幕大小和断点指南

Windows应用开发中的屏幕大小和断点指南

Windows应用可以在各种设备上运行，包括平板电脑、桌面和电视等。为了确保应用在不同设备上都能提供良好的用户体验，开发者需要针对不同的屏幕尺寸进行响应式设计。本文将介绍Windows应用开发中常用的屏幕尺寸分类、断点以及设计注意事项。

屏幕大小和断点

Windows生态系统中包含大量设备和屏幕尺寸。为了简化设计流程，我们建议针对几个关键宽度类别（也称为“断点”）进行设计：

• 小（640px以下）
• 中等（641px到1007px）
• 大（不小于1008px）

提示： 在设计时，请关注应用窗口的可用空间大小，而不是整个屏幕的大小。当应用全屏运行时，窗口大小与屏幕大小相同；但当应用非全屏运行时，窗口大小会小于屏幕大小。

断点详解

下表展示了不同尺寸级别及其对应的断点：

为什么将电视归入“小”类别？

虽然大多数电视体积较大（通常为40到65英寸）且具有高分辨率（如HD或4K），但在10英尺外观看的1080P电视与在1英尺远处使用的1080p显示器的设计需求不同。考虑到观看距离，1080像素电视的观看效果相当于540像素的显示器。

XAML的有效像素系统会自动考虑观看距离。当你为控件或断点范围指定大小时，实际上使用的是“有效”像素。例如，如果为1080像素或更多像素创建响应式代码，1080监视器将使用该代码，但1080p电视不会——因为尽管1080p电视具有1080个物理像素，但它只有540个有效像素。这使得电视的设计类似于为小屏幕进行设计。

有效像素和缩放比例

XAML可以自动调整UI元素，以便在所有设备和屏幕大小上都能轻松交互。当应用在设备上运行时，系统会使用算法来规范UI元素在屏幕上的显示方式。此缩放算法考虑观看距离和屏幕密度（每英寸像素），以优化感知大小（而不是物理大小）。缩放算法确保10英尺外的大演示文稿屏幕上的24像素字体与用户一样清晰，就像在距离几英寸的小便携式屏幕上的24像素字体一样清晰。

由于缩放系统的工作原理，设计XAML应用时，需要以有效像素（而不是实际物理像素）进行设计。有效像素（epx）是一个虚拟度量单位，用于表示布局尺寸和间距（独立于屏幕密度）。在我们的指南中，epx、ep和px可以互换使用。

设计时，可以忽略像素密度和实际屏幕分辨率。而是针对大小类的有效分辨率（有效像素的分辨率）进行设计。

提示： 在图像编辑程序中创建屏幕模拟时，将DPI设置为72，并将图像尺寸设置为目标大小类的有效分辨率。

四的倍数

UI元素的大小、边距和位置应始终位于XAML应用中4个epx的倍数中。XAML可以跨一系列设备缩放，缩放高原为100%、125%、150%、175%、200%、225%、250%、300%和400%。基础单位是4，因为它可以整数形式缩放到这些比例（例如4 x 125% = 5，4 x 150% = 6）。使用4的倍数可以将所有UI元素与整个像素匹配，并可确保UI元素具有清晰的锐边。（请注意，文本不会有此要求；文本的大小和位置可以是任意值。）