按比例缩放屏幕指南（Windows 应用商店应用）

项目
07/03/2013

本主题介绍有关如何为你的 Windows 应用商店应用设计和构建布局的最佳做法，这种布局可缩放为 Windows 8 支持的不同屏幕大小。

Windows 8 可在不同屏幕尺寸的设备上运行，包括从小屏幕的平板电脑到中等屏幕的便携式计算机，再到大型台式机或多功能屏幕。Windows 应用商店应用可在 Windows 8 支持的任何尺寸的屏幕上运行。一般来说，屏幕尺寸越大，屏幕分辨率也越高。结果是，在这些更大的屏幕上，应用可以利用更多的可视区域。

本文档中使用了以下术语：

Term	Description
屏幕尺寸	屏幕的物理尺寸，以英寸为单位。通常测量对角线。
屏幕分辨率	屏幕支持的像素数量，以水平和垂直维度测量。例如，1366x768。
纵横比	以宽对高的比例表示的屏幕形状。例如，16:9。

屏幕尺寸

屏幕尺寸对 Windows 应用商店应用的最大影响因素实际上是屏幕分辨率。在越大的屏幕上，屏幕分辨率越高，因此可供应用使用的空间或屏幕空间也越大。用户希望在更大的屏幕上看到更多内容和功能。

应用开发人员和设计人员需要考虑如何管理屏幕空间。在大屏幕上，应用的外观通过设计和开发时为布局定义的参数确定。

这些平台、控件和模板已经设计为适合不同的屏幕大小。你的许多应用都只需要少量工作或代码就能缩放自如，你需要对顶层布局、内容区域、应用导航以及命令进行一番考虑，从而确保它们按照预期直观地放置在更大的屏幕上。

下图表明，如果为大屏幕构建的布局不能进行调整，则会导致很大的区域留空。

非灵活布局导致的大空白区域

最低屏幕分辨率

应用应支持以下两种主要屏幕分辨率：

Windows 应用商店应用运行的最小分辨率为 1024x768。
支持 Windows 8（包括带有贴靠的多任务处理）的全部功能所需的最低分辨率为 1366x768。有关辅屏视图的详细信息，请参阅辅屏视图和填充视图指南。

Windows 应用商店应用无法在 1024x600 或 1280x720 分辨率下运行。

下表显示了对主屏幕分辨率的建议做法。

做法	描述
为最低分辨率 1024x768 设计。	此做法提供以下优势：确保所有 UI（如导航、控件和内容）均适合屏幕，不会发生剪切。
为最佳分辨率 1024x768 设计。	此做法提供以下优势：确保所有 UI（如导航、控件和内容）均适合屏幕，不会产生空白区域。

为最低分辨率 1024x768 设计。

此做法提供以下优势：

确保所有 UI（如导航、控件和内容）均适合屏幕，不会发生剪切。

为最佳分辨率 1024x768 设计。

此做法提供以下优势：

确保所有 UI（如导航、控件和内容）均适合屏幕，不会产生空白区域。

为更大的屏幕设计

为更大的屏幕设计应用时，你必须考虑怎样才能将应用的布局、美观性、比例以及控件应用到更大的画布。此外，任何应用均可包含任意数量的不同复杂度的布局。对于较大的屏幕，每个布局均可单独考虑。

下表显示了对大屏幕的建议做法。

做法	描述
填充屏幕	不论屏幕大小，此做法可为用户提供最身临其境的体验优点。应用应尽可能填满屏幕，并且应该精心设计为适合各种屏幕大小。购买大监视器的用户希望他们的应用在大屏幕上看起来依然美观，并且最好在屏幕上显示更丰富的内容。
确定布局是固定的还是可调整的	可使用两种技术来构建适合不同屏幕大小的应用。具体选择取决于布局和使用情况的复杂性。

填充屏幕

不论屏幕大小，此做法可为用户提供最身临其境的体验优点。

应用应尽可能填满屏幕，并且应该精心设计为适合各种屏幕大小。购买大监视器的用户希望他们的应用在大屏幕上看起来依然美观，并且最好在屏幕上显示更丰富的内容。

确定布局是固定的还是可调整的

可使用两种技术来构建适合不同屏幕大小的应用。具体选择取决于布局和使用情况的复杂性。

固定布局

固定布局在游戏或游戏类的应用中很常见，这些应用主要由位图组成。通常，这些类型的布局都有固定的内容量（例如，游戏板），其中不可能显示更多的内容或者添加更多值。这些布局不能（也不会）动态变化，它们设计为使用固定的像素值，因此不能适应不同的屏幕大小。Windows 8 利用平台内置的“自适应缩放”方法满足这些应用的要求。

