Das effektive Gestalten von Widgets ist entscheidend, um eine optisch ansprechende und einheitliche User Experience zu erzielen. In diesem Abschnitt werden die wichtigsten Konzepte und Techniken zum Definieren von Farbe und Typografie beschrieben, um die nützlichsten und ansprechendsten Android-Widgets zu erstellen.
Farbe
Verwenden Sie Farben, um Stil auszudrücken und Bedeutung zu vermitteln. Das Festlegen geeigneter Farben für die Widget-Farben ist entscheidend für die Lesbarkeit, die Personalisierung und natürlich zum Ausdruck der Markenidentität Ihrer App.
Verwenden Sie Farbrollen und Tokens für „Material“, um die Kontrastrichtlinien für Bedienungshilfen zu erfüllen und dynamische Farbfunktionen zu unterstützen, z. B. vom Nutzer erstellte Farben sowie dunkle oder helle Designs.
Weitere Informationen findest du in den Farbrichtlinien für Material Design.
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 eine einheitliche Darstellung von Widgets, Startbildschirmsymbolen und Hintergründen geschaffen, was Android-Nutzern eine einheitlichere User Experience bietet. Mit den bereitgestellten Farbtokens wird sichergestellt, dass dein Widget in die Gerätedesigns verschiedener Gerätehersteller und die vom Nutzer festgelegten dynamischen Designs integriert wird.
Heller und dunkler Modus
Ein dunkler Modus ist eine Version der Geräte-UI bei schwachem Licht, die hauptsächlich dunkle Oberflächenfarben darstellt. Nutzer wechseln zunehmend zum dunklen Modus, um die Akkulaufzeit zu verlängern und die Augen zu schonen. Wenn sich Ihr Widget nicht an den dunklen Modus anpasst, wirkt es deplatziert und könnte Nutzer frustrieren.
Typografie
Durch die Typografie wird der Text lesbarer und schöner. Verwenden Sie Schriftgrößen und -stärken, um eine klare Hierarchie zu schaffen und den Blick der Nutzer auf die wichtigsten Elemente zu lenken. Achten Sie auf den Zeilen- und Buchstabenabstand (Unterschneidung), um die Lesbarkeit zu verbessern, insbesondere bei kleineren Textanzeigen innerhalb des begrenzten Platzes eines Widgets.
Hierarchiediagramm
Die Hierarchie wird durch Unterschiede bei Schriftstärke, Schriftgröße, Zeilenhöhe und Buchstabenabstand kommuniziert. Bei der aktualisierten Schriftskalierung werden Textstile in fünf Rollen organisiert, die zur Beschreibung ihrer Zwecke benannt sind. Die fünf Textstile sind Anzeige, Überschrift, Titel, Unterüberschrift und Textkörper. Die neuen Rollen sind geräteunabhängig und ermöglichen eine einfachere Anwendung in einer Vielzahl von Anwendungsfällen.
