圖片與圖形

雖然應用程式只能包含文字和顏色,但您可能會想新增更多視覺元素,例如標誌或插圖。Android 提供許多最佳做法,可讓您在應用程式中加入圖像,以及各種程式庫來建立圖像效果或新增動態效果。

Android 素材資源稱為「可繪項目」,是一種在畫面上繪製的資源類型。這包括但不限於點陣圖、形狀和向量。

製作圖片和圖像時,請注意下列事項:

  • 避免在素材資源中加入不可變更的文字。
  • 盡可能優先使用向量格式。
  • 提供解析度值區的資產。
  • 在背景圖片和文字之間提供充足的剪裁。
  • 雖然 Android 可實現不同圖片效果 (例如漸層、顏色和模糊效果),但某些圖片在效能上會比較高。
  • 「向量可繪項目」動畫可為小型 UI 動畫提供可擴充的格式。

如何匯出 Android 資產

  • 資產名稱的格式須為小寫。
  • 將簡易素材資源設為匯出為 SVG。
  • 將複雜的圖片 (例如相片) 設為以 WebP、PNG 和 JPG 格式匯出。
  • 設定正確的解析度縮放比例,如下表所示。
螢幕大小 縮放

mdpi

1 倍

hdpi

1.5 倍

xhdpi

2 倍

xxhdpi

3 倍

xxxhdpi

4 倍

您可以視需要使用 Android Studio 將可擴充向量圖形 (VD) 轉換為向量可繪項目 (VD)。將資產整理至與遞交解析度對應的目錄,如下圖所示。例如在資料夾名稱中加入螢幕大小。

已組織的 res 目錄
圖 2. 經過整理的 res 目錄。

資產類型

Android 支援下列資產類型。

向量

向量圖形採用無損格式,也就是在縮放時不會遺失視覺資訊。向量由用於建立圖片的數學點組成。

圖 3. 左圖顯示由向量圖形貝茲點組成的圖片,對比右方放大的光柵圖片。

向量格式

Android 支援以下向量圖片格式:SVG 和向量可繪項目。

向量可繪項目與 SVG 相似,但是以 XML 為基礎。也支援各種屬性 例如漸層如要進一步瞭解支援服務,請參閱 VectorDrawable。您可以透過 Vector Asset Studio 將 SVG 轉換為向量可繪項目。

用途

由於圖示的尺寸較小,建議您最好使用向量格式來建立圖示。動畫向量可繪項目可用來在圖示中加入動態效果。

  • 插圖是協助使用者引導使用者、解釋概念或表達想法的圖片。通常能展現品牌風格。
  • 主頁橫幅插圖與其他內容高度強調,用於設定整體外觀和風格,並說明主要資訊。
  • Spot 插圖較小,通常是內嵌,並能支援周圍內容。
圖 4. 主頁橫幅和內嵌 Spot 插圖。

光柵

包含像素的有損圖片,或經過壓縮或縮放時遺失細節的圖形,均由像素組成。光柵圖形通常用於詳細的圖片,例如相片或複雜漸層。由於圖片縮放後會遺失細節,因此請匯出這些圖片的多種解析度。

光柵格式

Android 支援下列光柵圖片格式:PNG、GIF、JPG、WebP。

用途

用途包括具有一系列紋理並產生廣泛色彩調色盤和漸變的圖片,或圖片的底層組合過於複雜。用途也可以包含鉅細靡遺的相片素材資源,例如產品相片和地點詳細資料等。

尺寸

建立素材資源時,請注意以下幾點。

解析度值區

您的應用程式應根據螢幕密度範圍或值區提供點陣圖圖形。作業系統會使用這些值區,自動為有問題的裝置顯示正確的圖像。為每個值區提供素材資源,確保所有裝置都能顯示高保真的圖像。

圖片解析度大小和值區標籤的範例。
圖 5. 政黨可拉近其密度,並擴大匯出規模。

邊框間距

