
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促進良好使用體驗的重要一環。今天,就讓我們藉著這篇文章,一起來了解在推進Android平台小工具體驗前,相關利害關係人所需知道的一切細節!
👉
本篇文章只討論Android上的小工具體驗。有關iOS上的小工具體驗請參考這篇文章。鑑於App通常是雙平台上架,因此建議讀者可將兩篇文章一同閱讀、評估後,再來推進相關計劃!
App提供小工具(Widget)可帶來的好處

- 所謂小工具,即是將App中的單一核心功能提取出來,以快捷窗口的形式呈現。因此,提供小工具可幫助使用者快速地取用特定功能,提升操作效率、帶來便捷、提高使用滿意度。
- 小工具已是操作系統中不可或缺的部分。無論是系統內建App、生產力工具(Gmail/TickTick/chatGPT)、社交軟體(Line)、購物(蝦皮購物)、日常生活(OPENPOINT/發票存摺)等,各類型的主流App均有提供小工具。在這樣的趨勢下,使用者自然會預期你的App提供小工具,帶來同樣方便的體驗。
- 小工具的畫面佔用面積是一般App的4~16倍。它是幫助你的品牌進一步融入使用者生活的極佳入口。
- 儘管小工具體驗近年已相對普遍,但具體到每個產業類型App橫向比較時,大多數仍有進步空間。因此,搶在競爭對手前推出「好用」的小工具,就能以「方便性」將客群牢牢抓住!
iOS與Android小工具功能差異比較

這個欄位是為了想要快速比較雙平台小工具功能差異的讀者而準備的。不過,這裡的比較只聚焦在和設計面向相關的差異上。
項目 | iOS | Android |
---|---|---|
核心功能最低版本要求 | 大部分集中於iOS 16,但直至2025年仍有新功能持續加入 | 大部分集中於Android 12 |
收藏所有小工具的介面名稱 | Widget Gallery | Widget Picker |
Widget Gallery(Picker)排列邏輯 | 將所有功能+尺寸的排列組合全數列出。排列時會先列出一功能的由小至大所有尺寸,然後再列出下一個功能,依此類推 | 以功能區分。同功能但不同尺寸的小工具只能顯示其中一個 |
變形自由度 | 可在系統預先定義的數種大小中切換 | 可自由設定最小尺寸格線比例、最大尺寸格線比例,並能在這個範圍間的任意比例變形 |
形狀與外觀 | 僅有圓角矩形 | 除圓角矩形外,亦可設計任意形狀 |
可互動式小工具 | 有(iOS 17起) | 有 |
小工具設定頁面 | 由系統根據需要的欄位自行產生 | 頁面需由開發者自行設計 |
最高內容更新頻率 | 最高可達每15分鐘一次更新 | 最高可達每30分鐘一次更新。使用WorkManager 可進一步提升至每15分鐘一次更新 |
小工具種類
Android開發者文件中,說明小工具主要可以分為4種:
類型 | 用途 | 範例 |
---|---|---|
資訊小工具(Information widgets) | 顯示某個重要、且會隨著時間變化的資訊 | 天氣、時鐘、比賽比分 |
收藏小工具(Collection widgets) | 一次顯示相同類型的多筆資料 | 照片、新聞、email、訊息 |
控制小工具(Control widgets) | 顯示某個核心的控制項目 | 智慧家居電器開關 |
混合式小工具(Hybrid widgets) | 混合上述三種類型的小工具 | 音樂播放器 |
設計原則

以下設計原則彙整自相關開發者文件,這裡我只摘錄了幾個比較重要、或是較少提及的:
通用
- 小工具扮演著「預覽」的角色,幫助使用者快速地概覽App的內容、功能
- 除了顯示靜態資訊外,考慮在小工具中加入互動功能以幫助使用者更快捷地完成任務。例如:建立新文件、建立新訊息……等等。
- 依照欲顯示的資訊類型、內容份量,規劃小工具的支援尺寸、變形關係。不過,開發者不必支援所有尺寸、變形。一般情況下,大尺寸小工具應當要顯示更豐富的資訊,而不是單純將小尺寸裡有的內容放大。
- 謹慎規劃小工具的顯示內容,因為內容的更新次數有上限。官方推薦的更新頻率是每小時一次,最短可至每30分鐘一次。使用
WorkManager
自行管理更新邏輯的情況下,頻率可進一步縮短至每15分鐘一次。注意,更新時機會由系統依據當下剩餘電量動態調整,因而更新可能無法準時發生。
介面
- 使用裝置上的主畫面網格布局,做為小工具介面設計的起點。
- 由於Android裝置多、佈局各有些微差異,因此需確保小工具介面具有排版彈性,可以應對比預期更寬、更窄的可用空間。
- 小工具大小以主畫面網格布局為依據。Android 11 或更早版本的預設小工具大小為 3×2(寬x高)。最小為2×1,最大可至全螢幕;自Android 12(2021年)起,預設的小工具大小是2×2。最小為2×1,最大可至4×3。
- 觸摸範圍最小不可小於 48x48dp。
設計模板