不同大小屏幕上的固定布局

固定布局：自适应缩放

如果你确定你的应用需要不适合不同屏幕大小的固定布局，则可以使用自适应缩放方法来让布局填满不同大小的屏幕，如下图所示。

适合固定布局的自适应缩放

下表显示了使用自适应缩放功能的应用的建议做法。

做法	描述
从基本分辨率开始。	设计固定布局时，请从基本分辨率开始设计你的布局：1024x768 和 1366x768。这是适合大屏幕的布局。
将你的固定内容放置在 ViewBox 控件中。	ViewBox 控件将固定布局缩放为适合屏幕的大小。确保将 ViewBox 控件的大小设置为 100% 宽度和高度。将 ViewBox 的固定大小属性定义为布局的固定像素大小（例如，1366x768）。
不要将自适应控件（如 AppBar）放置到 ViewBox 中。	这些控件会自动适合不同的屏幕大小。
定义宽屏样式和颜色。	固定应用布局不会动态变化来响应纵横比或屏幕大小的变化，所以自适应缩放技术会自动将你的应用居中并展开（水平或垂直）。定义宽屏样式和颜色来补充应用或硬件颜色可以提供更完美的体验。宽屏颜色通过顶层布局的背景颜色进行定义。我们建议选择一种与硬件融为一体的深颜色（如黑色），中性颜色（如灰色）会让人感觉是有意为之，或者也可以选择与应用内容颜色相符的颜色。
提供向量或高分辨率资源。	在大型桌面监视器上，自适应缩放技术可将应用缩放至不同的大小，最大可达应用设计尺寸的两倍。向量资源，如可缩放向量图形 (SVG)、XAML 可扩展应用标记语言 (XAML) 或没有缩放痕迹或产生模糊的基元缩放如果需要光栅资源（如位图），请提供比设计尺寸大两倍的图像，从而使图像可以缩小（而不是放大）。以下图像演示了与向量图像（左）相比，标量图像（右）的尺寸在放大后发生降级的情况。

自适应布局

自适应布局在内容使用、管理和创建应用中很常见。这些布局通常由顶层线框定义的比例元素组成。例如，新闻阅读器应用具有标题、脚注和位于中心的内容区。这些布局动态变化，从而适应不同的屏幕大小，它可以显示更多的内容，并根据布局规则动态填充空间。Windows 8 利用自适应布局技术来满足这些应用的要求，我们将在下面深入讨论该技术。

不同大小屏幕上的自适应布局

自适应布局：管理空间

如果你确定你的应用布局支持适合不同屏幕大小的自适应布局，请利用下列因素来确定如何让你的应用利用所有可用屏幕空间。

下表显示了使用自适应布局的应用的建议做法。

做法	描述
确定每个自适应区域如何利用可用空间。	对于在水平或垂直方向上标识为可自适应的单元，确定应用布局如何利用大屏幕上的空间。
确定顶层布局线框。	该线框应描述应用位于哪个顶层区域。线框中应包括标题、导航以及内容区的位置。下图演示了顶层线框。
确定布局的哪些部分是固定的，以及哪些部分是自适应的。	对于顶层线框中的每个单元，当应用以不同的大小显示时，确定每个单元如何在垂直和水平维度上调整大小。该顶层线框描述和大小调整行为可用于定义 GridLayout 的参数。
确定每个自适应区域在哪个维度上进行调整。	对于在水平或垂直方向上标识为可自适应的单元，确定应用布局如何利用大屏幕上的空间。
确定你的应用如何利用自适应维度上的空间。	确定如何将应用的每个区域调整为不同大小后，下一步要考虑如何利用空间。你的应用可以使用和结合许多技术来利用空间；所有这些技术在 Windows 8 平台和控件上都受支持。
确保所有集合视图的宽度和高度尺寸均为 100%。	ListView 控件会自动使用更多项目来填充可用空间。
在适当情况下为文本使用多列布局。	为了便于阅读，多列布局会自动添加列并显示内容来填充可用空间。
在适当情况下为图像使用 canvas。	canvas 会自动扩展以填充可用空间。
显示更多空白。	用多余空白进行补偿来保持你所显示的应用的内容量。
显示更多应用。	显示更多应用内容。根据你重新排列内容的方式，你还可显示 — 或不显示更多空白。