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

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

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

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

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

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

推進小工具體驗前的須知

Apple針對「小工具」設下了數個開發條件要求。需要特別留意的是，這些要求可能會影響「目前是否適合做小工具」這一根本問題的答案。因此，如果正在閱讀文章的你是設計師，請先將下方的要求清單給予開發團隊或相關人員，提醒他們評估可行性、團隊能量後，再來討論是否要推進小工具體驗。

1. 小工具必須使用SwiftUI來編寫使用者介面，無法使用常見的UIKit。SwiftUI是Apple於2019年新推出的程式語言，由於其技術較新、語法與資料邏輯又與UIKit相異，因此開發團隊現有使用技術中若無SwiftUI，就需要額外花時間學習、並考慮後續的程式碼維護，這些都是可能帶來高負擔的項目。
2. WidgetKit（驅動小工具體驗的底層程式框架）的最低系統要求為iOS/iPadOS 14（2020年）。
3. 提供個人化選項的Widget（例如指定顯示特定城市的天氣），底層依賴套件依系統版本有所不同。以往版本使用的是 SiriKit Intents，而自iOS 17（2023年）開始，則改採 App Intents框架。這意味著，如果App需要支援iOS 17以前的版本，就必須要有兩套邏輯應對，意味著兩倍的工作量。雖然Xcode中有工具可協助一鍵將SiriKit Intents轉換為 App Intents，但轉換後的code仍需要額外整理才可使用。
4. 小工具的各種功能是橫跨數年逐步推出，甚至直到今年的iOS 26，仍有新功能持續加入。這導致了各種功能的最低系統版本要求各不相同。因此在規劃階段，務必先調查好欲達成效果與現行版本支援間的關係，以免最後發現不支援。

設計原則

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

通用

1. 無論大小，只顯示和小工具核心用途相關的資訊
2. 提供所有尺寸的小工具不是必需
3. 小工具應當幫助使用者快速獲取他們需要的資訊
4. 如果可能，顯示會隨著時間變化的動態資訊（例如：天氣/下個行程）
5. 謹慎規劃小工具的顯示內容，因為系統對小工具內容的更新次數設有每日上限。可接受的更新頻率是每15~60分鐘一次更新。上限只能由系統自動重置，但這不一定準時發生在午夜12:00，而是會根據使用者的手機使用習慣變化。以下情況不會消耗每日更新次數：使用者與小工具互動、顯示文字倒數計時器……等等，更多請參考這篇文章。

介面

1. 在小工具介面中使用與你的品牌一致的設計元素
2. 系統會依照不同情境與位置，自動縮放小工具的內容、文字。因此需要確保所有的內容均可縮放且保持清晰。
3. 若小工具內容包含形狀，使其圓角與小工具本身的圓角共用同一個圓心。
4. 一般情況下，小工具推薦使用 16pt 的內距。但若是內容中包含了用作視覺分組的形狀、色塊，使用 11pt 的較窄內距也是可接受的。
5. 文字最小的可接受大小為 11pt。

尺寸與適用平台

小工具總共有2種類別、8種尺寸，分別適用於不同平台與情境。每種尺寸的具體大小可參考蘋果在Figma Community發布的模版或是Guideline。

外觀與色彩

小工具總共有3種外觀，分別適用於不同的情境。從以上範例可以觀察到，由於小工具需要在深淺色模式下顯示、同時又要考慮自定義色調，因此適合使用單純的底色或漸層當背景，文字則多設定為黑、白、或品牌主色。

※ 預設情況下，系統會依據顯示位置，自動判斷是否要顯示小工具的背景（顏色/底圖）。如果不希望系統更動背景，可在程式端用 .containerBackgroundRemovable(false)加以限制。然而，這也會使小工具無法出現在 vibrant模式中支援的位置裡。

設定Widget Gallery中的提示文字與按鈕顏色

使用者可透過長按主畫面，叫出Widget Gallery瀏覽所有可加入的小工具。在這個頁面中，每個小工具的標題、描述都是可以客製化的。除此之外，蘋果也推薦可調整下方按鈕的顏色，以更加符合品牌調性。

