應用程式小工具總覽

小工具是自訂主畫面的重要面向,這類轉換就像是「概覽」的檢視畫面,可讓使用者在應用程式的主畫面上直接存取最重要的資料和功能。使用者可以跨主畫面面板移動小工具,在支援的情況下,還能根據偏好調整小工具中的資訊大小。

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

小工具類型

規劃小工具時,請思考您想建立的小工具類型。小工具一般可分為以下幾類:

資訊小工具

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

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

系列作品

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

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

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

控制小工具

名為「淺色清單」的應用程式小工具,顯示標示為「臥室」、「廚房」和「客廳」的切換鈕,且前兩個切換按鈕均處於關閉狀態
圖 4. 控制項小工具範例。

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

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

混合型小工具

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

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

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

將小工具與 Google 助理整合

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

小工具限制

雖然小工具可解讀為「迷你應用程式」,但設計小工具前仍有一些重要限制。

手勢

由於小工具位於主畫面,因此必須與在該處建立的導覽功能共存。這會限制小工具支援的手勢支援 (與全螢幕應用程式相比)。雖然應用程式可讓使用者橫向瀏覽不同畫面,但該手勢已用於主畫面,以便瀏覽不同主畫面。

小工具只能使用「觸控」和「垂直滑動」

元素

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

設計指南

小工具內容

小工具可讓您藉由「廣告」宣傳應用程式新增的有趣新內容,吸引使用者前往應用程式。

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

除了單純的資訊內容外,建議您讓小工具提供導覽連結,前往應用程式的常用區域。這樣一來,使用者就能更快完成工作,並將應用程式的功能觸及範圍擴展至主畫面。

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

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

  • 在頂層開啟應用程式:輕觸資訊元素通常會將使用者帶往較低層級的詳細資料畫面。為應用程式提供頂層的存取權會賦予更多瀏覽彈性,也可以取代專屬的應用程式捷徑,讓使用者從主畫面前往應用程式。針對這項功能使用應用程式圖示,您也可以在顯示的資料不明確時,為小工具提供清楚的身分。

調整小工具大小

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

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

「調整大小」可讓使用者在主畫面的刊登位置格線限制範圍內調整小工具的高度和寬度。您可以決定小工具是否可以自由調整大小,或是受限於水平或垂直尺寸。如果小工具原本就是固定大小,您不需要支援調整大小。

讓使用者調整小工具大小的好處如下:

  • 他們可以調整每個小工具顯示的資訊量。
  • 進一步影響小工具和捷徑在首頁面板中的版面配置。

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

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

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

天氣小工具範例採用最小 3x2 網格大小,並列出地點名稱 (東京)、溫度 (14°) 和代表局部多雲天氣的符號
圖 7. 範例:3x2-grid 的「小」大小天氣小工具。


天氣小工具範例為 5x2 的「中」大小,包括所有 UI 的 3x2 方格大小,加上「多雲時陰」標籤,預測下午 4 點到 7 點之間的溫度
圖 8.「中等」大小的天氣小工具範例。


天氣小工具以 5x4 的「大」尺寸為例,包括所有 UI 大小的 3x2 和 5x2 網格大小,以及週二到週五的天氣預報
圖 9.範例:5x4-grid 中「大」的天氣小工具。

決定每個小工具大小應顯示多少應用程式資訊。對於較小的尺寸,請專注在重要資訊,然後隨著小工具水平和垂直方向持續成長,加入背景資訊。

版面配置注意事項

您可能會想根據與開發裝置搭配使用的裝置位置格線尺寸來安排小工具。這可能是實用的初始近似值,但請記住以下幾點:

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

使用者的小工具設定

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

小工具設計檢查清單

  • 專注於小工具上一目瞭然的資訊。展開應用程式中的資訊。
  • 根據您的目的選擇合適的小工具類型。
  • 規劃小工具內容如何配合不同大小調整。
  • 請確保版面配置可延展及收縮,設計出與螢幕方向和裝置無關的小工具版面配置。
  • 請考量小工具是否需要任何其他設定。