Windows 小工具是小型的使用者介面容器,用來顯示文字和圖形,並與裝置上安裝的應用程式相關聯。 已安裝的小工具以網格形式顯示在小工具面板上:當使用者點擊工作列上的小工具圖示、使用 Windows+W 快捷鍵或從螢幕左邊緣滑動時,該面板會覆蓋在 Windows 桌面上。 小工具藉由整合個人化內容和應用程式中的快速操作,協助人們掌握對他們而言的重要事項。 它們可快速取用和執行動作。 小工具並非用來取代應用程式和網站,而是提供使用者立即讀取/觸發的最需要資訊或常用功能的順暢存取。 設計小工具時,請考慮它會給消費者帶來什麼樣的價值。
小工具術語
| 術語 | 定義 |
|---|---|
| 小工具主機 | 一個顯示和管理 Windows 小工具的應用程式。 內建於 Windows 11 的 Widgets Board 是一個 widget 主機。 |
| 小工具面板 | 小工具板是 Windows 11 系統的一個元件,當使用者點擊工作列上的小工具圖示、使用 Windows+W 捷徑,或從螢幕左邊緣滑動時,會顯示在桌面上方。 Widgets Board 顯示小工具,並管理它們在面板上的布局。 |
| Widget | 一個小型的 UI 容器,用來呈現應用程式的內容或操作。 你可以用 自適應卡 定義其內容,或用 網頁小工具提供者 從網址顯示 HTML。 小工具一目了然地提供資訊和操作,並提供連結到你的應用程式,以執行更詳細的工作。 |
| 小工具提供者 | 小工具提供者是一種 Windows 應用程式,提供要在小工具中顯示的內容。 小工具提供者擁有小工具的內容、版面配置和互動式元素。 |
Important
網頁小工具僅提供給歐洲經濟區(EEA)內的使用者。 在選擇 HTML 內容前,請先檢查 網頁小工具的需求 。
小工具設計指導
對於 Adaptive Card 元件,請在 調適型卡片 JSON 範本中定義視覺與互動元素。 使用 調適型卡片 Designer 編輯卡片,然後在 Widgets Board 驗證 Windows 專屬的主機屬性、大小、主題與動作。 Designer 的渲染器和主機選項無法取代 Windows 上的測試。 對於網頁小工具,請根據小工具的大小、主題及互動需求來設計 HTML 內容;調適型卡片 Designer 不會編輯那個 HTML。
兩種渲染方式都應遵循以下小工具設計原則。 關於網頁內容設定、資源請求及訊息傳遞,請參見 Web Widget 提供者。
如需小工具視覺效果元素的高階逐步解說,請參閱 小工具狀態和內建 UI 元件。
小工具原則
要打造優秀的 Windows 小工具,設計與開發小工具時請考慮以下原則:
一目了然
小工具應該立即將其主要價值傳達給使用者。
專注且實用
一個小工具應該有明確且主要的用途。
可預測且冷靜
小工具的行為與模式幫助使用者可預測地完成任務。
使用者錨定
小工具應該反映使用者的需求、偏好與意圖。 內容應基於使用者自身資料或明確表達的興趣。
及時
小工具應該在正確的時間和情境中呈現相關資訊。
規劃應用程式小工具的使用體驗
- 根據您對客戶的了解,找出使用者想要快速存取之最重要的內容或最有用的動作,而不需開啟應用程式或網站。 請考慮 小工具原則 章節中列舉的原則,並思考它們可如何套用至您的應用程式。
- 您的應用程式可以支援多個個別的小工具。 決定您想支援幾個不同的小工具,好讓每個小工具專注在一種特定用途上。
- 為每個小工具決定你想包含的內容。 一個小工具可支援三種不同的大小;小型、中型和大型。 針對每個小工具,請考慮哪些內容可對使用者和商務需求帶來最大的價值。 針對從小到大的每個大小,小工具的目的應該保持不變,但顯示的資訊數量應該會隨著較大的大小而擴大。 我們建議小工具提供者實作所有小工具大小,讓使用者在自訂小工具版面配置時能更有彈性。
- 想想您的小工具支援哪些使用者互動。 使用者可以按一下小工具標題或任何您在小工具上定義的 [按下目標]。 這些互動可以啟用應用程式或網站的深層連結捷徑,讓使用者直接前往他們感興趣的內容,而不必從應用程式的根目錄瀏覽。 請考慮提供的不同導航模型。
- 選擇您的服務提供者實作與內容格式。 打包的 Win32 桌面應用程式可以提供 Adaptive Card 內容,或使用網頁小工具 API 來顯示 HTML。 漸進式網頁應用程式(PWA)在其網頁應用程式資訊清單中使用小工具定義,並在 Service Worker 中處理事件。 請參閱 Widget 提供者、Web Widget 提供者 或 建構 PWA 驅動的小工具,以了解對應的實作路徑。