調整版面配置

自動調整式設計是設計版面配置的做法,可配合特定中斷點和裝置調整版面配置。

如要有效實作自動調整式版面配置,請按照下列步驟操作:

  • 首先,請考量裝置的視窗類別寬度,判斷版面配置變更, 然後調整高度。
  • Android 採用與網頁開發類似的回應式設計概念,運用彈性格線和圖片建立版面配置,有效回應情境。

行動裝置和平板電腦上的生產力應用程式畫面。

如需根據擴大螢幕大小調整版面配置的設計指南,請參閱 Compose 的「支援不同螢幕大小」開發人員指南,以及 M3 的「套用版面配置」頁面。您也可以瀏覽 Android 大螢幕標準圖片庫,尋找靈感並實作大螢幕版面配置。

採用適應性設計

設計應用程式時,應預設採用自動調整式版面配置。Android 行動市場不斷演進,因此您不能只將行動裝置視為手機。而是應涵蓋手機、摺疊裝置、平板電腦,以及介於兩者間的所有裝置。

某些功能和用途可能不適用於所有螢幕尺寸或外型規格。採用自適應設計後,使用者在人體工學、可用性和應用程式品質方面都能享有更優質的體驗。

方法和品質

您可以先設計主要畫面 (傳達基本概念或應用程式),並以類別大小做為中斷點,做為應用程式其餘部分的指南。這些主打體驗可突顯自動調整式和外型規格的差異化品質。或者,您也可以從基礎層面設計回應式內容,標註內容的限制、擴展或重排方式。

為內容和元件設定最大寬度,避免延展至全寬。

允許內容延展至全寬。

請以容器或窗格的角度思考。

使用內建和視覺容器將元素分組。窗格可以移入、隱藏、展開、受限或彈出。使用窗格思考,可輕鬆設計適用於所有行動裝置的內容。

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

高品質應用程式應符合核心應用程式大螢幕品質指南中的差異化等級。

如要進一步瞭解版面配置,請參閱 Material Design 3 (M3) 瞭解版面配置頁面