Freigeben über

Grundlagen des Widgetdesigns

Dieser Artikel enthält detaillierte Anleitungen zum Entwerfen der Benutzeroberfläche für ein Windows Widget.

Widgetgrößen

Ein Screenshot zeigt leere Widget-Vorlagen in kleinen, mittleren und großen Größen. Ein Bildschirmfoto mit Beispielen für kleine, mittlere und große Größen für ein Wetter-Widget. Ein Screenshot mit Beispielen für kleine, mittlere und große Größen für ein Traffic-Widget.

Widgets stellen drei Größen bereit, aus welcher der Benutzer auswählen kann. Es wird empfohlen, dass Sie alle drei Größen erstellen und berücksichtigen und Ihr Design speziell für jede Größe anpassen. Kleine und mittlere Größen bieten eine bessere Auffindbarkeit, da sie häufiger innerhalb des dynamischen Feeds angezeigt werden. Große Größen sind nützlich, um ausführlichere Informationen anzuzeigen. Die Unterstützung mehrerer Größen ermöglicht es Benutzern, die Widgets anzupassen, die sie an das Widgets-Board anheften möchten.

Klein

Die Prinzipien für Widgets - überschaubar und fokussiert - gewinnen bei Designentscheidungen für Widgets kleiner Größe an Bedeutung. Das kleine Widget sollte nicht versuchen, alle Funktionen zu erzwingen, die bequem in ein großes Widget passen würden. Fokussieren Sie sich auf eine Benutzerinteraktion oder einen Teil der wichtigen Informationen, die hier mit einem Toucheingabeziel angezeigt werden können.

Medium

Das mittelgroße Widget bietet im Vergleich zum kleinen Widget mehr Platz, sodass mehr Funktionen oder zusätzliche Informationen aufgenommen werden können. Das mittlere Widget könnte auch dieselbe fokussierte Erfahrung wie das kleine Widget bieten, aber 2 bis 3 Toucheingabeziele bereitstellen.

Groß

Große Größen ermöglichen die Darstellung weiterer Informationen, aber der Inhalt sollte immer noch fokussiert und leicht konsumierbar sein. Alternativ kann eine Karte mit großer Größe ein Bild oder Thema hervorheben und ein immersiveres Erlebnis bieten. Große Ausführungen sollten nicht mehr als 3 bis 4 Touchziele umfassen.

Farbe und Gestaltung

Drei Beispiel-Widget-Vorlagen zur Veranschaulichung des hellen Themas. Das erste ist ein leeres Widget mit einem weißen Hintergrund. Das zweite ist ein leeres Widget mit einem hellen Hintergrund mit Farbverlauf. Das dritte ist ein Widget mit einem Bildhintergrund. Alle drei haben das Wort „Text“ in dunkler Schrift, um den Kontrast zum hellen Hintergrund zu verdeutlichen.

Drei Beispiel-Widget-Vorlagen zur Veranschaulichung des dunklen Themas. Das erste ist ein leeres Widget mit einem schwarzen Hintergrund. Das zweite ist ein leeres Widget mit einem dunklen Hintergrund mit Farbverlauf. Das dritte ist ein Widget mit einem Bildhintergrund. Alle drei haben das Wort „Text“ in einer hellen Schrift, um den Kontrast zum dunklen Hintergrund zu verdeutlichen.

Windows 11 unterstützt zwei Farbmodi: Hell und Dunkel. Jeder Modus besteht aus einer Reihe neutraler Farbwerte, die automatisch angepasst werden, um einen optimalen Kontrast sicherzustellen. Achten Sie bei jeder unterstützten Widgetgröße darauf, separate Designs für helle und dunkle Designs zu erstellen, damit das Widget nahtlos in das breitere Betriebssystem und die Designauswahl des Benutzers integriert wird. Der Widgethintergrund unterstützt Anpassungen mit einem einfarbigen hellen/dunklen Hintergrund, Farbverlaufston oder Bildhintergrund.

Zwei Beispiele für Widgets nebeneinander. Das linke Beispiel hat einen hellen Hintergrund mit Farbverlauf und einen Text in hellgrauer Schrift. Das Bild ist mit einem roten X gekennzeichnet, um anzuzeigen, dass der Text aufgrund des geringen Kontrasts nicht lesbar ist. Das rechte Bild hat einen hellen Hintergrund mit Farbverlauf und einen Text in dunkler schwarzer Schrift. Das Bild ist mit einem grünen Häkchen versehen, um anzuzeigen, dass der hohe Kontrast den Text lesbar macht.

Zwei Beispiele für Widgets nebeneinander. Das linke Beispiel hat ein stark gesättigtes Hintergrundbild und Text in einer dunklen Schrift. Das Bild ist mit einem roten X gekennzeichnet, um anzuzeigen, dass der Text aufgrund des geringen Kontrasts nicht lesbar ist. Das rechte Bild hat einen entsättigten Farbhintergrund und einen Text in dunkler schwarzer Schrift. Das Bild ist mit einem grünen Häkchen versehen, um anzuzeigen, dass der hohe Kontrast den Text lesbar macht.

Stellen Sie beim Auswählen von Hintergrundfarben, Bildern und Inhalten sicher, dass genügend Farbkontrast vorhanden ist, um die Lesbarkeit und Zugänglichkeit sicherzustellen.

