格線與單位

密度獨立像素 (dp) 和可縮放像素 (sp) 對於建構版面配置和呈現字型至關重要,可針對各種螢幕密度、大小類別、板型規格和顯示比例,以一致的方式做出回應,構成 Android 裝置。

重點整理

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

這兩種測量單位的主要差異在於,可縮放像素會保留使用者的字型設定。如果使用者為了方便閱讀而將文字調大,系統會根據他們的偏好設定顯示相應大小的字型。瞭解如何在撰寫模式中變更字型大小

Android 會使用這些單位,協助在各種裝置和解析度之間進行縮放和轉換。

密度值區

高密度螢幕的每英寸所含像素數量高於低密度螢幕。因此,相同像素尺寸的 UI 元素在低密度螢幕上會顯得較大,在高密度螢幕上則會顯得較小。因此,您不應以像素為單位宣告測量值。

Android 會將螢幕密度範圍分組為「級別」,並使用這些級別為裝置提供最佳資源組合。最常用的密度級別為 mdpihdpixhdpixxhdpixxxhdpi (nodpianydpi 是指不會根據裝置解析度調整大小的級別,通常用於向量可繪項目),每個級別都對應到應用程式的資源檔案。

mdpi 的密度為 x1,hdpi 的密度為 x1.5,xhdpi 的密度為 x2,xxhdpi 的密度為 x3,xxxhdpi 的密度為 x4
以各自的密度派對哈密瓜

dp 計算方式:

dp = (以像素為單位的寬度 * 160) / 螢幕密度

基準格線

使用基礎格線建構 UI,有助於確保間距和對齊方式一致。Android UI 會使用 8 dp 格線來配置版面、元件和間距。

顯示 8 dp 格線,醒目顯示 8 dp 增量

圖示、字型和元件中的部分元素等較小的元素,最好對齊 4 dp 格線。

8 dp 格線最適合大多數 UI 元素,而 4 dp 格線則較適合圖示等較小的元素

版面配置格線

格線是任何版面配置的骨幹。請考量內容的階層、數量,甚至是訊息。

階層式格線

系統會根據內容的階層或重要性建立階層式格線。以報紙版面為例:頂端會顯示一致的頭條新聞,佔據大部分版面,而較小的欄則會顯示過往的文章。

精簡和大型階層式格線範例

在調整螢幕大小時,階層式版面配置可以重排、調整大小及顯示格線儲存格。

模組化格線

模組化格線會設定一致的欄和列,建立矩形格線系統,用來對齊內容。如果內容的重要性與大小相近,例如資訊卡庫,就很適合使用模組化格線。

在緊湊和大型裝置上顯示的模組化格線範例

自動調整式模組化格線可以新增更多格線儲存格,且其中的內容可以對齊或換行至不同格線儲存格。格線儲存格可以維持大小一致,也可以視內容需求調整大小。

欄格線

資料欄會建構格線結構,藉由劃分主體區域內的內容,為版面配置提供垂直定義。內容會放置在含有資料欄的螢幕區域中。請與底層格線對齊,以便對齊內容,但應保持彈性大小。

精簡和大型裝置的欄格線範例

請參閱版面配置基本概念,瞭解如何設定資料欄格線及套用內容。資料欄格線可根據特定時間點的螢幕大小,視需要變更資料欄大小和資料欄數量,以配合不同板型規格,同時允許內容縮放。

四欄格線

大小類別

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

顯示比例

長寬比是指元素寬度與高度的比例,寫法為「寬度:高度」。

如要維持版面配置的一致性,請在圖片、介面和螢幕尺寸等元素上使用一致的長寬比。

建議您在 UI 中使用下列長寬比:

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