格線與單位

密度獨立像素 (dp) 和可縮放像素 (sp) 是建構版面配置和呈現的字型,能夠讓 Android 裝置的各種螢幕密度、大小類別、板型規格和顯示比例都能夠統一回應。

受迫失誤數

  • 如果使用基準格線,請堅持以 4 和 8 的測量值進行。
  • 以 dp 和 sp 為單位標示規格,而非使用像素。
  • 匯出所有值區的點陣圖/光柵圖形。
  • 設計回應式思維時,請考量不同的大小類別、解析度和顯示比例。
  • 密度獨立像素 (dp):密度獨立像素是一種彈性單位,可讓任何螢幕上的尺寸保持一致。這些模式是根據螢幕的實際密度而定。這類單位是相對於 160 dpi (每英寸像素數) 螢幕換算而來。在這種螢幕上,1 dp 約等於 1 px。
  • 可縮放像素 (sp):可縮放像素提供與 dp 相同的函式,但適用於字型。sp 的預設值與 dp 的預設值相同。Android 系統會根據裝置和使用者在 Android 裝置的「設定」應用程式中的偏好設定,計算要使用的實際字型大小。
圖 1:標記 dp 與 sp

這些測量單位的主要差異在於,可縮放像素會保留使用者的字型設定。使用者如果透過較大的文字設定獲得無障礙設計,就會看到符合文字大小偏好設定的字型大小。瞭解如何在 Compose 中變更字型大小

Android 會利用這些單位,在各種裝置和解析度之間進行擴充及轉譯。

密度值區

高密度螢幕的每英寸所含像素數量高於低密度螢幕。因此,相同像素尺寸的 UI 元素在低密度螢幕上看起來就會較大,在高密度螢幕中則會較小。因此,請勿以像素宣告測量結果。

Android 會將各種螢幕密度的螢幕密度歸類為「值區」,並利用它們將最合適的資產組合提供給您的裝置。最常用的密度值區為 mdpihdpixhdpixxhdpixxxhdpi (nodpianydpi 是指不會根據裝置解析度縮放的值區,通常用於向量可繪項目),每個值區都會對應應用程式的資源檔案。

圖 2:派對大胃王星的密度

dp 計算方式:

dp = (像素寬度 * 160) / 螢幕密度

格線

基準網格

使用基礎格線進行建構有助於在 UI 上建立一致的間距和對齊方式。Android UI 會使用 8 dp 格線進行版面配置、元件和間距。

影片 1:顯示 8 dp 的格狀檢視畫面,以 8 dp 為單位遞增

圖示、類型及元件中的部分元素等小型元素最適合與 4 dp 格線對齊。

圖 3:8 dp 格線最適合大部分的 UI 元素,4 dp 格線則較適合圖示等小型元素

欄格線

資料欄會藉由將主體區域中的內容分割內容,建構格線結構,以便為版面配置提供垂直定義。內容會放在畫面中包含資料欄的區域。與基礎格線對齊內容,但必須保持彈性大小。如要瞭解設定欄格線及套用內容的基本知識,請參閱「版面配置基本資訊」。

圖 4:四欄格線

如要進一步瞭解如何跨板型規格建立彈性版面配置,請參閱 Material 3 的標準版面配置頁面。

大小類別

視窗大小類別是一組自主的可視區域中斷點,有助於設計、開發及測試回應式與自動調整式應用程式版面配置。Android 將視窗大小類別分為 3 種:精簡、中型和展開。詳情請參閱視窗大小類別

顯示比例

顯示比例是指元素寬度與高度的比例。顯示比例會以「width:height」的格式寫入。

為了維持版面配置的一致性,請在圖片、表面和螢幕大小等元素上使用一致的顯示比例。

建議您在 UI 中使用下列顯示比例:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3