针对不同屏幕分辨率优化图像(Windows 应用商店应用程序)
在发布您的 Windows 应用商店应用程序之前,应确保其徽标和初始屏幕在具有不同的屏幕分辨率的各种设备上显示良好。如果您只提供这些图形的一个版本,Windows 将拉伸或收缩该版本与以适合所用的任何屏幕大小,而且具有高像素密度的屏幕可以显示图形的交错版本。通过按不同大小提供每个图形的版本,可以降低 Windows 拉伸或收缩图形的程度。有关如何使图像显示良好的更多信息,请参见按像素密度缩放的准则。
本主题描述如何提供标识应用程序的四个必需图像的不同版本:主徽标、小徽标、应用商店徽标和初始屏幕。本主题不包括宽徽标或徽章徽标,但您应遵循相同的过程。有关 Windows 应用商店应用程序需要的徽标和图像的概述,请参见选择应用程序图像。
备注
获取图像文件
如果可能,您应具有用于图形设计的艺术家使用专业软件,用以创建基于源作品的缩放图像文件。如果这不是您的一个选项,您将需要创建自己的图像文件。无论您采取的方法如何,您都将需要如下大小的应用程序徽标、小徽标、应用商店徽标和初始屏幕。(请注意,您需要仅三种大小的应用商店徽标和初始屏幕,而不是四种。)
徽标缩放比例 |
图像尺寸 |
---|---|
缩放 180 (180%) |
270 x 270px |
缩放 140 (140%) |
210 x 210px |
缩放 100 (100%) |
150 x 150px |
缩放 80 (80%) |
120 x 120 px |
小徽标缩放比例 |
图像尺寸 |
---|---|
缩放 180 (180%) |
54 x 54px |
缩放 140 (140%) |
42 x 42px |
缩放 100 (100%) |
30 x 30px |
缩放 80 (80%) |
24 x 24px |
应用商店徽标缩放比例 |
图像尺寸 |
---|---|
缩放 180 (180%) |
90 x 90px |
缩放 140 (140%) |
70 x 70px |
缩放 100 (100%) |
50 x 50px |
初始屏幕缩放比例 |
图像尺寸 |
---|---|
缩放 180 (180%) |
1116 x 540px |
缩放 140 (140%) |
868 x 420px |
缩放 100 (100%) |
620 x 300px |
下面的示例演示如何使用缩放的图像。
添加图像文件
当您具有适当大小的图像文件时,可以将它们添加到项目中并在清单文件中标识它们。根据文件的资产类型来命名文件,如 Logo.png 或 SmallLogo.png。如果您打算在同一个文件夹中存储文件,请在文件名中包括缩放限定符。例如,可以为两个文件指定以下名称:Assets\Logo.scale-100.png 和 Assets\Logo.scale-140.png。
如果您打算基于缩放比例组织文件夹中的文件,请在文件夹名称中而不是文件名中包括缩放限定符。例如,可以将 Logo.png 和 SmallLogo.png 存储在 Assets\Scale-100 子文件夹中。
向项目中添加图像文件
打开 Windows 应用商店项目。
将图像文件添加到项目中的 Assets 文件夹。
标识清单中的文件
在**“解决方案资源管理器”中,打开应用程序清单设计器 (Package.appxmanifest),然后选择“应用程序 UI”**选项卡。
在可见资产的列表中,选择**“所有图像资产”**以显示徽标和初始屏幕的设置。
如果希望短名称显示在主徽标上,请指定在**“短名称”**文本框中指定一个。
在**“徽标”**文本框中,为主徽标指定逻辑名称。
默认值为 Assets\Logo.png。
备注
每个资产类型都会显示类似的文本框。
在该页的**“缩放资产”区域,选择“缩放 80”** 框旁边的**“浏览”按钮,导航到 Assets 文件夹,指定包含缩放到 80% 的图像的文件,然后选择“打开”**按钮。
文件的图像显示在框中,并且文件被复制。复制的文件是根据 Windows 应用商店应用程序的资源命名约定命名的:Name.scale-NNN.ext,其中 NNN 是缩放比例。例如,文件可以命名为 Logo.scale-100.png。
通过从 Assets 文件夹选择相应的文件并将其添加到**“缩放 100”、“缩放 140”** 和**“缩放 180”框,完成“徽标”**设置。
备注
为了显示缩放大小的图像特写视图,请在框中选择图像。预览窗口打开并列出每个图像文件的使用位置。
对小徽标、应用商店徽标和初始屏幕重复步骤 4-6。
在 Windows 应用商店应用程序的模拟器中预览应用程序
通过使用模拟器,可以生成应用程序,选择要模拟的实际屏幕大小和分辨率,然后在台式计算机上预览应用程序。
重要
将应用程序发布到 应用商店之前,始终在真实设备上测试应用程序。
在模拟器中运行 应用商店应用程序
在**“调试目标”列表中,选择“模拟器”**。
**“调试目标”列表位于工具栏上的“解决方案配置”**列表旁。
如果生成不启动,请再次选择**“模拟器”**。
当您的应用程序运行时,选择模拟器右侧的**“更改分辨率”**按钮,然后指定要查看的屏幕大小和分辨率。
模拟器调整应用程序的显示。
备注
模拟器提供其他功能(如旋转、触摸模拟、设备的地理位置和屏幕捕获)。有关更多信息,请参见在模拟器中运行应用程序。
若要关闭模拟程序,请选择 Ctrl+Alt+F4 键。