共用方式為


小工具概觀

Windows 小工具是小型的使用者介面容器,用來顯示文字和圖形,並與裝置上安裝的應用程式相關聯。 已安裝的小工具以網格形式顯示在小工具面板上:當使用者點擊工作列上的小工具圖示、使用 Windows+W 快捷鍵或從螢幕左邊緣滑動時,該面板會覆蓋在 Windows 桌面上。 小工具藉由整合個人化內容和應用程式中的快速操作,協助人們掌握對他們而言的重要事項。 它們可快速取用和執行動作。 小工具並非用來取代應用程式和網站,而是提供使用者立即讀取/觸發的最需要資訊或常用功能的順暢存取。 設計小工具時,請考慮它會給消費者帶來什麼樣的價值。 

小工具面板的螢幕擷取畫面。面板是圓角矩形,時間顯示在頂端,後面接著搜尋列。面板的其餘部分是圓角矩形網格,每個矩形都代表小工具。個別小工具會顯示熱門新聞報導、目前天氣、目前交通等。

小工具術語

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

小工具設計指導

小工具的視覺體驗包含以 調適型卡片 JSON 格式定義的視覺元素與互動元素。 調適型卡片 Designer 提供一個即時編輯器,用於設計自適應卡以及支援的元件大小和主題範本。 您的小工具設計必須遵循 Windows 小工具的設計原則,以確保小工具板為所有小工具提供一致且熟悉的體驗。

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

小工具原則

要打造優秀的 Windows 小工具,設計與開發小工具時請考慮以下原則:

一目了然

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

可靠

Surface 經常即時使用資訊,節省使用者重複這些步驟的時間。 驅動用戶持續回到您的應用程式。

實用

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

個人

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

焦點

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

新鮮

內容應根據可用的上下文進行動態刷新。 它實時更新,並在正確的時間提供正確的內容。

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

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

本節內容

小工具狀態和 UI

Widget 設計基本概念

小工具互動設計

使用 調適型卡片 Designer 建立一個小工具範本

另請參閱