Widgets Übersicht

Windows Widgets sind kleine UI-Container, die Text und Grafiken anzeigen, die einer auf dem Gerät installierten App zugeordnet sind. Installierte Widgets werden in einem Raster im Widgets-Board angezeigt: ein ausklappbares Fenster, das den Windows-Desktop überdeckt, wenn der Benutzer auf das Symbol Widgets in der Taskleiste klickt, die Verknüpfung Windows+W verwendet oder vom linken Bildschirmrand aus wischt. Widgets helfen den Benutzern, den Überblick über die für sie wichtigen Dinge zu behalten, indem sie personalisierte Inhalte und schnelle Aktionen aus den von verwendeten Apps zusammenfassen. Sie sind schnell verwendbar und handlungsrelevant. Widgets sollen keine Apps und Websites ersetzen, sondern den Benutzern vielmehr einen reibungslosen Zugriff auf meist benötigte Informationen oder häufig genutzte Funktionen bieten, die so sofort gelesen/ausgelöst werden können. Berücksichtigen Sie beim Design Ihres Widgets, welchen Wert sie ihren Verbrauchern bringt. 

Widgets-Terminologie

Begriff	Definition
Widgets-Host	Eine Anwendung, die Windows Widgets anzeigt und verwaltet. Das in Windows 11 integrierte Widgets Board ist ein Widgethost.
Widgets Board	Das Widgets Board ist eine Systemkomponente von Windows 11, die über dem Desktop angezeigt wird, wenn der Benutzer auf das Symbol "Widgets" in der Taskleiste klickt, die Verknüpfung Windows+W verwendet, oder vom linken Bildschirmrand wischt. Das Widgets Board zeigt Widgets an und verwaltet das Layout auf der Tafel.
Widget	Ein kleiner UI-Container, der Inhalte oder Aktionen aus einer App darstellt. Sie können den Inhalt mit einer Adaptive Card definieren oder HTML aus einer URL mit einem web widget provider anzeigen. Widgets bieten Informationen und Aktionen auf einen Blick mit Links zu Ihrer App für detailliertere Aufgaben.
Widgetanbieter	Ein Widgetanbieter ist eine Windows-App, die inhalte bereitstellt, die im Widget angezeigt werden. Der Widgetanbieter besitzt den Inhalt, das Layout und interaktive Elemente des Widgets.

Important

Web-Widgets sind nur für Benutzer im Europäischen Wirtschaftsraum (EWR) verfügbar. Überprüfen Sie die Web-Widget-Anforderungen , bevor Sie HTML-Inhalte auswählen.

Leitfaden zum Widgetdesign

Definieren Sie für ein adaptives Karten-Widget die visuellen und interaktiven Elemente in einer Adaptive Karten JSON-Vorlage. Verwenden Sie den Adaptive-Karten-Designer, um die Karte zu bearbeiten, und überprüfen Sie dann windowsspezifische Hosteigenschaften, Größen, Designs und Aktionen im Widgets Board. Die Renderer- und Hostoptionen des Designers sind kein Ersatz für Tests in Windows. Entwerfen Sie für ein Web-Widget den HTML-Inhalt für die Anforderungen an Größe, Design und Interaktion des Widgets. Der Adaptive-Karten-Designer bearbeitet diesen HTML-Code nicht.

Beide Renderingansätze sollten den folgenden Designprinzipien des Widgets entsprechen. Zum Einrichten von Web-Inhalten, Ressourcenanforderungen und Messaging finden Sie Informationen unter Web-Widget-Anbieter.

Eine allgemeine exemplarische Vorgehensweise zu den visuellen Elementen eines Widgets finden Sie unter Widgetzustände und integrierte UI-Komponenten.

Widget-Prinzipien

Um großartige Windows Widgets zu erstellen, berücksichtigen Sie beim Entwerfen und Entwickeln Ihrer Widgets die folgenden Prinzipien:

Auf einen Blick

Ein Widget sollte dem Benutzer sofort seinen Primärwert liefern.

Fokussiert und nützlich

Ein Widget sollte einem klaren, primären Zweck dienen.

Vorhersagbar & Ruhig

Das Verhalten und Muster eines Widgets helfen Benutzern, vorhersagbare Aufgaben auszuführen.

Benutzerverankert

Ein Widget sollte die Anforderungen, Einstellungen und Absichten des Benutzers widerspiegeln. Inhalte sollten auf den eigenen Daten des Benutzers basieren oder explizit angegebene Interessen haben.

Zeitnah

Ein Widget sollte relevante Informationen zur richtigen Zeit und im richtigen Kontext anzeigen.

Planen der Widget-Erfahrung Ihrer App

1. Ermitteln Sie auf der Grundlage Ihres Verständnisses für Ihre Kunden die wichtigsten Inhalte oder nützlichsten Aktionen, auf die Ihre Benutzer gerne schnell zugreifen würden, ohne die App oder Website zu öffnen. Berücksichtigen Sie die im Abschnitt Widget-Prinzipien aufgeführten Prinzipien, und überlegen Sie, wie sie auf Ihre App angewendet werden können.
2. Ihre App kann mehrere einzelne Widgets unterstützen. Bestimmen Sie die Anzahl der einzelnen Widgets, die Sie unterstützen möchten, damit jedes Widget auf einen bestimmten Zweck ausgerichtet ist.
3. Bestimmen Sie den Inhalt, den Sie in jedes Widget aufnehmen möchten. Ein einzelnes Widget kann drei verschiedene Größen unterstützen: klein, mittel und groß. Überlegen Sie für jedes Widget, welche Inhalte den Benutzern den größten Nutzen bringen und Ihren geschäftlichen Anforderungen entsprechen. Für jede Größe von klein bis groß sollte der Zweck des Widgets derselbe bleiben, lediglich die Menge der angezeigten Informationen sollte bei größeren Formaten größer sein. Wir empfehlen Widgetanbietern, alle Widgetgrößen zu implementieren, um den Benutzern Flexibilität bei der Anpassung des Widgetlayouts zu bieten.
4. Überlegen Sie, welche Benutzerinteraktionen Ihr Widget unterstützen soll. Benutzer können auf den Titel des Widgets oder auf beliebige Klickziele klicken, die Sie für das Widget definiert haben. Diese Interaktionen können Deep-Link-Verknüpfungen in Ihrer App oder Website aktivieren, über die Benutzer direkt zu dem gelangen, was sie interessiert, ohne vom Ursprung Ihrer App navigieren zu müssen. Berücksichtigen Sie die verschiedenen angebotenen Navigationsmodelle.
5. Wählen Sie die Implementierung des Anbieters und das Inhaltsformat aus. Eine verpackte Win32-Desktop-App kann Inhalte für adaptive Karten bereitstellen oder die Web-Widget-APIs verwenden, um HTML anzuzeigen. Eine Progressive Web App (PWA) verwendet Widgetdefinitionen im Web-App-Manifest und behandelt Ereignisse in einem Service Worker. Siehe Widget-Anbieter, Web-Widget-Anbieter oder Build PWA-gesteuerte Widgets für den entsprechenden Implementierungspfad.

In diesem Abschnitt

Widgetzustände und UI-Komponenten

Grundlagen des Widgetdesigns

Widget-Interaktionsdesign

Erstellen einer Widgetvorlage mit dem Adaptive Karten Designer

In die Widget-Auswahl integrieren

Siehe auch

• Entwickeln Windows Widgets