回應式設計技術Responsive design techniques

UWP app 使用有效像素,來保證您的 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.

重新架構使用者介面的範例