响应式设计技术Responsive design techniques

UWP 应用使用有效像素,保证 UI 清晰可见并可在所有支持 Windows 的设备上使用。UWP apps use effective pixels to guarantee that your UI will be legible and usable on all Windows-powered devices. 那么,为什么你还想要针对特定设备系列自定义应用 UI 呢?So, why would you ever want to customize your app's UI for a specific device family?

  • 最有效地利用空间并减少导航需要To make the most effective use of space and reduce the need to navigate

    如果你设计了一个在小屏幕设备(如平板电脑)上看起来十分美观的应用,则该应用可在显示屏大得多的电脑上使用,但可能会浪费一些空间。If you design an app to look good on a device that has a small screen, such as a tablet, the app will be usable on a PC with a much bigger display, but there will probably be some wasted space. 当屏幕大小超过某个值时,你可以自定义应用以显示更多内容。You can customize the app to display more content when the screen is above a certain size. 例如,某个购物应用在平板电脑上可能一次显示一个商品类别,但在电脑或笔记本电脑上可以同时显示多个类别和产品。For example, a shopping app might display one merchandise category at a time on a tablet, but show multiple categories and products simultaneously on a PC or laptop.

    通过在屏幕上放置更多内容,你可以减少用户需要执行的导航次数。By putting more content on the screen, you reduce the amount of navigation that the user needs to perform.

  • 利用设备的功能To take advantage of devices' capabilities

    某些设备可能具有特定的设备功能。Certain devices are more likely to have certain device capabilities. 例如,平板电脑可能有位置传感器和相机,而电视可能两者皆无。For example, laptops are likely to have a location sensor and a camera, while a TV might not have either. 你的应用可以检测到哪些功能可用,并启用使用它们的功能。Your app can detect which capabilities are available and enable features that use them.

  • 输入优化To optimize for input

    通用控件库适用于所有输入类型(触摸、触笔、键盘、鼠标),但你仍然可以通过重新排列 UI 元素来优化某些输入类型。The universal control library works with all input types (touch, pen, keyboard, mouse), but you can still optimize for certain input types by re-arranging your UI elements. 例如,如果将导航元素放置在屏幕底部,则手机用户将更容易访问它们,但大多数电脑用户希望在屏幕顶部看到导航元素。For example, if you place navigation elements at the bottom of the screen, they'll be easier for phone users to access—but most PC users expect to see navigation elements toward the top of the screen.

在针对特定屏幕宽度优化应用 UI 时,假设你要创建一个响应式设计。When you optimize your app's UI for specific screen widths, we say that you're creating a responsive design. 下面是可用于自定义应用 UI 的六个响应式设计技术。Here are six responsive design techniques you can use to customize your app's UI.

提示

许多 UWP 控件会自动实现这些响应行为。Many UWP controls automatically implement these responsive behaviors. 若要创建响应式 UI,建议查看 UWP 控件一文。To create a responsive UI, we recommend checking out the UWP controls.

重新定位Reposition

可以更改 UI 元素的位置和放置方式,充分利用窗口大小。You can alter the location and position of UI elements to make the most of the window size. 在以下示例中,较小的窗口以垂直方式堆叠元素。In this example, the smaller window stacks elements vertically. 当应用转换为较大的窗口时,元素可以利用的窗口宽度更宽。When the app translates to a larger window, elements can take advantage of the wider window width.

重新定位

在此照片应用的示例设计中,照片应用在较大的屏幕上重新单位其内容。In this example design for a photo app, the photo app repositions its content on larger screens.

调整大小Resize

可以调整 UI 元素的边距和大小,针对窗口大小进行优化。You can optimize for the window size by adjusting the margins and size of UI elements. 例如,只需增大内容框架即可改善较大屏幕上的阅读体验。For example, this could augment the reading experience on a larger screen by simply growing the content frame.

调整设计元素大小

重新排列Reflow

通过根据设备和方向更改 UI 元素的排列,你的应用可以以最佳方式呈现内容。By changing the flow of UI elements based on device and orientation, your app can offer an optimal display of content. 例如,在改用更大的屏幕时,可以添加列、使用更大的容器,或以不同的方式生成列表项。For instance, when going to a larger screen, it might make sense to add columns, use larger containers, or generate list items in a different way.

以下示例显示如何在较大屏幕上重新排列较小屏幕上的单列垂直滚动内容,以显示两列文本。This example shows how a single column of vertically scrolling content on a smaller screen that can be reflowed on a larger screen to display two columns of text.

重新排列设计元素

显示/隐藏Show/hide

可以基于屏幕空间显示或隐藏 UI 元素,或在设备支持附加功能、特定情况或首选屏幕方向时显示或隐藏 UI。You can show or hide UI elements based on screen real estate, or when the device supports additional functionality, specific situations, or preferred screen orientations.

隐藏设计元素

例如,媒体播放器控件的按钮集在较小屏幕上折叠,在较大屏幕上展开。For example, media player controls reduce the button set on smaller screens and expand on larger screens. 例如,与较小窗口相比,较大窗口中的媒体播放器可以处理的屏幕上的功能要多得多。The media player on a larger window can handle far more on-screen functionality than it can on a smaller window.

显示或隐藏技术的一部分包括选择何时显示多个元数据。Part of the reveal-or-hide technique includes choosing when to display more metadata. 使用较小窗口时,最好是显示最少量的元数据。With smaller windows, it's best to show a minimal amount of metadata. 使用较大窗口时,可以显示大量元数据。With larger windows, a significant amount of metadata can be surfaced. 以下示例介绍了何时显示或隐藏元数据:Some examples of when to show or hide metadata include:

  • 在电子邮件应用中,你可以显示用户的头像。In an email app, you can display the user's avatar.
  • 在音乐应用中,你可以显示有关专辑或歌手的详细信息。In a music app, you can display more info about an album or artist.
  • 在视频应用中,你可以显示有关电影或节目的详细信息,例如显示演职人员详细信息。In a video app, you can display more info about a film or a show, such as showing cast and crew details.
  • 在任一应用中,都可以使各列分解并显示更多详细信息。In any app, you can break apart columns and reveal more details.
  • 在任一应用中,都可以获取垂直堆叠的内容并使之以水平方式布局。In any app, you can take something that's vertically stacked and lay it out horizontally. 当从手机或平板手机转至较大型设备时,堆叠的列表项可以更改为显示多行列表项和多列元数据。When going from phone or phablet to larger devices, stacked list items can change to reveal rows of list items and columns of metadata.

替换Replace

使用这种技术,可以针对特定断点来切换用户界面。This technique lets you switch the user interface for a specific breakpoints. 在此示例中,瞬态 UI(导航窗格及其精简版)适用于较小的屏幕,但在较大屏幕上,最好选择使用选项卡。In this example, the nav pane and its compact, transient UI works well for a smaller screen, but on a larger screen, tabs might be a better choice.

替换设计元素

NavigationView 控件支持这种响应式技术,允许用户将窗格位置设置为顶部或左侧。The NavigationView control supports this responsive technique, by letting users set the pane position to either top or left.

重新构建Re-architect

可以折叠或拆分应用的体系结构,以更好地适应特定设备。You can collapse or fork the architecture of your app to better target specific devices. 在此示例中,展开窗口时会显示整个大纲/细节模式。In this example, expanding the window shows the entire master/details pattern.

重新构建用户界面的示例