Stil

Das effektive Gestalten von Widgets ist entscheidend für ein optisch ansprechendes eine einheitliche User Experience bieten. In diesem Abschnitt werden die wichtigsten Konzepte zum Definieren von Farbe und Typografie, um die nützlichsten und ansprechende Android-Widgets.

Farbe

Verwenden Sie Farben, um Stil auszudrücken und Bedeutung zu vermitteln. Geeignete Farben festlegen für die Farben der Widgets sind entscheidend für die Lesbarkeit, die Personalisierung zum Ausdruck der Markenidentität deiner App.

Farbrollen und -tokens für Material verwenden, um die Kontrastrichtlinien für Bedienungshilfen zu erfüllen und unterstützen dynamische Farbmerkmale wie vom Nutzer erstellte Farben und hellen Designs.

Weitere Informationen finden Sie 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. Dies sorgt für visuelle Einheitlichkeit verschiedene Widgets, Startbildschirm-Symbole und Hintergründe, um Android-Nutzern eine einheitlichere User Experience. Mit den bereitgestellten Farbtokens Das Widget wird in die Gerätedesigns der verschiedenen Geräte integriert. Hersteller und die vom Nutzer festgelegten dynamischen Designs.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 1:Abbildung eines Widgets mit hervorgehobenen Farbtokens.

Heller und dunkler Modus

Der dunkle Modus ist eine Version der Geräte-UI für wenig Licht, in der meist dunkel dargestellt wird. Oberflächenfarben. Nutzer wechseln immer öfter in den dunklen Modus, Akkulaufzeit und Augenkomfort. Wenn sich Ihr Widget nicht an den dunklen Modus anpasst, dass die Anzeige deplatziert angezeigt wird und die Nutzer frustrieren könnte.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 2:Widget im hellen Modus auf dem linken Bildschirm und einem dunklen auf der rechten Seite.

Typografie

Durch die Typografie wird der Text gut lesbar und ansprechend. Nutzen Sie Schriftgrößen und Gewichtungen, um eine klare Hierarchie zu schaffen, die den Blick der Nutzenden wichtigen Elemente. Auf Zeilen- und Buchstabenabstand achten (Unterschneidung) um die Lesbarkeit zu verbessern, insbesondere bei kleineren Texten des beschränkten Bereichs eines Widgets.

Hierarchiediagramm

Die Hierarchie wird durch Unterschiede in Schriftstärke, -größe, und den Zeichenabstand. Die aktualisierte Schriftskala organisiert Textstile in fünf Rollen. benannt, die ihre Zwecke beschreiben. Die fünf Textstile sind Display, Anzeigentitel, Titel, Untertitel und Textkörper. Die neuen Rollen sind geräteunabhängig. einfachere Anwendung in einer Vielzahl von Anwendungsfällen.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 3:Widget, das die Verwendung verschiedener Schriftgrößen zeigt.