應用程式小工具總覽

試試 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何使用 Compose 樣式的 API 建構小工具。

小工具是自訂主畫面的重要元素。您可以將其視為應用程式最重要資料和功能的「一目瞭然」檢視畫面,使用者可以直接在主畫面上存取。使用者可以在主畫面面板上移動小工具,並視需要調整大小,根據偏好設定小工具中的資訊量。

本文件將介紹您可以建立的不同類型小工具,以及應遵循的設計原則。如要使用 Remote View API 和 XML 版面配置建構應用程式小工具,請參閱「建立基本小工具」。如要使用 Kotlin 和 Compose 樣式 API 建構小工具,請參閱 Jetpack Glance。

小工具類型

規劃小工具時,請思考要建構哪種小工具。小工具通常可分為以下幾類:

資訊小工具

天氣小工具範例,顯示東京多雲時陰、14 度,以及下午 4 點到 7 點的預測溫度
圖 1. 天氣應用程式的資訊小工具。

資訊小工具通常會顯示重要資訊元素,並追蹤這些資訊隨時間變化的情況。資訊小工具的例子包括天氣小工具、時鐘小工具或體育賽事比分追蹤小工具。輕觸資訊小工具通常會啟動相關聯的應用程式,並開啟小工具資訊的詳細檢視畫面。

「收藏」小工具

集合小工具專門用於顯示多個相同類型的元素,例如相片庫應用程式中的相片集合、新聞應用程式中的文章集合,或通訊應用程式中的電子郵件或訊息集合。集合小工具可以垂直捲動。

集合小工具通常著重於下列用途:

  • 瀏覽珍藏內容。
  • 在相關聯的應用程式中,開啟集合元素並前往詳細資料檢視畫面。
  • 與元素互動,例如將元素標示為完成,Android 12 (API 級別 31) 支援複合按鈕。

控制小工具

「Light list」應用程式的小工具,顯示標示為「Bedroom」、「Kitchen」和「Living room」的切換鈕,前兩個切換鈕已關閉
圖 4. 控制項小工具範例。

控制項小工具的主要用途是顯示常用功能,讓使用者不必開啟應用程式,就能從主畫面觸發這些功能。您可以將這類小工具視為應用程式的遙控器。舉例來說,居家控制項小工具可讓使用者開啟或關閉家中的燈。

與控制項小工具互動時,可能會在應用程式中開啟相關聯的詳細資料檢視畫面。這取決於控制項小工具的功能是否輸出任何資料,例如搜尋小工具。

混合式小工具

一般音樂應用程式,顯示「不喜歡」、返回、播放/暫停、前進和「喜歡」按鈕。藝人和曲目分別列為「藝人」和「範例音樂」。
圖 5. 音樂應用程式小工具範例。

雖然有些小工具代表上述各節中的其中一種類型 (資訊、集合或控制項),但許多小工具都是結合不同類型元素的混合式小工具。舉例來說,音樂播放器小工具主要是控制項小工具,但也會像資訊小工具一樣,向使用者顯示目前播放的曲目。

規劃小工具時,請以其中一種基本類型為基礎,並視需要加入其他類型的元素。

整合小工具與 Google 助理

Google 助理可以顯示任何類型的小工具,回應使用者語音指令。您可以設定小工具來執行應用程式動作,讓使用者在 Android 和 Android Auto 等 Google 助理介面上,快速取得解答並享有互動式應用程式體驗。如要進一步瞭解 Google 助理的小工具執行要求,請參閱「整合應用程式動作與 Android 小工具」。

小工具限制

雖然小工具可以理解為「迷你應用程式」,但在設計小工具之前,請務必瞭解某些限制。

手勢

由於小工具位於主畫面,因此必須與主畫面上的導覽功能並存。與全螢幕應用程式相比,這會限制小工具支援的手勢。雖然應用程式可能允許使用者水平瀏覽畫面,但主畫面已採用該手勢,用於在主畫面之間瀏覽。

小工具僅支援輕觸和垂直滑動手勢。

元素

由於小工具可用的手勢有限,因此某些依賴受限手勢的 UI 建構區塊不適用於小工具。如需支援建構模塊的完整清單,以及版面配置限制的詳細資訊,請參閱「建立小工具版面配置」和「提供彈性的小工具版面配置」。

設計指南

請遵循這些設計指南,在主畫面上打造引人入勝、靈活且一致的小工具體驗。

小工具內容

小工具是吸引使用者使用應用程式的好方法,可以「宣傳」應用程式中提供的新穎有趣內容。

