Designs

Ein Design ist eine Reihe von Stilen oder Attributen, wie Farbe, Typ und Form, können sich auf das Erscheinungsbild des mobilen oder großen Bildschirms eines Nutzers auswirken und eine In-App-Erfahrung bieten.

Fazit

• Verbessern Sie die Personalisierung und Zugänglichkeit Ihrer App. übernimmt Systemeinstellungen wie Designs wie hell oder dunkel, Kontrast.
• Erstellen Sie ein benutzerdefiniertes Design, das als Fallback verwendet wird, wenn das dynamische Design nicht verfügbar ist.
• Ziehen Sie bei Verwendung verschiedener Designs die Typeinstellungen in Betracht.
• Achte immer auf Text- und Oberflächenkontrast, um die Lesbarkeit zu gewährleisten.

Arten von Themen

Designs sind system- oder appbasiert. Systemdesigns können sich auf das gesamte Geräte-UI und stellen entsprechende Steuerelemente in den Geräteeinstellungen bereit, während eine App wirkt sich nur auf die App aus, in der es implementiert ist.

In Ihrer App müssen beide Designtypen implementiert werden, um sie anzuzeigen, es gelten jedoch App-Designs. nur in der App und nicht an anderer Stelle auf dem Gerät. Sie können auch einige Systemdesigneinstellungen mit In-App-Einstellungen verwalten.

Systemdesigns

Systemdesigns gelten für das gesamte Android-Gerät, einschließlich einzelner Apps. je nach Nutzereinstellungen. Zu den Systemdesigns zählen helle und dunkle Designs, nutzergenerierte Designs und Herstellerdesigns.

Helle und dunkle Designs

Das helle Design oder der Tagesmodus besteht aus einem hellen Anzeigemodus mit Leuchtdichte und Oberflächen, die auf hohen Tonwerten basieren. Umgekehrt ist das dunkle Design, oder Nachtmodus die Helligkeit der Benutzeroberfläche verringert. Oberflächen werden im Dunkeln angezeigt Grautöne oder niedrige Tonwerte.

Das dunkle Design hat mehrere Vorteile: Die Lesbarkeit des Bildschirms wird bei sonnigen oder schlechten Lichtverhältnissen verbessert. Lichtverhältnissen, die die Belastung der Augen aufgrund der geringeren Helligkeit reduzieren Akku. Außerdem ist dies die von den Nutzern am häufigsten gewünschte App-Funktion.

</ph>

Beachten Sie bei der Implementierung des hellen und des dunklen Designs die folgenden Punkte:

• Sie können ein Farbschema anpassen, um einen umfassenderen Ausdruck zu erhalten. Wenn Sie Material Theme Builder erstellt, um ein Schema zu erstellen, . Erfahren Sie mehr über das Anpassen von Material und des Farbsystems, um ein Markendesign.
• Nutzer können in den Displayeinstellungen auf Systemebene ein helles oder dunkles Design festlegen zu „immer aktiviert“, „immer deaktiviert“ oder „automatisch“ je nach Tageszeit. Wir empfehlen, Systemeinstellungen des Nutzers berücksichtigen. Es empfiehlt sich aber auch, In-App-Steuerelemente erstellen, um Nutzern detailliertere Änderungen zur Verfügung zu stellen
• Für Webinhalte in WebViews kann auch ein heller, dunkler Stil oder ein Standardstil verwendet werden. Lesen Informationen dazu, wie das dunkle Design in WebViews unterstützt wird
• Wenn Nutzer es aktiviert haben, kann Android ein dunkles Design erzwingen. Sie können auch eine benutzerdefiniertes dunkles Design.
• Wenn der Nutzer keine anderen Designs oder Einstellungen aktiviert hat, können Sie "Sperren" auf das helle Design umstellen. Wir raten jedoch davon ab, da dies die Anforderungen der Nutzenden an Barrierefreiheit und Personalisierung beeinträchtigen kann.

</ph>

Von Nutzern erstellte Designs

Von Nutzern erstellte Designs werden durch dynamische Farben unterstützt, die wir die mit Material You ab Android 12 verfügbar sind. Wenn diese Option aktiviert ist, „Farbe“ leitet benutzerdefinierte Farben vom Hintergrund eines Nutzers ab, die auf seine Apps angewendet werden. und System-UI. Diese Farbvorlage wird als Ausgangspunkt für die Generierung hellen und dunklen Farbschemata.

Die Einstellungen für die Schriftart können auch in den Geräteeinstellungen aktualisiert werden, damit sie den Anforderungen des Nutzers entsprechen. und die Anforderungen an Bedienungshilfen. Diese Einstellungen können und die in Apps übernommen werden sollen. Verwenden Sie daher skalierbare Pixelwerte für Schriftarten.

</ph>

</ph>

Herstellerdesigns

Gerätehersteller können zusätzliche proprietäre Designfunktionen anbieten. die sich auf die Systembenutzeroberfläche und die Anzeigeeinstellungen auswirken können.

App-Designs

Baseline

Die Material-Komponenten in der Material-Bibliothek bieten ein Grundthema, das verwendet ein lilafarbenes Farbschema und die Roboto-Schriftart. Apps ohne Design werden diese Referenzattribute wiederhergestellt.

Benutzerdefiniert (Marke)

Mit benutzerdefinierten Designs können Sie dem Design Ihrer App mehr Ausdruck verleihen oder als Ausweichlösung für den Fall, dass bestimmte Systemthemen nicht verfügbar sind. Dies ist nützlich, egal, ob Sie mit einem vollständigen benutzerdefinierten Designsystem, einem kleinen Markenübersicht oder einige Ihrer Lieblingsfarben.

