Android 質感設計

試用 Compose 方法
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用主題設定。

Material Design 是全方位的指南,適用於跨平台和裝置的視覺、動作和互動設計。如要在 Android 應用程式中使用 Material Design,請遵守 Material Design 規格中定義的準則。如果應用程式使用 Jetpack Compose,您可以使用 Compose Material 3 程式庫。如果您的應用程式使用檢視畫面,您可以使用 Android Material 元件程式庫。

Android 提供下列功能,可協助您建構 Material Design 應用程式:

  • 質感設計應用程式主題,用來設定所有 UI 小工具的樣式
  • 適用於複雜檢視畫面的小工具,例如清單和資訊卡
  • 用於自訂陰影和動畫的 API

Material 主題和小工具

如要利用 Material 功能 (例如標準 UI 小工具的樣式),並簡化應用程式的樣式定義,請為應用程式套用質感設計主題。

圖 1. 深色質感主題。
圖 2. 淺色質感主題。

如果您使用 Android Studio 建立 Android 專案,系統預設會套用 Material Design 主題。如要瞭解如何更新專案主題,請參閱「樣式與主題」一文。

為了讓使用者享有熟悉的體驗,請使用 Material 最常見的使用者體驗模式:

  • 使用懸浮動作按鈕 (FAB) 宣傳 UI 的主要動作。
  • 運用應用程式列顯示品牌、導覽、搜尋內容和其他動作。
  • 利用導覽匣顯示或隱藏應用程式導覽。
  • 為應用程式版面配置和導覽提供多種質感元件,例如收合工具列、分頁、底部導覽列等。如要查看所有元件,請參閱 Android 目錄的 Material 元件

請盡可能使用預先定義的 Material 圖示。舉例來說,如果是導覽匣的導覽「選單」按鈕,請使用標準「漢堡」圖示。如需可用圖示的清單,請參閱 Material Design 圖示。您也可以使用 Android Studio 的 Vector Asset Studio,從 Material 圖示資料庫匯入 SVG 圖示。

高度陰影和資訊卡

除了 XY 屬性外,Android 中的檢視畫面也有 Z 屬性。這個屬性代表檢視畫面的高度,其會決定下列項目:

  • 陰影大小:Z 值較高的檢視畫面會套用較大的陰影。
  • 繪製順序:Z 值較高的檢視畫面會顯示在其他檢視畫面上方。
圖 3.代表高度的 Z 值。

您可以將高度套用至卡片式版面配置,以便在提供 Material 外觀的資訊卡中顯示重要資訊。您可以使用 CardView 小工具,建立含有預設高度的資訊卡。詳情請參閱「建立卡片式版面配置」。

如要進一步瞭解如何將高度新增至其他檢視畫面,請參閱「建立陰影和裁剪檢視畫面」。

動畫

圖 4.觸控回饋動畫。

透過動畫 API,您可以建立自訂動畫,用於 UI 控制項中的觸控回應、檢視畫面狀態變更,以及活動轉換。

這些 API 可讓您:

  • 透過觸控回饋動畫來回應畫面中的觸控事件。
  • 利用循環播放動畫來隱藏並顯示檢視畫面。
  • 透過自訂活動轉換動畫來切換活動。
  • 使用彎曲動作建立更自然的動畫。
  • 使用檢視畫面狀態變更動畫,對一個或多個檢視畫面屬性的變更進行動畫處理。
  • 在檢視畫面狀態變更之間,以狀態清單可繪項目顯示動畫。

觸控回饋動畫已內建為數個標準檢視畫面,例如按鈕。Animation API 可讓您自訂這些動畫,並將這些動畫加入自訂檢視畫面中。

詳情請參閱「動畫簡介」。

可繪項目

下列可繪項目功能可協助您實作 Material Design 應用程式:

  • 向量可繪項目可擴充且不會失去定義,最適合用於單色的應用程式內圖示。進一步瞭解向量可繪項目
  • 可繪項目著色:將點陣圖定義為 Alpha 遮蓋,並在執行階段加上顏色。瞭解如何為可繪項目新增色調
  • 色彩擷取可讓您從點陣圖圖片自動擷取醒目顏色。瞭解如何使用調色盤 API 選取顏色