就像報紙頭版的預告一樣,小工具會整合並集中應用程式的資訊,並提供應用程式內更豐富詳細資料的連結。您可以說小工具是資訊「點心」,而應用程式是「正餐」。請確保應用程式顯示的資訊項目詳細資料,比小工具顯示的更詳細。

除了純資訊內容外,您也可以讓小工具提供應用程式常用區域的導覽連結。這樣一來,使用者就能更快完成工作,並將應用程式的功能範圍延伸至主畫面。

適合在小工具上加入的導覽連結包括:

  • 生成函式:這類函式可讓使用者為應用程式建立新內容,例如建立新文件或新訊息。

  • 在頂層開啟應用程式:輕觸資訊元素通常會將使用者導向較低層級的詳細資料畫面。提供應用程式頂層的存取權,可提高導覽彈性,並取代使用者原本從主畫面導覽至應用程式時使用的專屬應用程式捷徑。如果顯示的資料不夠明確,使用應用程式圖示也能讓小工具更具辨識度。

調整小工具大小

標準 Google 時鐘小工具
圖 6. 標準 Google 時鐘小工具。

按住可調整大小的小工具,然後放開,小工具就會進入調整大小模式。使用者可以使用拖曳控點或小工具角落,設定偏好的大小。

使用者可以調整大小,在主畫面放置格線的限制內,調整小工具的高度和寬度。您可以決定小工具是否能自由調整大小,或限制只能調整水平或垂直大小。如果小工具本身是固定大小,則不必支援調整大小。

允許使用者調整小工具大小有以下重要好處:

  • 使用者可以微調每個小工具顯示的資訊量。
  • 他們可以更有效地影響主面板上的小工具和捷徑版面配置。

請根據您建立的小工具類型,規劃小工具的大小調整策略。清單或格狀集合小工具通常很簡單,因為調整小工具大小會展開或縮小垂直捲動區域。無論小工具的大小為何,使用者仍可捲動瀏覽所有資訊元素。

資訊小工具需要更精確的規劃,因為這類小工具無法捲動,且所有內容都必須符合指定大小。您必須根據使用者透過調整大小作業定義的大小,動態調整小工具的內容和版面配置。

在以下範例中,使用者可以透過三個步驟調整天氣小工具的大小,隨著小工具變大,顯示目前位置更豐富的天氣資訊。

天氣小工具範例,採用最小的 3x2 格線大小,並列出位置名稱 (東京)、溫度 (14°) 和表示部分多雲天氣的符號
圖 7. 3x2 格「小型」天氣小工具範例。


5x2「中」尺寸的天氣小工具範例,包含 3x2 格尺寸的所有 UI,以及「多雲」標籤和下午 4 點到 7 點的預測溫度
圖 8.5x2 格「中型」天氣小工具範例。


5x4「大型」天氣小工具範例,包含 3x2 和 5x2 格線大小的所有 UI,以及週二到週五的天氣預報
圖 9.5x4 格「大型」天氣小工具範例。

針對每個小工具大小,決定要顯示多少應用程式資訊。如果尺寸較小,請著重於基本資訊,然後在小工具水平和垂直放大時,加入情境資訊。

版面配置注意事項

您可能會想根據開發裝置的放置格線尺寸來配置小工具。這可以做為實用的初步估算,但請注意以下幾點:

  • 規劃小工具大小調整策略時,請使用「大小值區」,而非可變格線尺寸,這樣才能獲得最可靠的結果。
  • 不同裝置的儲存格數量、大小和間距可能會有很大差異。因此,小工具必須具有彈性,能容納比預期更多或更少的空間。
  • 使用者調整小工具大小時,系統會回應 dp 大小範圍,讓小工具重新繪製。
  • 從 Android 12 開始,您可以提供更精細的大小屬性和更靈活的版面配置。包括:

使用者設定小工具

有時,使用者必須先設定小工具,才能發揮作用。舉例來說,在電子郵件小工具中,使用者必須先選取郵件資料夾,系統才能顯示收件匣;在靜態相片小工具中,使用者必須先指定要顯示的圖片庫相片,系統才能顯示相片。使用者將小工具拖曳到主畫面後,Android 小工具會立即顯示設定選項。

小工具設計檢查清單

  • 在小工具上,著重於提供少量一目瞭然的資訊。在應用程式中詳細說明。
  • 請根據用途選擇合適的小工具類型。
  • 規劃小工具內容如何配合不同大小調整。
  • 請確保版面配置可以延展和收縮,讓小工具版面配置不受螢幕方向和裝置影響。
  • 請考量小工具是否需要額外設定。