Ihre App kann auch mehrere benutzerdefinierte Schemas haben, unabhängig davon, ob es sich um vollständige Schemas für Nutzer handelt von Inhalten oder von Sub-Branding-Elementen auswählen.

</ph>

</ph>

Content

Um Inhalte besser hervorzuheben, können in der Benutzeroberfläche dynamische Farben verwendet werden, um Farben zu übernehmen. aus diesen Inhalten. Die Inhaltsfarbe eignet sich gut für eine primäre Inhaltsquelle, aber Bei Aufrufen mit mehreren Contentquellen solltest du sie mit Vorsicht verwenden.

</ph>

Ein Design wirkt sich in der Regel auf die gesamte App aus, kann aber auch selektiv angewendet werden. und neben anderen Themen. Vermeiden Sie zu viele Themen und Kombinationen, mit einer Hierarchie: einer primären Themenquelle (dynamisch oder benutzerdefiniert), die für den Großteil der Benutzeroberfläche.

</ph>

Material

Material Design liefert ein Grundthema und Designsysteme (Farbe, Typ, Form). Material Theming kann auch erweitert werden, um Attribute hinzufügen.

Marke

Wenn die Designsysteme von Material Design nicht zum gewünschten Design passen können Sie ein benutzerdefiniertes Design implementieren. Testen Sie benutzerdefinierte für Kontrast und Lesbarkeit.

Hier erfahren Sie, wie Sie ein benutzerdefiniertes System in Compose implementieren.

Designattribute

Designattribute sind auf gängige visuelle Stile ausgerichtet, die beim UI-Design verwendet werden, eine Reihe von Ästhetiken hervorrufen. In der App sind diese Eigenschaften oft mit Material verknüpft. zur Anpassung durch App-Entwickler.

Farbe

Verwenden Sie Farben, um Stil auszudrücken und Bedeutung zu vermitteln. Farben Ihrer App festlegen kann entscheidend für die Personalisierung, die Definition des semantischen Zwecks und natürlich der Markenidentität.

Innerhalb eines Designs ist ein Farbschema die Gruppe von Tönen, die bestimmten Rollen zugewiesen sind. die Komponenten zugeordnet sind. Weitere Informationen zu Farben in Android UI und das Material 3-Farbsystem verwendet werden.

</ph>

Typ

Die Systemschriftart von Android ist Roboto, die für alle Apps kostenlos verfügbar ist. den Typ anpassen kann. Achten Sie auf die Lesbarkeit der ausgewählten Schriftarten, um sie ihre Rollen. Weitere Informationen zum Anwenden des Typs

</ph>

Form

Das Anpassen der Form der Containerecken über die Standardeinstellungen der Basis hinaus den Charakter Ihrer App zu definieren. Zum Beispiel können Sie voll abgerundete Ecken verwenden, Bringe einen weicheren, lustigen Touch mit oder verwende einen eckigen Schnitt für einen stärkeren Eindruck. Formtokens und Stile für Material-Komponenten ansehen

</ph>

Symbole

Material-Symbole können in Ihrer App in fünf Stilen verwendet werden: Umrissen, scharf, rund, zweifarbig. Verwenden Sie denselben Symbolstil für ein einheitliches und ausgefeiltes Aussehen.

</ph>

Weitere Themenattribute

Während Farbe, Typ und Form die primären Material-Designsysteme bilden, Designsysteme sind nicht auf die Konzepte beschränkt, auf denen Material basiert. Sie können bestehende Systeme zu modifizieren und ganz neue einzuführen – mit neuen Klassen und um andere Konzepte mit Themen kompatibel zu machen. Möglicherweise müssen Sie auch vorhandene Systeme erweitern oder ersetzen, um benutzerdefinierte Attribute über das hinaus bereitgestellt wird. Zum Beispiel, wenn Sie ein System aus Farbverläufen oder Abständen hinzufügen möchten, Dimensionen.

Design in einer App anwenden

Design vs. Stil und Klassen

Sowohl Designs als auch Stile können mehrere Designattribute haben. Ein Stil kann unabhängig von einem Thema und bezieht sich auf das Aussehen eines einzelnen Elements (oder ein Design für mehrere Elemente und sogar das gesamte Ein Stil ist eine wiederverwendbare stilistische Wahl, ähnlich wie ein Stil oder Token in Ihrer Designsoftware. Zum Beispiel ist „Body Large“ ein Stil, während „Hell“ und „Dunkel“ sind Themen.

Design in Compose implementieren

Ein Thema besteht in der Regel aus mehreren Systemen, Verhaltenskonzepte, die Sie mithilfe von Klassen mit Themenwerten modellieren.

Weitere Informationen zur Verwendung von Jetpack finden Sie unter Material Design 3 in Compose. Compose (Schreiben), um eine Implementierung des Material Design 3-Themas zu erstellen.

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)

Design in Views implementieren

Designs sind eine Sammlung semantisch benannter Ressourcen, die verwendet werden können in Ihrer App zu optimieren. Designs haben die gleiche Stilsyntax.

Einstieg in Google Views

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

WebViews

Für Webinhalte in WebView kann auch ein heller, dunkler Stil oder ein Standardstil verwendet werden. Weitere Informationen wird das dunkle Design in WebView unterstützt.

Material-Designs anpassen

Sie können das Figma-Plug-in „Material Theme Builder“ verwenden, um ein Material-Design anpassen. Wenn Sie ein Design daraus erstellen, können Sie mit hellen und dunklen Farbschemata erstellt. können Sie die exportierte Designdatei mit Ihrem exakte Werte.

</ph>