應用程式小工具總覽

小工具是主畫面自訂作業的一大要素。這就像是「概覽」的檢視畫面,可讓使用者在主畫面上直接存取應用程式中最重要的資料和功能。使用者可以在主畫面面板中移動小工具,且在支援這項功能的情況下,可以根據喜好調整小工具的大小。

本說明文件將介紹您可以建立的各種小工具類型,以及要追蹤的設計原則。如要使用「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「中等」尺寸的天氣小工具範例,包括 3x2 格線大小的所有 UI 加上「多雲」標籤,以及預測氣溫從下午 4 點到晚上 7 點
圖 8.天氣小工具範例,大小為 5x2-grid。


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

針對每個小工具大小,決定要顯示多少應用程式資訊。針對較小的螢幕,請把重點放在重要資訊,隨著小工具水平和垂直成長時新增背景資訊。

版面配置注意事項

您可能會很想根據開發時使用的裝置放置格線尺寸安排小工具版面配置。這可能是實用的初始近似方法,但請記住以下要點:

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

使用者提供的小工具設定

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

小工具設計檢查清單

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