格線與單位

密度獨立像素 (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 (nodpi,而 anydpi 是指未依裝置解析度調整比例的值區,通常用於向量可繪項目),每個值區都會對應至應用程式的資源檔案。

圖 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 個:精簡、中型和展開。詳情請參閱「支援不同螢幕大小」一文。

顯示比例

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

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

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

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