響應式 設計只使用一種版面,內容是流動的,能適應視窗大小的變化。 回應式設計可讓您一次建置功能,並預期可在所有螢幕大小上運作。 自適應 設計類似,但會用另一種配置取代一種配置。
XAML 應用程式使用有效像素,確保你的介面在所有 Windows 裝置上都能清晰易讀且易於使用。 那麼,為什麼您想要針對特定裝置或螢幕大小自定義應用程式的UI?
以最大化空間利用並減少導航需求
如果您在小螢幕的裝置 (例如平板電腦) 上設計了一個美觀的應用程式,該應用程式在有較大顯示器的電腦上也能夠使用,但是可能會有一些浪費的空間。 您可以自訂應用程式,使其在畫面超過一定尺寸時顯示更多內容。 例如,購物應用程式在平板電腦上可能一次只顯示一個商品類別,但是在電腦或膝上型電腦上可以同時顯示多種類別和產品。
透過在螢幕上放置更多內容,可以減少使用者需要執行的瀏覽量。
善用裝置的功能
某些裝置更有可能具有某些裝置功能。 例如,筆電很可能有定位感應器和相機,而電視則可能沒有。 您的應用程式可以偵測哪些功能可用,並啟用使用它們的功能。
以優化輸入
通用控制項庫適用於所有輸入類型 (觸控、觸控筆、鍵盤、滑鼠),但您仍可以透過重新排列 UI 元素來最佳化某些輸入類型。
當您針對特定螢幕寬度最佳化應用程式的 UI 時,假設您正在建立回應式設計。 以下是一些可用來自定義應用程式UI的響應式設計技術。
重新置放
您可以改變 UI 元素的位置,以充分運用視窗大小。 在以下範例中,較小的視窗會垂直堆疊元素。 當應用程式轉譯為較大視窗時,元素可以利用更寬的視窗寬度。
在這個相片應用程式的範例設計中,相片應用程式在更大的螢幕上重新置放其內容。
調整大小
您可以調整 UI 元素的邊界和大小,以最佳化視窗大小。 例如,只是簡單增加內容畫面,即可加強在較大螢幕上的閱讀體驗。
自動重排
透過根據裝置和方向變更 UI 元素的流程,您的應用程式可以提供最佳的內容顯示。 例如,當使用較大螢幕時,可以考慮增加欄數、使用較大的容器,或以不同方式生成清單項目。
以下範例說明,在較小螢幕上直向捲動的單欄內容,如何在較大的螢幕上自動重排為顯示兩欄文字。
顯示/隱藏
您可以根據螢幕空間顯示或隱藏 UI 元素,或者當裝置支援其他功能、特定情況或適合的螢幕方向時顯示或隱藏 UI 元素。
例如,媒體播放器在較小螢幕上會縮減按鈕集,而在較大螢幕上則會擴展。 較大視窗上的媒體播放器相較於較小視窗,能夠處理更多螢幕上的功能。
揭示或隱藏技術的一部分包括選擇何時顯示更多中繼資料。 視窗較小時,最好只顯示最少量的中繼資料。 視窗較大時,可以呈現大量的中繼資料。 以下是一些顯示或隱藏中繼資料的範例:
- 在電子郵件應用程式中,您可以顯示使用者的虛擬人偶。
- 在音樂應用程式中,您可以顯示有關專輯或藝術家的更多資訊。
- 在視訊應用中,您可以顯示有關電影或節目的更多資訊,例如顯示演員和工作人員的詳細資料。
- 您可以在任何應用程式中分割資料行,並顯示更多詳細資料。
- 您可以在任何應用程式中,將垂直堆疊的項目轉換為水平排列。 當從小型視窗移動到較大的視窗時,堆疊的列表項目可以變更為顯示列表項目和中繼資料的欄。
重新架構
您可以折疊或分叉應用程式的架構,以更好地針對特定裝置進行設計。 在以下範例中,展開視窗會顯示整個清單/詳細資料模式。
調適型配置
調適型配置類似於響應式版面配置,但會根據所呈現的格式完全取代 UI。 調適型設計具有多個固定版面配置大小,並觸發頁面根據可用空間載入指定的版面配置。
這項技術可讓您在特定中斷點切換使用者介面。 在以上範例中,瀏覽窗格及其精簡的 UI 適用於較小的螢幕,但在較大的螢幕上,索引標籤可能是更好的選擇。
NavigationView 控制項支援此技術,允許使用者將窗格位置設定為上方或左側。