Freigeben über

Leitfaden zum Widgetinteraktionsdesign

  • Artikel

Hinweis

Einige Informationen beziehen sich auf Vorabversionen, die vor der kommerziellen Freigabe grundlegend geändert werden können. Microsoft übernimmt hinsichtlich der hier bereitgestellten Informationen keine Gewährleistungen, seien sie ausdrücklich oder konkludent.

Wichtig

Das in diesem Thema beschriebene Feature ist in Vorabversionen des Dev-Kanals von Windows ab Build 25217 verfügbar. Informationen zu Vorabversionen von Windows finden Sie unter Windows 10-Insider-Vorschau.

Dieser Artikel enthält detaillierte Anleitungen zum Entwerfen von Interaktionen für Windows-Widgets.

Ein Widget sollte auf einen blickbaren und fokussierten Bereich ausgerichtet sein und einen einzelnen Aspekt des primären Zwecks der App darstellen. Widgets können einen oder mehrere Handlungsaufrufe bereitstellen. Wenn der Benutzer auf einen Handlungsaufruf klickt, sollte das Widget die zugeordnete App oder Website starten, anstatt die Aktion im Widget selbst zu implementieren. Ein Widget verfügt nur über eine primäre Seite, die mehrere Interaktionen enthalten kann. Wenn Sie auf ein Element im Widget klicken, sollten Sie niemals zu einer völlig anderen Ansicht des Widgets führen. Beispielsweise können Sie in einem Wetter-Widget das Wetter für mehrere Tage anzeigen, aber durch Klicken auf einen der Tage werden keine Details inline erweitert, sondern stattdessen die App oder das Web gestartet.

Im Folgenden sehen Sie die maximale Anzahl von Touchpunkten, die für jede unterstützte Widgetgröße empfohlen werden.

Widgetgröße Maximale Touchpoints
small 1
medium 3
groß 4

Die folgenden Navigationselemente werden in Windows Widgets nicht unterstützt:

  • Pivots werden in Widgets nicht unterstützt
  • L2-Seiten werden in Widgets nicht unterstützt
  • Vertikaler oder horizontaler Bildlauf wird in Widgets nicht unterstützt.

Container

Die folgenden Abbildungen zeigen die Verwendung von Containerelementen in einer Widgetvorlage. Die Container gruppieren visuelle Elemente in Spalten und Zeilen, um eine hierarchische Rasterstruktur zu erstellen.

Vier Bilder von Widgets, die Container veranschaulichen. Die Widgets in den Bildern weisen Elemente auf, die in Zeilen und Spalten unterteilt sind, um eine hierarchische Rasterstruktur bereitzustellen.

Die folgenden Abbildungen zeigen die Verwendung von Bildlinkelementen in einer Widgetvorlage.

Zwei Bilder von Widgets, die Bildlinks veranschaulichen. Die Bilder werden in Spalten und Zeilen angeordnet, die ein Raster bilden.

Paginierung

Die folgenden Bilder zeigen Beispiele für die Paginierung in einer Widgetvorlage. Die Paginierungssteuerelemente können horizontal oder vertikal ausgerichtet werden. Navigationspfeile werden als Reaktion auf einen Mauszeiger angezeigt.

Dieser Satz von zwei Bildern zeigt eine horizontale Paginierung. In der ersten Abbildung wird eine Spalte mit Punkten entlang der rechten Seite ausgerichtet. Ein Punkt ist größer, um die aktuell aktive Seite anzuzeigen. In der zweiten Abbildung zeigt ein Cursor über einen abwärts zeigenden Pfeil am unteren Rand des Widgets, mit dem der Benutzer zur nächsten Seite wechseln kann. Es gibt einen übereinstimmenden nach oben zeigenden Pfeil am oberen Rand des Widgets, um zur vorherigen Seite zu navigieren.

Dieser Satz von zwei Bildern zeigt eine vertikale Paginierung. In der ersten Abbildung wird eine Zeile mit Punkten am unteren Rand ausgerichtet. Ein Punkt ist größer, um die aktuell aktive Seite anzuzeigen. In dem zweiten Bild zeigt ein Cursor mit der Maus auf einen rechts zeigenden Pfeil auf der rechten Seite des Widgets, mit dem der Benutzer zur nächsten Seite wechseln kann. Auf der linken Seite des Widgets befindet sich ein übereinstimmender Pfeil mit links zeigender Pfeil, um zur vorherigen Seite zu navigieren.

Diese beiden Bilder zeigen, wie die Paginierungssteuerelemente aussehen, wenn das Widget über einen Bildhintergrund verfügt.

Die folgenden Bilder zeigen ein Beispiel für Links in einer Widgetvorlage.

Zwei Bilder von Widgets, die Links veranschaulichen. Die erste Abbildung zeigt eine hyperlinkierte Textzeichenfolge. Der Text ist einfach. In der zweiten Abbildung bewegt sich ein Mauszeiger über den Link, wodurch der Text unterstrichen wird.

Ein Bild, das einen Link zentriert am unteren Rand des Widgets zeigt, direkt über der horizontalen Zeile der Paginierungspunkte. Ein rotes X gibt an, dass sich die Paginierungspunkte und der Hyperlink nicht im gleichen Raum befinden sollen. Rechts zeigt ein weiteres Bild den Link unten an, die Paginierungspunkte werden jedoch vertikal in einer Spalte auf der rechten Seite ausgerichtet. Ein grünes Häkchen gibt an, dass diese Platzierung der beiden Elemente korrekt ist.

Zwei Bilder von Widgets, die Dropdownmenüs veranschaulichen. In der linken Abbildung ist das Dropdownmenü reduziert. In der rechten Abbildung wird das Dropdown erweitert und über den Rahmen des Widgets erweitert.

Widgets können vorübergehend über ihre Widgetgröße hinausgehen, wenn der Benutzer mit einem Menü oder Dropdown interagiert. Das Menüverhalten sollte leicht schließen und das Menü schließen, wenn ein Benutzer außerhalb des Menü-/Dropdownbereichs klickt.