應用程式小工具總覽

小工具是自訂主畫面的重點。您可以將這些視圖視為應用程式最重要的資料和功能的「一覽無餘」檢視畫面,可直接在使用者的主畫面上存取。使用者可以在主畫面面板中移動小工具,並在支援的情況下調整大小,根據個人喜好調整小工具中顯示的資訊量。

本文件說明您可以建立的不同類型小工具,以及遵循的設計原則。如要使用 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 小工具會顯示設定選項。

小工具設計檢查清單

  • 請專注於小範圍的資訊,讓使用者一眼就能掌握小工具的內容。在應用程式中擴充資訊。
  • 選擇合適的小工具類型。
  • 規劃小工具內容如何配合不同大小進行調整。
  • 確保版面配置可伸展和收縮,讓小工具版面配置不受螢幕方向和裝置影響。
  • 請考慮小工具是否需要其他設定。