Die Web Content Accessibility Guidelines (WCAG) 2,0 Ebene AA erfordert ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text. WCAG 2.1 erfordert ein Kontrastverhältnis von mindestens 3:1 für Grafik- und Benutzeroberflächenkomponenten (z. B. Formulareingaberahmen). WCAG Ebene AAA erfordert ein Kontrastverhältnis von mindestens 7:1 für normalen Text und 4.5:1 für großen Text. Großer Text wird als 14 Punkt (in der Regel 18,66px) und fett oder größer oder 18 Punkt (in der Regel 24px) oder größer definiert.

Ränder

Ein Diagramm eines Widgets mit Leitlinien, die die Ränder angeben. Daneben ist ein Diagramm eines Widgets zu sehen, bei dem der Bereich innerhalb der Ränder blau eingefärbt ist, um den Inhaltsbereich anzuzeigen.

Jedes Widget hat einen Rand von 16 Pixeln und einen 48px Attributionsbereich, in dem Inhalte nicht platziert werden können. Die einzige Komponente, die sich am rechten Rand und unteren Rand befinden kann, sind die Paginierungspunkte. Beispiele für die Positionierung der Paginierungspunkte finden Sie im Abschnitt „Paginierung“ des Entwurfsleitfadens für Widget-Interaktionen.

Zwei Beispiele für Widgets nebeneinander. Das linke Bild zeigt Hilfslinien, die das Widget in drei Spalten aufteilen und 4-Pixel-Zwischenräume zwischen den Spalten veranschaulichen. Das rechte Bild zeigt Hilfslinien, die das Widget in drei Reihen unterteilen und 4-Pixel-Zwischenräume zwischen den Reihen veranschaulichen.

Bei Widgets, die Container verwenden, beträgt der Abstand zwischen den einzelnen Elementen 4px, und die Container sollten an den Rändern der Margen anliegen. Ihre Inhalte sollten auch Abstände und Größenanpassungswerte von Vielfachen von vier Px verwenden, um ein sauberes, pixelgenaues Design bei verschiedenen Bildschirmauflösungen zu erzielen.

Sie sollten auch die Anleitungen zu Abständen und Abständen in den Content-Design-Grundlagen für Windows-Apps zu Rate ziehen, wenn Sie Ihre Inhalte gestalten.

Typografie

Zwei Zeichenfolgen des Satzes „Der schnelle braune Fuchs sprang über den faulen Hund“ nebeneinander. Die Zeichenfolge rechts hat eine stärkere Schriftart.

Eine Tabelle mit Beispieltexten für verschiedene Arten von Elementen eines Widgets. Die Tabelle wird als reiner Text ohne das gerenderte Aussehen im Text unter dem Bild wiedergegeben.

Für die Barrierefreiheit zeigt die folgende Tabelle den Text der Tabelle, die in der Abbildung oben gezeigt wird.

Beispiel Größe/Zeilenhöhe Formel für adaptive Karten
Caption 12/16 EPX Klein, leichter
Hauptteil 14/20 EPX Standard, heller
Anzeigetext (für Hyperlinks) 14/20 EPX Standard, heller, Akzent
Körper stark 14/20 EPX Default, Bolder
Textkörper groß 18/24 epx Medium, Leichter
Größter Körper 18/24 epx Mittel, Extrafet
Untertitel 20/28 EPX Groß, Fettdruck
Titel 28/36 epx Extra groß, fetter gedruckt

Segoe UI ist die Schriftart, die in Widgets und über Windows verwendet wird. Die oben genannte Typhierarchie enthält die Formulierungen, wie die richtigen Stile im Adaptive Karten Designer richtig festgelegt werden. Die Formatierung von Schriftarten sollte nicht von den oben angegebenen Formeln abweichen. Weitere Informationen zur Verwendung des Adaptive Karten-Designers zum Erstellen von Widgetvorlagen finden Sie unter Create a widget template with the Adaptive Karten Designer.

Zwei Beispiel-Widgets mit dem Satz „Der schnelle braune Fuchs sprang über den faulen Hund

Im Adaptive Karten Designer verwenden Titel und Textkörperkopie die Standardfarbe, die dem Widgetdesign zugeordnet ist. Eine zusätzliche Möglichkeit, den Titel weiter vom Fließtext zu unterscheiden, besteht darin, die dezente Version der Standardfarbe zu verwenden. Die Akzentfarbe wird nur für Links verwendet.

Ikonografie

Profilbilder

Vier Beispiele für ein kreisförmiges Profilbild in absteigender Größe von links nach rechts. Die Bilder sind mit „96

Wenn Ihr Widget Benutzerprofile anzeigt (z. B. einen Social Media-Feed oder -Stream), verwenden Sie eine der folgenden zulässigen Kreisprofilgrößen: 96x96px, 48x48px, 32x32px oder 24x24px.

QuickInfos

Ein Bild eines Kalender-Widgets, das einen Kalendertermin zeigt. Der Mauszeiger bewegt sich über die Betreffzeile des Termins, die abgeschnitten ist, und ein Tooltip zeigt die vollständige Betreffzeile an.

Tooltipps können verwendet werden, wenn Titeltext im Widget abgeschnitten wird. Bei bewährten Methoden sollte Text gut in den Widgetbereich passen und nicht abgeschnitten werden, das kann jedoch nicht immer in Abhängigkeit von Szenarien wie Sprachlokalisierung, Systemtextskalierung oder beim Zitieren von Etwas (z. B. Artikeltitel, Name eines Liedes) passieren. Dies gilt nicht für den Fließtext eines Widgets.

  • Last updated on