自動調整式設計是設計版面配置的做法,可配合特定中斷點和裝置調整版面配置。
如要有效實作自動調整式版面配置,請按照下列步驟操作:
首先,請考量裝置的視窗類別寬度,判斷版面配置變更,然後調整高度。請參閱「支援不同的螢幕大小」。
Android 採用與網頁開發類似的回應式設計概念,運用彈性格線和圖片建立版面配置,有效回應情境。
使用自動調整式方法,讓版面配置回應各種大小: 重排、顯示、簡報變更。
避免將應用程式鎖定為僅限直向模式,否則應用程式調整大小時會出現上下黑邊。

錯誤做法
如需根據擴大螢幕大小調整版面配置的設計指南,請參閱 Compose 的「支援不同螢幕大小」開發人員指南,以及 M3 的「套用版面配置」頁面。您也可以參考 Android 大螢幕標準圖片庫,瞭解大螢幕版面配置的靈感和實作方式。
採用適應性設計
設計應用程式時,應預設採用自動調整式版面配置。Android 行動市場不斷演進,因此您不能只將行動裝置視為手機。而是應涵蓋手機、摺疊式裝置、平板電腦,以及介於兩者間的所有裝置。
雖然某些功能和用途可能不適合所有螢幕大小或外型規格,但如果採用自適應設計,使用者就能在各種螢幕上順暢使用應用程式,在人體工學、可用性和應用程式品質方面都能享有更優質的體驗。
方法和品質
您可以先設計主要畫面 (傳達重要概念或應用程式),並以類別大小做為中斷點,做為應用程式其餘部分的指南。這些主打體驗可突顯自動調整式和外型規格的差異化品質。或者,您也可以從基礎層面設計回應式內容,方法是註記內容的限制、擴展或重排方式。

在這個範例中,導覽和內容會重新排版、彈性調整及縮放,以提供更符合人體工學的導覽體驗。版面配置格線會從直向擴展為多欄。應用程式列中的地址和篩選條件會重新排版和彈性調整,以配合版面配置格線。
正確做法
錯誤做法
正確做法
正確做法
錯誤做法
確認輸入內容和按鈕未遭到延展。
請從容器和窗格的角度思考。
使用窗格的區隔概念,將內容分組,以利自動調整式版面配置。舉例來說,我們使用的範例是詳細資料畫面,也就是清單/詳細資料版面配置中可顯示的其中一個窗格。
緊湊型尺寸應採用單一窗格版面配置。
中型裝置可使用 1 到 2 個窗格的版面配置。
大型和特大型裝置可使用多窗格版面配置。

使用內建和視覺容器將元素分組。窗格可以移動、隱藏、展開、受限或彈出。使用窗格思考可讓您更輕鬆地設計所有行動裝置的版面配置。
雖然窗格在大螢幕上並非必要,但您仍應將內容視為包含群組,以利彈性運用。

著重於元素如何配合格線調整,讓元素能夠移動和重新排列。請考慮元素的垂直變化,並結合限制和呈現方式變化。

請考量顯示的內容規模和數量。

手機上顯示的小格狀影片在平板電腦上會變得擁擠,讓人眼花撩亂。 根據螢幕大小、密度和輸入內容,更新 UI 元素的比例。
高品質應用程式應符合核心應用程式和大螢幕品質指南中的差異化等級。
如要進一步瞭解版面配置,請參閱 Material Design 3 (M3) 瞭解版面配置頁面。
善用獨特的板型規格尺寸。
別忘了還有較小的螢幕尺寸和不同的顯示比例,因為 Android 手機的尺寸各異,折疊式裝置可能包含可顯示應用程式的小型封面螢幕。

如果是以控制項為主的版面配置 (例如媒體播放器),請允許控制項重新排列,並顯示內容。

為協助使用者調整,請使用錨點元素 (例如大型播放按鈕) 調整周圍內容,而主視覺則會成為封面畫面的背景。
大小類別以外的項目
雖然視窗大小是自動調整式設計的常見因素,但應用程式也必須準備好讓使用者插入螢幕和輸入裝置、在各種距離觀看,以及變更裝置姿勢。您可以使用 mediaQuery API 檢查這些變更,在設計應用程式如何針對特定用途調整特定 UI 元素時,加入細微差異。建議您在元件或窗格層級調整應用程式設計,而不是針對每個大小、輸入方式、板型規格和型態設計整個畫面。
如要進一步瞭解輸入互動,請參閱電腦版體驗互動指南。

請參閱這個個案研究範例,瞭解如何運用最新的自適應 API 和設計指南,打造出 Pawparrazzi 應用程式。
