應用程式小工具總覽

小工具是自訂主畫面的重要元素,您可以將其視為應用程式最重要的資料與功能「概覽」檢視畫面,而且可在使用者主畫面上存取。使用者可以將小工具移動到主畫面面板中,且如果支援的話,還能調整小工具的大小,依據個人偏好調整小工具中的資訊。

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

小工具類型

規劃小工具時,請想想想要建構的小工具種類。小工具通常屬於下列其中一種類別:

資訊小工具

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

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

收藏小工具

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

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

  • 正在瀏覽系列作品。
  • 在關聯應用程式中開啟集合的元素到詳細資料檢視畫面。
  • Android 12 (API 級別 31) 支援與元素互動 (例如標示完成),

控制小工具

「Light list」應用程式的小工具,顯示標示為「臥室」、「廚房」和「客廳」的切換按鈕,且前兩個切換按鈕已關閉
圖 4. 控制項小工具範例。

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

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

混合型小工具

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

有些小工具代表前述章節的其中一種類型,例如資訊、收集或控制,許多小工具是結合不同類型元素的混合型元件。舉例來說,音樂播放器小工具主要是控制小工具,但也會向使用者顯示目前正在播放的曲目,例如資訊小工具。

規劃小工具時,請根據其中一種基本類型設計小工具,並視需要新增其他類型的元素。

將小工具與 Google 助理整合

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

小工具限制

雖然小工具可視為「迷你應用程式」,但請務必先瞭解一些限制,再設計小工具。

手勢

由於小工具是顯示在主畫面上,因此必須同時存在該處的導覽介面。相較於全螢幕應用程式,這會限制小工具提供的手勢支援。應用程式雖然可讓使用者水平瀏覽不同畫面,但為了切換主畫面,該手勢已經在主畫面上套用。

小工具可用的手勢只有觸控垂直滑動

元素

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

設計指南

小工具內容

小工具可以「宣傳」應用程式中有趣的新內容,藉此吸引使用者使用應用程式。

就像報紙首頁的前導廣告一樣,小工具可以整合並集中應用程式資訊,並提供應用程式內更豐富的詳細資訊的連結。您可能會說,小工具是「點心」的資訊,而應用程式則是「餐點」。請確保應用程式所顯示的資訊項目詳細資料,與小工具顯示的內容不同。

除了純資訊內容外,不妨考慮在小工具中加入導覽連結,以便前往應用程式常用區域。如此一來,使用者就能更快完成工作,並將應用程式的功能觸及範圍擴展至主畫面。

適合用於小工具的導覽連結如下:

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

  • 在頂層開啟應用程式:輕觸資訊元素通常會將使用者導向較低層級的詳細資料畫面。提供應用程式頂層的存取權,可讓您享有更多導覽彈性,並可以取代使用者原本用來從主畫面前往應用程式的專屬應用程式捷徑。如果顯示的資料不明確,使用這項功能的應用程式圖示也能讓小工具清楚識別。

調整小工具大小

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

按住可調整大小的小工具再放開,即可將小工具進入調整大小模式。使用者可以透過拖曳控點或小工具邊角設定偏好的大小。

調整大小後,使用者可以在主畫面刊登位置格線的限制範圍內,調整小工具的高度和寬度。您可以決定小工具是否可任意調整大小,或限制能變更水平或垂直大小。如果小工具原本就固定大小,您就不必支援調整大小功能。

讓使用者調整小工具大小有重要優點:

  • 廣告客戶可以微調每個小工具要顯示的資訊量。
  • 還可以進一步影響小工具和捷徑在主畫面面板中的版面配置。

請根據您要建立的小工具類型規劃小工具的大小調整策略。清單型或格狀集合小工具通常相當簡單明瞭,因為調整小工具的大小會展開或縮小垂直捲動區域。無論小工具的大小為何,使用者仍能將所有資訊元素捲動至檢視畫面中。

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

在接下來的範例中,使用者可以透過三個步驟調整天氣小工具的大小,隨著小工具擴增,顯示目前地點的更多天氣資訊。

天氣小工具範例為最小 3 x 2 格線,並列出位置名稱 (東京)、溫度 (14°) 和符號,指出天氣局部多雲
圖 7. 天氣小工具範例 (大小為 3x2 格)。


5x2「中等」大小的天氣小工具範例,包括 3x2 格狀空間大小的所有 UI 加上「幾乎多雲」標籤,以及下午 4 點到晚上 7 點的天氣預報
圖 8.5 x 2 格「中」大小的天氣小工具範例。


天氣小工具範例 (大小為 5x4),包括 3x2 和 5x2 格狀空間的所有 UI,以及週二到週五的天氣預報
圖 9.5x4 格狀空間的「大」大小的天氣小工具範例。

針對每種小工具大小,決定顯示多少應用程式資訊。如果是較小的尺寸,請聚焦在重要資訊,隨著小工具水平和垂直成長,加入背景資訊。

版面配置注意事項

您很可能會根據自己開發的裝置,按照刊登位置格線的尺寸調整小工具的位置。這可做為實用的初始估計值,但請注意以下幾點:

  • 規劃小工具大小調整策略時,請考量「大小值區」,而非變數格線維度,以取得最可靠的結果。
  • 每部裝置,儲存格的數量、大小和間距可能大有差異。因此,請務必確保小工具可彈性調整,且能容納比預期更多或更少的空間。
  • 當使用者調整小工具的大小時,系統會傳回 dp 大小範圍,讓小工具自行重新繪製。
  • 從 Android 12 開始,您可以提供更精細的大小屬性和更靈活的版面配置。其中包括:

使用者的小工具設定

有時候,使用者必須先設定小工具,才能使用小工具。 試想一個電子郵件小工具,使用者必須選取郵件資料夾才能顯示收件匣,或是改為使用靜態相片小工具,讓使用者指派圖片庫中的相片才會顯示。使用者將小工具拖放到主畫面後,Android 小工具會立即顯示其設定選項。

小工具設計檢查清單

  • 將重點放在小工具上一目瞭然的資訊。請展開應用程式中的資訊。
  • 根據你的用途選擇合適的小工具類型。
  • 規劃小工具內容如何配合不同大小調整。
  • 確保版面配置可以延展及縮小,讓小工具版面配置與方向和裝置無關。
  • 請思考小工具是否需要任何其他設定。