官方提供了設計指南和數個模板協助設計師完成小工具的設計,從基本的設計概念解說到具體的大小尺寸、簡易組裝工具,甚至連自我檢核表都有。
- Widgets on Android | UI Design | Android Developers
- Sizing | Android Developers
- Android UI Kit (Figma community)
- Widget Canonical Builder (Figma community)
- Widget Quality | Android Developers
尺寸與變形行為
Android上的小工具擁有極高的變形自由度,支援從最小尺寸比例到最大尺寸比例間的所有尺寸。例如,Google地圖小工具預設為2×2、最大可拉伸至4×4,但使用者亦可設定為本範圍間之任意所有尺寸。

儘管如此,但也有小工具僅支援特定尺寸且不可拉伸,所以具體還是得視設計者的規劃而定。
形狀
官方對於小工具的形狀沒有硬性限制,但建議使用具圓角的圓潤形狀以更好的對齊Material設計語言。在圓角方面,Android 12起提供了兩個預設屬性:
system_app_widget_background_radius
:預設的小工具背景圓角大小,數值不會大於28dp。但請注意,具體的數值會因各大手機廠牌設計風格不同而異。system_app_widget_inner_radius
:預設的小工具內圓角大小。這個數值假設內框與外框間距8dp,並依據外框圓角動態計算相應的內圓角,使其成同心狀。
除常見的圓角矩形外,Android亦允許更多活潑的小工具形狀。例如Google相簿小工具的形狀即為四葉草型。

顏色
從 Android 12 開始,系統加入了動態主題(Dynamic Themes)功能。這個功能會從使用者設定的桌布中提取顏色、生成色盤,然後應用到整個介面上。因此,小工具的色彩設計應善用 系統給予的Design Token,以更好地因應深色模式、淺色模式以及動態主題的顯示需求。詳細請參考本篇文章。

設定Widget Picker中的提示文字
自Android 12開始,Widget Picker裡頭可以顯示關於小工具用途的簡短說明文字。

提示使用者設定小工具顯示資訊
有些小工具需要用戶進一步設定後才能顯示內容(例如:指定要顯示哪個城市的天氣狀況)。在iOS上,這個設定視窗是由系統自動提供的。然而在Android上,這個設定頁面是歸類在提供該小工具的App底下,因此需要自行設計與處理。除此之外,部分工具更提供了外觀的客製選項,但較爲少見。

點擊範圍與頁面導覽行為
預設情況下,點擊Widget的任何部分就如同點擊App Icon,會啟動對應的App。然而,Widget中的內容也可以被切成更小的按鈕,並把這些按鈕連結至App的不同頁面、功能。但請注意,觸摸的範圍不可小於 48x48dp,避免難以點擊的情況。
除此之外,Android上的小工具支援比iOS相對豐富的操作選項。例如:支援上下滾動查看內容。
相關文章
開發

RECOMMEND
-
設計一款在 iOS 18/26+ 都完美呈現的 App Icon
iOS 26引入了一款全新材質「Liquid Glass(液態玻璃)」,這種材質在互動上融合了水滴的流動感與玻璃的透亮質...
2025.09.02 -
設計Email的UI/UX實務技巧:用途、尺寸、精選案例分析
在數位產品體驗中,有一項元素貫穿了帳號註冊、交易流程、行銷推播等各個環節,卻鮮少被人深入討論,那就是——電子郵件。對使用...
2025.09.01 -
如何設計Android平台上的Widget小工具:UI/UX規範、技術要求統整
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促...
2025.08.27 -
如何設計iOS平台上的Widget小工具:UI/UX規範、技術要求統整
伴隨著手機、平板操作系統的不斷迭代,UI/UX設計師不應再將視野侷限在App本體上,其附屬的小工具(Widget)也是促...
2025.08.26 -
用通行密鑰(Passkey)設計無密碼登入體驗:使用流程、UI/UX設計個案研究、設計資源
無論是登入網站、服務,都需要建立一組帳號密碼。然而,隨著使用的服務越來越多,要記住的帳密也跟著越來越多。為了解決帳號容易...
2025.05.13 -
不再當Figma新手:讓UI設計稿更加專業的必要細節
優秀的UI設計稿,其價值不僅在於華麗的外表,更體現於背後所傳達的一致性、邏輯與縝密決策。透過這篇文章,你將能跳脫一昧聚焦...
2025.04.09
設計Email的UI/UX實務技巧:用途、尺寸、精選案例分析
2025.09.01
如何設計iOS平台上的Widget小工具:UI/UX規範、技術要求統整
2025.08.26