回應式設計技術

UWP app 使用有效像素，來保證您的 UI 在所有運作 Windows 的裝置上都能有效使用。 那麼，為什麼您想要為特定裝置系列自訂應用程式的 UI？

• 為了將空間做最有效的利用並減少不必要的瀏覽

  如果您在小螢幕的裝置 (例如平板電腦) 上設計了一個美觀的應用程式，該應用程式在有較大顯示器的電腦上也能夠使用，但是可能會有一些浪費的空間。 您可以自訂應用程式，使其在畫面超過一定尺寸時顯示更多內容。 例如，購物應用程式在平板電腦上可能一次只顯示一個商品類別，但是在電腦或膝上型電腦上可以同時顯示多種類別和產品。

  透過在螢幕上放置更多內容，可以減少使用者需要執行的瀏覽量。

• 為了充分利用裝置的功能

  某些裝置更有可能具有某些裝置功能。 例如，筆電很可能有定位感應器和相機，而電視則可能沒有。 您的應用程式可以偵測哪些功能可用，並啟用使用它們的功能。

• 為了針對輸入最佳化

  通用控制項庫適用於所有輸入類型 (觸控、觸控筆、鍵盤、滑鼠)，但您仍可以透過重新排列 UI 元素來最佳化某些輸入類型。 例如，如果您將瀏覽元素放置在螢幕底部，手機使用者將更容易存取它們，但大多數電腦使用者會希望看到螢幕頂部的瀏覽元素。

當您針對特定螢幕寬度最佳化應用程式的 UI 時，假設您正在建立回應式設計。 您可以使用以下六種回應式設計技術來自訂應用程式的 UI。

提示

許多 UWP 控制項都會自動執行這些回應式行為。 若要建立回應式 UI，建議您參閱 UWP 控制項。

重新置放

您可以改變 UI 元素的位置，以充分運用視窗大小。 在以下範例中，較小的視窗會垂直堆疊元素。 當應用程式轉譯為較大視窗時，元素可以利用更寬的視窗寬度。

在這個相片應用程式的範例設計中，相片應用程式在更大的螢幕上重新置放其內容。

Resize

您可以調整 UI 元素的邊界和大小，以最佳化視窗大小。 例如，只是簡單增加內容畫面，即可加強在較大螢幕上的閱讀體驗。

自動重排

透過根據裝置和方向變更 UI 元素的流程，您的應用程式可以提供最佳的內容顯示。 例如，在較大螢幕時增加欄、使用較大的容器、或以不同的方式產生清單項目是合理的做法。

以下範例說明在較小螢幕上直向捲動的單欄內容，在較大的螢幕上可以自動重排顯示為兩欄的文字。

顯示/隱藏

您可以根據螢幕空間顯示或隱藏 UI 元素，或者當裝置支援其他功能、特定情況或適合的螢幕方向時顯示或隱藏 UI 元素。

例如，媒體播放器控制項可減少在較小螢幕上設定的按鈕，在較大的螢幕上則展開。 較大視窗上的媒體播放器可以處理比在較小視窗上更多的螢幕上功能。

顯示或隱藏技術的一部分包括選擇何時顯示更多中繼資料。 視窗較小時，最好只顯示最少量的中繼資料。 視窗較大時，可以呈現大量的中繼資料。 以下是一些顯示或隱藏中繼資料的範例：

• 在電子郵件應用程式中，您可以顯示使用者的虛擬人偶。
• 在音樂應用程式中，您可以顯示有關專輯或藝術家的更多資訊。
• 在視訊應用中，您可以顯示有關電影或節目的更多資訊，例如顯示演員和工作人員的詳細資料。
• 您可以在任何應用程式中分割資料行，並顯示更多詳細資料。
• 您可以在任何應用程式中，將垂直堆疊的內容水平放置。 當從手機或平板電腦轉移到更大的裝置時，堆疊的清單項目可能會發生變化，以顯示清單項目的資料列和中繼資料的資料行。

Replace

這項技術可讓您在特定中斷點切換使用者介面。 在以下範例中，瀏覽窗格及其精簡、暫時性 UI 適用於較小的螢幕，但在較大的螢幕上，索引標籤上可能是更好的選擇。

NavigationView 控制項可讓使用者將窗格位置設定為「上」或「左」，以支援這種回應式技術。

重新架構

您可以折疊或分叉應用程式的架構，以更好地針對特定裝置進行設計。 在以下範例中，展開視窗會顯示整個清單/詳細資料模式。

相關主題

• 螢幕大小與中斷點
• 使用 XAML 的回應式版面配置
• UWP 控制項和模式