[一些关于发售前产品的信息可能在正式发售前做出较大调整。微软不对这里的信息提供保障，通知或许诺]

在 UWP（Universal Windows Platform 即 Windows 通用平台）程序介绍中，我们解释了如何让 UWP 程序在平台上运行。你不需要为所有屏幕尺寸定制界面；Windows 确保你的用户界面在所有设备上都合理显示。然而，你也可以为特定设备调整界面。比如每当你的程序运行在台式机或笔记本电脑上的时候，你可能想让它展示更多的内容，但这些内容展现在小屏幕上时又十分混乱。

使用这些方法为特定的屏幕尺寸优化程序，有些简单快速，有些则需要费些功夫。

设计有效像素

在《面向设计师的 Windows 通用平台程序介绍》中，我们谈到了如何设计 UWP 程序，你设计的不是真实物理像素，而是有效像素。

有效像素可以让你专注于 UI 元素的感知大小，无需为像素密度与使用距离担心。比如，当你设计一个“1”比例的元素，这个元素会在不同设备上合理呈现，在大屏高分辨率屏幕上这个元素的物理像素是 200x200，而在手机上，他的物理像素会是 100x100

所以，这对设计程序的方式有何影响呢？

• ·你可以忽略像素密度和实际的屏幕尺寸，转而注意屏幕尺寸等级（下文有解释）和有效像素。
• ·当系统缩放你的界面时是以 4 的倍数进行缩放。为了确保显示正确，请在 4x4 的网格中进行设计：界面的空白，尺寸，位置和字体的位置（无需考虑字体尺寸）都要是 4 的倍数。

下图展示了在 4x4 像素网格上设计的界面元素。这些元素会清晰锐利地显示在任何平台上。

下图展示了不符合 4x4 像素网格的设计元素。这些设计元素在某些设备商会很模糊

提示：当设计界面原型图片的时候，你可以将 DPI 调整到 72 并且将图像大小调整到你针对的尺寸类别（下文有推荐的几个屏幕尺寸级别）。

为什么为特殊的尺寸定制界面？

之前我们讲到 UWP 是如何使用有效像素并让你的程序适应所有 Windows 设备的。那为什么还要为特殊的尺寸定制界面呢？

备注：Windows 不会告诉你你的程序运行在哪一个具体设备上。但它可以告诉你正在运行在哪一类设备上（如移动，桌面等），有效像素和屏幕可用空间（程序窗口尺寸）

·确保屏幕空间的利用率，减少导航的需求

如果你设计的程序在小屏幕上显示良好，比如在手机上。但当它运行在大屏幕 PC 的时候，会浪费很多屏幕空间。你可以定制大屏幕运行时的界面，来显示更多的内容。比如，手机上的购物程序一屏可能只显示一种商品类别，但是在 PC 和笔记本电脑上运行的时候会同时显示两个类别。

由于显示了更多内容，用户使用导航的次数就会减少。

·充分发挥设备的能力

特定的设备会拥有特定的能力。比如，手机上搭载了定位装置和摄像头，PC上一般没有这些。你的程序可以检测设备有哪些能力和特性并且运用他们。

·输入优化

通用控件库兼容所有输入方式（触控，笔，键盘，鼠标），但是你仍然可以为特殊的输入方式进行优化。比如手机用户可能喜欢把导航按钮放在屏幕底下，因为他们很好被触摸到，但是 PC 用户希望他们出现在屏幕的上方。

响应式设计技巧

当你为特殊屏幕尺寸进行优化的时候，你就是在创建响应式设计程序。你可以用一下六条响应式设计技巧优化你的程序。

·调整位置

你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。如果你用网格设计这些位置，你也可以不改变内容框架，但其他 UI 元素可以使用响应式设计。

这是一个图片应用的例子，内容框架在大屏幕上被改变了位置。

·调整尺寸

你可以通过调整空白和 UI 元素的尺寸来优化框架，比如下面这个例子，可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。

·调整顺序

通过调整 UI 元素的顺序和方向，优化内容显示效果。举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。

这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。

·展现

你可以基于屏幕的真实大小，设备支持的功能，特定的情况或者屏幕方向展示界面。

下图是一个含有相机按钮的 Tab 的例子。平板电脑和台式机可能没有摄像头，所以相机按钮不被显示出来。另一个例子是媒体播放器，小屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。

选择何时显示更多元数据也是这项技巧的一部分。当真实尺寸比较小的时候，应当更少地展现元数据。PC 和笔记本上应该多展现一些元数据。一些展现和隐藏元数据的例子：

Email 程序，显示用户头像

音乐程序，显示更多关于专辑和作者的信息

视频程序，显示更多关于影片或节目的信息，比如时间表和职员表

任何程序中，去除分栏并展现更多细节

任何程序中，将垂直折叠界面摊开，变成水平界面。手机或者 Phablet 上使用垂直折叠，而在大尺寸屏幕上使用水平界面可以显示更多项目和元数据

·换位

这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更好地选择。

·改变结构

你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。

下图是一个智能家庭程序，运用了改变结构的技巧

屏幕尺寸级别转换点

Windows10 生态系统中的屏幕尺寸众多，为每一个尺寸进行优化很是费力。我们推荐为几个关键的尺寸级别进行优化（也叫“转换点”）:320，720，和 1024px

提示：当为这些转换点设计的时候，请流出屏幕空间，因为当他们全屏运行的时候才符合转换点尺寸，但通常他们不是全屏运行的，那样看起来就会比较小。底下这个表格是推荐的尺寸级别。