UI 设计 – 通用 Windows 应用的响应式设计

WINDOWS 10 2015 年特别版 # UI 设计 - 通用 Windows 应用的响应式设计 作者 [Mike Jacobs](https://msdn.microsoft.com/zh-cn/magazine/mt149362?author=Mike+Jacobs) | Windows 2015 通用 Windows 应用可以在任何基于 Windows 的设备（包括从手机到平板电脑或电脑）上运行。您甚至可以创建在紧凑型设备（如便携式设备或家用电器）上运行的通用 Windows 应用。您可以将您的应用限定用于单一的设备系列（如移动设备系列），也可以选择使应用可在所有运行 Windows 的设备上使用。 将一个应用设计为可在各种各样的设备上使用似乎是一个很好的想法，但却是一项很大的挑战。那么，您会如何针对屏幕尺寸和输入法差别迥异的设备设计一款能够提供完美 UX 的应用呢？ 所幸的是，通用 Windows 平台 (UWP) 提供了一套内置功能和通用构建基块，可以帮助您做到这一点。本文介绍了 UWP 的设计功能，并提供了一些关于创建可适应于不同设备和外形规格的响应式 UI 的建议。 当您创建通用 Windows 应用时，我们首先来考虑一些您可以使用的功能。您不必做任何事情便可使用这些功能 - 它们已包含在 UWP 之中。 其中一个功能是平台缩放功能，可根据使用的 Windows 驱动的设备类型对 UI 进行优化。该系统使用一种算法来标准化控件、字体和其他 UI 元素在屏幕上的显示方式。这个缩放算法考虑了观看距离和屏幕密度（每英寸像素），以对感知大小（而不是物理大小）进行优化。缩放算法保证了在 10 英尺远的 Surface Hub 显示装置上显示的 24 像素字体与用户在几英寸远的 5 英寸智能手机屏幕上显示的 24 像素字体一样清晰。鉴于缩放系统的这种工作模式，当您设计通用 Windows 应用时，您要使用有效像素进行设计，而不要使用实际的物理像素进行设计。 UWP 的另一个内置功能是通过智能交互启用的通用输入功能。虽然您可以针对特定的输入模式和设备来设计您的应用，但这不是必要的。这是因为通用 Windows 应用在默认情况下依靠智能交互。这意味着，您可以围绕着单击交互进行设计，而不必知道或定义该单击是源于实际的鼠标单击还是源于手指的点按操作。 ## 通用构建基块 此外，UWP 提供了有用的构建基块，可以更容易地设计出适用于多个设备系列的应用。这些构建基块包括通用控件、通用样式和通用模板。 可以保证通用控件在所有以 Windows 为基础的设备（从智能手机到 Surface Hub 显示器）上正常工作。它们运行的域范围从单选按钮和文本框这类常见的窗体控件到网格视图和列表视图这类复杂的控件（可以从数据流和模板中生成项目列表）。这些控件具有输入感知的特点，可针对每个设备系列部署一组适当的输入提示、活动状态和整体功能。 UWP 还会自动为您的应用套用一组默认的样式，该组样式会针对每个目标外形规格优化呈现方式。您可以自定义默认样式或彻底进行替换，以创建独特的视觉体验。通用样式提供了许多功能，包括： * 一组样式，它可以自动为您的应用选择浅色或深色主题并可结合用户的色彩偏好 * 一种基于 Segoe 的类型校正，它确保该应用文本可在所有设备上呈现出清晰效果 * 默认的交互动画 * 自动支持高对比度模式。这些样式都特意采用高对比度设计，因此，当应用采用高对比度模式在设备上运行时，可正确进行显示 * 自动支持其他语言。默认样式为 Windows 支持的每一种语言自动选择正确的字体。您甚至可以在相同的应用中使用多种语言，并正确显示这些语言 * 内置支持从右到左的阅读顺序 最后，UWP 提供了适用于 Adobe Illustrator 和 Microsoft PowerPoint 的通用模板，并包含您开始设计 UWP 应用所需的一切。这些模板具有适用于每个通用设备尺寸类的通用控件和布局。若要下载模板，请转到 Windows 开发人员中心 [bit.ly/1KHun6J](http://bit.ly/1KHun6J) 的设计下载部分。 ## 了解设备 为了在您的应用中尽可能提供最佳的 UX，熟悉 UWP 支持的各种设备系列非常重要。当设计用于特定设备时，主要考虑的因素包括：在该设备上应用如何显示，用户以何种方式与该设备进行交互，以及在该设备上应在何处、何时和如何使用该应用。 智能手机 是所有计算设备中最广泛使用的；手机可以在有限的屏幕空间和基本的输入模式下实现很多用途。手机有各种尺寸，大多数对角线长度范围在 4 至 6 英寸之间，而屏幕大于 6 英寸的手机通常被称为平板手机。虽然，在平板手机上的应用体验与在标准大小的智能手机上的体验非常相似，但大屏幕可以支持内容使用方面的某些重要变化。 手机主要在纵向上使用，这主要是为了在交互过程中易于用一只手拿着手机。横向上的良好体验则包括观看照片和视频、阅读书籍以及撰写文本。无论大小和使用模式如何，手机都具有某些相同特点。它们大多只供一个人（即设备的所有者）使用，并且往往是触手可及，通常放在口袋或提包中。手机的使用时间通常较短。 用户通过触摸和语音与自己的手机交互。大多数手机提供照相机、麦克风、移动传感器和位置传感器功能。 平板电脑 超便携式平板电脑填补了手机和笔记本电脑之间的空隙。常备触摸屏、照相机、麦克风和加速计的平板电脑的屏幕大小范围通常为 7 至 13 英寸左右。像手机一样，平板电脑也主要由一个人（它的所有者）使用。它们常在家中使用，使用时间比手机长。用户通过触摸、触笔，有时是键盘和鼠标，与平板电脑交互。 电脑和笔记本电脑 Windows 电脑包括各种大小的设备和屏幕尺寸。在一般情况下，电脑和笔记本电脑可以显示比手机或平板电脑更详细的信息。典型屏幕尺寸为 13 英寸或以上。电脑和笔记本电脑上的应用可共享使用，但一次可供一个用户使用，通常使用时间较长。应用可以显示在一个窗口视图中，它的大小由用户确定。电脑和笔记本电脑的用户主要使用鼠标和键盘与应用交互，但许多笔记本电脑和一些电脑也支持触摸交互。电脑和台式机通常不会像其他设备那样有非常多的内置传感器，而且大部分仅配备一个照相机和一个麦克风。 Surface Hub 设备 Microsoft Surface Hub 是专为多个用户同时使用而设计的大屏幕团队协作设备。Surface Hub 的可用屏幕尺寸范围为 55 到 84 英寸之间。Surface Hub 上的应用可在短时间内共享使用，例如在会议中使用，并且可以四种状态进行显示：填充（一个占据可用场景区域的固定视图）、全屏（标准全屏视图）、辅屏（一个占据场景的右侧或左侧的可变视图）和背景（当应用仍在运行时，可通过任务切换器实现隐藏的效果）。Surface Hub 支持触摸、触笔、语音和键盘交互，并且包括照相机和麦克风。 Windows 物联网设备 这一新兴类以实物中嵌入的小电子产品、传感器和连接性为中心。这些设备通常通过网络或 Internet 实现互联，并提供它们感测到的现实世界数据的报告，并且在某些情况下采取相应操作。设备可以没有屏幕（“无外设”设备），或可以连接到一个 3.5 英寸或更小的小屏幕（“有外设”设备）上。输入和设备功能因设备的不同而千差万别。 ## 设计特定设备 由于 Windows 在后台工作以确保您的 UI 清晰可辨并能跨所有设备正常运转，所以您不必针对任何特定的设备或屏幕尺寸自定义您的应用。然而，有些时候您可能想要这样做。例如，当您的应用运行在电脑或笔记本电脑上时，您要显示的其他内容可能会打乱像手机这样较小设备的屏幕。 有许多方法可以提高您的应用适应特定屏幕尺寸的功能；其中有一些既快速又简单，而有些则需要做一些努力工作。 我们先再谈些关于有效像素的内容。正如之前所述，当您设计通用 Windows 应用时，您要使用有效像素进行设计，而不要使用实际的物理像素进行设计。有效像素使您能够专注于 UI 元素的实际感知大小，而不必担心不同设备的像素密度或观看距离。例如，当您设计一个 1 英寸 × 1 英寸的元素时，该元素将在所有设备上显示为大约 1 英寸大小。在具有高像素密度的非常大的屏幕上，该元素可能是 200 × 200 个物理像素大小，而在像手机这种较小设备上，它可能是 150 × 150 个物理像素大小。 那么，这会对您设计应用的方式产生怎样的影响呢？ 设计时可以忽略像素密度和实际的屏幕分辨率。相反，需要为尺寸类设计有效分辨率（有效像素的分辨率）。稍后，我将在本文中详细介绍尺寸类分辨率。此外，有一个快速提示： 当在图像编辑程序中创建屏幕模型时，请务必将 PPI 设置为 72，将图像尺寸设置为您针对的尺寸类的有效分辨率。 为确保您的应用可彻底实现缩放，服从四个规则很重要： 通过使用 UI 元素的边距、尺寸、位置（包括文本位置）构成四个有效像素的倍数关系，将您的设计对齐 4×4 像素网格。图 1 显示映射到 4×4 像素网格的设计元素。该设计元素将始终有清晰醒目的边缘。相反，设计的元素如果映射不到 4x4 网格，在一些设备上将呈现出模糊和柔化边缘的效果。   图 1 对齐到 4×4 像素网格可呈现清晰的文本和图像 尽管有这些资源和功能，但有时候您可能想为特定的设备系列自定义您的应用的 UI。例如，您可能需要尽可能最有效地利用空间，减少用户的导航负担。将应用设计成在手机等小屏幕设备上具有出色的观看效果，对于具有大尺寸显示器的电脑而言是有用的，但也有可能浪费一些空间。您可以将应用自定义为在屏幕大于特定尺寸时可以显示更多的内容。例如，购物应用在手机上可能一次只显示一个商品类别，但在电脑或笔记本电脑上可同时显示多个类别和产品。通过将更多的内容放在屏幕上，可以减少用户需要执行导航的工作量。 其他可以想到的场景，例如您需要充分使用设备的功能时。例如，手机可能有位置传感器和照相机，而电脑可能什么都没有。您的应用可以检测到哪些功能是可用的，然后启用使用它们的功能。 最后，您可能想要优化输入。通用控件库可与所有输入类型（触摸、触笔、键盘和鼠标）配合使用，但是您仍然可以通过重新安排 UI 元素对特定的输入类型进行优化。例如，如果将导航元素放置在屏幕底部，便可以让手机用户更轻松地进行访问，但大多数电脑用户却希望在屏幕顶部看到导航元素。 ## 响应式设计技术 当为特定的屏幕宽度优化您的应用 UI 时，您是在创建一个响应式设计。有很多有用的响应式设计技术可供您用于自定义您的应用 UI，以及充分利用不同设备类型的屏幕空间和可用的功能。有六个技术可供考虑：重新定位、重设大小、重排、显示、替换和重构。 重新定位应用 UI 元素是充分利用每台设备的一种方法。在图 2 中，手机或平板手机的纵向视图需要滚动 UI，因为一次只能看到一个完整的框架。当应用转换到允许使用两个完整屏幕框架的平板电脑或其他设备上时，无论是在纵向或在横向方向，框架 B 都可以转变为占据一个专用空间。如果使用网格进行定位，当重新定位 UI 元素时，您能始终贴紧同一网格。   图 2 重新定位框架可以充分利用较大的屏幕 也可以通过重设边距和 UI 元素的大小对框架进行优化，以充分利用更小或更大的屏幕。例如，通过扩大内容框，为更多的文本腾出空间和减少滚动量，让您在更大的屏幕上增大阅读体验。同样的道理，不同的框大小可以根据设备和方向提供重排 UI 元素的机会。例如，屏幕较大时，使用较大容器、增加列并以不同于智能手机的方式生成列表项会变得很有意义。 显示 UI 元素是一个功能强大的技术，可以显示在特定设备上受支持的功能（例如，智能手机的照相机功能），同时也提供了一些利用不同屏幕尺寸和方向的选项。显示或隐藏 UI 的常见示例适用于媒体播放器控件，即在较小的设备上按钮集数量减少，而在较大的设备上，按钮集数量增多。例如，比起在手机上，电脑上的媒体播放器可以操作更多的屏幕功能。 显示或隐藏技术的一部分功能包括，选择何时显示更多元数据。当屏幕空间严重不足时，最好的办法是尽量减少显示的元数据数量，而笔记本电脑或台式电脑却允许显示很多元数据。如何处理显示或隐藏元数据的一些示例包括： * 电子邮件应用：显示用户的头像 * 音乐应用：显示有关专辑或艺术家的更多信息 * 视频应用：显示有关电影或放映的更多信息，如演员表和职员表的详细信息 * 任何应用：中断列并显示更多信息 * 任何应用： 选取垂直堆叠的项目，并将其沿水平方向放置；在较大的设备上，堆叠列表项目可以改为显示列表项目的行和元数据的列 最后两个响应式 UI 技术是替换和重构。替换技术使您可以切换 UI，使其满足特定的设备尺寸类或方向。例如，一个紧凑的设备可能会显示堆叠按钮系列，而在较大屏幕上，那些控件将被替换为运行在屏幕顶部的选项卡。 最终，您可以折叠或拆分应用的架构，以便更好地针对特定的设备。在图 3 的示例中，从左边的设备到右边的设备，演示了页面间的联接。该图像描述了一个智能家庭应用，在较大的屏幕上将家庭控件和设置窗格组合在单个的屏幕上。在较小的设备上，控件和设置显示在不同的屏幕上。   图 3 为不同的屏幕尺寸重构应用显示 ## 设计断点 Windows 10 生态系统中的设备目标和屏幕尺寸繁多，您无需为逐一优化您的 UI 而有所顾虑。相反地，建议您设计三个关键值宽度（也称为断点）： 320、720 和 1024 个有效像素。图 4 描述断点。 图 4 设计响应式 UI 的断点 | 尺寸类 | 小型 | 中型 | 大型 | |--------|--------|--------| | 有效像素宽度 | 320 | 720 | 1024 | | 典型屏幕尺寸（对角线） | 4 英寸到 6 英寸 | 6 英寸以上到 12 英寸 | 13 英寸或更宽 | | 典型设备 | 手机 | 平板电脑、具有较大屏幕的手机 | 电脑、便携式计算机、Surface Hub | 当设计特定的断点时，要考虑您的应用（或应用窗口）可用的屏幕空间。当应用全屏运行时，应用窗口与屏幕大小相同，但在其他情况下，应用窗口更小。 当设计小型 UI 时，每一个像素都是很宝贵的，因此可以隐藏主场景的非必需功能，可以将这样的功能放在菜单或工具栏中。一次显示一列内容或一个内容区域，并用一个图标来表示搜索，而不是显示一个搜索框，这样做也是一个很好的主意。 上移至中型尺寸的 UI，您可以利用额外的空间显示搜索框（如果有的话），并将主内容置于两列或两个区域中。如果上升至大型 UI，将能够显示更多的功能和内容，并可以减少获取内容或执行操作所需的单击和 UI 交互数量。 请记住，320 个有效像素的宽度可能意味着您的应用正运行在手机上或运行在大屏幕电脑上的一个小窗口中，所以务必要考虑设备的主要输入方式 - 鼠标或触摸。在触摸设备上，将导航和命令元素放在屏幕底部拇指容易碰触的地方，可以更轻松在手持设备上进行导航和交互。但是，当使用鼠标时，用户希望导航元素出现在屏幕的顶部。您的应用可以使用 Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode 属性来找到主要的输入设备，并相应地调整其 UI。 通用 Windows 平台可以让您的应用在以下范围的设备中打开：从使用小屏幕的便携式设备到巨大的 Surface Hub。通过实施响应式设计技术和利用该平台的内置功能和构建基块（控件和样式），可以创建一个在所有尺寸和形状的设备上看起来都很棒的 UI。 * * * Mike Jacobs *是 Microsoft 的一名高级内容开发人员。多年来，他一直在记录 Microsoft 技术（从 Direct2D 到 Windows Presentation Foundation 和 Silverlight）的图形和呈现方面的内容。*