Share via


小工具概觀

Windows 小工具是小型的 UI 容器,可顯示與裝置上安裝的應用程式相關聯的文字和圖形。 已安裝的小工具會顯示在小工具面板的格線中: 當使用者按一下工作列上的小工具圖示、使用 Windows+W 捷徑或從螢幕左邊緣滑動時,與 Windows 桌面重叠的飛出平面。 小工具可藉由匯總個人化內容,以及從他們使用的應用程式快速動作,協助人們掌握重要事項。 它們可快速取用和執行動作。 小工具並非用來取代應用程式和網站,而是提供使用者立即讀取/觸發的最需要資訊或常用功能的順暢存取。 設計小工具時,請考慮它會給取用者帶來何種價值。 

Screenshot of the Widgets Board. The board is a rounded rectangle with the time displayed at the top, followed by a search bar. The rest of the board is a grid of rounded rectangles each representing a widget. The individual widgets show top news stories, current weather, current traffic, etc.

小工具術語

詞彙 定義
小工具主機 顯示和管理 Windows 小工具的應用程式。 在目前版本中,唯一的小工具主機是 Windows 11 內建的小工具面板。
小工具面板 小工具面板是當使用者按一下工作列上的小工具圖示、使用 Windows+W 捷徑或從螢幕左邊緣滑動時,在桌面顯示的 Windows 11 系統元件。 小工具面板會顯示小工具,並在面板上管理其版面配置。
Widget 小工具是 調適型卡片,可呈現來自應用程式的重要內容或動作。 它可讓使用者立即存取所需的資訊,而不需要啟動相關聯的應用程式或網站。 小工具內容會全天動態重新整理,為使用者提供一目了然且有趣的內容。 小工具提供基本的互動式功能,可讓使用者啟動相關聯的應用程式以進行更深入的參與。 小工具並非用來取代應用程式和網站。
小工具提供者 小工具提供者是個 Windows 應用程式,會提供要顯示在小工具中的內容。 小工具提供者擁有小工具的內容、版面配置和互動式元素。

小工具設計指導

小工具的視覺體驗包括使用調適型卡片 JSON 格式定義的視覺效果元素和互動元素。 調適型卡片設計工具 提供即時編輯器,用於設計調適型卡片,以及支援小工具大小和主題的範本。 請務必讓小工具的設計遵循 Windows 小工具設計原則,協助確保小工具面板為所有小工具提供一致且熟悉的體驗。

如需小工具視覺效果元素的高階逐步解說,請參閱 小工具狀態和內建 UI 元件

小工具原則

若要建立絕佳的 Windows 小工具,請在設計和開發小工具時,考慮下列原則:

一目了然

使用者可以快速查看,以充分利用小工具的價值。 他們只需按一下小工具即可獲得更豐富的詳細資料或更深入的互動。

可靠

立即顯示經常使用的資訊,可節省使用者重複這些步驟的時間。 推動您的應用程式持續重新參與。

實用

突出最實用且最相關的資訊。

個人版

提供個人化內容,並與客戶建立情感聯繫。 小工具絕不應包含廣告。 客戶可以控制其小工具內容和版面配置。

焦點

每個小工具通常都應該專注在一個主要工作或案例。 小工具並非用來取代應用程式和網站。

更新

內容應根據可用的內容動態重新整理。 它實時更新,並在正確的時間提供正確的內容。

規劃應用程式的小工具體驗

  1. 根據您對客戶的了解,找出使用者想要快速存取之最重要的內容或最有用的動作,而不需開啟應用程式或網站。 請考慮 小工具原則 章節中列舉的原則,並思考它們可如何套用至您的應用程式。
  2. 您的應用程式可以支援多個個別的小工具。 決定您想支援幾個不同的小工具,好讓每個小工具專注在一種特定用途上。
  3. 決定您希望每個小工具所包含的內容。 一個小工具可支援三種不同的大小;小型、中型和大型。 針對每個小工具,請考慮哪些內容可對使用者和商務需求帶來最大的價值。 針對從小到大的每個大小,小工具的目的應該保持不變,但顯示的資訊數量應該會隨著較大的大小而擴大。 我們建議小工具提供者實作所有小工具大小,讓使用者在自訂小工具版面配置時能更有彈性。
  4. 想想您的小工具將支援的使用者互動。 使用者可以按一下小工具標題或任何您在小工具上定義的 [按下目標]。 這些互動可以啟用應用程式或網站的深層連結捷徑,讓使用者直接前往他們感興趣的內容,而不必從應用程式的根目錄瀏覽。 請考慮提供的不同瀏覽模型。
  5. 應用程式必須實作小工具提供者,以實作後端功能將小工具的版面配置和資料傳送至要顯示的小工具面板。 目前您可以使用封裝的 Win32 桌面應用程式或漸進式 Web 應用程式 (PWA) 實作小工具提供者。 如需建立 Win32 小工具提供者的詳細資訊,請參閱 小工具服務提供者。 如需 PWA 小工具提供者的相關資訊,請參閱 建置 PWA 驅動的小工具

本節內容

小工具狀態和 UI

小工具設計基本概念

小工具互動設計

使用調適型卡片設計工具建立小工具範本