如何設計Android平台上的Widget小工具：UI/UX規範、技術要求統整

伴隨著手機、平板操作系統的不斷迭代，UI/UX設計師不應再將視野侷限在App本體上，其附屬的小工具（Widget）也是促進良好使用體驗的重要一環。今天，就讓我們藉著這篇文章，一起來了解在推進Android平台小工具體驗前，相關利害關係人所需知道的一切細節！

App提供小工具（Widget）可帶來的好處

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

iOS與Android小工具功能差異比較

這個欄位是為了想要快速比較雙平台小工具功能差異的讀者而準備的。不過，這裡的比較只聚焦在和設計面向相關的差異上。

小工具種類

Android開發者文件中，說明小工具主要可以分為4種：

設計原則

以下設計原則彙整自相關開發者文件，這裡我只摘錄了幾個比較重要、或是較少提及的：

通用

1. 小工具扮演著「預覽」的角色，幫助使用者快速地概覽App的內容、功能
2. 除了顯示靜態資訊外，考慮在小工具中加入互動功能以幫助使用者更快捷地完成任務。例如：建立新文件、建立新訊息……等等。
3. 依照欲顯示的資訊類型、內容份量，規劃小工具的支援尺寸、變形關係。不過，開發者不必支援所有尺寸、變形。一般情況下，大尺寸小工具應當要顯示更豐富的資訊，而不是單純將小尺寸裡有的內容放大。
4. 謹慎規劃小工具的顯示內容，因為內容的更新次數有上限。官方推薦的更新頻率是每小時一次，最短可至每30分鐘一次。使用WorkManager自行管理更新邏輯的情況下，頻率可進一步縮短至每15分鐘一次。注意，更新時機會由系統依據當下剩餘電量動態調整，因而更新可能無法準時發生。

介面

1. 使用裝置上的主畫面網格布局，做為小工具介面設計的起點。
2. 由於Android裝置多、佈局各有些微差異，因此需確保小工具介面具有排版彈性，可以應對比預期更寬、更窄的可用空間。
3. 小工具大小以主畫面網格布局為依據。Android 11 或更早版本的預設小工具大小為 3×2（寬x高）。最小為2×1，最大可至全螢幕；自Android 12（2021年）起，預設的小工具大小是2×2。最小為2×1，最大可至4×3。
4. 觸摸範圍最小不可小於 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相對豐富的操作選項。例如：支援上下滾動查看內容。

相關文章

開發

• App widgets overview | Android Developers
• Widgets on Android | UI Design | Android Developers
• Sizing | Android Developers
• Widget Quality | Android Developers