Das effektive Gestalten von Widgets ist entscheidend für eine visuell ansprechende und einheitliche Nutzererfahrung. In diesem Abschnitt werden die wichtigsten Konzepte und Techniken zum Definieren von Farbe und Typografie erläutert, um möglichst hilfreiche und ansprechende Android-Widgets zu erstellen.
Farbe
Verwenden Sie Farben, um Stil auszudrücken und Bedeutung zu vermitteln. Die Auswahl geeigneter Farben für Ihre Widgets ist entscheidend für die Lesbarkeit, Personalisierung und natürlich für die Darstellung der Markenidentität Ihrer App.
Verwenden Sie Material-Farbrollen und ‑Tokens, um die Richtlinien für den Barrierefreiheitskontrast zu erfüllen und dynamische Farbfunktionen wie nutzergenerierte Farben und dunkle oder helle Designs zu unterstützen.
Sie können die visuelle Hierarchie mithilfe von Akzentrollen untersuchen, um einen lebendigen Kontrast zwischen Elementen zu schaffen, oder ein verspielteres benutzerdefiniertes Design ausprobieren, das Ihre Marke repräsentiert.
Weitere Informationen zu Farbrollen finden Sie in den Farbrichtlinien für Material Design.
Form
Die Form Ihres Widgets bestimmt die Stimmung des Widgets. Verwenden Sie für rechteckige Widgets die Eigenschaft für den System-Eckenradius. Diese Eigenschaft sorgt für Konsistenz auf verschiedenen Geräten und verhindert, dass Widget-Inhalte abgeschnitten werden.
Wenn Ihr Widget nur minimale Dateninhalte wie ein Foto, Wetter oder aktuelle Songwiedergabe anzeigt, können Sie es in eine ausdrucksstarke Form bringen, um dem Startbildschirm Ihrer Nutzer einen aufregenden Energieschub zu verleihen. Wenn Sie komplexere Layouts und Daten haben, sollten Sie ausdrucksstarke Formen für die visuelle Hierarchie verwenden, um neue Inhalte oder einen Call-to-Action hervorzuheben.
Weitere Informationen finden Sie unter Abgerundete Ecken implementieren.
Dynamische Designs
Ab Android 12 kann ein Widget die Farben des Gerätedesigns für Schaltflächen, Hintergründe und andere Komponenten verwenden. So wird für visuelle Einheitlichkeit bei verschiedenen Widgets, Startbildschirmsymbolen und Hintergrundbildern gesorgt und Android-Nutzer profitieren von einer einheitlicheren Nutzererfahrung. Wenn Sie die bereitgestellten Farb-Tokens verwenden, sieht Ihr Widget auf allen Gerätethemen, die von verschiedenen Geräteherstellern bereitgestellt werden, und auf den dynamischen Designs, die vom Nutzer festgelegt werden, einheitlich aus.
Helles und dunkles Design
Ein dunkles Design ist eine Version der Geräte-Benutzeroberfläche für schlechte Lichtverhältnisse, bei der hauptsächlich dunkle Oberflächenfarben angezeigt werden. Nutzer wechseln immer häufiger zum dunklen Design, um die Akkulaufzeit zu verlängern und die Augen zu schonen. Wenn sich Ihr Widget nicht an das dunkle Design anpasst, wirkt es fehl am Platz und kann Nutzer verärgern.
Typografie
Typografie trägt dazu bei, dass Text lesbar und ansprechend ist. Verwenden Sie Schriftgrößen und ‑gewichte, um eine klare Hierarchie zu schaffen und den Blick des Nutzers auf die wichtigsten Elemente zu lenken. Achten Sie auf den Zeilen- und Buchstabenabstand (Kerning), um die Lesbarkeit zu verbessern, insbesondere bei kleineren Textanzeigen im begrenzten Platz eines Widgets.
Hierarchiediagramm
Hierarchie wird durch Unterschiede in Schriftstärke, Größe, Zeilenhöhe und Buchstabenabstand vermittelt. In der aktualisierten Typografie-Skala werden Textstile in fünf Rollen unterteilt, deren Namen ihren Zweck beschreiben. Die fünf Textstile sind „Display“, „Headline“, „Title“, „Subtitle“ und „Body“. Die neuen Rollen sind geräteunabhängig und lassen sich daher einfacher für verschiedene Anwendungsfälle einsetzen.
Widgets verwenden zwar Systemschriftarten, Sie können aber trotzdem ausdrucksstarke Details mit auffälligen Typografien hinzufügen, z. B. durch fette Überschriften, Labels und Daten.