圖示和類似的小型素材資源應包含內建函式的邊框間距,為素材資源提供足夠的觸控目標空間,並確保大小一致。

圖 6. 24 dp 圖示,且素材資源中內建邊框間距。

檔案名稱

Android 素材資源為小寫,而且不含解析度後置字串。

採用一致的命名慣例,讓檔案和專案保持井然有序。舉例來說,為圖示加上前置字串「ic_...」有助於整理專案中所有圖示,可在開發期間快速識別圖示。

其他應用程式素材資源

圖 7. 單色啟動器圖示和啟動畫面。

應用程式圖示

啟動器圖示位於主畫面。在系統 UI 中找到單色圖示,包括單色通知、狀態列和小工具。

應用程式圖示的格式設定為自動調整圖示的向量可繪項目,而舊版圖示的 PNG 格式則應設為 PNG。如要進一步瞭解如何建立及預覽應用程式圖示,請參閱「設計及預覽應用程式圖示」。

啟動畫面

從 Android 12 開始,應用程式可顯示動畫啟動畫面,在應用程式開啟時顯示其圖示。

刊登位置

留意圖片如何在畫面上縮放及調整位置。Fit、Crop、FillHeight、FillHeight、FillBounds、InsideNone 可用於為圖片設定縮放

圖 8.裁剪範例。

您也可以將圖片裁剪成形狀,藉此產生其他效果。

回應式裁剪

如要以回應式方式顯示圖片,請定義在不同中斷點範圍裁剪圖片的方式。在不同的中斷點範圍裁剪作業可以:

  • 維持一個固定比例。
  • 採用不同的長寬比。
  • 保持固定的圖片高度。

維持單一比例

調整圖片大小時,可保留一個固定比例,橫跨中斷點範圍。

圖 9.不同顯示比例的圖片。

配合不同比例進行調整

可配合不同的中斷點範圍調整圖片比例。例如,在圖 9 中,圖片比例在中斷點之間從 1:1 變更為 16:9。

固定圖片高度

調整圖片大小可以維持固定點範圍及中斷點之間的固定高度和浮動寬度。圖片會維持固定高度,但中斷點之間的寬度會浮動。

特效

Android 提供多種內建圖片特效。以下列舉幾個常見影響:

漸層

在 Compose 中,使用筆刷在畫面中繪製內容。不同的筆刷可用來繪製不同顏色或漸層的形狀。使用內建的漸層筆刷可實現不同的漸層效果。這些筆刷可讓您指定要從中建立漸層的顏色清單。

只要您提供停靠點發生的顏色和百分比清單,漸層筆刷就能透過新增顏色停止點和並排顯示,進一步發揮更進階的漸層效果。使用容器或形狀裁剪漸層、單色填滿或圖片。

圖 10.使用 Compose 修飾符翻譯 Figma 中的漸層。

模糊處理

使用 Modifier.blur() 方法並提供模糊比例,為圖片套用模糊效果。請謹慎使用模糊效果,因為模糊效果可能會影響效能,且僅適用於搭載 Android 12 以上版本的裝置。詳情請參閱「將圖片可組合項模糊處理」。

混合模式

Android 可以透過與設計軟體 (例如聯集或倍數) 中可能找到的類似布林作業和混合模式修改圖片。詳情請參閱 BlendMode 相關說明。

色調

運用混合模式和填滿功能為素材資源著色。這樣您就可以擁有單一資產,並為其套用不同顏色,進而減少產生的資產數量。

圖 11.素材資源包含不同色調,以輔助內容顏色或表示不同的狀態。

動作

圖形能以程式輔助方式製作動態圖像,不必再上傳動態檔案。如此一來,您就能享有更高的彈性,以及更小的資產資源。

動畫向量可繪項目可讓您建立小型 UI 動畫。否則,請參閱 Compose ,進一步瞭解如何使用主要畫面格建立動畫。如要進一步瞭解圖片效果,請參閱「自訂圖片」。