屏幕大小和断点
Windows 应用可以在运行 Windows 的任何设备上运行,其中包括平板电脑、桌面、电视等。 在 Windows 生态系统中具有大量设备目标和屏幕大小,而不是为每个设备优化 UI,我们建议针对几个关键宽度类别(也称为“断点”)进行设计:
- 小(640px 以下)
- 中等(641px 到 1007px)
- 大(不小于 1008px)
提示
在针对特定断点进行设计时,请针对应用(应用的窗口)的屏幕可用空间大小(而不是屏幕大小)进行设计。 当应用全屏运行时,应用窗口的大小与屏幕的大小相同,但当应用不全屏运行时,窗口的大小小于屏幕的大小。
断点
下表展示了不同的大小级别和断点。
Size 类 | 断点 | 典型屏幕大小 | 设备 | 窗口大小 |
---|---|---|---|---|
小型 | 高达 640px | 20“ 到 65” | TV | 320x569、360x640、480x854 |
中 | 641 - 1007px | 7" 到 12" | 平板电脑 | 960x540 |
大型 | 1008px 和向上 | 13" 及更大 | 电脑、笔记本电脑、Surface Hub | 1024x640、1366x768、1920x1080 |
为什么将电视归入“小”类别?
虽然大多数电视体积相当大(一般为 40 到 65 英寸)并且具有高分辨率(HD 或 4k),但在 10 英尺远处观看的 1080P 电视采取的设计与坐在 1 英尺远的桌前使用的 1080p 显示器是不同的。 考虑到距离,1080 像素电视的观看效果相当于 540 像素的显示器。
XAML 的有效像素系统会自动为你考虑查看距离。 当你为控件或断点范围指定大小时,实际上使用的是“有效”像素。 例如,如果为 1080 像素或更多像素创建响应式代码,1080 监视器将使用该代码,但 1080p 电视不会-因为尽管 1080p 电视具有 1080 个物理像素,但它只有 540 个有效像素。 这使得电视的设计类似于为小屏幕进行设计。
有效像素和缩放比例
XAML 可自动调整 UI 元素,以便它们易于在所有设备和屏幕大小上轻松交互。
当应用在设备上运行时,系统使用算法来规范 UI 元素在屏幕上的显示方式。 此缩放算法考虑查看距离和屏幕密度(每英寸像素),以优化感知大小(而不是物理大小)。 该缩放算法确保用户可从 10 英尺远处识别 Surface Hub 上高 24 像素的字体,正如从几英寸远处识别 5 英寸手机上高 24 像素的字体。
由于缩放系统的工作原理,设计 XAML 应用时,需要以有效像素而不是实际物理像素进行设计。 有效像素 (epx) 是一个虚拟度量单位,用于表示布局尺寸和间距(独立于屏幕密度)。 (在我们的指南中,epx、ep 和 px 可以互换使用。)
设计时,可以忽略像素密度和实际屏幕分辨率。 相反,设计大小类的有效分辨率(有效像素的分辨率)(有关详细信息,请参阅屏幕大小和断点文章)。
提示
在图像编辑程序中创建屏幕模拟时,将 DPI 设置为 72,并将图像尺寸设置为目标大小类的有效分辨率。
四的倍数
在 UWP 应用中,UI 元素的大小、边距和位置应始终为 4 epx 的倍数。
XAML 可跨一系列设备缩放,缩放高原为 100%、125%、150%、175%、200%、225%、250%、300%和 400%。 基础单位是 4,因为它可以整数形式缩放到这些比例(例如 4 x 125% = 5,4 x 150% = 6)。 使用 4 的倍数可以将所有 UI 元素与整个像素匹配,并可确保 UI 元素具有清晰的锐边。 (请注意,文本不会有此要求;文本的大小和位置可以是任意值。)