顧及使用者的隱私

小工具可放在鎖定畫面、今日畫面等不需要解鎖裝置也可看見的地方，因此，規劃小工具時需要避免顯示隱私資料。如果真的不可避免，可透過程式加上資料保護。如此一來，在裝置未解鎖前，小工具都只會顯示placeholder。具體作法請參考Apple的這篇文章。

關於Placeholder狀態設計

程式端可針對View加上.isPlaceholder(true)片段，讓系統自行將文字、圖片轉換為Placeholder樣貌。因此，不必針對「正在取得資料時的等待狀態」做設計，只需將設計稿中的有真實資料的版本，悉數轉換為框框即可。具體範例請參考本影片的6:53秒處。另外，如前段所提，此狀態也會顯示於「資料受到隱私保護」時。

關於「沒有資料」或是「請求用戶選擇特定資料以顯示Widget內容」的狀態，仍需要特別設計。

提示使用者設定小工具顯示資訊

提示用戶選擇特定資料時彈出的是系統的公版視窗（如下圖），不要在設計稿中畫任何客製化的設計。能夠更動的內容，就只有資料選擇欄位的數量以及文字提示。

善用動畫，告知使用者小工具內容已更新

大部分時候，小工具只是靜靜地待在畫面中，一動也不動。因此，若是沒有醒目的變化，使用者就會疑惑裡頭的內容是否是最新的、或是忽略了內容的新變動。為了解決此問題，系統會自動替小工具內容發生變化時加上過渡動畫，並在小工具出現在使用者眼前時播放。

預設情況下，動畫為「縮放+交叉過渡」。然而，你也可以使用以下的幾個簡單屬性來調整動畫：

• .contentTransition(.numericText(value: ))：針對顯示數字的文字，加上撥盤動畫（上方影片5:43秒處）
• .transition(.push(from: ))：針對View套用推入動畫，並指定推入方向（上方影片6:57秒處）

如果以上的屬性你還是不滿意，那麼也可以參考這部影片，建立更加複雜的動畫。

點擊範圍與頁面導覽行為

預設情況下，點擊Widget的任何部分就如同點擊App Icon，會啟動對應的App。然而，Widget中的內容也可以被切成更小的按鈕，並把這些按鈕連結至App的不同頁面、功能。但請注意，這個功能在iOS 16（2022年）或更早版本中，只有WidgetFamily.systemLarge和WidgetFamily.systemExtraLarge兩種尺寸有支援，後續版本則沒有此限制（來源）。

唾手可得的額外收穫

小工具底層使用的App Intent框架，同時也驅動了以下系統體驗：

• 讓你的App出現在「捷徑」App中，支援各種操作
• 讓你的App出現在「Spotlight搜尋」結果中
• 讓你的App出現在iPhone鎖定畫面的「控制」選項中（預設是相機和手電筒的那兩個圓圓按鈕）
• 讓你的App出現在「控制中心」的選項中
• 讓你的App可透過Action Button（音量調整鍵上方的按鍵）啟用
• 讓使用者可透過 Siri 或 Apple Intelligence，代理操作App

這意味著，在支援小工具的過程中，你也完成了支援以上功能的前置準備、剩下最後一點點工作要完成。如果你認為這些功能對你的App很重要，不妨和團隊們討論看看！

相關文章

設計

1. Human Interface Guideline: Widgets

開発

1. WidgetKit概覽：WidgetKit | Apple Developer Documentation
2. Widget相關功能在各個平台上的限制：Developing a WidgetKit strategy | Apple Developer Documentation
3. App Intents 框架介紹：App Intents | Apple Developer Documentation
4. Widget 尺寸：WidgetFamily | Apple Developer Documentation
5. Widget 顯示模式：WidgetRenderingMode | Apple Developer Documentation
6. 正確顯示Widget的背景：Displaying the right widget background | Apple Developer Documentation
7. 配合iOS 26的Liquid Glass最佳化Widget顯示：Optimizing your widget for accented rendering mode and Liquid Glass | Apple Developer Documentation